Full Stack projektin katselmointi

[Kaltsoon]

Full Stack projektin katselmointi

Terve @SirVeggie! 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 esityksiä etusivulla
• Selasin näytöksiä eri esityksissä ja ostin lippuja
• Kokeilin admin-paneelia

Kokemus

• Lipun varaus -sovelluksella on todella helppokäyttöinen ja tyylikäs käyttöliittymä, loistavaa työtä! 💎
• Lomakkeissa on kattavat validoinnit ja virhetilanteissa selkeät virheilmoitukset, hienoa!
• Käyttöliittymä taipuu myös kapeammille näytöille, kuten mobiililaitteille
• Admin-paneelista löytyy hyvin toiminallisuutta sovelluksen sisältöjen hallintaan

Koodi

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

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

• API-kutsuihin liittyvät operaatiot tuottavat usein jonkin verran toisteellista boilerplate-koodia. Esimerkiksi React Query -kirjaston avulla API-kutsut voi helposti abstrahoida yksinkertaisiksi, uudelleenkäytettäväksii hookeiksi, kuten useTicket(id)

• Admin-näkymän lataaminen vaikuttaa hyvältä käyttökohteelta React.lazy-funktiolle. Funktio liittyy nk. "Code-Splitting"-tekniikkaan, jossa ohjelman koodia ladataan "laiskasti" vasta tarvittaessa ja näin säästetään kaistaa ja nopeutetaan latausaikoja

• Lomakkeiden tilanhallinta on hoidettu melko siististi, mutta kun lomakkeen koko kasvaa tai sen logiikka monimutkaistuu, on usein kätevää käyttää jotain lomakkeen tilanhallinnasta vastaavaa kirjastoa, kuten Formik

• 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. Se käyttää sisäisesti Immer-kirjastoa, joten myös tilan päivittäminen helpottuu

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

• routerHelpers.ts sisältää hyviä uudelleenkäytettäviä abstraktioita

• Tietokantaan liittyvät operaatiot on abstrahoitu järkevästi dataabase.ts-tiedostoon

• Erittäin kattavan näköinen CI/CD-putki!

Kokonaisuus

Lipun varaus -sovelluksesta löytyy tarvittava toiminallisuus esitysten ja näytösten tarkkailuun sekä lippujen ostamiseen. Admin-paneelista löytyy kattavasti toiminallisuutta sisältöjen hallintaan. Sovelluksen käyttöliittymä on helppokäyttöinen ja tyylikäs. Projektin koodi on kaikilta osin järkevästi organisoitua ja koodin laatu on erittäin hyvä. Teknologioita, kuten TypeScript on hyödynnetty järkevästi ja projektin CI/CD-putki vaikuttaa erittäin kattavalta. Hyvää työtä!