SportSee

Lien du site - README en Français - README en Anglais

Description en Français

1. Présentation du projet

Projet réalisé dans le cadre du programme de formation Développeur Front-end JavaScript React chez OpenClassrooms.

1.1 Objectif :

• Développer la page de profil de l'utilisateur en intégrant des éléments graphiques avancés tels que des graphiques et des diagrammes pour présenter les données d'analyse sportive.

1.2 Compétences évaluées :

• Assurer la qualité des données d'une application
• Développer des éléments graphiques avancés à l'aide de bibliothèques JavaScript
• Interagir avec un service Web
• Réaliser une documentation

2. Contraintes

2.1 Fonctionnelles :

• Respect de la charte graphique de la maquette (voir : 5.1 maquette )
• Le projet doit être lisible sur les écrans d’au moins 1024 par 780 pixels.
• L'application répond aux différentes user stories de la partie 'TODO' du kanban (voir : 5.2 kanban )

2.2 Techniques :

• Séparation logique du code dans des composants réutilisables.
• Utilisation des bibliothèques telles que Recharts ou D3.
• Réalisation d'une mock des données de l'API
• Gestion des appels HTTP, utilisant des bibliothèques comme Fetch ou Axios pour interagir avec le back-end et récupérer les données nécessaires.
  • Création de services pour gérer les appels en dehors des composants React.
• Réalisation d'une documentation complète comprenant un Readme, JSDoc, et les proptypes.

3. Lancement du projet :

3.1 Prérequis :

• Git
• Node pour les commandes npm ou Yarn pour les commandes yarn

3.2 Dépendances :

• React: ^18.2.0
• React-router-dom: ^6.21.3
• npm i react-router-dom ou yarn add react-router-dom
• Recharts: ^2.10.4
• npm i recharts ou yarn add recharts
• prop-types: ^15.8.1
• npm i prop-types ou yarn add prop-types
• dotenv: ^16.4.1
• npm i dotenv ou yarn add dotenv
• axios: ^1.6.5
• npm i axios ou yarn add axios

4. Procédure d'installation :

Cloner le dépôt :

git clone https://github.com/MeTuseL/SportSee

4.1 Configuration du back-end :

• Accéder au dossier "backend-api-sportsee"

• Installer toutes les dépendances :

npm install ou yarn

• Lancer le back-end sur le port 3000 :

 npm run dev ou yarn run dev

4.2 Configuration du front-end :

• Accéder au dossier "frontend-sportsee"

• Installer toutes les dépendances :

  npm install ou yarn

• Lancer le front-end :

npm run start ou yarn run start

Le front-end sera accessible sur le port 3001 : http://localhost:3001/SportSee.

5. Autres :

5.1 Maquette

• Lien vers les maquettes

5.2 Kanban

• Kanban avec les user stories

---

SportSee

Link to the website - French README - English README

Description in English

1. Project Overview

This project was completed as part of the Front-end JavaScript React Developer program at OpenClassrooms.

1.1 Objective:

• Develop the user profile page, integrating advanced graphical elements such as charts and diagrams to present sports analysis data.

1.2 Evaluated Skills:

• Ensuring data quality of an application
• Developing advanced graphical elements using JavaScript libraries
• Interacting with a Web service
• Creating documentation

2. Constraints

2.1 Functional:

• Adherence to the design guidelines of the mockup (see: 5.1 mockup )
• The project must be readable on screens of at least 1024 by 780 pixels.
• The application meets the different user stories of the 'TODO' section of the Kanban board (see: 5.2 kanban )

2.2 Technical:

• Logical separation of code into reusable components.
• Use of libraries such as Recharts or D3.
• Implementation of mock data for the API
• Management of HTTP calls, using libraries like Fetch or Axios to interact with the back-end and retrieve necessary data.
  • Creation of services to handle calls outside React components.
• Comprehensive documentation including a Readme, JSDoc, and PropTypes.

3. Project Setup :

3.1 Prerequisites :

• Git
• Node for npm commands or Yarn for yarn commands

3.2 Dependencies :

• React: ^18.2.0
• React-router-dom: ^6.21.3
• npm i react-router-dom or yarn add react-router-dom
• Recharts: ^2.10.4
• npm i recharts or yarn add recharts
• prop-types: ^15.8.1
• npm i prop-types or yarn add prop-types
• dotenv: ^16.4.1
• npm i dotenv or yarn add dotenv
• axios: ^1.6.5
• npm i axios or yarn add axios

4. Installation Procedure :

Clone the repository:

git clone https://github.com/MeTuseL/SportSee

4.1 Setup back-end :

• Navigate to the "backend-api-sportsee" directory

• Install all dependencies :

npm install or yarn

• Run the back-end on port 3000 :

 npm run dev or yarn run dev

4.2 Setup front-end :

• Navigate to the "frontend-sportsee" directory

• Install all dependencies :

  npm install or yarn

• Run the front-end :

npm run start or yarn run start

The front-end will be launched on port 3001: http://localhost:3001/SportSee.

5. Additional Information :

5.1 Mockup

• Mockup Link

5.2 Kanban

• Kanban with user stories

---