Katselmointi

[Kaltsoon]

Katselmointi

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

Käytettävyys

Mitä tein?

• Rekisteröin uuden käyttäjän ja kirjauduin sisään
• Tsekkasin profiilitietoni
• Loin uuden visailun monivalintakysymyksillä
• Loin uuden visailun Totta/Taru-kysymyksillä
• Vastailin muutamaan visailuun
• Kirjauduin ulos

Kokemus

• Kaikki sovelluksen toiminnallisuus on toimivaa ja käyttöliittymä on selkeä sekä pääosion intuitiivinen. Hyvää työtä! 🏅
• Uuden käyttäjän rekiströinnin jälkeen sovellus jää rekiströitymis-sivulle ilman erilistä ilmoitusta. Tämä saattaa saada käyttäjä ihmettelemään, että tapahtuiko jokin virhe. Ehkä ohjaus kirjautmis-sivulle jonkin ilmoituksen kera voisi selventää käyttäjälle, että rekisteröityminen onnistui
• Visailun lisäämisen käyttöliittymä on melko selkeä, mutta "Save Question"- ja "Save Quiz"-napit hämmentävät. Ilmeisesti kysymykset täytyy tallentaa ensin ja vasta sitten itse visailun? Voisiko visailun kysymyksineen tallentaa "Save Quiz"-napista?
• Geneerisen "React App"-titlen ja faviconin voisi korvata jollain sovellukselle sopivalla

Koodi

• Frontend-puolen koodi on selkeästi organisoitua, hyvä!
• Redux actioneista (esim. täällä) kannattaa tehdä nk. action creatoreita. Tällä tavoin piilotat actioniin liittyvät detailit, kuten onko action pelkkä objekti, vai nk. thunk.
• Yhden suuren reducerin sijaan, voit eristää eri vastuualueiden reducerit ja yhdistää ne combineReducers-funktion avulla
• Lomakkeiden, kuten tämän tilanhallintaan löytyy monia mainiota kirjastoja, kuten Formik
• Tämän tyyppiset apufunktiot, voisi ehkä sijoittaa esim. projektin utils-kansioon: https://github.com/lauraleonilla/quiz-app-frontend/blob/master/src/components/quizComponents/MultipleChoice.js#L5
• Tässä voisi käyttää map-metodia, esim. näin:

const answerOptions = [
  ...currentQuestion.incorrect_answers.map(e => e.answer),
  currentQuestion.correct_answer
];

• Voisiko visailun tyyppi (jota käytetään täällä) olla polkuparametri? Voisit tehdä vaikka kaksi eri reititystä:

<Route path="/quiz/:type/:quizId" exact>
  <QuizPageWithType>
</Route>

<Route path="/quiz/:quizId" exact>
  <QuizPageWithoutType>
</Route>

// ...

const QuizPageWithType = () => {
  // https://reacttraining.com/react-router/web/api/Hooks/useparams
  const { type, quizId } = useParams();

  return <QuizPage type={type} quizId={quizId}>
}

// ...

const QuizPageWithoutType = () => {
  const { quizId } = useParams();

  return <QuizPage quizId={quizId}>
}

• Myös backend-puolen koodi on hyvin organisoitua, hienoa!
• Reittien käsittelijöiden ainaisista try { ... } catch (e) { next(e) }-lohkoista pääsee helposti eroon express-async-errors-kirjaston avulla

Kokonaisuus

• Hauska sovellusidea, jossa on kaikki tarvittava toiminallisuus ja hyvä käytettävyys
• Koodi on kaikin puolin hyvin organisoitua ja pääosin laadukasta, mutta refaktorointia voisi tehdä. Painottaisin etenkin sitä, että tee Reactilla paljon "tyhmiä" komponentteja, eli komponentteja, jotka saavat propseja ja renderöivät pienen osan näkymää ilman, että niiden sisällä tapahtuu nk. sivuvaikutuksia, kuten backend-pyyntöjä. Ne komponentit, joissa sivuvaikutuksia tapahtuu ei pitäisi tehdä pahemmin muuta kuin renderöidä näitä tyhmiä komponentteja

[lauraleonilla]

Ok! Kiitos palautteesta! :) @Kaltsoon