movie-app's People
movie-app's Issues
Full Stack projektin katselmointi
Full Stack projektin katselmointi
Terve @lacolegiala! Tässä lyhyt katselmointi Full Stack kurssin projektistasi. Katselmoinnissa esitetyt kommentit ovat parannusehdotuksia, joita voit halutessasi ottaa huomioon tässä tai tulevissa projekteissasi. Mitään muutoksia tähän projektiin ei siis ole pakko tehdä suoritusmerkintää varten.
Käytettävyys
Mitä tein?
- Selasin etusivun elokuvia ja katselin eri elokuvien sivuja
- Selasin elokuvia eri genreissä
- Kokeilin hakua
Kokemus
- Elokuva-sovelluksella on erittäin hieno ja helppokäyttöinen käyttöliittymä, hyvää työtä!
🏆 - Geneerisen "React App"-faviconin voisi ehkä muuttaa kuvaavammaksi
- Skrollattavat valikot ovat todella kätevät
- Käyttökokemus on sulava ja sivulataukset ovat erittäin nopeita
Koodi
-
Frontend-puolen koodi on selkeästi organisoitua, hyvä!
-
TypeScriptiä on hyödynnetty erittäin järkevästi
-
API-kutsuihin liittyvät operaatiot tuottavat komponenteissa jonkin verran toisteellista boilerplate-koodia. Esimerkiksi React Query kirjaston avulla API-kutsut voi helposti abstrahoida yksinkertaisiksi hookeiksi. Esim. tämän komponentin koodi selkeytyisi huomattavasti, jos käytössä olisi hook, joka hoitaa API-kutsuihin liittyvän logiikan:
const { movieInfo } = useMovieInfo(id)
-
Tyylejä kannattaa eritellä niitä käyttävien komponenttien mukaan omiksi kansiomoduuleikseen, esim. tähän tapaan:
GenreList/ - index.jsx <- Komponentin koodi - style.css <- Komponentin käyttämät tyylit
Tyylien luokkien nimissä voi käyttää komponentin nimeä etuliitteenä, esim.
.GenreList__list
ja.GenreList__item
. Tämä vähentää riskiä luokkien nimien yhteentörmäyksessä. Modernimpi ratkaisu tähän ongelmaan on css-moduulit tai jokin CSS-in-JS-kirjasto, kuten styled components -
Tämän-kaltaisissa tilanteissa on kätevä hyödyntää objektia:
const imageByGenreId = { '28': action, '12': adventure, // ... }; // muualla koodissa const genreImage = imageByGenreId[genere.id];
-
Kun tietty HTML-elementti tietyillä propseilla toistuu, kuten
<button className="SecondaryButton" >...</button>
, kannattaa siitä tehdä oma komponentti, esim.<Button color="secondary">...</Button>
Kokonaisuus
Erittäin kätevä sovellus elokuvien selailuun! Sovelluksen käyttökokemus on sulava ja käyttöliittymä on sekä intuitiivinen, että silmää miellyttävä. Projektin koodi on järkevästi organisoitua ja teknologioita, kuten TypeScript on hyödynnetty järkevästi. Koodin laatu on myös erittäin hyvä, vaikka paikoitellen komponenttien koodissa on melko raskaslukuista sovelluslogiikan koodia, esim. API-kutsuihin liittyen. Hyvää työtä!
Full Stack projektin katselmointi
Full Stack projektin katselmointi
Tässä lyhyt katselmointi Full Stack kurssin projektistasi. Katselmoinnissa esitetyt kommentit ovat parannusehdotuksia, joita voit halutessasi ottaa huomioon tässä tai tulevissa projekteissasi. Mitään muutoksia tähän projektiin ei siis ole pakko tehdä suoritusmerkintää varten.
Käytettävyys
Mitä tein?
Selailin elokuvia
Etsin elokuvan hakutoiminnallisuudella
Kokemus
Todella hyvän näköinen!
Napit nyt vähän old-school, mutta kaikki toimii niin sulavasti että napit meinasivat unohtua.
Favicon unohtui vaihtaa reactin omasta.
Koodi
Tämä ei näytä sellaiselta asialta että sitä kuuluisi tallentaa versionhallintaan:
movie-app/src/utils/tmdbApiClient.ts
Line 7 in 8841d08
Miltä kuulostaisi switch casen tilalle jotain muuta:
movie-app/src/components/GenreList.tsx
Lines 41 to 82 in 8841d08
vs
const idToGenreMap = {
28: action,
12: adventure,
16: animation,
...
}
ja
idToGenreMap[id]
Muuten koodi on hyvälaatuista! Hienoa!
Kokonaisuus
Hienot sivut tietokannan sisällön selailuun. Pidän erityisesti siitä että sivut vaikuttavat mobiiliyhteensopivilta. Olisi kiva jos lisäät myös youtube videon embedauksen suoraan sivuillesi ettei tarvitse klikkailla linkkejä.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.