Lagt til readme dokumentasjon for prosjektideen

README.md

@@ -1,24 +1,313 @@
 # T01-Project-2
 
-Repository for team IT2810-H26-T01 in IT2810-H26.
+# Wine not? 🍷
 
-## Working in this repository
 
-`main` is protected — you cannot push to it directly. Work on a branch and
-open a pull request:
+“Wine not?” er en webapplikasjon for å søke etter, utforske og lære mer om vin og vinregioner samt kunne lagre sine favorittviner til senere. 
 
-```bash
-git checkout -b my-feature
-git push -u origin my-feature
+
+Målet er å lage en oversiktlig og visuelt interessant vinkatalog hvor brukeren både kan finne bestemte viner og oppdage nye gjennom søk, filtrering og geografisk utforskning.
+
+
+---
+
+
+## Idé
+
+
+“Wine not” skal gjøre det enkelt å utforske vin på flere måter.
+
+
+Brukeren skal kunne søke etter viner, filtrere og sortere resultater og åpne hver vin for å få mer informasjon.
+
+
+I tillegg skal applikasjonen ha en egen side med et interaktivt kart hvor brukeren kan utforske ulike vinregioner og få opp informasjon om regionen og viner som kommer derfra.
+
+
+Brukere skal også kunne opprette en konto og lagre viner som favoritter.
+
+
+---
+
+
+## Planlagt funksjonalitet
+
+
+### Vinkatalog
+
+
+Brukeren skal kunne:
+
+
+- søke etter vin
+- se søkeresultater i en liste
+- filtrere resultatene
+- sortere resultatene
+- åpne en vin for å se mer informasjon ?
+
+
+Aktuelle filtre kan være:
+
+
+- land
+- region
+- druetype
+- vintype
+- årgang
+
+
+Aktuelle sorteringsmuligheter kan være:
+
+
+- navn
+- årgang
+- rating
+- pris
+
+
+Søk, filtrering og sortering skal utføres på hele datasettet gjennom backend, og ikke bare på data som allerede er lastet inn i frontend.
+
+
+---
+
+
+## Detaljvisning av vin
+
+
+Hver vin skal ha en egen detaljvisning med mer informasjon.
+
+
+Aktuelle data for en vin er:
+
+
+- navn
+- produsent
+- land
+- region
+- druetype
+- vintype
+- årgang
+- beskrivelse
+- bilde
+- rating
+- pris
+
+
+Fra detaljsiden skal brukeren også kunne navigere videre til regionen vinen kommer fra.
+
+
+---
+
+
+## Utforsk vinregioner
+
+
+Applikasjonen skal ha en egen side hvor brukeren kan utforske vin geografisk.
+
+
+Et interaktivt kart skal gjøre det mulig å velge en vinregion, for eksempel:
+
+
+- Bordeaux
+- Bourgogne
+- Champagne
+- Toscana
+- Piemonte
+
+
+Når en region velges, skal brukeren få opp informasjon om regionen og se viner fra dette området.
+
+
+Kartet skal ikke være den eneste måten å velge region på. Det skal også finnes en alternativ løsning, for eksempel nedtrekksmenyer eller en liste, slik at funksjonaliteten er tilgjengelig også for brukere som ikke kan bruke det visuelle kartet.
+
+
+---
+
+
+## Bruker og favoritter
+
+
+Det skal være mulig å registrere seg og logge inn.
+
+
+Innloggede brukere skal kunne lagre viner som favoritter.
+
+
+Favorittene skal lagres i databasen og være tilgjengelige igjen neste gang brukeren logger inn.
+
+
+Dette vil være den brukergenererte informasjonen i systemet.
+
+
+---
+
+
+## Planlagte sider
+
+
+### Home
+
+
+Forsiden skal introdusere applikasjonen og gi brukeren en enkel inngang til søk og utforskning. 
+
+
+### Wines
+
+
+En søkbar katalog over vinene i databasen.
+
+
+Her skal brukeren kunne:
+
+
+- søke
+- filtrere
+- sortere
+- åpne viner
+
+
+### Wine Details
+
+
+Detaljside for én vin med informasjon om blant annet produsent, druer, region, årgang og vintype.
+
+
+### Regions
+
+
+Interaktivt kart og oversikt over vinregioner.
+
+
+### Favourites
+
+
+Oversikt over viner brukeren har lagret som favoritter.
+
+
+### Login / Register
+
+
+Popup-side for innlogging og registrering.
+
+
+---
+
+
+## Planlagt datamodell
+
+
+En vin kan eksempelvis inneholde:
+
+
+```ts
+interface Wine {
+  id: number;
+  name: string;
+  producer: string;
+  vintage: number;
+  type: string;
+  grapes: string[];
+  country: string;
+  region: string;
+  description: string;
+  imageUrl: string;
+  rating: number;
+  price: number;
+}
+Vinregioner kan representeres separat:
+```ts
+interface Region {
+	id: number;
+	name: string;
+	country: string;
+	description: string;
 ```
 
-Before a pull request can be merged:
 
-1. **A member of IT2810-H26-T01 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.
+Det vil også være behov for data knyttet til brukere og favoritter.
+
+
+## Teknologivalg
+
+
+| Del | Valg | Begrunnelse |
+|---|---|---|
+| Frontend | React, TypeScript, Vite | Krav i oppgaven |
+| Ruting | React Router | Egne URL-er for katalog, detaljside, kart og favoritter |
+| Kart | Leaflet med react-leaflet og OpenStreetMap | Åpen kildekode, lett bibliotek, ingen API-nøkkel |
+| State management | Apollo Client (planlagt) | Cache for GraphQL-svar og lokal state |
+| Backend | Node.js, TypeScript, Apollo Server (planlagt) | GraphQL er krav i oppgaven, og Apollo Server er godt dokumentert |
+| Database | Vurderes: PostgreSQL eller MongoDB | Begge støtter indekser for raskt søk og filtrering. Avgjøres før innlevering 2 |
+| Testing | Vitest | Vitest er krav i oppgaven |
+| Kodekvalitet | oxlint og Prettier | Linting og felles formatering |
+
+
+## Skalerbarhet
+
+
+Et viktig krav i prosjektet er at applikasjonen skal kunne håndtere store datamengder.
+
+
+Frontend skal derfor ikke hente hele databasen på én gang.
+
+
+Søk, filtrering og sortering skal håndteres av backend og database.
+
+
+Klienten skal kun hente den delen av resultatsettet som er nødvendig for visningen.
+
+
+Vi planlegger å bruke enten:
+- pagination
+- dynamisk lasting av flere resultater
+
+
+## Tilgjengelighet
+
+
+Universell utforming skal være en del av utviklingen gjennom hele prosjektet.
+
+
+Vi planlegger blant annet å:
+- bruke semantiske HTML-elementer
+- støtte tastaturnavigasjon
+- bruke labels på skjemaelementer
+- ha tydelig fokusmarkering
+- sikre god fargekontrast
+- bruke alternativ tekst på relevante bilder
+- unngå å bruke farge som eneste måte å formidle informasjon på
+- tilby et tilgjengelig alternativ til det interaktive kartet
+
+
+## Bærekraftig webutvikling
+
+
+Vi vil forsøke å redusere unødvendig ressursbruk gjennom gode tekniske valg.
+
+
+Dette kan blant annet innebære:
+- unngå unødvendige requests
+- kun hente data som faktisk skal vises
+- bruke kontrollert søk eller debouncing
+- bruke pagination eller dynamisk lasting
+- optimalisere bilder
+- unngå unødvendig tunge biblioteker
+- gjenbruke komponenter
+
+
+## Første underveisinnlevering
+
+
+Denne første underveisinnleveringen består av en spesifikasjon av den planlagte løsningen.
+
+
+Målet er å beskrive:
+- hva applikasjonen skal gjøre
+- hvilke data systemet skal håndtere
+- hvordan brukergrensesnittet er tenkt utformet
+- hvordan brukeren skal kunne interagere med applikasjonen
+- hvilke teknologier vi planlegger å bruke
+
+
+Implementasjon av database, GraphQL-backend og full funksjonalitet kommer i senere iterasjoner av prosjektet.
+