Build an analytics dashboard with React for Openclassrooms JS React Application Developer Training. SportSee is the training's project number 12. Goals:
- feching data from API
- Creation and display charts
- Logical separation of code into reusable components
Clone the repository of SportSee Front-End: git clone https://github.com/SFERRER-DEV/projet-12.git
Inside this Front-End repository, install dependencies:
Launch Front-End on port 3000:
npm run start
or the yarn start
command will allow you to run the project (automatically on port 3000).
The project need its API in order to fully works, but there is the possibility to use mock data in place of the API calls. You can to skip the installation of the backend. The front-end will detect a network error and offer to use the dummy data, you must click to accept. Mocked data are the alternative to a failure of the backend . The source of these data is in a json file in the public folder. The choice of using mocked data is stored in the localStorage. This is what happens when the application is tested on the Vercel.com platform Openclassrooms projet 12: SportSee
You will find here the repo contains all the source code to run the micro API for the sports analytics dashboard SportSee
-
You will find the instructions to clone and install the backend at this address
-
And this next command will allow you to create your Docker container and run your image on extern port 8000 (forwarding the intern port 3000) :
- The front-end will detect that the backend is responding and will request its http api. Backend api is prevalent.
- If you have used the mocked data previously, go to the homepage and click on the button to remove the mock.
Routes have been defined but the menu links and header links point to temporary working pages.
- The main page of this project is the profile page and the home page allows to act on the mocked data.
- You can switch user by changing the user id in the url : there are two users available
- Karl is the default user, if no identifier is specified in the route : Karl is id 12 and Cecilia is id 18
-
See SportSee on Vercel.com platform : OC project 12: SportSee
-
Overview and codebase summary with Code Climate : OC project 12: SportSee