/carasent-react-typescript

Kodeøvelse med React og Typescript

Primary LanguageTypeScriptMIT LicenseMIT

Codacy Badge CodeFactor

Kodeøvelse med React og Typescript

Hjemmeoppgave gitt av Carasent.

Hensikten med oppgaven er å vise kodepatterns og valg av pakker, rammeverk og bibliotek. Du står fritt til å strukturere prosjektet, velge pakker, rammeverk og bibliotek.

Løsningen skal ikke ferdigstilles.

Sett opp et frontendprosjekt med React og Typescript. Prosjektet skal kunne kjøres lokalt.

Frontend

Screenshot av prosjekt

Dokumentasjon (Storybook)

Storybook dokumentasjon

Innholdsfortegnelse

Komponenter

Klikk for å vise mer
  • Input
  • Select
  • Radio
  • Primærknapp
  • Sekundærknapp
  • Komponenter skal styles med fritt valg av løsning.
  • Komponenter skal kunne gjenbrukes.
  • En innsendelse og avbryt knapp (primær og sekundærknapp).
  • Skjema må lagre data, men trenger ikke persistere eller sende data noe sted.
  • Implementere eller fortelle hvordan du ville løst kommunikasjonen med et API.
  • Hvordan ville du håndtert state?

Prosjektforklaring

Klikk for å vise mer
  • Monorepo med Turborepo satt opp med pnpm.
  • Deployment er mulig via Docker (Dockerfile).
  • Frontend med Next.js (React) 13 med bruk av Typescript template.
  • Testing med Cypress og Cypress Axe for testing av a11y/WCAG.
  • Testing med Jest og React Testing Library.
  • Dokumentasjon av komponenter med Storybook og JSDoc.
  • Styling med Tailwind.css.
  • Formhåndtering med React hook og Zod for validering.
  • Kommunikasjonen med et API med useSWR og fetch.
  • Statehåndtering med useState.
  • Reset for form elementer med @tailwindcss/forms.
  • Oppdatering av pakker i package.json med Renovate.

Mappeoppsett

Klikk for å vise mer
  • storybook: en Storybook applikasjon
  • web: en Next.js applikasjon
  • ui: et React komponent bibliotek delt av både web og storybook
  • eslint-config-custom: eslint konfigurasjoner (inkluderer eslint-config-next and eslint-config-prettier)
  • tsconfig: tsconfig.jsonbrukt i monorepo

Installasjon

Klikk for å vise mer

Du kan kjøre prosjektet lokalt enten via Docker desktop eller pnpm og Node.

Forklaring på hvordan du kjører det via Docker desktop finner du her: Docker.

Du trenger å installere pnpm som pakkehåndterer.

Sørg også for å ha Node versjon 16 (ikke nyere, da kan du få feilmeldinger fra Storybook) installert. Alternativt kan du bruke nvm for å sette Node versjon til versjon 16.

Git clone eller last ned Git repository.

Kjør så:

cd carasent-react-typescript
pnpm i

Du trenger å sette opp /apps/web/.env ved å rename .env.example til .env og legge til følgende:

NEXT_PUBLIC_API_URL="https://rickandmortyapi.com/api"

(Det er dårlig praksis å commite .env til Git, og den er lagt til i .gitignore, derfor må dette settes opp manuelt)

Etterfulgt av:

pnpm dev

Åpne http://localhost:3000 i nettleseren.

Storybook starter automatisk.

Vil du kjøre Cypress (for E2E tester), sørg for å ha startet applikasjonen og så kjør:

pnpm cypress:open

Vil du kjøre Jest (for unit-testing), kjør:

pnpm test

Docker

Klikk for å vise mer

Ønsker du å bygge et Docker image, sørg for å ha satt opp og installert Docker desktop og kjør kommandoen:

docker build -t carasent .

Nå kan du starte Docker kontaineren.

Gå inn i Optional settings og velg 3333 som port.

Trykk Run.

Nå kan du åpne http://localhost:3333 i nettleseren.

Statehåndtering

Klikk for å vise mer
  • Statehåndtering er akkurat nå implementert via useState i index.tsx
  • Hvis man planlegger å utvide prosjektet med mange komponenter og i mye større skala ville jeg vurdert andre løsninger
  • Trenger man state i bare noen komponenter er React Context et godt alternativ
  • Trenger man state i mange komponenter er Redux med Redux Toolkit et bedre alternativ

Teknologivalg

Turborepo

  • Forenkler utvikling med monorepo
  • Veldig rask (har blant annet støtte for gratis remote caching med Vercel, så man sparer tid ved bygging)
  • Støtter alle pakkehåndteringsprogrammer (npm, yarn og pnpm)
  • Les mer om Turbo og Turbo dokumentasjon

useSwr

  • Caching av data fra API
  • Fungerer bra med Next.js
  • Forenkler datahåndtering
  • Paginering ut av boksen
  • Fungerer best med data som endres ofte
  • Støtte for Typescript
  • Slipper å bruke useEffect for datahåndtering

Next.js

  • Erfaring med React er nevnt i stillingsannonsen
  • Populært rammeverk for utvikling med React
  • Basert på React
  • Støtte for SSR (Server side rendering), SSG (Static site generation), ISR (Incremental Static Regeneration) med mer ut av boksen
  • Kan utvides med støtte for serverless via /api (API routes)
  • Bra for SEO
  • Bra community støtte
  • Støtte for Typescript

React hook form

  • Erfaring med React hook form er nevnt i stillingsannonsen
  • Forenkler håndtering av kontaktskjema
  • Lett å integrere med andre biblioteker (som feks Yup, Zod eller Material UI)
  • Optimalisert for ytelse
  • Mindre kode å vedlikeholde
  • Lav læringskurve
  • Støtte for Typescript

Storybook

  • En naturlig del av utvikling av designsystemer
  • Dokumentasjon av komponenter
  • Gjør onboarding av utviklere enklere fordi man ser hvilke komponenter man har og hvordan de fungerer
  • Gjør gjenbruk og testing av komponenter enklere
  • Designere og andre ikke-tekniske brukere kan se komponentene og hvordan de fungerer
  • Kan enkelt integreres med visuell testing og andre verktøy (feks Chromatic)

Tailwind

  • Erfaring med Tailwind er nevnt i stillingsannonsen
  • Mindre CSS å skrive
  • CSS klasser er lokalisert til komponenten som bruker den (scoped) og påvirker ikke andre elementer
  • Lett å gjenbruke klasser og design
  • Designsystemet til Tailwind er godt gjennomtenkt
  • Sparer tid på design

Cypress

  • Visuell testing (E2E) av komponenter og sider
  • Man kan forsikre seg om at endringer man gjør i designet eller koden ikke ødelegger noe
  • Lett å skrive tester
  • Man kan bruke nettleseren for å debugge tester og få hjelp til å skrive tester
  • Lett å automatisk teste tilgjengelighet med cypress-axe

Renovate

  • Automatisk oppdatering av npm pakker
  • Hindrer lettere sårbarheter og sikkerhetsproblemer
  • Kan settes opp og konfigureres etter ønske

Zod

  • Enkel validering av både kontaktskjema (React hook form) og API data
  • Lett å integrere med React hook form
  • Populært bibliotek

Cypress axe (Axe core)

  • Tester WCAG (tilgjengelighet) av sider og komponenter
  • Tilgjengelighet er lovpålagt på alle norske nettsider

Jest med React testing library

  • Industristandard for unit testing av komponenter i React
  • Kan utvides med feks coverage report (--coverage) så man oppnår ønsket testdekning

TODO

Ting jeg ville vurdert å se nærmere på om jeg skulle brukt mer tid på prosjektet

Klikk for å vise mer
  • Se om jeg kan Forbedre Typescript definisjoner
  • Implementere forhåndsinnlasting av data med getStaticProps eller getServerSideProps
  • Se på validering av API data med Zod som allerede brukes til skjemaet
  • Sett opp path alias for ryddigere importeringer
  • Revurder mappestruktur (ref boken React - The Road To Enterprise for inspirasjon)
  • Implementert statehåndtering med en custom Context hook med Typescript for bruk i resten av prosjektet
  • Sette opp og integrere DevOps (feks CircleCI) med feks Applitools, CodeCov, Chromatic, Cypress og Jest for automatisk testing i skyen før merge av pull requests