From b38bbeef82e2fcc9cf49536b6d49667b8284c593 Mon Sep 17 00:00:00 2001 From: johannes Date: Fri, 18 Sep 2026 13:51:01 +0200 Subject: [PATCH] La til i readme! --- README.md | 34 +++++++++++++++++++++++------ info.txt | 61 ----------------------------------------------------- src/App.css | 8 +++++++ src/App.tsx | 14 ++++++++++++ 4 files changed, 50 insertions(+), 67 deletions(-) delete mode 100644 info.txt diff --git a/README.md b/README.md index 5f7d97b..a5c216b 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Forsiden viser en hero-karusell med trending filmer, og seksjoner for populære 2. [vm](#vm) 3. [api](#api) 4. [testing](#testing) -5. [prosjetkstruktur](#prosjektstruktur-komponenter-hooks-layout-types) +5. [prosjektstruktur](#prosjektstruktur-komponenter-hooks-layout-types) 6. [Valg?](#vet-ikke-hvor-dette-bør-stå) 7. [Bruk av Ki](#bruk-av-ki) @@ -57,8 +57,22 @@ Prosjektet kan bygges med kommandoen `pnpm run build`. Dette vil bygge prosjekte Prosjektet kan testes med kommandoen `pnpm test:run`. +#### Linting og kodekvalitet + +Fra prosjektbeskrivelsen er det krav om "ingen feilmeldinger eller advarsler ved linting", og at koden skal formatteres med `prettier`. + +Dette kan sjekkes med følgende kommandoer: +```bash +# sjekk linting +pnpm lint + +# sjekk formatting, og evt. formatter koden +pnpm format:check +pnpm format +``` + > [!NOTE] -> Prosjektet forventer en api-token i en lokal `.env`-fil. Se _API_-seksjonen under. +> Prosjektet forventer en api-token i en lokal `.env.local`-fil. Se _API_-seksjonen under. ## vm @@ -120,6 +134,13 @@ Når man har lagt inn denne skal prosjektet kunne kjøre lokalt, og api-kall ska > API token har kun lese-rettigheter, men bør fortsatt ikke være offentlig. > Filen `.env.local` er derfor lagt til i `.gitignore`. +> [!NOTE] +> Vi vurderte å sette opp en reverse-proxy på serveren for å skjule api-token helt, men dette +> ble unødvendig komplekst for prosjektets omfang. Fordi Vite bygger inn alle 'Vite_'-prefikser inn i +> prosjektfilene vli api-tokenet teknisk sett være synlig for alle som inspiserer api-kallene. +> Vi anser risikoen som lav i dette tilfellet ettersom serveren kjører på en VM på ntnu sitt låste nettverk +> og siden api-token kun gir leser-tilgang. Verste tilfelle ved en lekkasje er at vi må rotere api-token. + ## testing I dette prosjektet bruker vi _Vitest_ med jsdom og React Testing Library. Disse kjøres med: @@ -220,7 +241,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 @@ -237,7 +257,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 @@ -248,7 +267,6 @@ TreningPreview, SortfilterBar og MovieDetails har ingen egne tester som det stå ├── types │   └── tmdb.ts └── utils - ├── sortAndFilterMovies.test.ts └── sortAndFilterMovies.ts ``` @@ -344,7 +362,7 @@ Favorittsiden. Får `favoriteIds` inn og henter filmene på nytt via En ren funksjon uten side-effekter som tar inn en liste med filmer, sorteringsvalg og minimumsvurdering, og returnerer en ny, filtrert og sortert liste. Fordi funksjonen er ren (samme input gir alltid samme output, og den endrer ikke noe utenfor seg selv), er den enkel å enhetsteste isolert med Vitest, uten å måtte mocke React eller komponenter. -# Vet ikke hvor dette bør stå +# Valg vi har gjordt i prosessen ## Sortering og filtrering @@ -393,6 +411,10 @@ I **Detaljvisningen** blir fokus flyttet inn i dialogen ved åpning, og Escape l Fokus flyttes inn i dialogen ved åpning og tilbake til kortet den ble åpnet fra ved lukking, og en fokusfelle holder Tab inne i dialogen så lenge den er åpen. Escape lukker, slik at den kan forlates uten mus. `body.modal-open` låser scroll bak overlayet. Ellers brukes semantiske elementer gjennomgående — `
` `
` per filmkort og `

`/`

` i riktig rekkefølge — slik at overskriftsnavigasjon i en skjermleser gir en meningsfull struktur. +## Git-arbeidsflyt +Gjennom hele prosjektet har vi forsøkt å bruke git i henhold til anbefalingene som ligger på canvas. Vi har i hovedsak opprettet en ny lokal branch hver gang vi skal jobbe, og så push-et endringene opp til ny branch på github, og sammen gått gjennom endringer og godkjent pull-request. + +Det var mye usikkerhet i starten hvordan vi var ment å bruke git, bl.a. angående `issues`. Dette begynte vi å benytte litt senere i prosjektet for å holde oversikt over hvilke oppgaver som fortsatt måtte gjøres. ## Kjente begrensninger diff --git a/info.txt b/info.txt deleted file mode 100644 index 181feea..0000000 --- a/info.txt +++ /dev/null @@ -1,61 +0,0 @@ -Kilden min er prosjektbeskrivelsen du limte inn fra Canvas, pluss dokumentasjonskravene du sendte senere. Jeg har ikke tilgang til Canvas selv, så finnes det en egen rubrikk der som ikke står i den teksten, kjenner jeg ikke til den. - -Eksplisitte krav, direkte sitert - -"Dokumentasjon i form av readme på GitHub som dokumenterer og forklarer valg, dokumenterer hva som er testet." -"Ta utgangspunkt i at dokumentasjonen skal være forklarende for medstudenter og nyttig info for den som skal evaluere." -"I starten av readme-fila skal dere legge inn en lenke til webappen som er installert på vm." -"Alle skal dokumentere bruk av KI enten dere har benyttet det eller ikke. Vi er ute etter hvordan dere har brukt KI, og gjerne en oppsummering av erfaringer." - -Vurderingskriterier som treffer README-en - -"Reproduserbarhet: prosjektet skal være dokumentert og enkelt å installere/kjøre for andre (eksempelvis faglærer)." -"God dokumentasjon som forklarer valg og løsninger, husk å dokumentere bruk av KI." - -Punkt 5 er det eneste kriteriet der README-en alene avgjør om dere består det. Får ikke faglærer kjørt prosjektet fra det som står der, er kriteriet ikke innfridd uansett hvor bra koden er. - -Hva det betyr konkret - -VM-lenke helt øverst, før alt annet -Hva appen gjør og hvilket API den bruker -Installasjon som faktisk fungerer for en som aldri har sett repoet: pnpm install, .env.local med VITE_TMDB_TOKEN, hvor man skaffer tokenet, at det må være v4 og ikke v3, pnpm dev -Kommandoene: dev, build, lint, test, format -Hva som er testet: hvilke nettlesere, hvilke enheter, og hva de automatiske testene dekker -Forklaring av valg og løsninger, ikke bare hva som finnes. "Vi bruker sessionStorage til sortering og localStorage til favoritter, fordi kravene beskriver to ulike varigheter" er en forklaring. "Vi bruker Web Storage" er det ikke. -KI-bruk per person, pluss en oppsummering av erfaringer - -Det som ikke er krav nå - -"Dokumentasjonen skal beskrive hva som er forbedret siden første innlevering" gjelder sluttvurderingen i desember, ikke i morgen. - -Alt dette har du tekst til fra tidligere i dag, bortsett fra VM-lenka og lista over nettlesere og enheter dere faktisk har testet påKilden min er prosjektbeskrivelsen du limte inn fra Canvas, pluss dokumentasjonskravene du sendte senere. Jeg har ikke tilgang til Canvas selv, så finnes det en egen rubrikk der som ikke står i den teksten, kjenner jeg ikke til den. - -Eksplisitte krav, direkte sitert - -"Dokumentasjon i form av readme på GitHub som dokumenterer og forklarer valg, dokumenterer hva som er testet." -"Ta utgangspunkt i at dokumentasjonen skal være forklarende for medstudenter og nyttig info for den som skal evaluere." -"I starten av readme-fila skal dere legge inn en lenke til webappen som er installert på vm." -"Alle skal dokumentere bruk av KI enten dere har benyttet det eller ikke. Vi er ute etter hvordan dere har brukt KI, og gjerne en oppsummering av erfaringer." - -Vurderingskriterier som treffer README-en - -"Reproduserbarhet: prosjektet skal være dokumentert og enkelt å installere/kjøre for andre (eksempelvis faglærer)." -"God dokumentasjon som forklarer valg og løsninger, husk å dokumentere bruk av KI." - -Punkt 5 er det eneste kriteriet der README-en alene avgjør om dere består det. Får ikke faglærer kjørt prosjektet fra det som står der, er kriteriet ikke innfridd uansett hvor bra koden er. - -Hva det betyr konkret - -VM-lenke helt øverst, før alt annet -Hva appen gjør og hvilket API den bruker -Installasjon som faktisk fungerer for en som aldri har sett repoet: pnpm install, .env.local med VITE_TMDB_TOKEN, hvor man skaffer tokenet, at det må være v4 og ikke v3, pnpm dev -Kommandoene: dev, build, lint, test, format -Hva som er testet: hvilke nettlesere, hvilke enheter, og hva de automatiske testene dekker -Forklaring av valg og løsninger, ikke bare hva som finnes. "Vi bruker sessionStorage til sortering og localStorage til favoritter, fordi kravene beskriver to ulike varigheter" er en forklaring. "Vi bruker Web Storage" er det ikke. -KI-bruk per person, pluss en oppsummering av erfaringer - -Det som ikke er krav nå - -"Dokumentasjonen skal beskrive hva som er forbedret siden første innlevering" gjelder sluttvurderingen i desember, ikke i morgen. - -Alt dette har du tekst til fra tidligere i dag, bortsett fra VM-lenka og lista over nettlesere og enheter dere faktisk har testet på.. diff --git a/src/App.css b/src/App.css index c63ec63..a35191b 100644 --- a/src/App.css +++ b/src/App.css @@ -24,6 +24,7 @@ padding-left: 16px; padding-right: 16px; gap: 16px; + flex: 1; } .page > main { @@ -34,3 +35,10 @@ display: none; /* en tom kolonne er bortkastet plass på mobil */ } } + +.footer { + border-top: 1px solid var(--border); + padding: 16px; + margin-top: auto; + font-size: 0.75em; +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index da98589..7c5187d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -59,6 +59,7 @@ function App() { ); return ( + <>
+ + + + + + ); + } + export default App;