Full Stack projektin katselmointi

Terve @Miro778! 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
Selasin suosituimpia ja tuoreimpia postauksia
Lisäsin postauksen
Selasin käyttäjiä
Muokkasin käyttäjätietojani
Kirjauduin ulos

Kokemus

Meemi-sovelluksella on selkeä ja varsin räikeä käyttöliittymä, hyvää työtä! 🥇
Lomakkeissa on validaatio ja virheviestit, hienoa!
Rekisteröitymisen salasanakentässä voisi käyttää <input type="password" />-elementtiä
Like-napin painaminen vie sivulle, josta tulee virhe https://thememedump.herokuapp.com/memes/61e15b87db1a136638dad729
Samoin avatarin päivittäminen https://thememedump.herokuapp.com/users/61e15a9bdb1a136638dad669
Geneerisen "React App"-titlen ja faviconin voisi muuttaa kuvaavammaksi
Ainoastaan sovelluksen juuripolku (https://thememedump.herokuapp.com/) aukeaa suoraan selaimessa, mutta esimerkiksi https://thememedump.herokuapp.com/users avaaminen palauttaa virheviestin unknown endpoint. Syynä on luultavasti, se että frontendin index.html-tiedosto tarjoillaan backendin puolella vaan /-polusta. Esim. tästä Gististä voi saada vinkkejä ongelman korjaamiseen

Koodi

Frontend-puolen koodi on selkeästi organisoitua, hyvä!
API-kutsut on abstrahoitu hyvin uudellenkäytettäviksi palveluiksi services-hakemistossa
Tokeniin hallintaan liittyy jonkin verran copy-paste-koodia. Ehkä services-hakemistoon voisi lisätä token.js-tiedoston jota käytetään muissa tiedostoissa?
API-kutsuihin liittyvät operaatiot tuottavat Reduxin kanssa usein jonkin verran toisteellista boilerplate-koodia. Esimerkiksi React Query kirjaston avulla API-kutsut voi helposti abstrahoida yksinkertaisiksi hookeiksi
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
Syvien tietorakenteiden (esim. listat, joiden alkioina on objekteja, jotka sisältävät listoja) päivittäminen Reduxin reducereissa puhtaalla JavaScriptilla on melko työlästä. Immer-kirjasto helpottaa tätä huomattavasti
Redux Toolkit tarjoaa todella hyviä työkaluja Reduxin käyttöön. Esim. createReducer-funktio vähentää reducerien boilerplate-koodia huomattavasti. Se käyttää sisäisesti Immer-kirjastoa, joten myös tilan päivittäminen helpottuu
Pitäisiköhän tässä käyttää polkuna /api/upload? Localhost on hieman epäilyttävä
Myös 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
Monessa reitin käsittelijässä on .catch(error => next(error)). Promiseiden kanssa kannattaa käyttää async/await syntaksia ja käyttää express-async-errors-kirjastoa, niin virheet siirtyvät automaattisesti virheet käsittelevään middlewareen
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ä

Kokonaisuus

Meemi-sovellus tarjoaa sen käyttötarkoitukseen tarvittavan toiminallisuuden helppokäyttöisellä käyttöliittymällä. Katselmoinnin aikana ilmeni jokunen bugi, joka hieman heikensi käyttökokemusta. Projektin koodi on kaikin puolin järkevästi organisoitua ja kohtalaisen laadukasta. Pientä refaktoroinnin tarvetta tosin vielä on esim. toisteisen koodin kanssa. Hyvää työtä!

Miro778 / Memedump