Full Stack projektin katselmointi

[Kaltsoon]

Full Stack projektin katselmointi

Terve @ignon! 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öidyin
• Tutkin ja muokkasin olemassolevia muistiinpanoja
• Lisäsin uuden muistiinpanon ja muokkasin sitä
• Kirjauduin ulos

Kokemus

• Sovelluksella on tyylikäs ja helppokäyttöinen käyttöliittymä. Editorin käyttökokemus oli aikalailla moitteeton. Hienoa työtä!
• Käyttökokemus on hyvä myös kapeammilla näytöillä, esim. mobiililaitteella
• Geneerisen "React App"-titlen ja faviconin voisi muuttaa kuvaavammaksi
• Ainoastaan sovelluksen juuripolku (https://cosmos-md.netlify.app/) aukeaa suoraan selaimessa, mutta esimerkiksi https://cosmos-md.netlify.app/cosmos avaaminen päätyy virhesivulle. Tämä hankaloittaa mm. muistiinpanojen jakamista linkillä ja kirjanmerkin lisäämistä

Koodi

• Frontend-puolen koodi on selkeästi organisoitua, hyvä! Joitain tiedostoja voisi vielä ehkä sijoittaa client/src hakemistossa paremmin. Esim. TopBar.js tiedosto Components hakemistoon ja hookseille ehkä kokonaan oma hakemistonsa

• Kommentoitua koodia ei kannata jättää

• GraphQL-kyselyissä on jonkin verran toisteisia kenttiä. Tätä toisteisuutta voi välttää hyödyntämällä fragmentteja

• Mainioita hook-abstraktioita, kuten useLogin

• Formikia on hyödynnetty lomakkeissa järkevästi

• Ylimääräiset console.log-viestit kannattaa poistaa koodista, niin konsoli ei täyty hämäristä viesteistä

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

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

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

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

• GraphQL-skeeman määrittely on pilkottu järkevästi

• Tänne ja tänne on jostain syystä jäänyt samaa koodia

• Myös backendin-puolella kommentoitua koodia ja turhia console.log viestejä

Kokonaisuus

Hyödyllinen ja hyvin toteutettu sovellus! Sovelluksen käyttöliittymä on käyttäjäystävällinen ja sen käytössä ei ilmennyt käytettävyyttä heikentäviä bugeja tai erityisen suuria käytettävyysongelmia. Projektin koodi kaikilta osin järkevästi organisoitua ja sisäisen laadun puolesta melko laadukasta. Kommentoitu ja toisteinen koodi olivat ehkä suurimpia koodihajuja, mutta niiden korjaaminen pitäisi onnistua helposti. Hyvää työtä!