{"id":16266226,"url":"https://github.com/w3bdesign/carasent-react-typescript","last_synced_at":"2026-02-27T17:48:49.638Z","repository":{"id":65521631,"uuid":"584254596","full_name":"w3bdesign/carasent-react-typescript","owner":"w3bdesign","description":"Kodeøvelse med React og Typescript","archived":false,"fork":false,"pushed_at":"2026-02-12T17:34:06.000Z","size":3966,"stargazers_count":1,"open_issues_count":12,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-13T01:08:55.346Z","etag":null,"topics":["cypress","docker","dockerfile","nextjs","react","storybook","typescript"],"latest_commit_sha":null,"homepage":"https://carasent.dfweb.no","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/w3bdesign.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-01-02T02:22:11.000Z","updated_at":"2026-02-10T20:49:45.000Z","dependencies_parsed_at":"2024-02-05T08:54:03.187Z","dependency_job_id":"f9b82b9a-6291-461d-93c1-211c865a963a","html_url":"https://github.com/w3bdesign/carasent-react-typescript","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/w3bdesign/carasent-react-typescript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3bdesign%2Fcarasent-react-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3bdesign%2Fcarasent-react-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3bdesign%2Fcarasent-react-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3bdesign%2Fcarasent-react-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/w3bdesign","download_url":"https://codeload.github.com/w3bdesign/carasent-react-typescript/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w3bdesign%2Fcarasent-react-typescript/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29907152,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T17:28:36.873Z","status":"ssl_error","status_checked_at":"2026-02-27T17:28:20.970Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cypress","docker","dockerfile","nextjs","react","storybook","typescript"],"created_at":"2024-10-10T17:40:22.604Z","updated_at":"2026-02-27T17:48:49.606Z","avatar_url":"https://github.com/w3bdesign.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/5dc6f7632b354d30bd8a6637d69af48d)](https://www.codacy.com/gh/w3bdesign/carasent-react-typescript/dashboard)\n[![CodeFactor](https://www.codefactor.io/repository/github/w3bdesign/carasent-react-typescript/badge)](https://www.codefactor.io/repository/github/w3bdesign/carasent-react-typescript)\n\n# Kodeøvelse med React og Typescript\n\nHjemmeoppgave gitt av Carasent.\n\nHensikten med oppgaven er å vise kodepatterns og valg av pakker, rammeverk og bibliotek.\nDu står fritt til å strukturere prosjektet, velge pakker, rammeverk og bibliotek.\n\nLøsningen skal ikke ferdigstilles.\n\nSett opp et frontendprosjekt med React og Typescript. Prosjektet skal kunne kjøres lokalt.\n\n## Frontend\n\n \u003cimg src=\"https://user-images.githubusercontent.com/45217974/211206001-0fa2f34a-882c-4bb4-a04c-9f9ba4c058d8.png\" alt=\"Screenshot av prosjekt\" /\u003e\n\n## Dokumentasjon (Storybook)\n\n \u003cimg src=\"https://user-images.githubusercontent.com/45217974/211168415-300d889e-0b8f-4d0d-993e-a41b005a0f46.png\" alt=\"Storybook dokumentasjon\" /\u003e\n\n* * *\n\n## Innholdsfortegnelse\n\n-   [Komponenter](#Komponenter)\n-   [Prosjektforklaring](#Prosjektforklaring)\n-   [Mappeoppsett](#Mappeoppsett)\n-   [Installasjon](#Installasjon)\n-   [Docker](#Docker)\n-   [Statehåndtering](#Statehåndtering)\n-   [Teknologivalg](#Teknologivalg)\n-   [TODO](#TODO)\n\n## Komponenter\n\n\u003cdetails\u003e\n    \u003csummary\u003eKlikk for å vise mer\u003c/summary\u003e\n\n-   Input\n-   Select\n-   Radio\n-   Primærknapp\n-   Sekundærknapp\n-   Komponenter skal styles med fritt valg av løsning.\n-   Komponenter skal kunne gjenbrukes.\n-   En innsendelse og avbryt knapp (primær og sekundærknapp).\n-   Skjema må lagre data, men trenger ikke persistere eller sende data noe sted.\n-   Implementere eller fortelle hvordan du ville løst kommunikasjonen med et API.\n-   Hvordan ville du håndtert state?\n\n\u003c/details\u003e\n\n## Prosjektforklaring\n\n\u003cdetails\u003e\n    \u003csummary\u003eKlikk for å vise mer\u003c/summary\u003e\n\n-   Monorepo med Turborepo satt opp med pnpm.\n-   Deployment er mulig via Docker (Dockerfile).\n-   Frontend med Next.js (React) 13 med bruk av Typescript template.\n-   Testing med Cypress og Cypress Axe for testing av a11y/WCAG.\n-   Testing med Jest og React Testing Library.\n-   Dokumentasjon av komponenter med Storybook og JSDoc.\n-   Styling med Tailwind.css.\n-   Formhåndtering med React hook og Zod for validering.\n-   Kommunikasjonen med et API med useSWR og fetch.\n-   Statehåndtering med useState.\n-   Reset for form elementer med @tailwindcss/forms.\n-   Oppdatering av pakker i package.json med Renovate.\n\n\u003c/details\u003e\n\n## Mappeoppsett\n\n\u003cdetails\u003e\n    \u003csummary\u003eKlikk for å vise mer\u003c/summary\u003e\n\n-   `storybook`: en [Storybook](https://storybook.js.org/) applikasjon\n-   `web`: en [Next.js](https://nextjs.org/) applikasjon\n-   `ui`: et React komponent bibliotek delt av både `web` og `storybook`\n-   `eslint-config-custom`: `eslint` konfigurasjoner (inkluderer `eslint-config-next` and `eslint-config-prettier`)\n-   `tsconfig`: `tsconfig.json`brukt i monorepo\n\n\u003c/details\u003e\n\n## Installasjon\n\n\u003cdetails\u003e\n    \u003csummary\u003eKlikk for å vise mer\u003c/summary\u003e\n\nDu kan kjøre prosjektet lokalt enten via [Docker desktop](https://www.docker.com/products/docker-desktop/) eller [pnpm](https://pnpm.io) og [Node](https://nodejs.org/en/).\n\nForklaring på hvordan du kjører det via [Docker desktop](https://www.docker.com/products/docker-desktop/) finner du her: [Docker](#Docker).\n\nDu trenger å installere [pnpm](https://pnpm.io) som pakkehåndterer.\n\nSørg også for å ha [Node](https://nodejs.org/en/) versjon 16 (ikke nyere, da kan du få feilmeldinger fra Storybook) installert. \nAlternativt kan du bruke [nvm](https://github.com/nvm-sh/nvm) for å sette Node versjon til versjon 16. \n\nGit clone eller [last ned Git repository](https://github.com/w3bdesign/carasent-react-typescript/archive/refs/heads/main.zip).\n\nKjør så:\n\n```bash\ncd carasent-react-typescript\npnpm i\n```\n\nDu trenger å sette opp `/apps/web/.env` ved å rename `.env.example` til `.env` og legge til følgende:\n\n```bash\nNEXT_PUBLIC_API_URL=\"https://rickandmortyapi.com/api\"\n```\n\n(Det er dårlig praksis å commite .env til Git, og den er lagt til i .gitignore, derfor må dette settes opp manuelt)\n\nEtterfulgt av:\n\n```bash\npnpm dev\n```\n\nÅpne \u003chttp://localhost:3000\u003e i nettleseren.\n\nStorybook starter automatisk.\n\nVil du kjøre Cypress (for E2E tester), sørg for å ha startet applikasjonen og så kjør:\n\n```bash\npnpm cypress:open\n```\n\nVil du kjøre Jest (for unit-testing), kjør:\n\n```bash\npnpm test\n```\n\n\u003c/details\u003e\n\n## Docker\n\n\u003cdetails\u003e\n    \u003csummary\u003eKlikk for å vise mer\u003c/summary\u003e\n\nØnsker du å bygge et Docker image, sørg for å ha satt opp og installert [Docker desktop](https://www.docker.com/products/docker-desktop/) og kjør kommandoen:\n\n```bash\ndocker build -t carasent .\n\n```\n\nNå kan du starte Docker kontaineren.\n\nGå inn i `Optional settings` og velg 3333 som port.\n\nTrykk `Run`.\n\nNå kan du åpne \u003chttp://localhost:3333\u003e i nettleseren.\n\n\u003c/details\u003e\n\n## Statehåndtering\n\n\u003cdetails\u003e\n    \u003csummary\u003eKlikk for å vise mer\u003c/summary\u003e\n\n-   Statehåndtering er akkurat nå implementert via useState i index.tsx\n-   Hvis man planlegger å utvide prosjektet med mange komponenter og i mye større skala ville jeg vurdert andre løsninger\n-   Trenger man state i bare noen komponenter er React Context et godt alternativ\n-   Trenger man state i mange komponenter er Redux med Redux Toolkit et bedre alternativ\n\n## Teknologivalg\n\n## Turborepo\n\n-   Forenkler utvikling med monorepo\n-   Veldig rask (har blant annet støtte for gratis remote caching med Vercel, så man sparer tid ved bygging)\n-   Støtter alle pakkehåndteringsprogrammer (npm, yarn og pnpm)\n-   Les mer om [Turbo](https://turbo.build) og [Turbo dokumentasjon](https://turbo.build/repo/docs)\n\n## useSwr\n\n-   Caching av data fra API\n-   Fungerer bra med Next.js\n-   Forenkler datahåndtering\n-   Paginering ut av boksen\n-   Fungerer best med data som endres ofte\n-   Støtte for Typescript\n-   Slipper å bruke useEffect for datahåndtering\n\n## Next.js\n\n-   Erfaring med React er nevnt i stillingsannonsen\n-   Populært rammeverk for utvikling med React\n-   Basert på React\n-   Støtte for SSR (Server side rendering), SSG (Static site generation), ISR (Incremental Static Regeneration) med mer ut av boksen\n-   Kan utvides med støtte for serverless via /api (API routes)\n-   Bra for SEO\n-   Bra community støtte\n-   Støtte for Typescript\n\n## React hook form\n\n-   Erfaring med React hook form er nevnt i stillingsannonsen\n-   Forenkler håndtering av kontaktskjema\n-   Lett å integrere med andre biblioteker (som feks Yup, Zod eller Material UI)\n-   Optimalisert for ytelse\n-   Mindre kode å vedlikeholde\n-   Lav læringskurve\n-   Støtte for Typescript\n\n## Storybook\n\n-   En naturlig del av utvikling av designsystemer\n-   Dokumentasjon av komponenter\n-   Gjør onboarding av utviklere enklere fordi man ser hvilke komponenter man har og hvordan de fungerer\n-   Gjør gjenbruk og testing av komponenter enklere\n-   Designere og andre ikke-tekniske brukere kan se komponentene og hvordan de fungerer\n-   Kan enkelt integreres med visuell testing og andre verktøy (feks Chromatic)\n\n## Tailwind\n\n-   Erfaring med Tailwind er nevnt i stillingsannonsen\n-   Mindre CSS å skrive\n-   CSS klasser er lokalisert til komponenten som bruker den (scoped) og påvirker ikke andre elementer\n-   Lett å gjenbruke klasser og design\n-   Designsystemet til Tailwind er godt gjennomtenkt\n-   Sparer tid på design\n\n## Cypress\n\n-   Visuell testing (E2E) av komponenter og sider\n-   Man kan forsikre seg om at endringer man gjør i designet eller koden ikke ødelegger noe\n-   Lett å skrive tester\n-   Man kan bruke nettleseren for å debugge tester og få hjelp til å skrive tester\n-   Lett å automatisk teste tilgjengelighet med cypress-axe\n\n## Renovate\n\n-   Automatisk oppdatering av npm pakker\n-   Hindrer lettere sårbarheter og sikkerhetsproblemer\n-   Kan settes opp og konfigureres etter ønske\n\n## Zod\n\n-   Enkel validering av både kontaktskjema (React hook form) og API data\n-   Lett å integrere med React hook form\n-   Populært bibliotek\n\n## Cypress axe (Axe core)\n\n-   Tester WCAG (tilgjengelighet) av sider og komponenter\n-   Tilgjengelighet er lovpålagt på alle norske nettsider\n\n## Jest med React testing library\n\n-   Industristandard for unit testing av komponenter i React\n-   Kan utvides med feks coverage report (--coverage) så man oppnår ønsket testdekning\n\n\u003c/details\u003e\n\n## TODO\n\n## Ting jeg ville vurdert å se nærmere på om jeg skulle brukt mer tid på prosjektet\n\n\u003cdetails\u003e\n    \u003csummary\u003eKlikk for å vise mer\u003c/summary\u003e\n\n-   Se om jeg kan Forbedre Typescript definisjoner\n-   Implementere forhåndsinnlasting av data med getStaticProps eller getServerSideProps\n-   Se på validering av API data med Zod som allerede brukes til skjemaet\n-   Sett opp path alias for ryddigere importeringer\n-   Revurder mappestruktur (ref boken React - The Road To Enterprise for inspirasjon)\n-   Implementert statehåndtering med en custom Context hook med Typescript for bruk i resten av prosjektet\n-   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\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fw3bdesign%2Fcarasent-react-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fw3bdesign%2Fcarasent-react-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fw3bdesign%2Fcarasent-react-typescript/lists"}