From 8907597bc14c19fce3ea343bea67485c5d475233 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 09:11:04 +0200 Subject: [PATCH 01/21] docs: adds extra headers, and information regarding the second deliverable --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index ffea141..d97b919 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,8 @@ It will bring you to the website, which runs on the virtual machine assigned to To see the project as it was for the first handin look at the `First-Deliverable` release of the codebase on git. +To see the project as it was for the second handin look at the `Second-Deliverable` release of the codebase on git. + ## Versions Local development runtime: @@ -134,6 +136,10 @@ 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. +## Database + +## Backend + ## Usage of AI Areas we have user AI: From 5284cd0cb0470ade0bc1ae26a11a50e464df3041 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 10:08:56 +0200 Subject: [PATCH 02/21] docs: updated release info, functional requirements and application functions --- README.md | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index d97b919..a3cf34e 100644 --- a/README.md +++ b/README.md @@ -105,19 +105,25 @@ The GraphQL backend runs as a user-level systemd service on the VM on port 3001, *Tree generated using the Draw Folder Structure extension ## Functional requirements +The second delivery for the course requires the database and backend to be running at the VM, as well as some user interraction. We have therefore decided to create user functionality (create user, log in, creating wishlist), and the opportunity to sort and filter games. We expect the remaining fuctionalty that will be implemented in the next deliverable to be: +- Profile page +- Reviews +- Rankings +- Password hashing +- Friend list -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 login in the user uses their email and password. -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 they 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. -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 user will also be able to access their profile from the navigation bar. Here we want the user to be able to customize their user with an about section, a favourite game, and game setup (pc, console, mobile). 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.. +Lastly the application will have a wishlist page where the user can place, and view, the games they want. Our goal is to implement a friends function that allows users to view their friends' wishlist. + ## 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. @@ -130,8 +136,6 @@ For checking ESLint run ```npm run lint```. ## Storage -We have not yet set up the database for this project. - ## 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. @@ -140,9 +144,11 @@ To run tests, open the terminal and ```run npx vitest```. To test with coverage, ## Backend +## Known issues + ## Usage of AI -Areas we have user AI: +Areas we have used 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 fc2c1499d25222a232c9916aa76603f3c2d47859 Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 16 Oct 2026 10:56:19 +0200 Subject: [PATCH 03/21] fix: line spaceing --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a3cf34e..c705f48 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,6 @@ However you can also access application through the virtual machine by using thi The GraphQL backend runs as a user-level systemd service on the VM on port 3001, and can be accessed using this link: [http://it2810-10.idi.ntnu.no:3001/](http://it2810-10.idi.ntnu.no:3001/). The instructions for setting up, starting, stopping, and restarting the backend are provided in a private document shared with all project members and administrators. - ## Folder structure ```text @@ -105,15 +104,17 @@ The GraphQL backend runs as a user-level systemd service on the VM on port 3001, *Tree generated using the Draw Folder Structure extension ## Functional requirements + The second delivery for the course requires the database and backend to be running at the VM, as well as some user interraction. We have therefore decided to create user functionality (create user, log in, creating wishlist), and the opportunity to sort and filter games. We expect the remaining fuctionalty that will be implemented in the next deliverable to be: + - Profile page - Reviews - Rankings - Password hashing - Friend list - ### 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 login in the user uses their email and password. When the user logs in they 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. From 9c6e309ceabe60e0eef81ae5e466b51228960b7a Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 16 Oct 2026 11:08:50 +0200 Subject: [PATCH 04/21] docs: adding section "Known issues" --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index c705f48..1454164 100644 --- a/README.md +++ b/README.md @@ -147,6 +147,13 @@ To run tests, open the terminal and ```run npx vitest```. To test with coverage, ## Known issues +We know that our application has a few bugs, here are the bugs we are aware of, and want to fix: + +- When price is "0.00", should show "free" instead +- There are a few duplicate games in the database +- Filters containing genres in other languages +- On passive gamecard title, overflow should have overlay to imply continuation of text. + ## Usage of AI Areas we have used AI: From 44cd6bd5376d57122d69d03d08110fb24695e30d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 11:12:58 +0200 Subject: [PATCH 05/21] docs: adds section regarding the database and backend --- README.md | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 53 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c705f48..5f7e82d 100644 --- a/README.md +++ b/README.md @@ -41,8 +41,6 @@ The application can currently be ran in two ways. The vite.config.ts is written 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/). -The GraphQL backend runs as a user-level systemd service on the VM on port 3001, and can be accessed using this link: [http://it2810-10.idi.ntnu.no:3001/](http://it2810-10.idi.ntnu.no:3001/). The instructions for setting up, starting, stopping, and restarting the backend are provided in a private document shared with all project members and administrators. - ## Folder structure ```text @@ -105,7 +103,12 @@ The GraphQL backend runs as a user-level systemd service on the VM on port 3001, ## Functional requirements -The second delivery for the course requires the database and backend to be running at the VM, as well as some user interraction. We have therefore decided to create user functionality (create user, log in, creating wishlist), and the opportunity to sort and filter games. We expect the remaining fuctionalty that will be implemented in the next deliverable to be: +The second delivery for the course requires the database and backend to be running at the VM, as well as some user interraction. We have therefore decided to create user functionality (create user, log in, creating wishlist), and the opportunity to sort and filter games. We have added some responsive design on screen sizes down to 393 pixels wide. Tests have been completed manually to ensure the design is as expected. + +View the database information: [Here](#database) +View the backend information: [Here](#backend) + +We expect the remaining fuctionalty that will be implemented in the next deliverable to be: - Profile page - Reviews @@ -137,14 +140,61 @@ For checking ESLint run ```npm run lint```. ## Storage +For this application we are using sessionstorage to store: +- Filters +- Searchbar input +- Chosen sorting option +- User + +We are using localstorage to store: +- Games +- User (if the user wants to be remembered) + +We decided to store filters, searchbar input and chosen sorting option to give the user a smoother experience when browsing. This data allows a user to browse different pages and games without the filters and sorting resetting each time, providing a better experience for the user. + +The games are saved to make the page load faster and save bandwidth. The user is saved, if the user wants to be remembered, to allow the user to be automatically logged in upon opening the page. + ## 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. ## Database +This is our current database structure. +```mermaid +erDiagram + users ||--o{ wishlist : "has" + games ||--o{ wishlist : "is wishlisted in" + + users { + int user_id PK "auto-increment (SERIAL)" + varchar user_name "display name, not unique" + varchar password_hash "plain text in this first version" + varchar email UK "login identifier" + } + + games { + int game_id PK "Steam app id" + varchar game_name + numeric current_price "numeric(10,2)" + numeric initial_price "numeric(10,2)" + int discount_percent + varchar image_url + varchar genre "comma-separated" + text description + } + + wishlist { + int user_id PK, FK "ON DELETE CASCADE" + int game_id PK, FK "ON DELETE CASCADE" + } +``` +In this delivery, we have what was necessary for our current functionality. When we update the functionality with reviews, rankings, etc., the database will be expanded to fit the new functionality. + ## Backend +The Apollo GraphQL backend runs as a user-level system service on the VM on port 3001, and can be accessed using this link: [http://it2810-10.idi.ntnu.no:3001/](http://it2810-10.idi.ntnu.no:3001/). The instructions for setting up, starting, stopping, and restarting the backend are provided in a private document shared with all project members and administrators. + ## Known issues ## Usage of AI From fb8e22ba70df9c7d1b61bf8e47eeb5d4abacf971 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 11:15:34 +0200 Subject: [PATCH 06/21] docs: fixed some styling issues --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e3d8b72..72685eb 100644 --- a/README.md +++ b/README.md @@ -105,8 +105,8 @@ However you can also access application through the virtual machine by using thi The second delivery for the course requires the database and backend to be running at the VM, as well as some user interraction. We have therefore decided to create user functionality (create user, log in, creating wishlist), and the opportunity to sort and filter games. We have added some responsive design on screen sizes down to 393 pixels wide. Tests have been completed manually to ensure the design is as expected. -View the database information: [Here](#database) -View the backend information: [Here](#backend) +View the database information: [Database](#database) +View the backend information: [Backend](#backend) We expect the remaining fuctionalty that will be implemented in the next deliverable to be: @@ -141,12 +141,14 @@ For checking ESLint run ```npm run lint```. ## Storage For this application we are using sessionstorage to store: + - Filters - Searchbar input - Chosen sorting option - User We are using localstorage to store: + - Games - User (if the user wants to be remembered) @@ -161,6 +163,7 @@ To run tests, open the terminal and ```run npx vitest```. To test with coverage, ## Database This is our current database structure. + ```mermaid erDiagram users ||--o{ wishlist : "has" @@ -189,6 +192,7 @@ erDiagram int game_id PK, FK "ON DELETE CASCADE" } ``` + In this delivery, we have what was necessary for our current functionality. When we update the functionality with reviews, rankings, etc., the database will be expanded to fit the new functionality. ## Backend From f990d3e87879551415caa7e8322e1d2ecd186450 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 11:29:34 +0200 Subject: [PATCH 07/21] docs: fixes some typos and missing commas --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 72685eb..fb4f8d3 100644 --- a/README.md +++ b/README.md @@ -118,19 +118,19 @@ We expect the remaining fuctionalty that will be implemented in the next deliver ### 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 login in the user uses their email and password. +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 login in, the user uses their email and password. -When the user logs in they 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. +When the user logs in they 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. 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 be able to customize their user with an about section, a favourite game, and game setup (pc, console, mobile). -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.. +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, discount, ect., and sort by title, price or discounts. -Lastly the application will have a wishlist page where the user can place, and view, the games they want. Our goal is to implement a friends function that allows users to view their friends' wishlist. +Lastly, the application will have a wishlist page where the user can place, and view, the games they want. Our goal is to implement a friends function that allows users to view their friends' wishlist. ## 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. +We are using the mui react component library and lucide icons as our third party libraries for styling. In this delivery we have added some responsive design on screen sizes down to 393 pixels wide. Tests have been completed manually to ensure the design is as expected. ### ESLint and Prettier @@ -158,7 +158,7 @@ The games are saved to make the page load faster and save bandwidth. The user is ## 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. +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. ## Database From d9df780ff2399a7b05bfd31df4c5d948b1d30b51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 11:34:23 +0200 Subject: [PATCH 08/21] docs: adds another known issue --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index fb4f8d3..344bca5 100644 --- a/README.md +++ b/README.md @@ -203,10 +203,11 @@ The Apollo GraphQL backend runs as a user-level system service on the VM on port We know that our application has a few bugs, here are the bugs we are aware of, and want to fix: -- When price is "0.00", should show "free" instead -- There are a few duplicate games in the database -- Filters containing genres in other languages +- When price is "0.00", should show "free" instead. +- There are a few duplicate games in the database. +- Filters containing genres in other languages. - On passive gamecard title, overflow should have overlay to imply continuation of text. +- Some pages have logic in them. We will clean them up for the next deliverable. ## Usage of AI From 58c6fe2ec36a3c2f7c1b2af7c6adaf8ad4e66cbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 11:43:59 +0200 Subject: [PATCH 09/21] docs: adds information on where the database games are fetched from --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 344bca5..f0bf111 100644 --- a/README.md +++ b/README.md @@ -195,6 +195,8 @@ erDiagram In this delivery, we have what was necessary for our current functionality. When we update the functionality with reviews, rankings, etc., the database will be expanded to fit the new functionality. +Our database has been filled with information from [SteamSpy](https://steamspy.com/api.php) and the [Official Steam API](https://store.steampowered.com/api). This has been done because the official Steam API only allows fetching games based on appid, meaning, only one game can be fetched at the time. Another issue is that SteamSpy does not have description, image url or genre on the games fetched in bulk. We solved these issues by combining the APIs. We use SteamSpy to fetch games in bulk, and then supplement each game with description, image url, and genre from Steam. + ## Backend The Apollo GraphQL backend runs as a user-level system service on the VM on port 3001, and can be accessed using this link: [http://it2810-10.idi.ntnu.no:3001/](http://it2810-10.idi.ntnu.no:3001/). The instructions for setting up, starting, stopping, and restarting the backend are provided in a private document shared with all project members and administrators. From 2b6dcae964862c243cb4250042e1e00d596db8d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 12:15:01 +0200 Subject: [PATCH 10/21] docs: adds more knnown issues --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f0bf111..4daf2d3 100644 --- a/README.md +++ b/README.md @@ -205,11 +205,14 @@ The Apollo GraphQL backend runs as a user-level system service on the VM on port We know that our application has a few bugs, here are the bugs we are aware of, and want to fix: -- When price is "0.00", should show "free" instead. +- When price is ```0.00```, should show ```Free``` instead. - There are a few duplicate games in the database. - Filters containing genres in other languages. - On passive gamecard title, overflow should have overlay to imply continuation of text. - Some pages have logic in them. We will clean them up for the next deliverable. +- The profile page is hard coded to a fake profile, thus the user that is logged in, is displayed next to the sign out button to give the user some feedback when they log in. This causes some issues with the responsive design (and looks ugly). +- Games have an ```add to wishlist``` button despite the user not being logged in. +- The games show developer as ```Unknown developer``` because developer is not stored in the database, as a result of a miscommunication. ## Usage of AI From d998b24e97af415b14e2f755da679a23caa3b181 Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 16 Oct 2026 12:47:28 +0200 Subject: [PATCH 11/21] feat: file stucture --- README.md | 129 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 76 insertions(+), 53 deletions(-) diff --git a/README.md b/README.md index 4daf2d3..633c559 100644 --- a/README.md +++ b/README.md @@ -44,59 +44,82 @@ However you can also access application through the virtual machine by using thi ## 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 -└── πŸ“deploy - └── project2-backend.service +src + ┣ api + ┃ ┣ fill_db.ts + ┃ ┣ gameClient.ts + ┃ ┣ games.ts + ┃ ┣ logicconnection.ts + ┃ ┣ mainpageLogicFrontend.ts + ┃ ┣ mockdata.json + ┃ ┣ searchpageLogicFrontend.ts + ┃ ┣ userlogic_frontend.ts + ┃ β”— wishlistLogicFrontend.ts + ┣ assets + ┃ ┣ barotrauma.png + ┃ ┣ bigwalk.png + ┃ ┣ logo_gamestart_transparent.png + ┃ ┣ silksong.png + ┃ β”— slaythespire.png + ┣ backend + ┃ ┣ db_connection.ts + ┃ ┣ genres.ts + ┃ ┣ server.ts + ┃ ┣ steam.ts + ┃ ┣ userlogic_backend.ts + ┃ β”— wishlistLogic.ts + ┣ components + ┃ ┣ activegamecard.tsx + ┃ ┣ footer.tsx + ┃ ┣ header.tsx + ┃ ┣ pageheading.tsx + ┃ ┣ passivegamecard.tsx + ┃ ┣ SignIn&UpCard.tsx + ┃ ┣ WishlistCard.tsx + ┃ β”— wishlistgamecard.tsx + ┣ context + ┃ β”— authcontext.tsx + ┣ css + ┃ ┣ activegamecard.css + ┃ ┣ createaccountpage.css + ┃ ┣ footer.css + ┃ ┣ gamepage.css + ┃ ┣ global.css + ┃ ┣ header.css + ┃ ┣ loginpage.css + ┃ ┣ mainpage.css + ┃ ┣ pageheading.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 + ┃ ┣ gameClient.test.ts + ┃ ┣ gamepage.test.tsx + ┃ ┣ genres.test.ts + ┃ ┣ mainpage.test.tsx + ┃ ┣ pageheading.test.tsx + ┃ ┣ passivegamecard.test.tsx + ┃ ┣ searchpage.test.tsx + ┃ ┣ setup.ts + ┃ ┣ steam.test.ts + ┃ ┣ userlogic_backend.test.ts + ┃ ┣ userlogic_frontend.test.ts + ┃ ┣ wishlistBackend.test.ts + ┃ β”— wishlistpage.test.tsx + ┣ types + ┃ β”— game.ts + ┣ App.tsx + β”— main.tsx ``` *Tree generated using the Draw Folder Structure extension From 6f8509997e13157716947064a2c40bb3bb83c519 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 12:50:07 +0200 Subject: [PATCH 12/21] docs: adds AI usage --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 633c559..578b44b 100644 --- a/README.md +++ b/README.md @@ -243,3 +243,4 @@ Areas we have used 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. +- Converting all function names to camelCase From 96184ac0bee11b0e0c10279e12d9fd4ace49e3e4 Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 16 Oct 2026 12:50:56 +0200 Subject: [PATCH 13/21] docs: reference rigth extension for file tree generation --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 633c559..bde6c92 100644 --- a/README.md +++ b/README.md @@ -122,7 +122,7 @@ src β”— main.tsx ``` -*Tree generated using the Draw Folder Structure extension +*Tree generated using the file-tree-generator extension ## Functional requirements From 2fb430c54e2d8e6bc6ddbd1077a400461c1f17c6 Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 16 Oct 2026 13:00:40 +0200 Subject: [PATCH 14/21] docs: spelling --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 50315f7..6145767 100644 --- a/README.md +++ b/README.md @@ -141,9 +141,9 @@ We expect the remaining fuctionalty that will be implemented in the next deliver ### 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 login in, the user uses their email and password. +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 logging in, the user uses their email and password. -When the user logs in they 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. We want the user to be able to give reveiws on the game. +When the user logs in they 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. We want the user to be able to give reveiws on the game later. The user will also be able to access their profile from the navigation bar. Here we want the user to be able to customize their user with an about section, a favourite game, and game setup (pc, console, mobile). From 2cb56dd86605234603225f0ffc728464b8496ef9 Mon Sep 17 00:00:00 2001 From: carmennt Date: Fri, 16 Oct 2026 13:19:56 +0200 Subject: [PATCH 15/21] docs: known issues update --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6145767..1baf43f 100644 --- a/README.md +++ b/README.md @@ -181,7 +181,7 @@ The games are saved to make the page load faster and save bandwidth. The user is ## 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. +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. ## Database @@ -236,6 +236,7 @@ We know that our application has a few bugs, here are the bugs we are aware of, - The profile page is hard coded to a fake profile, thus the user that is logged in, is displayed next to the sign out button to give the user some feedback when they log in. This causes some issues with the responsive design (and looks ugly). - Games have an ```add to wishlist``` button despite the user not being logged in. - The games show developer as ```Unknown developer``` because developer is not stored in the database, as a result of a miscommunication. +- On main page, genres for the "Dicounted games" section is fetched from all games, and not discounted ones. Meaning you have multiple genres with no dicounted games showing up. ## Usage of AI @@ -243,4 +244,4 @@ Areas we have used 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. -- Converting all function names to camelCase +- Converting all function names to PascalCase From d786fcde6de9f32f8a9845a074e4c1397a6f06b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 13:25:53 +0200 Subject: [PATCH 16/21] docs: adds explanation regarding the users wishlist and user creation --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index 578b44b..2d5592e 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,14 @@ 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. +In order to stay anonymous, use anonymous data. We do not hash passwords, username or emails in this delivery, so any information you input, is plaintext in the database. We have an anonymous user in the database you are welcome to use, or make yourself a new user that can not be linked to you. + +Anonymous user: +Email: test@test.test +Password: test123 + +**Beware**: Some changes you make to the wishlist might not be there later, if other students use it as well. + ## Release info To see the project as it was for the first handin look at the `First-Deliverable` release of the codebase on git. From a5689fd6ebb60a86b54d451da41e7f74d68f07c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 13:28:35 +0200 Subject: [PATCH 17/21] docs: fix style --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4b4b1d2..8df5f8a 100644 --- a/README.md +++ b/README.md @@ -244,7 +244,7 @@ We know that our application has a few bugs, here are the bugs we are aware of, - The profile page is hard coded to a fake profile, thus the user that is logged in, is displayed next to the sign out button to give the user some feedback when they log in. This causes some issues with the responsive design (and looks ugly). - Games have an ```add to wishlist``` button despite the user not being logged in. - The games show developer as ```Unknown developer``` because developer is not stored in the database, as a result of a miscommunication. -- On main page, genres for the "Dicounted games" section is fetched from all games, and not discounted ones. Meaning you have multiple genres with no dicounted games showing up. +- On main page, genres for the ```Dicounted games``` section is fetched from all games, and not discounted ones. Meaning you have multiple genres with no dicounted games showing up. ## Usage of AI From 477e26bd3cf0e83598fbecfded35ed049eb32f28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 13:38:47 +0200 Subject: [PATCH 18/21] docs: small wordflow fixes and typos --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8df5f8a..e2268cf 100644 --- a/README.md +++ b/README.md @@ -134,7 +134,7 @@ src ## Functional requirements -The second delivery for the course requires the database and backend to be running at the VM, as well as some user interraction. We have therefore decided to create user functionality (create user, log in, creating wishlist), and the opportunity to sort and filter games. We have added some responsive design on screen sizes down to 393 pixels wide. Tests have been completed manually to ensure the design is as expected. +The second delivery for the course requires the database and backend to be running at the VM, as well as some user interraction. We have therefore decided to create user functionality (create user, log in, creating wishlist), and the opportunity to sort and filter games. We have added some responsive design on screen sizes down to 393 pixels wide. See [styling](#styling) for more information. View the database information: [Database](#database) View the backend information: [Backend](#backend) @@ -244,11 +244,11 @@ We know that our application has a few bugs, here are the bugs we are aware of, - The profile page is hard coded to a fake profile, thus the user that is logged in, is displayed next to the sign out button to give the user some feedback when they log in. This causes some issues with the responsive design (and looks ugly). - Games have an ```add to wishlist``` button despite the user not being logged in. - The games show developer as ```Unknown developer``` because developer is not stored in the database, as a result of a miscommunication. -- On main page, genres for the ```Dicounted games``` section is fetched from all games, and not discounted ones. Meaning you have multiple genres with no dicounted games showing up. +- On main page, genres for the ```Dicounted games``` section is fetched from all games, and not discounted ones. This leads to several genres where no discounted games show up. ## Usage of AI -Areas we have used AI: +Areas where we have used 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 4b69fc8dad1d38ec71fecf29b0f3c9c2a6268f16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 13:42:13 +0200 Subject: [PATCH 19/21] docs: adds links to third party libraries --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e2268cf..0819f8a 100644 --- a/README.md +++ b/README.md @@ -161,13 +161,13 @@ Lastly, the application will have a wishlist page where the user can place, and ## Styling -We are using the mui react component library and lucide icons as our third party libraries for styling. In this delivery we have added some responsive design on screen sizes down to 393 pixels wide. Tests have been completed manually to ensure the design is as expected. +We are using the [Mui react component library](https://mui.com/components/) and [Lucide icons](https://lucide.dev/) as our third party libraries for styling. In this delivery we have added some responsive design on screen sizes down to 393 pixels wide. Tests have been completed manually to ensure the design is as expected. ### ESLint and Prettier 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```. +To check ESLint, run ```npm run lint```. ## Storage From 448ff5426be60b9459e02c05feff9e59f86a7d8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 15:29:15 +0200 Subject: [PATCH 20/21] docs: adds the apps purpose to the readme --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 0819f8a..26f93ac 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ 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. +The purpose of the application is to display an array of different games that allow users to review games, as well as create their own wishlist. This is meant to provide a structured and informative display of games, making it easy for users to find new games. + In order to stay anonymous, use anonymous data. We do not hash passwords, username or emails in this delivery, so any information you input, is plaintext in the database. We have an anonymous user in the database you are welcome to use, or make yourself a new user that can not be linked to you. Anonymous user: From 046ce36fb04a53bd33f4818b6fdddde33c67cd22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elida=20Kj=C3=B8pstad?= <77298927+Stelaug@users.noreply.github.com> Date: Fri, 16 Oct 2026 15:32:15 +0200 Subject: [PATCH 21/21] docs: updated file tree --- README.md | 124 ++++++++++++++++++++++++++---------------------------- 1 file changed, 60 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index 26f93ac..4c40e17 100644 --- a/README.md +++ b/README.md @@ -56,80 +56,76 @@ However you can also access application through the virtual machine by using thi ```text src ┣ api - ┃ ┣ fill_db.ts - ┃ ┣ gameClient.ts - ┃ ┣ games.ts - ┃ ┣ logicconnection.ts - ┃ ┣ mainpageLogicFrontend.ts - ┃ ┣ mockdata.json - ┃ ┣ searchpageLogicFrontend.ts - ┃ ┣ userlogic_frontend.ts - ┃ β”— wishlistLogicFrontend.ts + ┃ ┣ FillDb.ts + ┃ ┣ GameClient.ts + ┃ ┣ LogicConnection.ts + ┃ ┣ MainPageLogicFrontend.ts + ┃ ┣ SearchPageLogicFrontend.ts + ┃ ┣ UserLogicFrontend.ts + ┃ β”— WishlistLogicFrontend.ts ┣ assets - ┃ ┣ barotrauma.png - ┃ ┣ bigwalk.png - ┃ ┣ logo_gamestart_transparent.png - ┃ ┣ silksong.png - ┃ β”— slaythespire.png + ┃ β”— LogoGameStartTransparent.png ┣ backend - ┃ ┣ db_connection.ts - ┃ ┣ genres.ts - ┃ ┣ server.ts - ┃ ┣ steam.ts - ┃ ┣ userlogic_backend.ts - ┃ β”— wishlistLogic.ts + ┃ ┣ DbConnection.ts + ┃ ┣ Genres.ts + ┃ ┣ Server.ts + ┃ ┣ Steam.ts + ┃ ┣ UserLogicBackend.ts + ┃ β”— WishlistLogic.ts ┣ components - ┃ ┣ activegamecard.tsx - ┃ ┣ footer.tsx - ┃ ┣ header.tsx - ┃ ┣ pageheading.tsx - ┃ ┣ passivegamecard.tsx - ┃ ┣ SignIn&UpCard.tsx + ┃ ┣ ActiveGameCard.tsx + ┃ ┣ AuthTheme.ts + ┃ ┣ Footer.tsx + ┃ ┣ Header.tsx + ┃ ┣ PageHeading.tsx + ┃ ┣ PassiveGameCard.tsx + ┃ ┣ SignInAndUpCard.tsx ┃ ┣ WishlistCard.tsx - ┃ β”— wishlistgamecard.tsx + ┃ β”— WishlistGameCard.tsx ┣ context - ┃ β”— authcontext.tsx + ┃ β”— AuthContext.tsx ┣ css - ┃ ┣ activegamecard.css - ┃ ┣ createaccountpage.css - ┃ ┣ footer.css - ┃ ┣ gamepage.css - ┃ ┣ global.css - ┃ ┣ header.css - ┃ ┣ loginpage.css - ┃ ┣ mainpage.css - ┃ ┣ pageheading.css - ┃ ┣ passivegamecard.css - ┃ ┣ profilepage.css - ┃ ┣ searchpage.css - ┃ ┣ wishlistgamecard.css - ┃ β”— wishlistpage.css + ┃ ┣ ActiveGameCard.css + ┃ ┣ CreateAccountPage.css + ┃ ┣ Footer.css + ┃ ┣ GamePage.css + ┃ ┣ Global.css + ┃ ┣ Header.css + ┃ ┣ LoginPage.css + ┃ ┣ MainPage.css + ┃ ┣ PageHeading.css + ┃ ┣ PassiveGameCard.css + ┃ ┣ ProfilePage.css + ┃ ┣ SearchPage.css + ┃ ┣ SignIn&UpCard.css + ┃ ┣ WishlistGameCard.css + ┃ β”— WishlistPage.css ┣ pages - ┃ ┣ gamepage.tsx - ┃ ┣ mainpage.tsx - ┃ ┣ profilepage.tsx - ┃ ┣ searchpage.tsx - ┃ ┣ signin.tsx - ┃ ┣ signup.tsx - ┃ β”— wishlistpage.tsx + ┃ ┣ GamePage.tsx + ┃ ┣ MainPage.tsx + ┃ ┣ ProfilePage.tsx + ┃ ┣ SearchPage.tsx + ┃ ┣ SignIn.tsx + ┃ ┣ SignUp.tsx + ┃ β”— WishlistPage.tsx ┣ tests - ┃ ┣ gameClient.test.ts - ┃ ┣ gamepage.test.tsx - ┃ ┣ genres.test.ts - ┃ ┣ mainpage.test.tsx - ┃ ┣ pageheading.test.tsx - ┃ ┣ passivegamecard.test.tsx - ┃ ┣ searchpage.test.tsx - ┃ ┣ setup.ts - ┃ ┣ steam.test.ts - ┃ ┣ userlogic_backend.test.ts - ┃ ┣ userlogic_frontend.test.ts - ┃ ┣ wishlistBackend.test.ts - ┃ β”— wishlistpage.test.tsx + ┃ ┣ GameClient.test.ts + ┃ ┣ GamePage.test.tsx + ┃ ┣ Genres.test.ts + ┃ ┣ MainPage.test.tsx + ┃ ┣ PageHeading.test.tsx + ┃ ┣ PassiveGameCard.test.tsx + ┃ ┣ SearchPage.test.tsx + ┃ ┣ Setup.ts + ┃ ┣ Steam.test.ts + ┃ ┣ UserLogicBackend.test.ts + ┃ ┣ UserLogicFrontend.test.ts + ┃ ┣ WishlistBackend.test.ts + ┃ β”— WishlistPage.test.tsx ┣ types - ┃ β”— game.ts + ┃ β”— Game.ts ┣ App.tsx - β”— main.tsx + β”— Main.tsx ``` *Tree generated using the file-tree-generator extension