Full Stack projektin katselmointi

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

Selasin etusivua
Rekisteröin uuden käyttäjän
Selasiin muita sivuja
Ostin jäsenyyden
Muokkasin profiilia
Kirjauduin ulos
Kirjauduin admin-käyttäjänä ja testasin admin-paneelia

Kokemus

Sali-sovelluksella on erittäin tyylikäs ja käyttäjäystävällinen käyttöliittymä, hienoa työtä! 🥇
"Gym Memberships"-sivu näyttää tyhjältä. Voisi ehkä olla jokin viesti, jos jäsenyyksiä ei ole?
Jäsenyyden ostamisen jälkeen ei tapahdu mitään, vaan "Proceed to checkout"-nappi avaa tyhjän sivun
Klikkasin etusivulla kirjautumattomana käyttäjänä "Join now"-nappia ja päädyin kirjautumisen kautta profiiliin. Olisi kätevä, jos kirjautumisen jälkeen päätyisi sivulle, johon oli alunperin siirtymässä
Joku kuvaava favicon voisi olla kiva. Logo näyttää olevan valmiina niin sitä voisi vaikka käyttää

Koodi

Frontend-puolen koodi on selkeästi organisoitua, hyvä!
API-kutsut on abstrahoitu hyvin uudellenkäytettäviksi palveluiksi services-hakemistoon

Sen sijaan, että lisää API_URL manuaalisesti URL:in eteen, voi luoda Axios-instanssin seuraavasti:

const apiClient = axios.create({
baseURL: API_URL,
})

// ...

const create = async (categoryData) => {
const { data } = await apiClient.post('/categories', categoryData)

return data
}

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
Formikia on hyödynnetty hyvin lomakkeiden tilanhallinnassa
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
Redux Toolkit tarjoaa todella hyviä työkaluja Reduxin käyttöön. Esim. createSlice-funktio vähentää reducerien boilerplate-koodia huomattavasti
Tailwind-luokkien nimissä on paljon copy-pastea, esim. tekstikentissä. Eristä nämä omiksi komponenteiksi, esim. tässä tapauksessa TextField. Muuten koodin ylläpidettävyys kärsii
Tähän löytyy myös kätevä kirjasto nimeltä classnames
Hyvän näköistä E2E-testausta Cypressillä
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
Reittien käsittelijöiden ainaisista try { ... } catch (e) { next(e) }-lohkoista pääsee helposti eroon express-async-errors-kirjaston avulla
Hyvän näköistä API:n testausta
Kattava CI-putki

Kokonaisuus

Sali-sovelluksella on erittäin tyylikäs ja käyttäjäystävällinen käyttöliittymä. Sovelluksen käyttökokemus oli hyvä, tyhjä "Gym Memberships"-sivu ja "Proceed to checkout"-sivu aiheutti tosin hieman hämmennystä. Admin-paneeli oli erinomainen. Projektin koodi on sekä frontendin, että backendin puolella selkeästi organisoitua ja sen laatu on suurimmilta osin erittäin hyvää. Hyvää työtä!

joonaramo / gym-membership-app