IT2810-H26 · jirachal · Oct 15, 2026 · Oct 15, 2026
@@ -1,109 +1,86 @@
-# React + TypeScript + Vite
+# CDLLECTION
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Prosjektet er en fullstack React- og GraphQL-applikasjon som lar brukeren utforske en stor albumkatalog. Brukeren kan søke etter album eller artister, filtrere på sjanger og tiår, samt se detaljert informasjon om enkeltalbum og sporlister. Det er også mulighet for å legge til album i en kolleksjon, slik at brukeren kan se om de eier eller ønsker seg det aktuelle albumet. 
 
-Currently, two official plugins are available:
+*Link til siden:* http://it2810-05.idi.ntnu.no/project2
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+## Innholdsfortegnelse
 
-## Prosjektbeskrivelse (CDllection)
+- [Konsept](#Konsept)
+- [Datasett](#Datasett)
+- [Teknologier](#Teknologier)
+- [Kom i gang](#Kom-i-gang)
+- [Arkitektur og valg](#Arkitektur-og-valg)
+- [Hvor er vi nå](#Hvor-er-vi-nå)
+- [Branching-strategi](#Branching-strategi)
+- [Bruk av KI](#Bruk-av-KI)
 
-### Konsept
+## Konsept
 
-En katalog for musikkalbum, fysisk mediesamling og utgivelser der brukeren kan søke etter album. Søkefeltet kan fileteres ute fra sjanger, vurdering og utgivelsesår. Brukere kan gi vurdering og skrive anmeldelser som andre brukere kan også se. Brukeren kan lagre albumer til favoritter. For brukere som aktiv samler på fysisk media (CD/vinyl), så har de også muligheten til å lagre Albumer utefra om de har kjøpt disse fysisk eller ikke. 
+En katalog for musikkalbum, fysisk mediesamling og utgivelser der brukeren kan søke etter album. Søkefeltet kan fileteres ute fra sjanger, vurdering og utgivelsesår. Brukere kan gi vurdering og skrive anmeldelser som andre brukere kan også se. Brukeren kan lagre albumer til favoritter. For brukere som aktiv samler på fysisk media (CD/vinyl), så har de også muligheten til å lagre Albumer utefra om de har kjøpt disse fysisk eller ikke.  
 
-### Datasett 
+## Datasett
 
-Bruke et poent datasett fra Kaggle (alternativt MusicBrainz) som datakilde for albumkatalogen. Dataen importes en gang med et eget importskript og lagres i vårt egen database for prosjektet. Applikasjonen kaller da ikke eksterne API-er under kjøring. Filterering, søking og sortering skjer mot vår egen database via GraphQL-backenden.
+Bruke et poent datasett fra Kaggle (alternativt MusicBrainz) som datakilde for albumkatalogen. Dataen importes en gang med et eget importskript og lagres i vårt egen database for prosjektet. Applikasjonen kaller da ikke eksterne API-er under kjøring. Filterering, søking og sortering skjer mot vår egen database via GraphQL-backenden. 
 
-- Kilde: https://www.kaggle.com/datasets
+- Kilde: https://www.kaggle.com/datasets 
 
-### Brukergenerte data
+## Teknologier
 
-Dataen til brukeren lagres permanent i databasen: 
+Teknologier tatt i bruk ved oppbyggning av applikasjonen:
+- Vite: Build-verktøy og dev-server for frontend.
+- React 18 + TypeScript: Bygger brukergrensesnittet med komponenter, state og props, mens TypeScript sikrer typesikkerhet på tvers av frontend og backend.
+- Apollo Client (@apollo/client): Håndterer GraphQL-forespørsler, caching og loading/error-tilstander i frontend.
+- Apollo Server (@apollo/server): GraphQL-server basert på Node.js som tilbyr et typesikkert API mot databasen.
+- PostgreSQL & pg: Relasjonsdatabase for lagring av album, artister og spor, koblet opp via en Pool-konfigurasjon for optimal ytelse.
+- Vitest + Testing Library: Brukt for enhetstesting.
+- Plain CSS: All styling er egenutviklet i tråd med prosjektkravet om at UI-komponenter skal lages fra bunnen av.
 
-- Person uten bruker kan filtrere, søke etter album og lese anmeldelser. De kan derimot ikke lagre noe data.  
-- Brukere kan gi vurderinger av album og skrive plateanmeldelser som er da synlig for andre brukere  
-- Brukere kan lagre album i tre forskjellige collection:
-  - "Favorite albums” 
-  - “Own”: her kan brukere lagre albumer de har som fysisk media 
-  - “To Buy”: her kan brukere lagre albumer de ikke har som fysisk media ennå 
+## Kom i gang
 
-### Innlogging 
+## Arkitektur og valg
 
-Det skal være mulig å lage bruker. Man kan fortsatt bruke nettsiden uten bruker, men dette blir da begrensent. Det er kun brukere som kan skrive anmedelser og lagre albumer til samlinger. 
+### Backend, GraphQL og Database 
 
-### Søk, filtrering og interaksjon
+For backend og datalagring har vi valgt en løsning basert på Node.js, TypeScript, Apollo Server og PostgreSQL. 
 
-Brukeren kan søke på enkeltord i søkefeltet. Søket er case-insensitivt og matcher på albumtittel og/eller artistnavn. Søkeresultatet vises som en liste over album som samsvarer med søket, og lastes inn i deler (paginering eller infinite scroll), slik at store resultatsett håndteres effektivt.
+1. Apollo Server & GraphQL API 
 
-Resultatet kan filtreres på utgivelsesår, sjanger og vurdering (1-5 stjerner), og sorteres på for eksempel år, tittel og gjennomsnittsrating. Søk, filtrering og sortering utføres i databasen og gjelder hele resultatsettet, ikke bare det som er lastet inn i nettleseren. Brukeren kan klikke seg inn på et album for å se mer informasjon, blant annet tracklist, artistnavn, utgivelsesdato, sjanger og label. Detaljsiden viser også gjennomsnittsrating og anmeldelser fra andre brukere.
+Apollo Server (@apollo/server): Vi har satt opp et GraphQL-API med Apollo Server for å gi frontend en fleksibel og typesikker måte å hente akkurat den dataen som trengs. 
 
+Skjema og typer (schema): GraphQL-skjemaet fungerer som kontrakten mellom frontend og backend. For spor/låter har vi definert duration som et heltall (Int) i millisekunder (i henhold til MusicBrainz-standarden), slik at frontend selv står fritt til å formatere spilletid til lesbart form («MM:SS»). 
 
-## React Compiler
+2. PostgreSQL og Tilkobling (pg) 
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+Datagrunnlag: Vi benytter PostgreSQL som relasjonsdatabase for å lagre album, artister og spor strukturert. 
 
-## Expanding the ESLint configuration
+Tilkoblingspool (server/src/database/connection.ts): Tilkoblingen håndteres via en gjenbrukbar Pool fra den offisielle pg-pakken. Dette sikrer effektiv ressursbruk og at serveren slipper å opprette nye databasetilkoblinger for hver spørring. 
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+Miljøvariabler (.env): Sensitiv informasjon som database-URL, passord og portnumre er isolert i .env-filer for å unngå at hemmeligheter committes til versjonskontroll. 
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+3. Dynamiske SQL-spørringer i Resolvere 
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+Resolvere (server/src/graphql/resolvers.ts): I stedet for å hente ut alt av data i minnet, bygger resolverne dynamiske SQL-spørringer direkte mot PostgreSQL. 
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+Søk og filtrering: Spørringene støtter kombinering av tekstsøk på tittel/artist (via LOWER() og wildcards), sjangerfilter og intervallspørringer for tiår. 
 
-```
+Paginering: Vi har implementert cursor-basert paginering (first og endCursor) med hasNextPage for å gi god ytelse ved lasting av store albumkataloger. 
 
-You can also install [eslint-plugin-react-x](https://npmx.dev/package/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://npmx.dev/package/eslint-plugin-react-dom) for React-specific lint rules:
+Sikkerhet: Alle variabler fra GraphQL-spørringene sendes som parametriserte verdier ($1, $2 osv.) til pg for å effektivt forhindre SQL-injection. 
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+## Hvor er vi nå
 
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+## Branching-strategi
 
-```
+Prosjektet følger en feature branch-arbeidsflyt for å holde "main" stabil og reviewbar til enhvertid.
+
+- *main* inneholder kun ferdig kode som er godkjent gjennom pull request og kodegjennomgang
+- For hver oppgave/issue opprettes en egen branch, navngitt med tilhørende issue nummer
+- Commits på feature-branchen kobles til tilhørende issue på git.ntnu.no, slik at utviklingshistorikken kan spores tilbake til konkrete oppgaver.
+- Når en oppgave ferdiggjøres, åpnes en pull request fra feature-branchen mot "main". Endringer blir kodegjennomgått av minst ett annet gruppemedlem før den godkjennes og merges.
+
+## Bruk av KI
+
+KI-verktøy har blitt brukt som støtte gjennom utviklingsprosessen. Det har hovedsakelig blitt brukt til å forklare konsepter innen GraphQL, Apollo Server/Client, PostgreSQL-tilkoblinger (pg pool) og TypeScript-typer, samt til å diskutere hvordan backend-arkitektur og resolver-logikk kan organiseres på en ryddig måte.
+
+KI har også blitt brukt til å feilsøke Git-mergekonflikter, forklare feilmeldinger og hjelpe med å strukturere SQL-spørringer mot databasen. Forslag fra KI har blitt gjennomgått, tilpasset prosjektets behov og testet av gruppen før de har blitt tatt i bruk.