Update readme for frontend

README.md

@@ -12,6 +12,7 @@ Prosjektet er en fullstack React- og GraphQL-applikasjon som lar brukeren utfors
 - [Kom i gang](#Kom-i-gang)
 - [Arkitektur og valg](#Arkitektur-og-valg)
 - [Hvor er vi nå](#Hvor-er-vi-nå)
+- [Frontend](#Frontend)
 - [Branching-strategi](#Branching-strategi)
 - [Bruk av KI](#Bruk-av-KI)
 
@@ -68,7 +69,50 @@ Paginering: Vi har implementert cursor-basert paginering (first og endCursor) me
 
 Sikkerhet: Alle variabler fra GraphQL-spørringene sendes som parametriserte verdier ($1, $2 osv.) til pg for å effektivt forhindre SQL-injection. 
 
-## Hvor er vi nå
+# Hvor vi er nå
+
+## Frontend
+
+Hovedfokuset har vært på katalogvisningen og hvordan brukeren kan utforske albumene. Målet har vært å lage et oversiktlig og brukervennlig grensesnitt der brukeren kan bla gjennom, søke etter bestemte artister eller albumtitler og avgrense resultatene ved hjelp av filtre. Vi har delt brukergrensesnittet inn i mindre komponenter for å gjøre koden mer oversiktlig og enklere å vedlikeholde. Katalogsiden håndterer søk, filtrering og paginering, mens egne komponenter brukes til å vise albumene, søkefeltet og filteralternativene. Vi har også jobbet med det visuelle, blant annet med fargepalett, fonts, kortvisning og plassering av elementer. I tillegg til det har vi jobbed med tilgjengelighet, som f.eks. synlig fokus når brukeren navigerer med tastaturet.
+
+### Katalogvisning
+Fil: CataloguePage
+
+Katalogsiden er hovedsiden for å utforske album. Den henter album data fra databasen fra MusicBrainz og bruker disse dataene til å vise albumene i grensesnittet. Siden inneholder oversikt over søketekst, valgte filtre, gjeldende side og om filterpanelet er synlig. Reacts useState brukes til å lagre og oppdatere denne tilstanden. Når brukeren endrer søket eller filtrenem beregnes resultatene på nytt og visningen oppdateres automatisk.
+
+### Søk
+Fil: SearchBar
+
+Søkefeltet lar brukeren søke etter album basert på tittel eller artist. Søktet er ikke avhengig av store eller små bokstaver, slik at f.eks. "Radiohead" og "radiohead" gir tilsvarende søkeresultater. Søketeksten lagres i tilstanden til katalogsiden og brukes når albumlisten filtreres.
+
+### Filtrering
+Fil: FilterControls
+
+Filterkomponenten lar brukeren avgrense albumene etter sjanger og tiår. Filtrene kombineres med søket, slik at resultatsiden bare viser album som oppfyller de aktive kriteriene. Det er også mulig å fjerne filtrene for å gå tilbake til en bredere visning av katalogen. I tillegg til det kan filterpanelet kan skjules for å gi mer plass til albumene. Vi har også implementert designet til å filtrere album etter hva slags rating den har etter brukerinput, men den vil implementeres etter vi har lagt til brukere og fått faktisk brukerdata.
+
+### Albumkort og Albumliste
+Fil: AlbumList og AlbumCard
+
+AlbumList mottar en liste med album og viser et albumkort for hvert album. AlbumCard håndterer presentasjonen av det enkelte albumet, blant annet tittel, utgivelsesår og coverbilde. Dersom et album ikke har en tilgjengelig coveradresse, viser grensesnittet en plassholder i stedet. Dette gjør at albumkortene fortsatt har en visuell representasjon selv når coverbilde mangler.
+
+### Paginering
+Katalogen bruker paginering for å dele resultatet inn i mindre sider i stedet for å vise alle albumene samtidig. Antallet album per side bestemmes av om filterpanelet er synlig. De synlige albumene beregnes ved bruk av slice() på den filtrerte albumlisten. Brukeren kan navigere mellom sidene ved hjelp av forrige og neste knappene.
+
+Knappene deaktiveres når brukeren er på den første eller siste siden. Gjeldene sidetall og totalt antall sider vises også. Når søket eller filtrene endres, tilbakestilles pagineringen til første side, slik at brukeren ikke blir stående på en side som ikke lenger finnes.
+
+### Navigasjon og albumdetaljer
+Filer: App.tsx og AlbumDetailPage.tsx
+
+Applikasjon bruker React Router til navigere mellom katalogsiden og detaljsiden for et album. Katalogen ligger på /, mens albumdetaljer vises gjennom en rute på formen /album/:id. dette gjør det mulig å åpne en egen side for et valgt album uten å samle all funksjonaliteten i et komponent.
+
+### Tilgjengelighet
+Vi har har prøvd å gjøre grensesnittet enklere å bruke ved at:
+- Skjemafeltet har tilknyttete etiketter, slik at det er tydelig hva brukeren skal skrive inn eller velge.
+- Interaktive elementer har synlig fokus ved tastaturnavigasjon.
+- Og at hvis søket og filtrene ikke gir noen treff, vises en melding som informerer brukeren om at ingen album ble funnet, med forslag om å endre søket eller filtrene.
+
+### Design og Styling
+Stylingen er implementert med CSS. Vi har brukt en spesifikk fargepalett og fontene Clash Display og Archivo for å skape et tydelig visuelt hierarki mellom overskrifter og vanlig tekst. Layouten bruker blant annet CSS Grid og Flexbox for å organisere albumkort og grensesnittelementer. 
 
 ## Branching-strategi