diff --git a/README.md b/README.md index 6596562..3bd00b3 100644 --- a/README.md +++ b/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 @@ -75,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. @@ -92,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. --- @@ -110,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. @@ -123,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 { @@ -223,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). 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.