From afa7562bb5a7dfad0cf244aa0e55be89922da5a0 Mon Sep 17 00:00:00 2001 From: Isabella Hauan-Zamora Date: Thu, 1 Oct 2026 13:24:34 +0200 Subject: [PATCH] =?UTF-8?q?Oppdaterer=20README=20og=20siste=20endringer=20?= =?UTF-8?q?f=C3=B8r=20I1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 118 +++++++++++++++++++++++----- client/src/components/ui/Dialog.tsx | 4 +- package.json | 1 + 3 files changed, 103 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index ed82771..59852ef 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,106 @@ -# T06-Project-2 +# T06-Project-2 - Oppskriftsboka -Repository for team IT2810-H26-T06 in IT2810-H26. +En nettside hvor brukeren kan utforske ulike oppskrifter, legge inn egne oppskrifter, lage handlelister, arkivere oppskrifter og legge dem til som favoritter. -## Working in this repository +Prosjektet er utviklet som en del av faget IT2810 Webutvikling ved NTNU høsten 2026. -`main` is protected — you cannot push to it directly. Work on a branch and -open a pull request: +Link til prosjektet: http://localhost:5173/project2/ -```bash -git checkout -b my-feature -git push -u origin my-feature -``` +## Om prosjektet -Before a pull request can be merged: +### I1 -1. **A member of IT2810-H26-T06 must approve it.** You cannot approve your own pull - request, and approvals from staff do not count — you review each other's - code. -2. **Every review comment must be marked resolved.** Reply to each one, fix it - or explain why not, then click *Resolve conversation*. -3. **Pushing new commits dismisses the approval**, so if you change something - after being approved, ask for another review. This is deliberate: what was - approved is what gets merged. \ No newline at end of file +Til første underveisinnlevering har vi laget et designutkast i Figma. Her kan man se hvordan stegene for **Ny oppskrift**, headeren og footeren er tenkt å se ut. + +Vi har i tillegg laget moodboards i Canva. Her viser vi inspirasjon til ulike funksjonaliteter vi ønsker å ha på nettsiden, i tillegg til et mer detaljert moodboard for blant annet farger, fonter og den visuelle stilen. + +Figma: [Prosjekt 2 - Oppskriftsbok](https://www.figma.com/design/LOoxI0xz6PQNFcFJxerAiO/Prosjekt-2---Oppskriftsbok?node-id=126-2&t=XjMHHj90W87RrqEt-1) + +Moodboard: [Canva Moodboard](https://canva.link/w6zflw5fhah4pt5) + +Til innlevering 1 vil man kunne se en fungerende header med et midlertidig utseende, samt en skisse av hvordan forsiden skal se ut. Søkefeltet sender brukeren videre til oppskriftssiden, men filtrering basert på søket er ikke implementert enda. + +Knappene i headeren navigerer til de tilhørende sidene. Ved å trykke på **Ny oppskrift** åpnes første steg i skjemaet for å legge til en ny oppskrift. + +På siden **Oppskrifter** vises 30 mock-oppskrifter. Man kan trykke på en oppskrift for å åpne en detaljside med mer informasjon om den valgte oppskriften. + +## Hvordan starte opp + +### Installere nødvendige pakker + +Når du står i root-mappen til prosjektet, kjør: + +`npm install` + +Dette installerer alle nødvendige pakker som prosjektet trenger. + +### Se nettsiden + +For å starte nettsiden, gå inn i `client`-mappen: + +`cd client` + +Start deretter prosjektet med: + +`npm run dev` + +Nettsiden vil da være tilgjengelig på: + +`http://localhost:5173/project2/` + +### Se databasen + +Matilde må skrive. + +## Funksjonalitet + +### Implementert i I1 + +- Navigasjon mellom sidene gjennom headeren +- Søkefelt som sender brukeren til oppskriftssiden +- Visning av 30 mock-oppskrifter +- Detaljside for oppskrifter +- Første steg av **Ny oppskrift** +- Grunnleggende design og designsystem + +Funksjonaliteten er foreløpig basert på mock-data. Søk, filtrering og full funksjonalitet for å opprette oppskrifter implementeres i senere underveisinnleveringer. + +## Prosjektstruktur og arbeidsfordeling + +[Fylles inn] + +## Utvikling og Git-arbeidsflyt + +[Fylles inn] + +## Tilgjengelighet + +Vi har fra starten av prosjektet tatt hensyn til tilgjengelighet i design og implementasjon. Dette inkluderer blant annet tydelige fokusmarkeringer ved tastaturnavigasjon, labels på skjemafelt og bruk av både farge og andre visuelle markeringer for å vise aktive elementer. + +Tilgjengeligheten vil testes og videreutvikles gjennom prosjektet. + +## Bærekraft + +Bærekraft og grønn webutvikling vil tas hensyn til gjennom prosjektet. Dette vil blant annet påvirke valg knyttet til lasting av data, bilder og unødvendig ressursbruk. + +Denne delen vil oppdateres etter hvert som funksjonaliteten implementeres. + +## Bruk av KI + +Vi har brukt Claude (Anthropic) og ChatGPT (OpenAI) gjennom prosjektet, hovedsakelig som støtte til: + +- generell Git- og verktøyhjelp +- feilsøking av brancher og merge-problemer +- feilsøking ved manglende oppdateringer i `package.json` +- installasjon og oppsett av nødvendige pakker +- hjelp til feilsøking og forståelse av kode + +KI-generert innhold har blitt vurdert og tilpasset før det har blitt brukt i prosjektet. + +## Kjente begrensninger og videre arbeid + +Ved I1 er applikasjonen fortsatt under utvikling. Flere deler av nettsiden bruker derfor mock-data eller midlertidige løsninger. + +Søkefeltet navigerer til oppskriftssiden, men filtrerer foreløpig ikke oppskriftene. **Ny oppskrift** viser kun første steg av skjemaet, og videre funksjonalitet vil implementeres i senere underveisinnleveringer. + +Design og funksjonalitet kan også bli endret videre basert på testing og tilbakemeldinger. \ No newline at end of file diff --git a/client/src/components/ui/Dialog.tsx b/client/src/components/ui/Dialog.tsx index 38b68c3..bbdb62d 100644 --- a/client/src/components/ui/Dialog.tsx +++ b/client/src/components/ui/Dialog.tsx @@ -1,6 +1,6 @@ import type { ReactNode } from 'react' import * as RadixDialog from '@radix-ui/react-dialog' - +import CloseIcon from '@mui/icons-material/Close'; type DialogProps = { trigger: ReactNode title: string @@ -76,7 +76,7 @@ export function Dialog({ " aria-label="Lukk dialog" > - × + diff --git a/package.json b/package.json index 364ffc7..083b273 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", + "@mui/icons-material": "^9.4.0", "@mui/material": "^9.4.0" } }