diff --git a/README.md b/README.md index ffea141..4c40e17 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,22 @@ 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: +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. +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: @@ -39,104 +51,203 @@ 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 -└── πŸ“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 + ┃ ┣ FillDb.ts + ┃ ┣ GameClient.ts + ┃ ┣ LogicConnection.ts + ┃ ┣ MainPageLogicFrontend.ts + ┃ ┣ SearchPageLogicFrontend.ts + ┃ ┣ UserLogicFrontend.ts + ┃ β”— WishlistLogicFrontend.ts + ┣ assets + ┃ β”— LogoGameStartTransparent.png + ┣ backend + ┃ ┣ DbConnection.ts + ┃ ┣ Genres.ts + ┃ ┣ Server.ts + ┃ ┣ Steam.ts + ┃ ┣ UserLogicBackend.ts + ┃ β”— WishlistLogic.ts + ┣ components + ┃ ┣ ActiveGameCard.tsx + ┃ ┣ AuthTheme.ts + ┃ ┣ Footer.tsx + ┃ ┣ Header.tsx + ┃ ┣ PageHeading.tsx + ┃ ┣ PassiveGameCard.tsx + ┃ ┣ SignInAndUpCard.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 + ┃ ┣ SignIn&UpCard.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 + ┃ ┣ UserLogicBackend.test.ts + ┃ ┣ UserLogicFrontend.test.ts + ┃ ┣ WishlistBackend.test.ts + ┃ β”— WishlistPage.test.tsx + ┣ types + ┃ β”— Game.ts + ┣ App.tsx + β”— Main.tsx ``` -*Tree generated using the Draw Folder Structure extension +*Tree generated using the file-tree-generator extension ## Functional requirements -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. +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) + +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 loggin 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 later. -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 be able to customize their user with an about section, a favourite game, and game setup (pc, console, mobile). -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, discount, ect., and sort by title, price or discounts. -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. +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 -We have not yet set up the database for this project. +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. +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 + +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. + +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. + +## 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. +- 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. +- 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 user 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. +- Converting all function names to PascalCase