Full Stack projektin katselmointi

Terve @shonkam! 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 asiakkaana ja kirjauduin sisään
Selasin kauppoja ja lisäsin tuotteita ostoskoriin
Tein tilauksen ja katsoin tilauksiani
Kirjauduin ulos
Rekisteröidyin kauppana
Lisäsin tuottteita
Kirjauduin ulos

Kokemus

Verkkokauppa-sovelluksen käyttöliittymä selkeä ja käyttäjäystävällinen, hienoa työtä! 🥇
Lomakkeissa on kattavat validoinnit ja virhetilanteissa selkeät virheilmoitukset, hienoa!
Automaattinen sisäänkirjautuminen rekisteröitymisen jälkeen nopeuttaisia sovelluksen käyttöönottoa
Jos samaa tuotetta ostaa monta kappaletta, voisi ostoskorissa tuote olla listattuna kerran ja näyttää tuotteiden lukumäärä

Koodi

Frontend-puolen koodi on selkeästi organisoitua, hyvä!
GraphQL-kyselyt on eriytetty omaan tiedostoonsa, hienoa! Toistuvissa kentissä voisi hyödyntää fragmentteja. Voisi myös harkita, että mutaatiot laittaisi omaan tiedostoonsa
Hookien avulla on abstrahoitu hyvin sovelluksen logiikkaa, mm. GraphQL-kyselyiden osalta. Tämä selkeyttää komponenttien koodia huomattavasti
Hyvä idea hyödyntää Formikia lomakkeiden tilan hallinnassa ja Yupia validoinnissa
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
Myös backend-puolen koodi on selkeästi organisoitua, hienoa!
Hyvän näköistä GraphQL-API:n testausta

Dotenv-konfiguroinnin voisi eriyttää omaan tiedostoonsa, kuten config.js:

// config.js
import dotenv from 'dotenv'

dotenv.config()

export const JWT_SECRET = process.env.JWT_SECRET

// muissa tiedostoissa
import { JWT_SECRET } from '../config'

GraphQL-skeeman määrittely on pilkottu eri tiedostoihin, hyvä!
Virheiden käsittely kannattaa jättää Apollo Serverin hoidettavaksi. Virheiden käsittelyä voi tarpeen tullen muuttaa

Kokonaisuus

Verkkokauppa-sovelluksesta löytyy tarvittava toiminallisuus yksinkertaisen verkkokaupan lisäämiseen ja tuotteiden tilaamiseen. Sovelluksessa ei katselmoinnin aikana ilmennyt bugeja, tai suurempia käytettävyysongelmia. Projektin koodi on sekä frontendin, että backendin osalta järkevästi organisoitua ja koodin laatu on erittäin hyvä, vaikka pientä hienosäädön tarvettaa löytyykin. Hyvää työtä!

shonkam / unnamedProject