P12-SportSee-React

The purpose of this project is to create a new user profile page. For Sportsee, a young sport coaching startup.

With this page, the user will be able to follow his sessions number and burned calories number.

To get user data, this application had to communicate with this API (https://github.com/OpenClassrooms-Student-Center/P9-front-end-dashboard).

Other Informations

The model : https://www.figma.com/file/BMomGVZqLZb811mDMShpLu/UI-design-Sportify-FR?type=design&node-id=0-1&t=EbTbSQe5b40xDDfB-0

User stories : https://openclassrooms.notion.site/Tableau-de-bord-SportSee-6686aa4b5f44417881a4884c9af5669e

Résolution: 1024px by 780px

Project Dependencies

Prettier → better code readability

React → Techno required

Charts set up with https://react-chartjs-2.js.org/ and https://www.chartjs.org/docs/latest/

PropTypes → to type components and reduce errors

React-router-dom → for the routing

Sass → for the style

Run Locally

Reminder: For the project works correctly, you must also install the api.

Clone the API locally

  git clone https://github.com/cymard/p12-sportsee-api.git

Go to the project directory

  cd p12-sportsee-api

Install dependencies

  npm install

Start the API

  npm run start

Clone the project locally

  git clone https://github.com/cymard/P12-SportSee-React.git

Go to the project directory

  cd P12-SportSee-React

Install dependencies

  npm install

Go to config.js and set apiUrl

  const config = {
    apiUrl: 'http://example:port/'
  };

Start the Project

  npm run start

Go to http://localhost:3000/home/12 to test the project.