Full Stack projektin katselmointi

Terve @KoskinenTimo! 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
Selasin Market-sivua
Testasin Analyzer-sivun hakua ja tallensin tietoja profiiliini
Selasin profiiliani
Kirjauduin ulos

Kokemus

Kryptosovelluksella on selkeä käyttöliittymä, hyvää työtä! 🥇
Lomakkeissa on kattavat validoinnit ja selkeät virheilmoitukset
Geneerisen "React App"-titlen ja faviconin voisi muuttaa kuvaavammaksi
Automaattinen sisäänkirjautuminen rekisteröitymisen jälkeen on kätevä ominaisuus
Jokin hieman graafisempi visualisaatio, esim. kuvaaja kurssin historiasta, voisi olla hyvä lisä sovellukseen

Koodi

Frontend-puolen koodi on selkeästi organisoitua, hyvä!
API-kutsut on abstrahoitu hyvin uudellenkäytettäviksi palveluiksi services-hakemistoon, hienoa!
API URL:in konfiguroinnin voi toteuttaa myös oman axios instanssin avulla:
```
const apiClient = axios.create({
baseURL: appBackendUrl,
});

// ...

export const login = async (credentials) => {
return await apiClient.post('/api/login', credentials)
}
```
Oman instanssin avulla voi myös mm. toteuttaa kätevästi myös autentikaatiotokenin lisäämisen pyyntöön interceptorin avulla.
Jos esim. tämä ja tämä käyttävät samaa dataa, voi olla järkevää tallentaa Redux storeen "raakadata" ja hyödyntää selectoreja halutun muotoisen datan muodostamiseen
API-kutsuihin liittyvät operaatiot tuottavat usein jonkin verran toisteellista boilerplate-koodia. Esimerkiksi React Query kirjaston avulla API-kutsut voi helposti abstrahoida yksinkertaisiksi hookeiksi

DOM-elementtien manipuolointi komponenteissa on usein huono idea. Virheviestit voisi tallentaa tilaan, esim. seuraavasti:

const [errors, setErrors] = useState({});
const [username, setUsername] = useState('');

// ...

const validate = () => {
const nextErrors = {}

if (username.length < 5 || username.length > 15) {
  nextErrors.username = 'Username is required and must be between 5-15 characters long'
}

// ...

return nextErrors;
};

// ...

// reffejä ei tarvita
const handleUsernameInput = (event) => {
setUsername(event.target.value)
setErrors(validate())
};

Monissa lomakkeiden tilanhallintaa erikoistuvissa kirjastoissa, kuten Formikissa, validoinnin tilanhallintaa ei tarvitse hoitaa itse

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
Tyylit on organisoitu järkevästi ja BEM-nimeämistyyliä on käytetty valitsimien yhteentörmäyksien vähentämiseksi, hyvä! Ehkä himan modernimpi ratkaisu modulaariiseen CSS:ään on css-moduulit tai jokin CSS-in-JS-kirjasto, kuten styled components
CI-putki hoitaa tuotantoonviennin, hyvä!
Myös backend-puolen koodi on selkeästi organisoitua, hienoa!
Tämän kaltaista middlewarea ei tarvita, jos käytössä on express-async-errors-kirjasto
200-status on vastauksen oletusstatus, joten sitä ei tarvitse erikseen asettaa

Kannattaa välttää sisäkkäisiä if-lohkoja, ne heikentävät koodin luettavuutta. Ongelman voi ratkaista "bouncer" suunnittelumallin avulla:

if (!favDate) {
throw createError(404, "Nothing found with the id")
}

if (currentUser.id !== favDate.user.toString()) {
throw createError(401, "Not the owner of this recourse, access denied")
}

const updatedFav = await Favorite.findByIdAndUpdate(id, body, { runValidators:true, new:true })

if (!updatedFav) {
throw createError(404, "Nothing found with the id")
}

res.json(updatedFav)

Myös backendin puolella CI-putki kunnossa

Kokonaisuus

Kryptosovelluksella on helppokäyttöinen käyttöliittymä ja siitä löytyy tarvittava toiminallisuus kryptojen kurssien seuraamiseen. Katselmoinnin aikana ei ilmennyt bugeja, tai sovelluksen käyttöä haittaavia käytettävyysongelmia. Projektin koodi on kaikilta osin järkevästi organisoitua ja suurimmilta osin laadukasta. Teknologioita, kuten Docker on hyödynnetty järkevästi ja CI-putki automatisoi sovelluksen tuotantoonviennin. Hyvää työtä!

KoskinenTimo / Crypto-Analyzer-For-Scrooge