Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 100 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
@@ -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.
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.
4 changes: 2 additions & 2 deletions client/src/components/ui/Dialog.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -76,7 +76,7 @@ export function Dialog({
"
aria-label="Lukk dialog"
>
×
<CloseIcon fontSize="medium" />
</RadixDialog.Close>
</div>

Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}