Project 7/9 - Front End Developer Path

Develop an analytics dashboard with React.

Specifications:

• Technologies used: React, React Router, Recharts

• Breakdown into modular and reusable components

• Respect the mock up and charts

Elements provided:

• Tools and technical constraints

• Mock-up SportSee

• KanBan User Stories

Technologies used:

• Yarn v 1.22.17

• NodeJS v 12.18

• ReactJS v 17.0.2

• React Router Dom v 5.2.0

• Recharts v 2.1.9

• Sass v 1.49.9

Set up:

• Create a folder, open it with you IDE, and follow the instructions:

Back-end:

• NodeJS version 12.18 (You can use NVM to manage NodeJS versions)

• Clone the back-en part :

• git clone https://github.com/OpenClassrooms-Student-Center/P9-front-end-dashboard.git

• Now, go to the back-end folder cd P9-front-end-dashboard

• If you don't already have Yarn, please : npm install --global yarn

• Then, install dependencies : yarn install

• Now, you can run the back-end server (port 3000): yarn start

Front-end:

• Please, open a second terminal and clone the front-end part and install dependencies:

• git clone https://github.com/PingrisAlexis/PingrisAlexis_12_09032022.git

• Now, go to the front-end folder cd PingrisAlexis_12_09032022

• Then, install dependencies : npm install

• Now, you can run the front-end server: npm start

• Terminal will told you that something is already running on port 3000 (backend part), and will ask to you if you want to run the app on another port. Just press Y, and it will run on port 3001.

Project:

• To switch between the two differents users, please, select the adress bar, and go tohttp://localhost:3001/user/12 or, http://localhost:3001/user/18

Skills assessed:

• Ensure the quality of the data in an application

• Interact with a Web service

• Develop advanced graphic elements using JavaScript libraries

• Produce technical documentation for an application