Water Tracker

Application web de suivi quotidien de l'hydratation, développée en React. Les données sont stockées localement dans le navigateur via localStorage, sans aucun backend ni compte utilisateur.

Fonctionnalités

• Suivi de la consommation d'eau en temps réel
• Objectif quotidien personnalisable (défaut : 2000 ml)
• Ajout rapide de quantités prédéfinies (250 ml, 500 ml)
• Ajout de quantités personnalisées
• Indicateur de progression circulaire animé (SVG)
• Historique des consommations de la journée avec horodatage
• Suppression unitaire d'une consommation
• Réinitialisation du journalier
• Persistance des données via localStorage
• Réinitialisation automatique de l'historique à chaque nouveau jour
• Interface responsive (Bootstrap 5)

Technologies utilisées

• React 18 : bibliothèque UI
• Vite : bundler et serveur de développement
• Bootstrap 5.3 : framework CSS (chargé via CDN)
• SVG natif : pour l'indicateur de progression circulaire
• LocalStorage : persistance côté client

Prérequis

• Node.js >= 18
• npm >= 9

Installation

git clone https://github.com/NanteRhak/watertracker-react.git
cd watertracker-react
npm install

Lancement

Environnement de développement

npm run dev

Le serveur démarre par défaut sur http://localhost:5173.

Build de production

npm run build

Les fichiers optimisés sont générés dans le dossier dist/.

Prévisualisation du build

npm run preview

Structure du projet

watertracker-react/
├── public/
├── src/
│   ├── App.jsx          # Composant principal
│   ├── main.jsx         # Point d'entrée React
│   └── assets/
├── index.html
├── package.json
├── vite.config.js
└── README.md

Stockage des données

L'application utilise trois clés localStorage :

Clé	Contenu
wt_goal	Objectif quotidien en ml
wt_entries	Historique des consommations (JSON)
wt_date	Date courante (format fr-FR)

Les données sont entièrement locales et ne sont jamais transmises à un serveur. La suppression des données du navigateur entraîne la perte de l'historique.

Personnalisation

Modifier les quantités prédéfinies

Dans src/App.jsx, modifier les appels à addWater() dans les boutons rapides :

onClick={() => addWater(250)}  // Quantité en ml

Modifier l'objectif par défaut

Modifier la valeur initiale du state waterGoal :

const [waterGoal, setWaterGoal] = useState(2000);

Installer Bootstrap via npm

Pour remplacer le chargement CDN par un module npm :

npm install bootstrap

Puis ajouter dans src/main.jsx :

import 'bootstrap/dist/css/bootstrap.min.css';

Et supprimer le bloc d'injection CDN dans le useEffect de App.jsx.