Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/stephanievanoverberghe/ocr-p12-sportsee

A React-based dashboard for tracking fitness metrics with data visualization.
https://github.com/stephanievanoverberghe/ocr-p12-sportsee

fetch-api react react-router recharts scss vite

Last synced: 23 days ago
JSON representation

A React-based dashboard for tracking fitness metrics with data visualization.

Host: GitHub
URL: https://github.com/stephanievanoverberghe/ocr-p12-sportsee
Owner: stephanievanoverberghe
Created: 2024-11-27T08:50:33.000Z (about 1 month ago)
Default Branch: master
Last Pushed: 2024-12-10T10:29:15.000Z (26 days ago)
Last Synced: 2024-12-10T10:35:48.171Z (26 days ago)
Topics: fetch-api, react, react-router, recharts, scss, vite
Language: JavaScript
Homepage:
Size: 84 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Openclassrooms - **Projet 12** - SportSee

SportSee est une application web permettant aux utilisateurs de suivre leurs activités quotidiennes et leurs données de santé, telles que la consommation de calories, l'apport en protéines et les performances.

## Screenshot

![](./public/screenshot.png)

## Fonctionnalités

> - **Dashboard utilisateur** : Affichage personnalisé des métriques de santé et d'activité.
> - **Visualisation des données** : Graphiques interactifs pour l'activité quotidienne, la durée moyenne des sessions, les performances et le score.
> - **Données mockées** : Possibilité de basculer entre API réelle et données mockées pour les tests.

## Technologies

![Sass](https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white)
![React](https://img.shields.io/badge/React-58C4DC?style=for-the-badge&logo=react&logoColor=white)
![React router](https://img.shields.io/badge/React-router-F44250?style=for-the-badge&logo=react-router&logoColor=white)
![Recharts](https://img.shields.io/badge/Recharts-22B5BF?style=for-the-badge&logo=recharts&logoColor=white)

## Installation

### Prérequis

> - Node.js
> - npm

### Installation

1. Clonez le dépôt GitHub

```sh
git clone https://github.com/stephanievanoverberghe/ocr-p12-sportsee.git
```

2. Installez les dépendances

```sh
npm install
```

### Lancer l'application

```sh
cd api
```

puis

```sh
npm start
```

```sh
cd client
```

puis

```sh
npm run dev
```

## Utilisation

### Configuration API

1. Utilisez les données mockées en définissant `USE_MOCK_DATA` à `true` dans le fichier `config.js`.
2. Basculez sur les données réelle en le définissant à `false`.

### Lancer l'application

Accéder à l'application via:

```sh
http://localhost:5173/user/:id
```

Remplacez `:id` par un ID utilisateur valide, comme `12` ou `18`.

## Structure du projet

```sh
src/
├── assets/ # Images et styles
├── components/ # Composants réutilisables
├── pages/ # Pages principales
├── services/ # Gestion des appels API et des données
├── router.jsx # Définition des routes
├── config.js # Bascule données réelles/mockées
├── index.jsx # Point d'entrée de l'application
└── App.jsx # Composant racine
```