Full Stack projektin katselmointi

Terve @arkuar! 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?

• Rekisteröin uuden käyttäjän
• Selasin elokuvia
• Lisäsin ja poistin arvosteluja
• Katsoin arvostelujani
• Kirjauduin ulos

Kokemus

• Elokuva-sovelluksella on helppokäyttöinen ja huoliteltu käyttöliittymä, mainiota työtä! 💎
• Arvosana-kentässä voisi olla jokin selite, joka kuvaa arvosanaskaalaa. Tällä hetkellä tulee ilmi vain virheviesteistä. Perinteinen tähtivalitsin voisi olla kätevä tähän tarkoitukseen
• Automaattinen sisäänkirjautuminen rekisteröitymisen jälkeen nopeuttaa sovelluksen käyttöönottoa, hyvä!
• Sovelluksen titlen voisi muuttaa kuvaavammaksi
• Lomakkeissa on kattavat validoinnit ja virhetilanteissa selkeät virheilmoitukset, hienoa!
• Notifikaatiot kertovat käyttäjälle selvästi, mitä sovelluksessa tapahtuu

Koodi

• Frontend-puolen koodi on kohtalaisen selkeästi organisoitua, hyvä! Client-hakemiston alla olevat komponentti-hakemistot voisi tosin ehkä laittaa esimerkiksi pages-nimiseen hakemistoon

• API-kutsut on abstrahoitu hyvin uudellenkäytettäviksi palveluiksi

• API-kutsuihin liittyvät operaatiot tuottavat usein jonkin verran toisteellista boilerplate-koodia. Esimerkiksi React Query -kirjaston avulla API-kutsut voi helposti abstrahoida yksinkertaisiksi, uudelleenkäytettäväksii hookeiksi, kuten useMovies()

• Hyvä idea hyödyntää lomakkeiden tilanhallinnassa Formikia ja validoinnissa Yupia

• classnames on kätevä kirjasto luokkien nimien muodostamisessa

• Kirjautumisen vaativia reittejä varten voisi toteuttaa esim. AuthenticatedRoute-komponentin:

  const AuthenticatedRoute = ({ redirectTo = '/', ...routeProps }) => {
    const [{ username }] = useAuth();
  
    return username ? (
      <Route {...routeProps} />
    ) : (
      <Redirect to={redirectTo} />
    );
  };

• Myös backend-puolen koodi on selkeästi organisoitua, hienoa!

• Reittien käsittelijöiden ainaisista try { ... } catch (e) { next(e) }-lohkoista pääsee helposti eroon express-async-errors-kirjaston avulla

• OMDB API:n kutsut on abstrahoitu hyvin OMDBApi.ts-tiedostoon. Samoin autentikaatioon liittyvät operaatiot on abstrahoitu hyvin AuthService.ts-tiedostoon

• Hyvän näköistä API:n integraatiotestausta

• CI-putki varmistaa sovelluksen toimivuuden testien ja linttauksen avulla sekä hoitaa tuotantoonviennin, hienoa!

Kokonaisuus

Elokuva sovelluksesta löytyy tarvittava toiminallisuus elokuvien selailuun ja arvosteluun. OMDB-integraatio on loistava lisä sovellukseen. Sovelluksen käyttö on helppoa, eikä ainakaan katselmoinnin aikana ilmennyt bugeja, tai erityisiä käytettävyysongelmia. Projektin koodi on kaikilta osin järkevästi organisoitu ja koodin laatu on korkea. Teknologioita, kuten TypeScript ja Tailwind on käytetty järkevästi. Hyvää työtä!