Full Stack projektin katselmointi

Terve @olliglorioso! 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 ja kirjauduin sisään
• Ostin osakkeita
• Katsoin profiiliani
• Myin osakkeita
• Kirjauduin ulos

Kokemus

• Sovelluksella tyylikäs ja käyttäjäystävällinen käyttöliittymä, hienoa työtä! 🥇
• Geneerisen "React App"-faviconin voisi muuttaa kuvaavammaksi
• Selkeät notifikaatiot
• Lomakkeissa on kattavat validoinnit ja selkeät virheviestit
• Automaattinen sisäänkirjautuminen rekisteröitymisen jälkeen tekisi sovelluksen käyttöönotosta sulavampaa
• Etusivulla (https://fso2021practicework.herokuapp.com/) voisi ehkä olla jotain hyödyllistä sisältöä, tai sitten jotain muuta sivua voisi käyttää etusivuna, esim. https://fso2021practicework.herokuapp.com/explore
• Selkeät graafit

Koodi

• Frontend-puolen koodi on selkeästi organisoitua, hyvä!

• GraphQL-kyselyt on organisoitu hyvin ja niissä on hyödynnetty fragmentteja, hienoa!

• Vältä koodin turhaa kommeintia. Kommentteja pitäisi käyttää vain jos jotain asiaa ei pystytä itse koodilla ilmaisemaan ja siinä tapauksessa koodi on usein itsessään liian vaikealukuista ja vaatii refaktorointia

• App.tsx-tiedostossa on aika paljon tosteisuutta SiderBar ja AppBar komponenttien näyttämiseen eri reiteissä

• Subscription kannattaa tehdä ainoastaan sitä tarvitsevassa komponentissa, niin subskriptionin ei tarvitse olla aktiivinen kun komponentti ei ole renderöitynä

• Formikia on hyödynnetty järkevästi lomakkeiden tilanhallinnassa, hyvä!

• Tämä tiedosto ei ole CSS-moduuli, joten tuota .module-päätettä ei tarvita

• Reduxin actioneiden typet kannattaa tallentaa const-tyyppisiin vakiomuuttujiin ja hyödyntää näitä muuttujia esim. reducereissa sen sijaan, että käyttäisi niitä suoraan merkkijonomuotoisena:

  const ADD_TODO = 'todos/addTodo';
  
  // ...
  
  const todosReducer = (state, action) => {
    switch (action.type) {
      case ADD_TODO:
      // ...
    }
  };

  Tämä ehkäisee esimerkiksi kirjoitusvirheistä syntyviä bugeja ja helpottaa refaktorointia. Mallia voi katsoa Reduxin dokumentaatiosta

• Myös backend-puolen koodi on selkeästi organisoitua, hienoa! GraphQL-koodi on pilkottu erittäin järkevästi osiin

• Tämän hakemiston koodi lienee TypeScript-kääntäjän generoimaa? Se ei kuuluisi olla repossa

• Myös backendin puolella aivan liikaa koodin kommentointia

• utils-hakemistossa on hyviä apufunktioita

• Vältä tämän kaltaisia sisäkkäisiä lohkoja, se tekee koodista erittäin vaikeasti luettavaa. Esim. tämän for-loopin siirtäminen apufunktioon parantaisi koodin luettavuutta

Kokonaisuus

Sovelluksesta löytyy sen käyttötarkoitukseen soveltuva toiminallisuus, joka toimii moiteettomasti ilman suurempia bugeja, tai käytettävyysongelmia. Projektin koodi on pääosin laadukasta ja selkeästi organisoitua. Koodin luettavuutta heikentää liiallinen kommentointi ja pitkät ja monimutkaiset funktiot, kuten GraphQL-resolvereissa. Teknologioita, kuten TypeScript ja kirjastoja kuten Material UI on hyödynnetty järkevästi. Hyvää työtä!