Skip to content

Latest commit

 

History

History
107 lines (68 loc) · 2.88 KB

README.md

File metadata and controls

107 lines (68 loc) · 2.88 KB

SportSee

SportSee1 is a start-up dedicated to sports coaching. Users can follow on their page the number of sessions they carried out as well as the number of calories burned.

Goal of this project: API integration in a React app, use of JSDoc and PropTypes, and use of a graphic library.

Load specifications

Website designs

The desktop design is available on Figma.

Design for the home page

Technical constraints

  • Application development with React.
  • Use of a graphic library: Recharts.
  • HTTP calls (with Fetch) outside of React components.
  • Use of mocked data before API integration.
  • Documentation with JSDoc and PropTypes.

Prerequisites

Installation

Back-end

Back-end repository

The back-end repository using NodeJS is available on this link. It allows to make HTTP calls and to retrieve example data.

  1. Clone the repository
git clone https://github.com/OpenClassrooms-Student-Center/P9-front-end-dashboard.git
  1. Install the dependencies
yarn
  1. Run the micro API

In app/index.js, change port variable to 3001 to launch the back-end on a different port than the front-end. Then:

yarn dev

API data are now accessible at http://localhost:3001/user/${userId}/ in your browser.

Mocked data

  1. Install json-server
npm install -g json-server
  1. Launch json-server in front-end folder
json-server --watch ./src/utils/mock/serverMock.json --port 8000

Mocked data are now accessible at http://localhost:8000/ in your browser.

  1. Change mock variable to true

In src/index.jsx, change mock variable to true to visualize mocked data (insted of API data) in the launched application.

Front-end

  1. Clone the repository
git clone https://github.com/aurelianeg/sportsee.git
  1. Install the dependencies
npm install
  1. Launch the project
npm start

It runs the app in the development mode, and the website is opened on http://localhost:3000 to view it in the browser. The page will reload when changes are made in the code, and any lint errors can be seen in the console.

Footnotes

  1. This is the 9th project of the "Front-end developer (JS - React)" training by OpenClassrooms. ↩