Application SportSee with React

The project is part of a front-end training course specialising in React delivery by openclassrooms.

training link : https://openclassrooms.com/fr/paths/516-developpeur-dapplication-javascript-react

Project goal: develop an analytic Dashboard with React and implement graphics with an external library

Figma template: click here

User stories dashboard: click here

Version

version 1

Project Deployment link:

link

ps: backend have to be launch before

Features

• react router
• functional components
• horizontal & vertical navbar
• desktop design version only (breakpoint 1024)
• design pattern for data modeling class
• graphs components using recharts library link
• documentation with JSDoc and proptypes

Tech Stack

Client: React, react-router-dom, axios, Sass, esLint, Prop-types, Recharts

Server: see backend repository link

Required

Installation

front-end

clone project

  git clone https://github.com/danielgonzalez0/P12-OC-20230424-SportSee.git

Go to the project directory

  cd P12-OC-20230424-SportSee

Install dependencies

  npm install

launch server

  npm run start

Back-end

Go to the back-end repository link Follow the readme instructions (2 ways to install: with or without Docker)

This project includes four endpoints that you will be able to use:

• http://localhost:3000/user/${userId} - retrieves information from a user. This first endpoint includes the user id, user information (first name, last name and age), the current day's score (todayScore) and key data (calorie, macronutrient, etc.).
• http://localhost:3000/user/${userId}/activity - retrieves a user's activity day by day with kilograms and calories.
• http://localhost:3000/user/${userId}/average-sessions - retrieves the average sessions of a user per day. The week starts on Monday.
• http://localhost:3000/user/${userId}/performance - retrieves a user's performance (energy, endurance, etc.).

Warning, currently only two users have been mocked. They have userId 12 and 18 respectively.

Screenshots

🚀 About Me

I am currently retraining to become a front-end developer and am taking the Application Developer - JavaScript React course at OpenClassrooms.

The objective of this training is to acquire a specialization in front-end and to consolidate the knowledge that I obtained during my previous training in web development.

The ultimate goal is to find a first position as a junior web developer to perfect my skills and gain more experience.

I am a professional with many years of experience in controlling and accounting, combined with a solid higher education background. I am able to function independently, and I have a strong sense of organisation and proven analytical and synthesis skills.

I am empathetic and rigorous by nature, I listen to others and I can easily work in a team.