Katselmointi

Terve @Tatatofly! Tässä lyhyt katselmointi Full Stack kurssin projektistasi.

Käytettävyys

Mitä tein?

• Lisäsin kuvallisen postauksen
• Lisäsin vastauksen olemassaolevaan postaukseen

Kokemus

• Selkeä käyttöliittymä, hyvää työtä! 🥇
• Postauksen lisäämiseen voisi laittaa hieman validointia, nyt lisääminen onnistuu tyhjällä otsikolla ja sisällöllä

Koodi

• Frontend-puolen koodi on selkeästi organisoitua, hyvä!
• Lomakkeiden tilanhallinta on hoidettu melko siististi, mutta kun lomakkeen koko kasvaa tai sen logiikka monimutkaistuu, on usein kätevää käyttää jotain lomakkeen tilanhallinnan hoitavaa kirjastoa, kuten Formik
• Tämä tarkistus ei ole tarpeen: https://github.com/Tatatofly/MoeBoard/blob/master/frontend/src/components/Post.js#L18
• Älä määrittele React-komponentteja renderöinnin aikana, vaan siirrä määrittely Post-komponentin ulkopuolelle: https://github.com/Tatatofly/MoeBoard/blob/master/frontend/src/components/Post.js#L45
• Luokilla määritellyt komponentit on ihan ok, mutta kannattaa suosia funktionaalisia komponentteja esim. hooksien takia
• Tyylejä kannattaa eritellä niitä käyttävien komponenttien mukaan esim. omiksi kansiomoduuleikseen:

Post/
  - index.jsx
  - style.css

Tyylien luokkien nimissä voi käyttää komponentin nimeä etuliitteenä, esim. .Post__header, .Post__footer, Post__body. Tämä vähentää riskiä luokkien nimien yhteentörmäyksessä. Modernimpi ratkaisu tähän ongelmaan on css-moduulit.

• Myös backend-puolen koodi on selkeästi organisoitua, hienoa!
• Tämä virheiden käsittely on turhaa, koska try-lohkon sisällä mikään ei voi heittää virhettä. Samanlaista patternia on käytössä monessa paikkaa. Tässä tilanteessa koodin voisi kirjoittaa esim. tähän muotoon:

try {
  const post = await Post.findById(request.params.id) // Huomaa, ei .catch(...), vaan annetaan virheiden siirtyä alla olevaan catch-lohkoon

  if (!post) {
    return response.status(404);
  }

  return response.json(post);
} catch (e) {
  next(e);
}

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

Kokonaisuus

• Käyttökelpoinen sovellus, jossa on selkeä käyttöliittymä
• Koodi on kaikin puolin hyvin organisoitua ja pääosin melko laadukasta