Backend deployment docu

README.md

@@ -2,7 +2,8 @@
 
 A searchable catalog of video games where users can browse, filter and rate games, like Rotten Tomatoes for video games but with **user scores only**. Every score in the app comes from our own users.
 
-> **Delivery 1:** Specification and early draft of the system. No backend or frontend is implemented yet.
+> **Current status:** Backend and frontend are implemented and connected. Search, filtering, sorting and pagination work end to end. Submitting a rating from the UI and the My Ratings view are still in progress.
+> Link to working [website](http://it2810-33.idi.ntnu.no/project2)
 
 **Group:** it2810-33
 **Members:** Joel Tom Erlandsson, Halvor Thallaug Fagerli, Ayse Zeynep Aydin
@@ -14,10 +15,9 @@ A searchable catalog of video games where users can browse, filter and rate game
 3. [Functionality](#functionality)
 4. [Design](#design)
 5. [Architecture](#architecture)
-6. [Folder structure](#folder-structure)
-7. [Accessibility](#accessibility)
-8. [Sustainability](#sustainability)
-9. [Development process and AI use](#development-process-and-ai-use)
+6. [Accessibility](#accessibility)
+7. [Sustainability](#sustainability)
+8. [Development process and AI use](#development-process-and-ai-use)
 
 ---
 
@@ -76,13 +76,13 @@ Game                              Review
 ## Functionality
 
 **Search**
-- Search by game name (possibly also developer).
+- Search by game name.
 - Search is case-insensitive and supports single terms.
 - A search runs only on Enter or when the search button is pressed, which avoids unnecessary requests.
 
 **Result list**
-- Results appear as cards with image, name, tags, release year and average score.
-- Infinite scroll (or pagination) loads ~20 games at a time.
+- Results appear as rows with image, name, release year, tags and average score.
+- Pagination loads as many games as fit the visible list area, with page controls in the toolbar.
 
 **Detail view**
 - Shows the description, developers, publishers, platforms, age rating, tags and score.
@@ -93,10 +93,9 @@ Game                              Review
 - Sorting and filtering are done on the server over the full dataset.
 
 **User-generated data**
-- Users can rate a game from 1–10 on the detail page.
-- Scores are stored persistently in the database on the VM.
-- The average score and review count update immediately after rating.
-- *(Optional)* A "My ratings" view.
+- The backend supports rating a game from 1–10 and stores scores persistently in the database on the VM.
+- The average score and review count update immediately after a rating is submitted.
+- A rating control on the detail page and the "My ratings" view are planned but not yet wired up in the UI.
 
 ---
 
@@ -111,7 +110,7 @@ Game                              Review
 **Example user flow**
 1. The user searches for "mario".
 2. They filter on "Platformer" and sort by highest score.
-3. They scroll, and more results load automatically.
+3. They move to the next page to see more results.
 4. They open a game and rate it 8.
 5. The average score updates.
 
@@ -124,12 +123,12 @@ Game                              Review
 | Frontend | React + TypeScript (Vite) |
 | State management | Apollo Client (cache + local state) |
 | API | GraphQL, Node + TypeScript (Apollo Server) |
-| Database | MongoDB or PostgreSQL *(TBD)*, installed directly on the VM (no Docker) |
+| Database | MongoDB, installed directly on the VM (no Docker) |
 | Hosting | Apache at `http://it2810-33.idi.ntnu.no/project2`, backend on port 3001 |
 | Testing | Vitest (components), Playwright or Cypress (E2E), API tests |
 | Code quality | ESLint + Prettier |
 
-### Draft GraphQL schema
+### GraphQL schema
 
 ```graphql
 type Game {
@@ -193,6 +192,12 @@ type Mutation {
 
 ---
 
+## Running the project
+
+- **Frontend:** see [`frontend/README.md`](frontend/README.md).
+- **Backend:** see [`server/README.md`](server/README.md) (GraphQL API, dataset import, tests).
+
+---
 
 ## Accessibility
 
@@ -218,4 +223,4 @@ type Mutation {
 - **Planning:** GitHub issues on a Kanban board.
 - **Branches:** One branch per issue, merged via pull request.
 - **Code review:** Each pull request is reviewed by at least one other member.
-- **AI use:** Documented in `docs/ai-usage.md` (tools, purpose, and how output was verified).
+- **AI use:** Documented in `docs/ai-usage.md` (tools, purpose, and how output was verified).

docs/ai-usage.md

@@ -6,4 +6,5 @@ This file documents how we use AI tools in the project.
 
 | Tool | Used for | How we checked the output |
 | --- | --- | --- |
-| Claude (Anthropic) / Opus 5.5 (medium)| Refactoring our written specification into a structured README format. | The group wrote the content and made all decisions: app idea, dataset, data model, functionality and tech stack. We reviewed the result against our own notes and the project requirements, and corrected inconsistencies before committing. |
+| Claude (Anthropic) / Opus 5.5 (medium)| Refactoring our written specification into a structured README format. | The group wrote the content and made all decisions: app idea, dataset, data model, functionality and tech stack. We reviewed the result against our own notes and the project requirements, and corrected inconsistencies before committing. |
+| Claude (Anthropic) / Sonnet 5 | Scaffolding the backend (`server/`): project setup, Mongoose schema/index design, the `averageScore`/`reviewCount` recompute strategy for ratings, the CSV ingestion script, GraphQL resolvers, and integration tests. Database choice (MongoDB) was decided by the group. | We reviewed the generated code against the README's data model and functionality requirements, checked proposed package versions for compatibility, and verified behavior by running the backend locally against Apollo Sandbox and the automated test suite before committing. |

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/.prettierrc

@@ -0,0 +1 @@
+{}

frontend/README.md

@@ -0,0 +1,21 @@
+# Frontend - NTNU Game Review
+
+React + TypeScript (Vite) client for the NTNU Game Review app. Talks to the GraphQL API in `server/` over Apollo Client. See the root [README](../README.md) for the full project spec.
+
+## Setup
+
+1. Install dependencies: `npm install`
+2. Make sure the backend is running (see [`server/README.md`](../server/README.md)). By default the client points at `http://localhost:3001`, which matches the backend's default port. To point at a different URL, set `VITE_GRAPHQL_URL` in a `.env` file.
+
+## Running
+
+- `npm run dev` - start the Vite dev server with HMR.
+- `npm run build` - type-check and build for production.
+- `npm run preview` - preview the production build locally.
+- `npm run lint` - run ESLint.
+
+## Pages
+
+- `/` - search, filter, sort and paginate through the game catalog.
+- `/games/:id` - game detail view.
+- `/my-ratings` - placeholder for the user's own ratings, not yet implemented.

frontend/eslint.config.js

@@ -0,0 +1,22 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="https://www.ntnu.no/o/ntnu-theme/images/logoicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>it2810-t33-p2</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>