L'application SportSee, une startup dédiée au coaching sportif.
Le projet est de développer un tableau de bord d'analytics avec React. Cette démo met en avant le tableau de bord d'un utilisateur au choix, ici en test nous prendrons que deux utilisateurs. . L’entreprise va aujourd’hui lancer une nouvelle version de la page profil de l’utilisateur. Cette page va notamment permettre à l’utilisateur de suivre le nombre de sessions réalisées ainsi que le nombre de calories brûlées.
Choississez avec le toggle (bouton), soit l'utilisateur 12 / ou l'utilisateur 18 puis cliquer sur Profil.
Maquettes UX/UI Figma
Repository Back-End à forker juste en dessous
[Back-End](https://github.com/OpenClassrooms-Student-Center/SportSee)
L' Api SportSee ne fournit des données que pour les utilisateurs 12 et 18.
Le Readme du _Back-End_ fournit des informations, sur l'installation et la mise en route de Docker.
[Back-End](https://www.docker.com/products/docker-desktop/)
1️⃣ Clonez le repositorie SportSee :
git clone https://github.com/nebulot/Nebulotelodie_SportSee
2️⃣ Allez dans votre terminal, puis ouvrer :
cd Back-End
3️⃣ En se plaçant dans ce repo du Back-End, installer ses dépendances :
'npm install'
4️⃣ Lancer le Back-End sur le port 3000 (port par défaut)
puis => 'npm run start'
1️⃣ Clonez le repositorie SportSee :
git clone https://github.com/nebulot/Nebulotelodie_SportSee
2️⃣ Allez dans votre terminal, puis ouvrer :
cd Front-End
3️⃣ En se plaçant dans ce repo du Front-End, installer ses dépendances :
'npm install'
4️⃣ Lancer le Front-End sur le port 3001 (port par défaut 3000 utiliser par votre Back-End votre terminal va donc vous demandez de prendre le port suivant (Y/O) => selectionner Y)
puis => 'npm start'
Le front-end est alors consultable à l'URL http://localhost:3001.
Visual Studio Code - Éditeur de texte
Sass - Préprocesseur CSS
React 18 - Bibliothèque JavaScript gratuite et open-source développée par Facebook
Create React App - Outil créé par Facebook, qui est la référence pour initier un projet React
React Router V6 - Bibliothèque de routage pour React
Recharts - Bibliothèque de graphiques pour React
Prop-types - Package utilisé pour documenter les types de propriétés attendus dans les composants React
JSDoc - Générateur de documentation pour JavaScript
GitHub - Outil de gestion de version
GitHub Pages - Outil d’hébergement
**🔗 Liens :
=> W3C validator Liens W3C
The SportSee application, a startup dedicated to sports coaching.
The project is to develop an analytics dashboard using React. This demo highlights the dashboard of a selected user; for testing purposes, we will use only two users. The company is launching a new version of the user profile page. This page will allow users to track the number of sessions completed and the number of calories burned.
Use the toggle button to switch between user 12 and user 18, then click on Profile.
UX/UI Figma mockups
Back-End repository to fork below
[Back-End](https://github.com/OpenClassrooms-Student-Center/SportSee)
The SportSee API only provides data for users 12 and 18.
The _Back-End_ ReadMe contains information on installation and Docker setup.
[Back-End](https://www.docker.com/products/docker-desktop/)
Installing and running the Back-End
1️⃣ Clone the SportSee repository:
git clone https://github.com/nebulot/Nebulotelodie_SportSee
2️⃣ Open your terminal, then navigate to:
cd Back-End
3️⃣ Inside the Back-End repository, install dependencies:
npm install
4️⃣ Start the Back-End on port 3000 (default port):
npm run start
Installing and running the Front-End
1️⃣ Clone the SportSee repository:
git clone https://github.com/nebulot/Nebulotelodie_SportSee
2️⃣ Open your terminal, then navigate to:
cd Front-End
3️⃣ Inside the Front-End repository, install dependencies:
npm install
4️⃣ Start the Front-End on port 3001 (default port 3000 is used by the Back-End; your terminal will prompt you to switch to the next available port (Y/O) → select Y):
npm start
The Front-End is now accessible at http://localhost:3001.
💻 Developed with:
Visual Studio Code - Text editor
Sass - CSS preprocessor
React 18 - Free and open-source JavaScript library developed by Facebook
Create React App - Toolkit created by Facebook, which is the reference for initiating a React project
React Router V6 - Routing library for React
Recharts - A charting library for React
Prop-types - A package used to document the intended types of properties passed to React components
JSDoc - Documentation generator for JavaScript
GitHub - Version control tool
GitHub Pages - Hosting tool
**🔗 Liens :
=> W3C validator W3C Link