From 2ccd822975a2a3c1bba7724be7c8d8e51bfc0507 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eline=20J=C3=A5sund?= Date: Tue, 29 Sep 2026 13:40:58 +0200 Subject: [PATCH 01/14] docs: write all versions and requirments --- README.md | 135 ++++++++++++++++++++++++------------------------------ 1 file changed, 60 insertions(+), 75 deletions(-) diff --git a/README.md b/README.md index 2d31cb6..cad69ad 100644 --- a/README.md +++ b/README.md @@ -1,75 +1,60 @@ -# React + TypeScript + Vite - -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. - -Currently, two official plugins are available: - -- [@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/) - -## React Compiler - -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). - -## 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... - }, - }, -]) - -``` +# About our project + +To access the website, you can use this link: http://it2810-10.idi.ntnu.no/project2/ + +It will bring you to the website, which runs on the virtual machine assigned to our group. + +## Versions +Local development runtime: +- Node.js 24.13.0 +- npm 11.6.2 + +Direct dependencies (versions resolved in `package-lock.json`): +- @emotion/react 11.14.0 +- @emotion/styled 11.14.1 +- @mui/material 9.4.0 +- lucide-react 1.48.0 +- react 19.3.0 +- react-dom 19.3.0 +- react-router-dom 7.18.4 + +Development dependencies (versions resolved in `package-lock.json`): +- @eslint/js 10.0.1 +- @testing-library/jest-dom 7.0.1 +- @testing-library/react 16.3.3 +- @testing-library/user-event 14.6.7 +- @types/node 24.13.6 +- @types/react 19.3.0 +- @types/react-dom 19.3.0 +- @vitejs/plugin-react 6.1.1 +- eslint 10.11.0 +- eslint-config-prettier 10.1.8 +- eslint-plugin-react-hooks 7.1.1 +- eslint-plugin-react-refresh 0.5.7 +- globals 17.12.0 +- jsdom 29.1.1 +- prettier 3.9.8 +- typescript 6.0.3 +- typescript-eslint 8.70.1 +- vite 8.3.0 +- vitest 5.0.1 + +## How to run application + + +### Folder structure + + +### Styling + + +### Storage + + +### Tests + + +## Functional requirements +The first delivery for the course requires a basic outline of the intended application. We have therefore decided to create a very simpel structure for the website. Including all relevant pages with either static or mocked data. The pages interact with one another, but no data is saved from the interactions with the log in page. This delivery is simply a mock up of how we intend to structure our website and the user interactions we want to include. + +## Usage of AI \ No newline at end of file From cc0fa1183ad3628566249fa33b0009cf56a31609 Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 2 Oct 2026 09:01:32 +0200 Subject: [PATCH 02/14] fix: readme application link prettier --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index cad69ad..8e212e2 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,18 @@ # About our project -To access the website, you can use this link: http://it2810-10.idi.ntnu.no/project2/ +To access the website, you can use this link: [http://it2810-10.idi.ntnu.no/project2/](http://it2810-10.idi.ntnu.no/project2/) It will bring you to the website, which runs on the virtual machine assigned to our group. ## Versions + Local development runtime: + - Node.js 24.13.0 - npm 11.6.2 Direct dependencies (versions resolved in `package-lock.json`): + - @emotion/react 11.14.0 - @emotion/styled 11.14.1 - @mui/material 9.4.0 @@ -19,6 +22,7 @@ Direct dependencies (versions resolved in `package-lock.json`): - react-router-dom 7.18.4 Development dependencies (versions resolved in `package-lock.json`): + - @eslint/js 10.0.1 - @testing-library/jest-dom 7.0.1 - @testing-library/react 16.3.3 @@ -41,6 +45,7 @@ Development dependencies (versions resolved in `package-lock.json`): ## How to run application +To run the application run the command ```npm run dev```. ### Folder structure @@ -55,6 +60,7 @@ Development dependencies (versions resolved in `package-lock.json`): ## Functional requirements + The first delivery for the course requires a basic outline of the intended application. We have therefore decided to create a very simpel structure for the website. Including all relevant pages with either static or mocked data. The pages interact with one another, but no data is saved from the interactions with the log in page. This delivery is simply a mock up of how we intend to structure our website and the user interactions we want to include. ## Usage of AI \ No newline at end of file From 24509e04d2276df090e24c09232c2813db506848 Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 2 Oct 2026 09:11:28 +0200 Subject: [PATCH 03/14] feat: folder structure Adding the projects folder structure in the README.md --- README.md | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 54 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8e212e2..6445a38 100644 --- a/README.md +++ b/README.md @@ -45,10 +45,63 @@ Development dependencies (versions resolved in `package-lock.json`): ## How to run application -To run the application run the command ```npm run dev```. +To run the application run the command ```npm run dev``` in the terminal. ### Folder structure +```text +└── πŸ“src + └── πŸ“api + β”œβ”€β”€ api.ts + β”œβ”€β”€ games.ts + β”œβ”€β”€ mockdata.json + └── πŸ“assets + β”œβ”€β”€ barotrauma.png + β”œβ”€β”€ bigwalk.png + β”œβ”€β”€ silksong.png + β”œβ”€β”€ slaythespire.png + └── πŸ“backend + β”œβ”€β”€ server.ts + β”œβ”€β”€ serverlogic.ts + └── πŸ“components + β”œβ”€β”€ activegamecard.tsx + β”œβ”€β”€ footer.tsx + β”œβ”€β”€ header.tsx + β”œβ”€β”€ passivegamecard.tsx + β”œβ”€β”€ SignIn&UpCard.tsx + β”œβ”€β”€ WishlistCard.tsx + β”œβ”€β”€ wishlistgamecard.tsx + └── πŸ“css + β”œβ”€β”€ activegamecard.css + β”œβ”€β”€ createaccountpage.css + β”œβ”€β”€ footer.css + β”œβ”€β”€ gamepage.css + β”œβ”€β”€ global.css + β”œβ”€β”€ header.css + β”œβ”€β”€ loginpage.css + β”œβ”€β”€ mainpage.css + β”œβ”€β”€ passivegamecard.css + β”œβ”€β”€ profilepage.css + β”œβ”€β”€ searchpage.css + β”œβ”€β”€ wishlistgamecard.css + β”œβ”€β”€ wishlistpage.css + └── πŸ“pages + β”œβ”€β”€ gamepage.tsx + β”œβ”€β”€ mainpage.tsx + β”œβ”€β”€ profilepage.tsx + β”œβ”€β”€ searchpage.tsx + β”œβ”€β”€ signin.tsx + β”œβ”€β”€ signup.tsx + β”œβ”€β”€ wishlistpage.tsx + └── πŸ“tests + β”œβ”€β”€ api.test.ts + β”œβ”€β”€ serverlogic.test.ts + β”œβ”€β”€ setup.ts + └── πŸ“types + β”œβ”€β”€ game.ts + β”œβ”€β”€ App.tsx + └── main.tsx +``` ### Styling From 48cc87136cea8cb238234086fc954277742cd5e0 Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 2 Oct 2026 09:18:11 +0200 Subject: [PATCH 04/14] feat: testing --- README.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 6445a38..271fd85 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ Development dependencies (versions resolved in `package-lock.json`): To run the application run the command ```npm run dev``` in the terminal. -### Folder structure +## Folder structure ```text └── πŸ“src @@ -103,17 +103,18 @@ To run the application run the command ```npm run dev``` in the terminal. └── main.tsx ``` -### Styling +## Styling -### Storage - - -### Tests +## Storage ## Functional requirements The first delivery for the course requires a basic outline of the intended application. We have therefore decided to create a very simpel structure for the website. Including all relevant pages with either static or mocked data. The pages interact with one another, but no data is saved from the interactions with the log in page. This delivery is simply a mock up of how we intend to structure our website and the user interactions we want to include. -## Usage of AI \ No newline at end of file +## Tests + +To run tests, open the terminal and ```run npx vitest```. To test with coverage, install ```npm install -D @vitest/coverage-v8``` and run ```npx vitest --coverage``` to include coverage. Per now, since there is no logic on the application pages, we have only written tests for the api. + +## Usage of AI From b17265746b2634b6f57b4b5bc874de53d436aadf Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 2 Oct 2026 09:28:57 +0200 Subject: [PATCH 05/14] fix: spellings and moving sections --- README.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 271fd85..e552859 100644 --- a/README.md +++ b/README.md @@ -103,15 +103,19 @@ To run the application run the command ```npm run dev``` in the terminal. └── main.tsx ``` -## Styling +*Tree generated using the Draw Folder Structure extension +## Functional requirements -## Storage +The first delivery for the course requires a basic outline of the intended application. We have therefore decided to create a very simple structure for the website. Including all relevant pages with either static or mocked data. The pages interact with one another, but no data is saved from the interactions with the log in page. This delivery is simply a mock up of how we intend to structure our website and the user interactions we want to include. +## Styling -## Functional requirements +We are using the mui react component library and lucide icons as our third party libraries for styling. Scaling of the application has not yet been implemented, so we recommend testing our application on a pc. + +## Storage -The first delivery for the course requires a basic outline of the intended application. We have therefore decided to create a very simpel structure for the website. Including all relevant pages with either static or mocked data. The pages interact with one another, but no data is saved from the interactions with the log in page. This delivery is simply a mock up of how we intend to structure our website and the user interactions we want to include. +We have not yet set up the database for this project. ## Tests From 9192638b302fac74955f7e724c68cfe1e937ff5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eline=20J=C3=A5sund?= Date: Fri, 2 Oct 2026 09:33:17 +0200 Subject: [PATCH 06/14] docs: update run application --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e552859..dab8e3a 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,10 @@ Development dependencies (versions resolved in `package-lock.json`): ## How to run application -To run the application run the command ```npm run dev``` in the terminal. +The application can currently be ran in two ways. The vite.config.ts is written to allow for running the project on localhost, to do this run the command ```npm run dev``` in the terminal. Then put the link provided in your web browser. + +However you can also access application through the virtual machine by using this link: [http://it2810-10.idi.ntnu.no/project2/](http://it2810-10.idi.ntnu.no/project2/). + ## Folder structure From 45405707ac1ab62a33c4768b44109e996667edd3 Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 2 Oct 2026 09:40:53 +0200 Subject: [PATCH 07/14] feat: application features --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index e552859..0c4e02a 100644 --- a/README.md +++ b/README.md @@ -109,6 +109,16 @@ To run the application run the command ```npm run dev``` in the terminal. The first delivery for the course requires a basic outline of the intended application. We have therefore decided to create a very simple structure for the website. Including all relevant pages with either static or mocked data. The pages interact with one another, but no data is saved from the interactions with the log in page. This delivery is simply a mock up of how we intend to structure our website and the user interactions we want to include. +### Application functions + +Since the application should be able to save user interactive data, we have decided that the applications needs a sign up and sign in page. Here the user can make an account with a username, email and password. For loggin in the user uses their email and password. + +When the user logs in the will be directed to the main page, where they will see a selection of featured games. Here the user can click on the games to be directed to a game page to see more info about the game. Here we want the user to be able to give reveiws on the game. + +The user will also be able to access their profile from the navigation bar. Here we want the user to ba able to customize their user with a favourite game, about and game setup. + +The application will also have a searchpage where a user can browse all games. The user should also be able to search for games, filter by genre and discount ect., and sort by title, price and discounts ect.. + ## Styling We are using the mui react component library and lucide icons as our third party libraries for styling. Scaling of the application has not yet been implemented, so we recommend testing our application on a pc. From 758ad7509fd49b27ec8e4e9fe6168fd02ae48f31 Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 2 Oct 2026 09:41:46 +0200 Subject: [PATCH 08/14] fix: formatting --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 635d11a..267dd18 100644 --- a/README.md +++ b/README.md @@ -45,11 +45,10 @@ Development dependencies (versions resolved in `package-lock.json`): ## How to run application -The application can currently be ran in two ways. The vite.config.ts is written to allow for running the project on localhost, to do this run the command ```npm run dev``` in the terminal. Then put the link provided in your web browser. +The application can currently be ran in two ways. The vite.config.ts is written to allow for running the project on localhost, to do this run the command ```npm run dev``` in the terminal. Then put the link provided in your web browser. However you can also access application through the virtual machine by using this link: [http://it2810-10.idi.ntnu.no/project2/](http://it2810-10.idi.ntnu.no/project2/). - ## Folder structure ```text From f82703ebb82b567afec6877afc87daf54952781a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eline=20J=C3=A5sund?= Date: Fri, 2 Oct 2026 09:53:46 +0200 Subject: [PATCH 09/14] doc: remove dependencies --- README.md | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/README.md b/README.md index 267dd18..e07e553 100644 --- a/README.md +++ b/README.md @@ -18,24 +18,10 @@ Direct dependencies (versions resolved in `package-lock.json`): - @mui/material 9.4.0 - lucide-react 1.48.0 - react 19.3.0 -- react-dom 19.3.0 -- react-router-dom 7.18.4 Development dependencies (versions resolved in `package-lock.json`): -- @eslint/js 10.0.1 -- @testing-library/jest-dom 7.0.1 -- @testing-library/react 16.3.3 -- @testing-library/user-event 14.6.7 -- @types/node 24.13.6 -- @types/react 19.3.0 -- @types/react-dom 19.3.0 -- @vitejs/plugin-react 6.1.1 - eslint 10.11.0 -- eslint-config-prettier 10.1.8 -- eslint-plugin-react-hooks 7.1.1 -- eslint-plugin-react-refresh 0.5.7 -- globals 17.12.0 - jsdom 29.1.1 - prettier 3.9.8 - typescript 6.0.3 From 9b27c8361f58a8a56ea61af719128291c433b731 Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 2 Oct 2026 09:55:31 +0200 Subject: [PATCH 10/14] fix: Some AI usage --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 267dd18..663e297 100644 --- a/README.md +++ b/README.md @@ -134,3 +134,8 @@ We have not yet set up the database for this project. To run tests, open the terminal and ```run npx vitest```. To test with coverage, install ```npm install -D @vitest/coverage-v8``` and run ```npx vitest --coverage``` to include coverage. Per now, since there is no logic on the application pages, we have only written tests for the api. ## Usage of AI + +Areas we have user AI: + +- CSS improvements: Guidance for quick fixes, such as components shape, background and space adjusting. +- Test generation: Creating ideas for tests and code skeletons to speed up development and improving coverage. From b7c86a69d190dd143c88958af572919788c4f42d Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 2 Oct 2026 10:18:40 +0200 Subject: [PATCH 11/14] feat: Prettier and ESLint --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index c24f9bf..9c505aa 100644 --- a/README.md +++ b/README.md @@ -111,6 +111,10 @@ The application will also have a searchpage where a user can browse all games. T We are using the mui react component library and lucide icons as our third party libraries for styling. Scaling of the application has not yet been implemented, so we recommend testing our application on a pc. +### ESLint and Prettier + +You can use the Prettier check to check the codebases' formatting by running ```npm run format:check``` in the terminal. For checking ESLint run ```npm run lint```. + ## Storage We have not yet set up the database for this project. From d985ab76ec0ce4ae76e441a265a95b8f4b50cd37 Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 2 Oct 2026 10:20:31 +0200 Subject: [PATCH 12/14] fix: spelling --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9c505aa..3b85ce9 100644 --- a/README.md +++ b/README.md @@ -113,7 +113,7 @@ We are using the mui react component library and lucide icons as our third party ### ESLint and Prettier -You can use the Prettier check to check the codebases' formatting by running ```npm run format:check``` in the terminal. For checking ESLint run ```npm run lint```. +You can use the Prettier to check the codebases' formatting by running ```npm run format:check``` in the terminal. For checking ESLint run ```npm run lint```. ## Storage From e5c346f262652d8a16422bd5bba95b26a97aea56 Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 2 Oct 2026 10:32:53 +0200 Subject: [PATCH 13/14] feat: Prettier warnings --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3b85ce9..57549ac 100644 --- a/README.md +++ b/README.md @@ -113,7 +113,9 @@ We are using the mui react component library and lucide icons as our third party ### ESLint and Prettier -You can use the Prettier to check the codebases' formatting by running ```npm run format:check``` in the terminal. For checking ESLint run ```npm run lint```. +You can use the Prettier to check the codebases' formatting by running ```npm run format:check``` in the terminal. When running this command we are seeing 29 warnings, but when looking at the warnings there are no actual formatting problems. This we have decided we are looking into in the next handin. + +For checking ESLint run ```npm run lint```. ## Storage From d5d4eb01e04957522e76a2aba9f175b9ef4b92fb Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 2 Oct 2026 10:44:35 +0200 Subject: [PATCH 14/14] feat: Release info --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 57549ac..5309c1b 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,10 @@ To access the website, you can use this link: [http://it2810-10.idi.ntnu.no/proj It will bring you to the website, which runs on the virtual machine assigned to our group. +## Release info + +To see the project as it was for the first handin look at the `First-Deliverable` release of the codebase on git. + ## Versions Local development runtime: