From ed2fd894d615aba6165bee9d496b5098fc9ee35e Mon Sep 17 00:00:00 2001 From: Jirachal Date: Fri, 16 Oct 2026 22:09:12 +0200 Subject: [PATCH] update frontend README (Closes #61) --- README.md | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 0bf103f..97d271e 100644 --- a/README.md +++ b/README.md @@ -163,46 +163,60 @@ Kun én backendprosess skal bruke port 3001. Det skal derfor ikke startes en eks ## 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. +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 artister eller albumtitler, filtrere resultatene og åpne et spesifikt album for mer detaljert informasjon. 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 albumvisning, søkefelt, filtre og detaljvisning. Vi har også jobbet med design og tilgjengelighet, blant annet visuell utforming og synlig fokus ved tastaturnavigasjon på katalogsiden. ### 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. +Katalogsiden er hovedsiden for å utforske album. Den henter albumdata fra GraphQL-backenden og viser resultatene 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 filtrene, sendes en ny forespørsel til backenden og visningen oppdateres med de nye resultatene. ### 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. +Søkefeltet lar brukeren søke etter album basert på tittel eller artist. Søket 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. +For å unngå å sende unødvendig mange GraphQL-forespørsler for hvert tastetrykk, brukes debounce før søket sendes til backenden. Selve søket utføres dermed mot hele datasettet i databasen, og ikke bare på albumene som allerede er lastet inn i frontend. ### 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. +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. Filtreringen utføres i databasen slik at hele datasettet tas med i resultatet. Det er også mulig å fjerne filtrene for å gå tilbake til en bredere visning av katalogen. I tillegg til det kan filterpanelet skjules for å gi mer plass til albumene. +Det er også klargjort design for filtrering etter brukervurdering, men funksjonaliteten implementeres senere når brukerdata er på plass. ### 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. +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 coverbildet 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. +Katalogen bruker backend-paginering for å dele resultatet inn i mindre sider, slik at frontend ikke trenger å hente hele albumkatalogen på én gang. Antallet album per side bestemmes av om filterpanelet er synlig. Frontend sender 'first' og 'after' gjennom GraphQL-spørringen. 'first' bestemmer hvor mange album som skal hentes, mens 'after' brukes som offset for hvor neste del av resultatsettet skal starte. +GraphQL-responsen inneholder også 'totalCount', 'endCursor' og 'hasNextPage', som frontend bruker til å styre navigasjonen mellom sidene. +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. Gjeldende 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. +Applikasjonen bruker React Router til å navigere mellom katalogsiden og detaljsiden for et album. Katalogen ligger på /, mens albumdetaljer vises gjennom en rute på formen: +```text +/album/:id +``` +Når brukeren åpner et album, brukes albumets ID til å hente informasjon om det aktuelle albumet gjennom GraphQL. +Dette gjør det mulig å åpne en egen side for et valgt album uten å samle all funksjonaliteten i én komponent. + +### Loading og feiltilstander +Apollo Client brukes til å håndtere loading- og error-tilstander når frontend kommuniserer med GraphQL-backenden. + +Dette gjør at brukeren får tilbakemelding mens data lastes, og at frontend kan vise en feilmelding dersom forespørselen til backenden ikke kan gjennomføres. ### 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. +Vi har prøvd å gjøre grensesnittet enklere å bruke ved at: +- Skjemafeltet har tilknyttede 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. +Tilgjengelighet er foreløpig hovedsakelig implementert på katalogsiden. Albumdetaljsiden skal videreutvikles i neste innlevering. -### Design og Styling +### 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. +Design og layout skal videreutvikles i neste innlevering, spesielt på albumdetaljsiden. ## Branching-strategi