Skip to content

Clemens/readme komponent #87

Merged
merged 2 commits into from
Sep 18, 2026
+18 −6
Merged

Clemens/readme komponent #87

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd285dc
oppdaterte komponent beskrivelse i readme
Sep 18, 2026
dc15458
oppdaterte komponent beskrivelse i readme
Sep 18, 2026
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
24 changes: 18 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,6 @@ TreningPreview, SortfilterBar og MovieDetails har ingen egne tester som det stå
│   ├── MovieDetails.tsx
│   ├── MovieList.css
│   ├── MovieList.tsx
│   ├── PersonList.tsx
│   ├── SearchField.css
│   ├── SearchField.tsx
│   ├── Section.css
Expand All @@ -237,7 +236,6 @@ TreningPreview, SortfilterBar og MovieDetails har ingen egne tester som det stå
│   ├── useMediaQuery.ts
│   ├── useMovieCredits.ts
│   ├── useMovies.ts
│   ├── usePeople.ts
│   └── useSessionStorage.ts
├── layout
│   ├── FavoritesLayout.tsx
Expand Down Expand Up @@ -296,6 +294,20 @@ Hjerteknappen som markerer en film som favoritt. Eier ingen state selv, men får

Detaljvisningen som legger seg over siden når man åpner en film. Viser backdrop, tittel, utgivelsesdato, vurdering, sammendrag og skuespillere, og henter skuespillerne via `useMovieCredits` på samme måte som kortet — så cachen deles og det blir ikke et nytt kall.

###### SortFilterBar.tsx + SortFilterBar.css
Raden med sorteringsvalg og minimumsvurdering, vises på søkesiden. En
nedtrekksmeny og en slider, begge egenutviklet uten tredjepartsbibliotek.
Komponenten eier ingen state selv, den får verdier og callbacks som props fra
App.tsx. Selve sorteringen skjer i sortAndFilterMovies, ikke her.

###### TrendingPreview.tsx + TrendingPreview.css
Banneret øverst på forsiden. Viser én film om gangen med pil til venstre og
høyre, og bytter automatisk hvert femte sekund. Tre bilder ligger side om side i
en track som flyttes med translateX, så overgangen blir en glidende animasjon i
stedet for et hopp. Klikk midt på banneret åpner detaljvisningen. Pilene og
midtfeltet er button-elementer med aria-label, siden de ikke har synlig tekst.


#### hooks

###### useMovieCredits.ts
Expand Down Expand Up @@ -449,18 +461,18 @@ KI er brukt til:

Erfaringer:

KI var klart best på feilsøking. Flere av feilene vi hadde var slik at ingenting skjedde i det hele tatt, og det er nesten umulig å google. Da var KI en super hjelp da den kunne få en bedre oversikt over filene noe i til tider ikke fikk til.
KI var klart best på feilsøking. Flere av feilene vi hadde var slik at ingenting kom opp i terminal, og det er nesten umulig å google. Da var KI en super hjelp da den kunne få en bedre oversikt over filene noe som var fint når vi var flere som jobbet samtidig.

Jeg tok med først god tid til å fortså kode som KI foreslo slik at jeg fikk utbytte av lærestoffet og ikke bare kopierte og limte inn koden. Det å få Claude til å forklare koden til meg først hjalp også meg med å kunne gjøre små endringer senere uten bruk av KI samt å kunne justere koden til KI før jeg pushet og merget det til main.
Jeg tok med først god tid til å fortså kode som KI foreslo slik at jeg fikk utbytte av lærestoffet og ikke bare kopierte og limte inn koden. Det å få Claude til å forklare koden til meg først hjalp også meg med å kunne gjøre små endringer senere uten bruk av KI, samt å kunne justere koden til KI før jeg pushet og merget det til main.

Claude var en stor hjelp i spesielt CSS. Dette merket jeg da vi alle skulle gjøre våre egen CSS som ikke laget veldig fin sammenhengende CSS gjennom nettsiden. Jeg kunne da benytte meg av å screenshotte endringer som noen andre gjorde på nettsiden og få claude til å gi forklag til CSS som kunne passe. Dette brukte jeg til å kopiere CSS fra MovieCard til å lage CSS på Sidebar.
Claude var en stor hjelp i spesielt CSS. Dette merket jeg da vi alle skulle gjøre våre egen CSS som ikke laget veldig fin sammenhengende CSS gjennom nettsiden. Jeg kunne da benytte meg av å screenshotte endringer som noen andre gjorde på nettsiden og få claude til å gi en forklaring til CSS som kunne passe. Dette brukte jeg til å kopiere CSS fra MovieCard til å lage CSS på Sidebar.

Det som ikke var like bra ved bruk av KI var når den ville gjøre veldig store endringer og den ville endre kode til mine gruppe medlemmer. Her måtte jeg gjøre flere små endringer istedet og passe på at den holdt seg innenfor rammene til "issuet" som jeg skulle løse på den branchen og ikke bare gi meg masse tips til ting som ikke var relevant til det jeg jobbet med.

Når jeg hadde problemer med min personlige kode, spurte jeg Claude også om å gi meg flere alternativ til problemet og ikke bare ett sett med kode. Dette lærte meg nyansene og de forskjellige måtene jeg kunne håndtere feil i koden på, uten å føle at KI gjorde alt for meg.

Ki hjalp også med testene. Det å la KI hjelpe ved lagingen hjalp oss også med å finne ekte feil i koden. Vi merket da at MovieList manglet key, og MovieCard sender en tom streng som src når en film ikke har plakat. Begge ga advarsler som var nyttige for å feilsøke og fikse.

Det å la KI hjelpe ved lagingen av testene hjalp oss også å finne ekte feil i koden. Vi merket da at MovieList manglet key og MovieCard sender en tom streng som src når en film ikke har plakat. Begge ga advarsler som var nyttige.


#### Albert
Expand Down