This repo contains the source code for the front-end of the dashboard.
Make sure you have the following installed on your computer:
- NodeJS (V16+)
- NPM (V8+)
Make sure you have the back api deployed or running on your computer. You can find the repo here. Follow the instructions in the README.md file to run the back api.
Front end will make the call using this base url : "http://localhost:3000". You can change it if needed in the Store class in the file src/api/Api.ts
- Vite
- ReactJS
- SASS (modules)
- Recharts
- React Router
- JSDoc
- TypeScript
- Clone the repo
- Move to the root folder
- Run
npm install
- Run
npm run dev
- Open your browser and go to http://localhost:5173/ or the given url by Vite
- Enter a user ID (e.g. 12, 18...) , if the user id is invalid you will see and error and will not be able to navigate in the app
- You can also choose to see demo data by clicking on the button "Données d'exemple"
- Enjoy!
You can also run npm run build
to build the project
These routes are protected, you will be redirected to the id selector page if you try to access them without selecting a valid ID or not passing an ID in the url.
-
/
- Home page : display a link to the profile page -
/user/:id
- Profile page : Display the profile of the user and all the graphs -
/user/:id/activity
- Activity page : Display only the activity graph -
/user/:id/average
- Average sessions page : Display only the average sessions graph -
/user/:id/performance
- Performance page : Display only the performance graph -
/user/:id/score
- Score sessions page : Display only the score graph -
*
- Error page : Display an error message and a link to the home page
- Tests with Vitest
- Implement the missing pages
- GitHub - Carl Dev