From b0de02efb0df785f522e9bb951310ad86171dd1d Mon Sep 17 00:00:00 2001 From: joelte Date: Fri, 16 Oct 2026 10:59:17 +0200 Subject: [PATCH 1/2] docs: Update docs to match current state of project Updatet the root README.md to match the design and build choises made. Updated the REAME.md in frontend with instructions instead of the default Vite file. --- README.md | 21 ++++++------ frontend/README.md | 85 ++++++++-------------------------------------- 2 files changed, 24 insertions(+), 82 deletions(-) diff --git a/README.md b/README.md index 6596562..954855b 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ 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. **Group:** it2810-33 **Members:** Joel Tom Erlandsson, Halvor Thallaug Fagerli, Ayse Zeynep Aydin @@ -75,13 +75,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. @@ -92,10 +92,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. --- @@ -110,7 +109,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. @@ -123,12 +122,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 { diff --git a/frontend/README.md b/frontend/README.md index 653fa86..18178bf 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,78 +1,21 @@ -# React + TypeScript + Vite +# Frontend - NTNU Game Review -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +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. -Currently, two official plugins are available: +## Setup -- [@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/) +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. -## React Compiler +## Running -The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information. +- `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. -Note: This will impact Vite dev & build performances. -You can also try [the experimental native React Compiler support in plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md#rust-react-compiler) by using `compiler: true` in the plugin options instead of using the Babel plugin. +## Pages -## Expanding the ESLint configuration - -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: - -```js -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - - // 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, - - // Other configs... - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) - -``` - -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: - -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' - -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... - }, - }, -]) - -``` +- `/` - 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. From 43870adfba2be0d89b5b57e1694c3463f1263dbc Mon Sep 17 00:00:00 2001 From: Halvor Thallaug Fagerli Date: Fri, 16 Oct 2026 22:14:14 +0200 Subject: [PATCH 2/2] docs: Update README.md Added link to website for delivery 2 --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 954855b..3bd00b3 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ 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. > **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 @@ -222,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). \ No newline at end of file +- **AI use:** Documented in `docs/ai-usage.md` (tools, purpose, and how output was verified).