Application de suivi d’habitudes quotidiennes.
PWA installable – Fonctionne hors ligne après le premier chargement.
Stockage local uniquement (localStorage). Tests unitaires, d’intégration et end‑to‑end inclus.
https://habit-tracker-26fm.vercel.app/
git clone https://github.com/m-tech-cod/habit-tracker
cd habit-stage3
npm install
npm run dev
Ouvrir http://localhost:3000/
## Exécuter les tests
Lancer les différents niveaux de tests avec les commandes suivantes :
| Type de test | Commande |
|--------------|----------|
| Tests unitaires (Vitest) | `npm run test:unit` |
| Tests d'intégration (React Testing Library) | `npm run test:integration` |
| Tests end‑to‑end (Playwright) | `npm run test:e2e` |
| **Tous les tests** | `npm run test` |
> **Rapport de couverture** : `npm run test:unit -- --coverage` – seuil minimal requis 80% pour les fichiers dans `src/lib/`.
## Structure de persistence (localStorage)
L’application utilise exclusivement `localStorage` pour stocker toutes les données. Aucun backend externe n’est utilisé.
| Clé | Rôle | Format / Exemple |
|-----|------|------------------|
| `habit-tracker-users` | Liste des utilisateurs inscrits | `[{ "id": "uuid", "email": "user@example.com", "password": "plaintext", "createdAt": "ISO string" }]` |
| `habit-tracker-session` | Session active de l’utilisateur courant | `{ "userId": "uuid", "email": "user@example.com" }` ou `null` |
| `habit-tracker-habits` | Habitudes de tous les utilisateurs (filtrées côté front par `userId`) | `[{ "id": "uuid", "userId": "uuid", "name": "Drink water", "description": "...", "frequency": "daily", "createdAt": "ISO string", "completions": ["YYYY-MM-DD"] }]` |
- Les mots de passe sont stockés en clair (scope du stage, pas de backend).
- Les dates de complétion sont au format `YYYY-MM-DD` (ISO) et sont uniques par jour.
- Les données persistent après rechargement ou fermeture du navigateur.
---
### PWA (Progressive Web App)
- Fichier manifest : public/manifest.json – déclare le nom, les icônes, le thème.
- Service worker : public/sw.js – met en cache le shell de l’application.
- Icônes : public/icons/icon-192.png et icon-512.png (générées via placehold.co).
- Offline : après le premier chargement, l’application shell s’affiche sans connexion (pas de hard crash).
---
### Architecture et choix techniques
- Next.js 15 (App Router) – rendu côté client pour les pages interactives.
- TypeScript – typage strict, tous les composants et utilitaires sont typés.
- Tailwind CSS – styles responsives (mobile‑first) et mode sombre/clair.
- Vitest + React Testing Library – tests unitaires et d’intégration.
- Playwright – tests E2E sur les parcours critiques.
- localStorage – persistence déterministe, pas de base de données externe.
-Trade‑offs :
-Pas d’authentification réelle (stockage en clair dans localStorage – acceptable pour le scope du stage).
-Fréquence des habitudes limitée à daily (comme exigé par le document technique).
-Service worker simple (cache seulement le shell, pas les données dynamiques).
---
### Correspondance des fichiers de test (mapping exigé par le document)
| Fichier de test | Comportement vérifié |
|----------------|----------------------|
| `tests/unit/slug.test.ts` | `getHabitSlug` – conversion d’un nom en slug (minuscules, tirets, caractères spéciaux) |
| `tests/unit/validators.test.ts` | `validateHabitName` – validation (champ requis, longueur, trim) |
| `tests/unit/streaks.test.ts` | `calculateCurrentStreak` – calcul des séries consécutives (doublons, jours manquants) |
| `tests/unit/habits.test.ts` | `toggleHabitCompletion` – ajout/suppression, immutabilité, pas de doublons |
| `tests/integration/auth-flow.test.tsx` | Inscription/connexion – création session, erreurs (email existant, identifiants invalides) |
| `tests/integration/habit-form.test.tsx` | Création, édition, validation, suppression (modale), mise à jour du streak |
| `tests/e2e/app.spec.ts` | Parcours complet – splash screen, redirections, inscription, création/complétion, persistance, déconnexion, offline shell |
---
### Critères validés
-CRUD complet (Create, Read, Update, Delete) – habits et utilisateurs.
-Filtrage par statut (All, Draft, Pending, Paid) – en version simplifiée dans ce projet, les statuts ne sont pas utilisés mais l’infrastructure est prête.
-Mode clair/sombre via Context API + LocalStorage.
-Responsive (mobile, tablette, desktop) – Tailwind CSS.
-Formulaires validés (nom requis, longueur max, email requis).
-Persistance locale (toutes les données sont conservées).
-PWA installable (manifest, service worker, icônes).
-Tests unitaires, intégration, E2E – 24 tests passants.
-Couverture minimale 80% sur src/lib/ (atteinte).
-Pas d’erreur dans la console, bonnes pratiques d’accessibilité (labels, rôles, focus).
### 👤 Auteur
ALAYDE Malomon Araffath – HNG Internship 2026
GitHub : https://github.com/m-tech-cod