---

Summary

Context

• Mise en situation / Case Study.
• Sportsee (une startup dédiée au coaching sportif) va lancer une nouvelle version de la page profil permettant à l’utilisateur de suivre le nombre de sessions réalisées ainsi que le nombre de calories brûlées / Sportsee (start-up dedicated to sport's coaches) will launch a new profile page that will allow user to track their sports sessions and calories burned.

My function / Rôle

• Frontend developper

Goal / Objectif

• Mockup integration (descktop only).
• Build UI with React and Proptypes.
• Set up the routes.
• Follow user stories.
• Build charts with Recharts or D3.
• API calls with fetch or Axios (start with mocked datas).
• Write documentation in English (JsDoc).

---

Project

Assets

• Backend repo : Github
• Mockup : Figma
• User stories : Notion

Dependencies

• Recharts v2.1.9
• prop-typesv15.8.1
• JSDoc v3.6.10
• better-docs v2.7.2

Getting Started

1. Clone repository (FRONT) : git clone https://github.com/W-Kamal/SportSee_12.git
2. Clone repository (BACK) : git clone https://github.com/W-Kamal/SportSee_12_back.git
3. Install dependencies : pnpm* install
4. Launch local web server (FRONT + BACK) : pnpm* run dev
5. Backend is now rendered at URL http://localhost:3000.
6. Frontend is now rendered at URL http://localhost:3001 (or another port) with mocked data.
7. If you want to switch to real backend data, go to src/services/Global.js and set ENV constant from dev to prod. *use any package manager that suits you

Potential improvements / Améliorations possibles

This project was made for learning a specific concept or tool. Therefore it might appear not complete. If I had to push further this project, I would work on :

1. Build a home page.
2. Performance optimisation.
3. Build a backend.

---