Full Stack projektin katselmointi

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

• Loin uuden käyttäjän
• Lisäsin tehtäviä, merkkasin niitä tehdyksi ja poistin niitä
• Lisäsin kalenterimerkintöjä ja poistin niitä
• Kirjauduin ulos

Kokemus

• Kalenterisovelluksella on tyylikäs ja helppokäyttöinen käyttöliittymä, hienoa työtä! 🥇
• Sivulta toiselle siirtyminen voisi vaihtaa selaimen osoiterivillä osoitteen polkua. Näin eri sivuille (esim. tehtävä- ja kalenterisivulle) pääsisi linkillä, kuten https://lavendar-app.herokuapp.com/tasks. Lisäksi tämä mahdollistaa historian välillä siirtymisen selaimen nuoli painikkeilla
• Ensimmäisen kirjautumisen jälkeen tuleva ohje oli erittäin välttämätön, muuten olisi tehtäväsivu jäänyt löytymättä
• Kattava API-dokumentaatio

Koodi

• Näkymien välillä siirtymisessä kannattaa hyödyntää react-router-kirjastoa. Se yksinkertaistaa huomattavasti näkymien näyttämiseen liittyvää tilanhallintaa

• Komponenteissa ei kannata olla sovelluslogiikan yksityiskohtiin liittyvää koodia, kuten API-kutsuja. Tämän voisi refaktoroida esim. lisäämällä utils/getEvents.js-tiedosto, johon toteutetaan API-kutsun tekevä funktio getEvents:

  const getEvents = async () => {
    const response = await axios.get('/api/events', {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('jwt_token')}`,
      },
    });
  
    return response.data;
  };
  
  export default getEvents;

  Nyt komponentin koodi yksinkertaistuu:

  useEffect(() => {
    getEvents()
      .then((newEvents) => {
        setEvents(newEvents);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  Tätä voi viedä vielä pidemmälle toteuttamalla useEvents hookin:

  const useEvents = () => {
    const [events, setEvents] = useState(null);
  
    useEffect(() => {
      getEvents()
        .then((newEvents) => {
          setEvents(newEvents);
        })
        .catch((err) => {
          console.log(err);
        });
    }, []);
  
    return events;
  };

• API-kutsuihin liittyvät operaatiot tuottavat usein jonkin verran toisteellista boilerplate-koodia. Esimerkiksi React Query kirjaston avulla API-kutsut voi helposti abstraktoida 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

• Backend-puolen koodi on selkeästi organisoitua, hienoa!

• res.json- ja res.send-kutsujen yhteydessä toJSON-metodia ei tarvitse erikseen kutsua. Kun JSON-muotoinen vastaus muodostetaan, JSON.stringify-metodi kutsuu sitä automaattisesti

• Autentikaatiotokenin ekstraktoinnin kyselystä ja sen verifioinnin voisi siirtää omaan middlewareensa. Tällä hetkellä näihin operaatioihin liittyvää koodia on duplikoitu monessa reitin käsittelijässä

• Backendin testeissä voisi olla hieman tarkempia oletuksia. Esim. tässä testissä voisi olettaa, että API-kutsu palauttaa listan, jossa on halutut eventit

Kokonaisuus

Toiminallisuudeltaan sovellus soveltuu käyttötarkoitukseensa hyvin. Sen käyttökokemus on hyvä, käyttöliittymä on helppokäyttöinen, eikä ainakaan katselmoinnin aikana ilmennyt suurempia bugeja tai käytettävyysongelmia. Ehkä suurin käytettävyysongelma on se, ettei sivujen välillä siirtyminen muuta osoitteen polkua, jonka seurauksena sivuille ei saa tehtyä linkkejä, eikä historian välillä pysty siirtymään. Projektin koodi on pääosin järkevästi organisoitua ja laadultaan kohtalaista. Suurin ongelma frontendin koodissa on komponenttien raskaslukuinen sovelluslogiikan koodi, jonka voisi eristää esim. apufunktioihin tai hookkeihin. Backendin puolella koodissa oli hieman autentikaatioon liittyvää toisteisuutta, jonka voisi ratkaista esim. middlewareja hyödyntämällä. Kokonaisuudessaan kuitenkin hyvää työtä!