Write readme

README.md

@@ -1,75 +1,137 @@
-# React + TypeScript + Vite
+# About our project
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+To access the website, you can use this link: [http://it2810-10.idi.ntnu.no/project2/](http://it2810-10.idi.ntnu.no/project2/)
 
-Currently, two official plugins are available:
+It will bring you to the website, which runs on the virtual machine assigned to our group.
 
-- [@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/)
+## Release info
 
-## React Compiler
+To see the project as it was for the first handin look at the `First-Deliverable` release of the codebase on git.
 
-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).
+## Versions
 
-## Expanding the ESLint configuration
+Local development runtime:
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+- Node.js 24.13.0
+- npm 11.6.2
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+Direct dependencies (versions resolved in `package-lock.json`):
 
-      // 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,
+- @emotion/react 11.14.0
+- @emotion/styled 11.14.1
+- @mui/material 9.4.0
+- lucide-react 1.48.0
+- react 19.3.0
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+Development dependencies (versions resolved in `package-lock.json`):
 
-```
+- eslint 10.11.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
+
+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.
 
-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...
-    },
-  },
-])
+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
+└── 📁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
 ```
+
+*Tree generated using the Draw Folder Structure 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.
+
+### 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.
+
+### 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```.
+
+## 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.
+
+## 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.