Full Stack projektin katselmointi

[Kalle Ilves]

Full Stack projektin katselmointi

Terve @Veikkosuhonen! 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 pelejä, testasin hakua ja järjestämistä
• Lisäsin uuden pelin ja session
• Kirjauduin ulos

Kokemus

• Lautapeli-sovelluksella on tyylikäs ja helppokäyttöinen käyttöliittymä, hienoa työtä! 💎
• Selkeät notifikaatiot
• Sovelluksen käyttöönottoa nopeuttaisi, jos rekisteröitymisen jälkeen käyttäjä kirjautuisi automaattisesti sisään
• Boardgames-sivun haku voisi toimia kirjainkoosta riippumatta. Esim. "Sh" tuottaa tuloksia mutta "sh" ei
• "Recent activity"-näkymä on näppärä

Koodi

• Frontend-puolen koodi on selkeästi organisoitua, hyvä!

• Tailwindin kanssa kannattaa kokeilla JIT-modea

• API-kutsut on abstrahoitu hyvin uudellenkäytettäviksi palveluiksi services-hakemistoon

• Kaikkea dataa ei kannata ladata kerralla, vaan ladata se sitä tarvitsevassa komponentissa

• API-kutsuihin liittyvät operaatiot tuottavat jonkin verran toisteellista boilerplate-koodia. Esimerkiksi React Query kirjaston avulla API-kutsut voi helposti abstrahoida yksinkertaisiksi hookeiksi, kuten useBoardGames:

  import { useQuery } from 'react-query'
  
  import bgService from '../services/boardgameService'
  
  const useBoardGames = () => {
    const queryKey = ['boardGames']
  
    const queryFn = () => {
      return bgService.getAll()
    }
  
    const { data, ...rest } = useQuery(queryKey, queryFn)
  
    return { boardGames: data, ...rest }
  }
  
  export default useBoardGames

• Tämän voisi ehkä abstrahoida useCurrentUser-hookiksi

• Tämän voisi siirtää Login-komponenttiin. Kirjautuneen käyttäjän tilan voisi siirtää esim. Reduxiin, koska se vaikuttaa olevan globaalia tilaa

• Ehkä yksi Button-komponentti riittäisi? Tyyliä voi varioida propsilla:

  <Button>Secondary</Button>
  <Button variant="primary">Primary</Button>

• Tähän käyttötarkoitukseen kätevä kirjasto on classnames

• Formik-kirjastossa voisi olla hyötyä lomakkeiden tilanhallinnassa ja validoinnissa

• Myös backend-puolen koodi on selkeästi organisoitua, hienoa!

• Dockerfilessä kannattaa ensin kopioida package.json ja package-lock.json tiedostot, niin Dockerin välimuistia käytetään tehokkaammin:

  FROM node:17
  
  COPY package*.json ./
  
  RUN npm install
  
  COPY . .
  
  EXPOSE 3001
  
  CMD [ "npm", "start" ]
  

• Middlewareja on hyödynnetty hyvin. Auth-middlewaressa autentikoidun käyttäjän voisi laittaa req-objektiin, niin siihen pääsisi käsiksi kontrollreissa esim. req.user

• Tässä toJSON-metodia kutsutaan automaattisesti

• Kattavan näköistä API-testausta

• Hyvän näköinen CI-putki. Backendin puolella voisi ajaa vielä ESLintin. Sillä huomaa yllättävän paljon esim. typoista syntyviä bugeja ja koodin laatu pysyy hyvänä

Kokonaisuus

Lautapeli-sovelluksesta löytyy käyttötarkoitukseen tarvittava toiminallisuus. Sovelluksen käyttökokemus oli katselmoinnin puitteissa hyvä, bugeja tai erityisiä käytettävyysongelmia ei ilmennyt. Projektin koodi on järkevästi organisoitua ja laadultaan melko hyvää. Frontendin koodille tekee ihmeitä, kun sovelluslogiikan koodia siirtää uudelleenkäytettäviin hookkeihin. Hyvää työtä!

[Veikko Suhonen]

Kiitokset katselmoinnin palautteesta @Kaltsoon , olen viimeisten parin viikon aikana toteuttanut ehdottamasi parannukset ja ottanut käyttöön suosittelemasi kirjastot, ja koodille on tosiaan tapahtunut ihmeitä :).
Api-kutsut ja server-staten hallinta tehdään nyt omissa hookeissaan react-queryn queryillä ja mutaatioilla.
Ja Formikin (ja Yup-kirjaston) avulla lomakkeiden koodi ei enää aiheuta jatkuvia päänsärkyjä. Refaktorointien ansiosta uusia featureitakin tulee puskettua tiiviimmällä tahdilla.
Kaiken kaikkiaan tuntuu, että olen neuvojesi avulla vähitellen pääsemässä seuraavalle levelille varsinkin frontend-devauksessa.