Full Stack projektin katselmointi

[Kaltsoon]

Full Stack projektin katselmointi

Terve @r0bert1! 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
• Lisäsin, muokkasin ja poistin kalenteritapahtumia
• Selasin kalenteria
• Kirjauduin ulos

Kokemus

• Kalenterisovelluksella on selkeä ja tyylikäs käyttöliittymä, hienoa työtä! 🏆
• Virheellisen rekisteröitymisen jälkeen sivu jää ikuiseen lataustilaan, eikä käyttäjälle näytetä mitään virheilmoitusta
• Automaattinen sisäänkirjautuminen rekisteröitymisen jälkeen on kätevä ominaisuus
• Geneerisen "React App"-titlen ja faviconin voisi muuttaa kuvaavammaksi

Koodi

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

• Sivusiirtymien toteuttaminen onnistuu helpommin hyödyntämällä React Router-kirjastoa

• API-kutsut on abstrahoitu hyvin uudellenkäytettäviksi palveluiksi services-hakemistoon, hyvä!

• API-kutsuihin liittyvät operaatiot tuottavat usein jonkin verran toisteellista boilerplate-koodia. Esimerkiksi React Query kirjaston avulla API-kutsut voi helposti abstrahoida yksinkertaisiksi hookeiksi

• Lomakkeiden tilanhallinta on hoidettu melko siististi, mutta kun lomakkeen koko kasvaa tai sen logiikka monimutkaistuu, on usein kätevää käyttää jotain lomakkeen tilanhallinnasta vastaavaa kirjastoa, kuten Formik

• Tyylejä kannattaa eritellä niitä käyttävien komponenttien mukaan omiksi kansiomoduuleikseen, esim. tähän tapaan:

  SignUpForm/
    - index.jsx <- Komponentin koodi
    - style.css <- Komponentin käyttämät tyylit
  

  Tyylien luokkien nimissä voi käyttää komponentin nimeä etuliitteenä, esim. .SignUpForm__title ja .SignUpForm__container. 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

• E2E-testejä on toteutettu Cypressin avulla, hyvä!

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

• Pitäisikö kirjautuneen käyttäjän tiedot katsoa esim. autentikaatiotokenista? Eikö tällä hetkellä kuka tahansa voi lisätä kalenteritapahtumia toiselle käyttäjälle, jos vain tietää käyttäjän käyttäjätunnuksen?

• Hyvän näköinen Google-kalenteri integraatio

Kokonaisuus

Kalenterisovelluksesta löytyy tarvittava perustoiminallisuus kalenteritapahtuminen lisäämiseen ja selaamiseen. Sen käyttöliittymä on selkeä ja helppokäyttöinen. Sovellus toimii moitteettomasti, kun käyttäjän antamat syötteet on kunnossa, mutta lomakkeet kaipaisivat validointia ja selkeitä virheviestejä virhetilanteissa. Projektin koodi on kaikin puolin selkeästi organisoitua ja koodin laadu on pääosin hyvää pieniä parannusehdotuksia lukuunottamatta. Hyvää työtä!