Skip to content

fix and update url and readme #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SylviaSWYung merged 1 commit into from
Dec 8, 2025
Merged

fix and update url and readme #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
258 changes: 4 additions & 254 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,6 @@
# PokéBase

Lenke til nettsiden vår: http://it2810-01.idi.ntnu.no/project1

> [!IMPORTANT]
> Les [Andre relevante informasjon](#andre-relevante-informasjon) på hvorfor vi har dev branch som default, og ikke main branch.

## Innholdsfortegnelse

- [PokéBase](#pokébase)
- [Innholdsfortegnelse](#innholdsfortegnelse)
- [PokéBase](#pokébase-1)
- [Projektet er utviklet av:](#projektet-er-utviklet-av)
- [Projectstruktur - TODO UPDATE](#projectstruktur---todo-update)
- [Funksjonalitet](#funksjonalitet)
- [Presentasjon av ressurser](#presentasjon-av-ressurser)
- [Filtrering \& Sortering](#filtrering--sortering)
- [Favorisering](#favorisering)
- [Responsiv design](#responsiv-design)
- [Estetisk \& Ryddig utforming](#estetisk--ryddig-utforming)
- [Teknologier](#teknologier)
- [Arkitektur \& Valg](#arkitektur--valg)
- [Hvordan kjøre kode](#hvordan-kjøre-kode)
- [Testing](#testing)
- [Kvalitetssikring av kode:](#kvalitetssikring-av-kode)
- [Bruk av KI:](#bruk-av-ki)
- [Endringer gjort etter medstudentvurderingen - oppdatert 19.11.25](#endringer-gjort-etter-medstudentvurderingen---oppdatert-191125)
- [REST API](#rest-api)
- [HTML, CSS, \& Typescript](#html-css--typescript)
- [Dokumentasjon](#dokumentasjon)
- [Responsivt Design](#responsivt-design)
- [Utforming \& Stiling](#utforming--stiling)
- [Web Storage API](#web-storage-api)
- [Bruk av Git](#bruk-av-git)
- [Utforming \& Interaksjon](#utforming--interaksjon)
- [React](#react)
- [Testing](#testing-1)
- [Andre relevante informasjon](#andre-relevante-informasjon)
Lenke til nettsiden vår: https://pokebase-ntnu.vercel.app/

## PokéBase

Expand All @@ -51,221 +16,6 @@ Brukeren blir møtt med en hjemmeside hvor man blir presentert med ulike Pokémo
- Gustav Skrefsrud, <gustaskr@stud.ntnu.no>
- Nicolay Emil Fremstad Løvlie, <nelovlie@stud.ntnu.no>

## Projectstruktur - TODO UPDATE

```
T01-Project-1/
├── .github/ # GitHub-relaterte filer for samarbeid og CI
| ├── workflows/ # CI pipeline for prosjektet byggetester og deploy
| ├── CODEOWNERS # CODEOWNERS fil for PR
| ├── ISSUE_TEMPLATE.md # Standard mal for issue
| └── PULL_REQUEST_TEMPLATE.md # Standard mal for PR
├── public/ # Diverse favicon, og bilder
├── src/ # Frontend React-applikasjon
| ├── _mock_/ # Mock data for testing
| ├── _test_/ # Testmappe
| ├── api/ # Fetching av pokeApi
| ├── assets/ # Bilder, og andre mediefiler
| ├── lib/ # Hjelpefunksjoner og konfigurasjoner
| | ├── context/ # Context funksjoner
| | └── hooks/ # React-hooks
| ├── pages/ # Sidekomponenter
| ├── components/ # React-komponenter
| | ├── Buttons/ # Komponenter for alle knapper
| | ├── InfoCard/ # Pokemon komponent
| | ├── Placeholder/ # Placeholder komponenter
| | └── Pagination/ # Pagination for hjemmesiden
| ├── App.tsx # Hovedkomponent for hele applikasjonen
| ├── index.css # Globale CSS-styling
| └── main.tsx # Inngangspunkt for rendrer React-applikasjonen
├── package.json
├── REVIEWS.md # Markdown fil fra foreleser med generert medstudentvurdering
└── README.md
```

## Funksjonalitet

### Presentasjon av ressurser

- Brukeren blir presentert 9 ulike pokemon på hovedsiden, og muligheten til å bytte side
- Brukeren får presentert en utvalg pokemon ved å klikke på "learn more"
- Brukeren kan bla seg frem og tilbake
- Ved å søke på en pokemon, så kan brukeren hoppe til en spesifikk pokemon
- Brukeren kan også klikke på lyd knappen på de utvalgte pokemonene

### Filtrering & Sortering

- Brukeren kan filtrere pokemon etter type
- Brukeren kan sortere etter alle pokemon eller kun favoriserte pokemon
- Sortering og filtrering påvirker utvalget som blir presentert
- Valgene huskes ved reload

### Favorisering

- Brukeren kan favorisere en pokemon ved å klikke på et hjerte
- Valgene huskes selv om nettleseren avsluttes og startes igjen
- Favoriserte pokemon presenteres på "show favorites"

### Responsiv design

- Siden er designed med mobil-til-laptop tankegang.

### Estetisk & Ryddig utforming

- Nettsiden har en stilren og ryddig utforming
- Nettsiden er inspirert av figma designet til Ray: [figma link](https://www.figma.com/community/file/1408359114495724061). Men designet er tilpasset for å dekke kravene for faget. Slike tilpasninger er søkefunksjon, hvordan type presenteres i mobil versjon og diverse informasjon som presenteres i information siden.

Basert på valgene en bruker tar, vil ulike Pokémon bli presentert. Valgene blir også husket når siden reloades ved hjelp av SessionStorage. Dette innebærer følgende valg:

- Å velge pokémontyper for filtrering
- Å søke i søkefeltet
- Å bytte side for listen av pokémons
- Å filtrere på favoritter

## Teknologier

- `React` – for å lage komponentbasert UI
- `TypeScript` – for type-sikkerhet
- `Vite` – som byggverktøy for rask utvikling
- `Vitest` – for enkle enhetstester
- `TanStack Query` – for effektiv datahåndtering, caching og API-kall

## Arkitektur & Valg

- **TanStack Query**: Valgt for enkel håndtering av asynkrone API-kall, caching og state management knyttet til serverdata.
- **Responsiv design**: Bruk av CSS Flex, Grid og media queries for at komponentene skal tilpasse seg skjermstørrelse. Dette er slik at komponetene alltid ligger riktig uavhengig av enhet.
- **Gjenbrukbare komponenter**: Alle UI-elementer som knapper, piler, kort og typeknapper er egne komponenter for enklere vedlikehold og gjenbruk.
- **LocalStorage for favoritter**: Valgene brukeren gjør (favoritter) blir husket ved reload ved hjelp av LocalStorage.
- **SessionStorage for hele hjemmesiden**: Hva enn brukeren gjør på hjemmesiden, vil bli husket når den reloades.

## Hvordan kjøre kode

For å kjøre prosjektet lokalt, kjør følgende kommando på root nivå:

```bash
npm run dev
```

## Testing

Vitest brukes som test-rammeverk. Testene ligger i `__tests__`-mappen.

- **ArrowLeft**: Tester at komponentet renderer riktig og navigerer til riktig id når trykket på.
- **ArrowRight**: Tester at komponentet renderer riktig og navigerer til riktig id når trykket på.
- **BackButton**: Tester at knappen renderer riktig og at den redirecter tilbake til hjemmesiden når den klikkes på.
- **Favoritter**: Tester at favoritter lagres og hentes korrekt fra LocalStorage.
- **FilterButton**: Tester at knappen renderer riktig og at klikk kaller på onToggle.
- **Header**: Tester at headeren renderer logoen riktig.
- **Header-komponent**: Testet at navigasjonselementene fungerer og renderes riktig.
- **HeartIcon**: Testet at hjertet kan toggles og oppdaterer favorittstatus riktig.
- **Homepage**: Testet at Pokémon-kort rendres riktig, at filtrering og søk fungerer.
- **Informationpage**: Tester om siden renderer komponenentene (PokeInfo, BackButton, ArrowLeft og ArrowRight). At BackButton redirecter tilbake til hjemmesiden når den blir trykket på.
- **Pagination**: Tester at pagination komponentet renderer riktig med knapper og tekst. Tester at man blir sendt til neste eller forrige side når knappene blir trykket på og at knappene disables i ulike scenarioer.
- **PokeAPI**: Testet at API-kall returnerer forventet data, og fallback fungerer ved feilmelding.
- **PokeInfo**: Testet at alle felter vises korrekt, og at api kall fungerer.
- **PokeCard**: Tester at kortene renderer riktig, at å favoritisere på kortet fungerer som det skal og at å klikke på 'learn more' knappen fungerer.
- **PokeListContainer**: Tester om containeren renderer med listen av pokémons riktig både som default, under filtrering og når man vil se listen av favoritter. I tillegg tester den at en loading message kommer under filtrering.
- **Searchbar**: Testet at søk filtrerer listen korrekt.
- **TypeButton**: Testet at filtrering basert på type fungerer som forventet.
- **TypesButtonsContainer**: Testet at containeren renderer riktig og håndterer flere typevalg.
- **useSessionStorage**: Tester at SessionStorage fungerer.

Vi har også benyttet snapshot-testing, men ikke på alle komponenter. Etter diskusjoner med ChatGPT og studass, har vi valgt å snapshot-teste utvalgte komponenter fremfor alle. Å teste alt kan føre til mange falske positive feilmeldinger ved små, ikke-funksjonelle endringer, og gjør vedlikeholdet mer tungvint. Snapshot-tester bør heller ikke brukes på komponenter der utseendet eller strukturen er kritisk for funksjonaliteten, mens mindre eller dekorative komponenter kan testes med enklere interaksjonstester. Dette gir mer robuste og meningsfulle tester som faktisk fanger reelle problemer. Før vi tok denne beslutningen, testet vi eksempelvis BackButton, ArrowRight og ArrowLeft, og har derfor besluttet å ikke teste komponenter som HeartIcon og andre små elementer.

Vi har valgt å manuelt teste responsiviteten ved å bruke nettleserens Inspect Mode og justere ulike skjermstørrelser. I tillegg har vi testet applikasjonens responsivitet på egne mobile enheter ved å kjøre prosjektet lokalt med kommandoen `npm run dev -- --host`, og deretter åpnet network URL-en på telefonen.

For å kjøre testene kjør følgende kommando fra root mappen:

```bash
npm run test
```

## Kvalitetssikring av kode:

Gruppa har implementert en rekke metoder for å kunne kvalitetssikre koden i prosjektet løpende under utvikling. Dette innebærer at alle medlemmene blir automatisk satt som reviewer når en pull-request blir lagd. Grunnen til dette er fordi vi mener alle medlemmene i gruppa har kunnskapen til å gi gode og krtitiske vurderinger av andres kode. I kombinasjon med dette har vi lagt til en rule i github repoen slik at endringer ikke kan merges inn i dev-branchen uten å ha hatt en reviewer approvet den.

Andre metoder vi har brukt for å kvalitetsikre koden er bruk av en CI pipeline. Denne CI pipelinen er for å sjekke at koden kan installere dependencies, builder, at testene kjører gjennom og at både linting og prettier checks går igjennom. Dette er for å sikre kvaliteten på koden alltid er opp til våre standarder. Pipelinen bruker runners som kjører på gruppas virtuelle maskin.

## Bruk av KI:

I prosjektet har vi brukt kunstig intelligens gjennom ChatGPT til flere formål, blant annet for å ta stilling til valg: slik som det å forklare hvordan vi benytter TanStack Query, og illustrere hvordan vi bruker snapshots. Vi har kvalitetssikret informasjonen og forslagene fra ChatGPT ved å dobbeltsjekke dokumentasjon for teknologiene vi bruker, samt gjennomført research og diskutert med foreleser og studass. Ved å bruke ChatGPT på en strukturert og gjennomtenkt måte har vi kunnet lære mye, samtidig som vi har skrevet kode som fungerer godt og gir et profesjonelt og ryddig resultat i prosjektet. I tillegg er code review essensielt, da det sikrer at koden følger standarder satt i gruppen.

## Endringer gjort etter medstudentvurderingen - oppdatert 19.11.25

Alle endringene som er nevnt nedenfor, er basert på tilbakemeldinger fra medstudenter. Emneansvarlig har generert en egen fil, [REVIEWS.md](./REVIEWS.md), som gir en oversikt over disse tilbakemeldingene. Under er de tilhørende løsningene for tilbakemeldingene.

> [!NOTE]
> Det har blitt lagt `releases` slik at man har muligheten til å se kodebasen før og etter medstudentvurdering. Tag V1 er innlevering 1 før medstudentvurdering. Tag V2 er endelig levering etter endringer fra medstudentvurderingen.

### REST API

- **Feilhåndtering og mer informative feilmeldinger**: Delt opp `pokeApi.ts` til `apiError.ts` og `apifetch.ts`
- **Bedre utnyttelse av TanStack Query**: Benytte flere av TanStack Query sitt bibliotek. Løsningen er å implementere staleTime, gcTime (tidligere cacheTime), retry + retryDelay, og refetchOnWindowFocus.
- **Sentralisere fetch logikk for mindre duplikasjon**: Alle API-kall går nå gjennom apifetch.ts sin safeFetchJson.

### HTML, CSS, & Typescript

- **Tilgjengelighet & Aria konsistens**: Lagt til Aria-label på komponenter som mangler, samt passet på at hjerte ikon, samt pilene i informationpage er mulig å tabbe.
- **CSS konsistens (enheter og variabler)**: Har implementert globale variabler i index.css, og erstattet enkelte px-verdier med rem for bedre skalerbarhet og enhetlig stil.
- **TypeScript-abstraksjoner og plassering av datahenting**: useSessionStorage hooken har blitt redusert og refaktorert.
- **Manglende kommentarer og dokumentasjon i koden**: Passet på at alle komponentfilene inneholder kommentarer dersom koden ikke er intuitiv.
- **Feil ved oppdatering på Pokemon-siden**: Løst ved å konfiguere Apache for React Router.

### Dokumentasjon

- **Manglende oppstart- og innstallasjonsinstruksjoner**: Lagt inn [Hvordan kjøre kode](#hvordan-kjøre-kode) seksjon i README filen
- **Manglende innholdsfortegnelse i README**: Lagt inn [innholdfortegnelse](#innholdsfortegnelse) i README filen
- **Manglende oppsummering av manuell testing for responsivt design**: Lagt inn et avsnitt under [testing](#testing) som forklarer hvorfor vi ikke har valgt å ha manuelle testere som tester responsivt design.
- **Mangler arkiktetur oversikt**: Lagt inn et [arkitektur](#projectstruktur---todo-update) i README filen.

### Responsivt Design

- **Mangler hopp knapp for side navigasjon**: Dette ble løst ved å implementere paginering med valgt sidenummer.
- **Ujevn justering ved vindusstørrelses endring**: Dette løste seg ved å endre på css som nevnt i seksjonen om [HTML, CSS & Typescript](#html-css--typescript).
- **Popup for filtrering mangler litt padding i bunnen**: Ved å kjøre koden lokalt på både mobil og pc, fant vi ut at dette var noe vi ikke trengte å fikse da vi syns det ikke trengte mer padding i bunnen. Vi følte denne tilbakemeldingen var litt smak og behag for hvert enkelt person.

### Utforming & Stiling

- **Manglende pokemon-bilder og manglende fallback/hover respons**: Lagt til "Image not available" som fallback slik at det alltid vises noe. Lagt til "loading" shimmer på card og img komponenter, slik at brukeren vet at bildene lastes inn
- **Duplikat tittel på mobil**: Fjernet ekstra logo på hjemmesiden
- **Type-filter vanskelig å lese på PC**:
- **Design virker hentet fra eksisterende PokeDex**: Vi forklarer allerede på README at det ble inspirert, og at vi har tilpasset den for å kunne passe til de funksjonelle kravene. Det ble heller ikke nevnt i prosjektbeskrivelsen at det skal være en original og egen inspirert design valg.

### Web Storage API

- **Uavklart lagring av favoritter (localStorage vs sessionStorage)**: Vi har allerede forklart i tidligere README at favoritter er lagret i localStorage, vi antar usikkerheten om favoritter ble lagret i sessionStorage eller localStorage er grunnet en misforståelse, da 7/8 medstudentvurderinger nevner at favoritter er lagret i localStorage
- **Utvidelse av hva som lagres i nettleserlagring**: Vi har bestemt oss for å ikke implementere mer data i localStorage, dette er grunnet at størrelsen på prosjektet er relativt lite der vi føler lagring av favoritter er nok. Dette kunne vært relevant dersom vi hadde mer funksjonalitet som brukere og kommentarer.
- **Tidligere kritikk av implementasjonen av sessionStorage**: useSessionStorage hooken er refaktorert slik at den både er enklere implementert ved å fjerne unødvendig synkroniseringslogikk og mer tilpasset prosjektets rammer og behov.

### Bruk av Git

- **Utdypende og mer spissende issue-beskrivelser**: Implementerte en template for både PR og issue.
- **Konsistent bruk av labels og prioirtieringsgrad**: Lagt til labels og der det er nødvendig med prioriteringsgrad på issuene etter medstudentvurdering.
- **Manglende tildeling av ansvarlige på noen issues**: Vi har assignes på alle issuer etter medstudentvurdering.

### Utforming & Interaksjon

- **Manglende tom tilstand og irrelevante kategorier**: Lagt til "melding" boks med informasjon dersom brukeren filtrerer for favoritter uten å ha lagt til noen favoritter tidligere. Fjernet type-kategorier som ikke hadde pokémons i seg.
- **Mulighet for å velge flere enn to typer i filteret**: Endret på filtreringslogikk slik at man ikke kan filtrere på mer enn to typer samtidig for å gjenspeile hvordan pokémon bare kan ha maks to typer. Andre type-kategori knapper disables når man har valgt to kategorier og listen av pokémons blir sortert etter pokémons med begge kategoriene først, deretter pokémons som inneholder en av kategoriene.
- **Ingen justering av lydnivå**: Vi har valgt å ikke ta med dette, da lydnivå kan justeres på pcen. Vi følte det var unødvendig å implementere en "lyd justerings" funksjon da det er out of scope for dette prosjektetinnleveringen.

### React

- **Dokumentasjon av egendefinerte hooks og useSessionStorage**: useSessionStorage hooken er refaktorert slik at den både er enklere implementert og med kommentarer. Andre hooks i /hooks mappa har også blitt gitt forklarende kommentarer.
- **Komponenter kan deles opp i mindre og mer gjenbrukebare enheter**: Større komponenter som SearchBar, PokeInfo, TypesButtonContainer og PokeListContainer er refaktorert slik at tung logikk er flyttet ut til egendefinerte hooks. På denne måten blir komponentene mer vedlikeholdbare og testbare. I tillegg er API-kall flyttet ut av komponenter slik at det er tydeligere skille mellom innkapsling og datainnhenting.
- **Produksjonsruting magler SPA-fallback**: Dette ble løst ved å konfigurere Apache for React Router.
- **Tilgjengelighet, feilhåndtering ved API kall og navnekonvensjoner**: Aria labels ble lagt til som nevnt over i [HTML, CSS & Typescript](#html-css--typescript). Vi har vært konsekvente med navnekonvensjoner, og valgt å ha camelCase på css filer, og PascalCase på tsx komponent filer.
- **Forslag om egne mappe for hooks for bedre organisering**:

### Testing

- **Responsivt - manglende automatiske tester og dokumentasjon**: Dette er beskrevet i seksjonen [testing](#testing) siste avsnitt.
- **Mangler tester for produksjonsspesifikke feil**: Dette er nå lagt inn i test filen for `pokeapi.test.ts`

## Andre relevante informasjon

Vi ønsker å presisere at vår opprinnelige plan var å utvikle koden i dev-branchen, og deretter overføre ferdigstilt kode til main. For å støtte denne arbeidsflyten satte vi derfor dev som default.

Siden vi startet prosjektet før gruppene i emnet ble formelt etablert, fikk vi tilgang til et eksisterende repository tidlig i løpet. Da prosjektet offisielt ble startet, ble main satt som standard- og protected branch. Dette skjedde imidlertid etter at vi allerede hadde startet arbeidet i dev. Dette er grunnen til at hoveddelen av prosjektet vårt ligger i dev-branchen.

Vi har avklart dette med emneansvarlig, og valgt å beholde strukturen slik for å unngå konflikter ved endring. I prosjekt 2 vil vi derfor bruke main som default, og forgreine oss videre fra en egen dev-branch.
## Diverse info:
- Pokebase er prosjekt 1 av 2 for emnet IT2810 Webutvikling på NTNU.
- Alt av original informasjon som ble levert for sensurering står fortsatt på [README_Original.md](README_Original.md)
Loading
Loading