SportSee

OpenClassrooms Project 12


Project	12
Name	Développez un tableau de bord d'analytics avec React
Student	Pierre-Yves Léglise
Version	1.0.0
Release date	2023/04/10

Aperçu

Introduction

SportSee is a website application that intend to give you access to various informations regarding your health condition and sport activity.

It has been developped using React and bootstrapped with Create React App.

Therefore, it has some prerequisites.

Prerequisites

NodeJS version 12.18
Yarn version 1.22.19 or npm version 8.15.0

Dependencies

React
react-router-dom
recharts
axios
prop-types
Recommended text editor: Visual Studio Code

Installation

Backend

This project uses a backend API and data.

See : https://github.com/OpenClassrooms-Student-Center/P9-front-end-dashboard

1- Clone this repository :

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

2- Go into the directory :

cd <YOUR*PATH>/backend

3- Install the app :

npm install or yarn

4- Start the backend API :

npm run start

5- You can check that the backend API is working correctly :

It should start on your localhost on port 3000.

So if you place a request in your browser with this url :http://localhost:3000/user/12, it should display some datas.

Frontend (and main app)

Well ! This is the part why we are here !

1- Clone this repository :

git clone https://github.com/pyleglise/sportsee

2- Go into the directory :

cd YOUR_PATH/sportsee

3- Install the app :

npm install or yarn

Ok, at this point, we're able to see some work done !

Type npm run start

After few seconds, it should display something like this :

You can now view sportsee in the browser. Local: http://localhost:8082 On Your Network: http://your-ip-address:8082

Now, in your browser, go to url (correct the port number if needed): http://localhost:8082

The application Sportsee should be open.

Let's tweak !

The project has it's own mocked API embeded.

That means that it can also be used without a fully fonctionnal backend.

Let's see that !

You can start both instances of the application. One with the real datas and the real backend, on port 8082 and another one with the mocked API and le mocked data, on the port 8081 :

npm run start npm run start-mock

Then you can open 2 browser sessions, on http://localhost:8081 and http://localhost:8082

Check the comments, in the browser console. You should see the differences between the two versions :

==== MOCK environnement : using mocked API with Mirage and mocked datas ====

or ==== API environnement : using backend API and datas ====