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

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:

Miltä kuulostaisi switch casen tilalle jotain muuta:

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ä.