Katselmointi

[Kaltsoon]

Katselmointi

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

Käytettävyys

Mitä tein?

• Rekisteröin uuden käyttäjän
• Selasin etusivua
• Selasin kaikkia tuotteita
• Selasin eri kategorioiden tuotteita
• Lisäsin ostoskoriin pari tuotetta ja tein tilauksen
• Selasin ylläpitosivun tuotetteita
• Täytin tuotteen luontilomakkeen
• Selasin ylläpitosivun tilauksia, muokkasin tilauksen tilaa ja poistin tilauksen
• Kirjauduin ulos

Kokemus

• Ulkoisesti täysin kaupallisen verkkokaupan veroinen sovellus, josta löytyy tavittava toiminallisuus tyylikkäällä ja käyttäjäystävällisellä käyttöliittymällä. Todella hyvää työtä! 🏆
• Responsiivinen ulkoasu toimii hyvin eri kokoisilla näytöillä
• Etusivulla hyviä nostoja valituista tuotteista
• Rekisteröitymisen jälkeen olisi kätevää, jos käyttäjä kirjautuisi automaattisesti sisään
• Geneerisen "React App"-faviconin voisi muuttaa kuvaavammaksi

Koodi

• 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
• Syvien tietorakenteiden immutable 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
• Tämä on varmaan, joku muinaisjäänne? Routerin ei varmaan ole tarkoitus olla Reduxissa?
• Reittien renderöitävät komponentit voi määritellä myös suoraan Route-komponentin lapsena:

<Route path="/ostoskori" />
  <ShoppingCartLayout />
</Route>

• Datan hakemisen voi myös toteuttaa täysin ilman Reduxia käyttämällä hookkeja react-firebase-hooks-kirjaston avulla. Firebasen käytön datan haussa voisi abstraktoida korkeamman tason hookeihin, kuten useProducts ja useOrders
• Inline-tyylejä kannattaa välttää ja siirtää tyylimäärittelyjä CSS-tiedostoihin
• React Routerilla on myös hyvä hook API

Kokonaisuus

• Tyylikäs ja käyttäjäystävällinen verkkokauppasovellus, josta ei puutu mitään oleellista toiminallisuutta
• Koodi on hyvin organisoitua ja sen sisäinen laatu on pääosin todella korkea. Edellä esitetyt kommentit tarjoavat työkaluja vain pieneen hienosäätöön, joka ei ole välttämätöntä