Memory App

Application web de mémorisation par répétition espacée, basée sur le système de Leitner.

1. Déploiement

Prérequis

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

Installation

npm install

Développement

npm run dev

L'application est accessible sur http://localhost:5173.

Build production

npm run build
npm run preview

Le build est généré dans dist/. Le mode preview sert les fichiers de production avec le Service Worker actif (mode hors-ligne fonctionnel).

2. Fonctionnalités implémentées

Gestion du contenu

• Créer, modifier et supprimer des catégories
• Ajouter, éditer et supprimer des thèmes dans les catégories
• Créer, modifier et supprimer des cartes de révision (recto/verso avec texte et/ou média : image, audio, vidéo)

Système de révision

• Révision d'un thème avec configuration du nombre de niveaux (2 à 7) et du nombre de nouvelles cartes par jour
• Répétition espacée basée sur le système de Leitner : intervalle = 2^(niveau-1) jours
• Session de révision avec flip card (retourner la carte pour voir la réponse)
• Page de résumé après chaque session (réussies / échouées / total)
• Simulation de jours (bouton "+ 1 jour") pour tester la répétition espacée sans attendre

Fonctionnement hors-ligne

• Service Worker généré automatiquement par vite-plugin-pwa
• Manifest pour installation en tant que PWA
• Fonctionne intégralement hors-ligne après le premier chargement (mode npm run build + npm run preview)

Persistence

• Toutes les données sont stockées dans le localStorage via Zustand persist
• Les données survivent au rechargement et à la fermeture du navigateur

Données de test

• Un bouton "Charger les données de démo" est disponible sur la page d'accueil (quand aucune catégorie n'existe)
• Données de démo : 2 catégories, 3 thèmes, 10 cartes (fichier src/data/sampleData.ts)

Fonctionnalités optionnelles non réalisées

• Notifications de rappel quotidien
• Publication / import de thèmes en ligne

Limitations connues

• La révision se fait thème par thème (pas de révision multi-thèmes simultanée)
• Les cartes ratées reviennent le lendemain (pas en fin de session)

3. Architecture et organisation du code

Structure des dossiers

src/
├── components/
│   ├── Layout.tsx              # Layout principal (header + nav + outlet)
│   ├── Layout.css
│   └── ui/                     # Composants réutilisables
│       ├── Button/             # Bouton (primary, secondary, danger)
│       ├── Input/              # Champ texte avec label
│       ├── Textarea/           # Zone de texte avec label
│       └── EmptyState/         # Message quand liste vide
├── data/
│   └── sampleData.ts           # Données de démonstration
├── pages/
│   ├── CategoriesPage/         # Accueil : liste des catégories (CRUD)
│   ├── CategoryDetailPage/     # Détail catégorie : liste des thèmes (CRUD)
│   ├── ThemeDetailPage/        # Détail thème : liste des cartes
│   ├── CardCreatePage/         # Formulaire création de carte
│   ├── CardEditPage/           # Formulaire édition de carte
│   ├── ReviewSetupPage/        # Configuration + lancement de révision
│   ├── ReviewSessionPage/      # Session de révision (flip card)
│   ├── ReviewSummaryPage/      # Résumé de fin de session
│   └── Pages.css               # Styles partagés des pages
├── store/
│   └── useMemoryStore.ts       # Store Zustand (état global + logique métier)
├── styles/
│   └── global.css              # Variables CSS, reset, utilitaires (sr-only, skip-link)
├── test/
│   └── setup.ts                # Configuration Vitest (mock localStorage, reset store)
├── types/
│   └── index.ts                # Types TypeScript (Card, Theme, Category, etc.)
├── App.tsx                     # Routeur (React Router v7)
└── main.tsx                    # Point d'entrée

Choix techniques

Technologie	Rôle
React 19 + TypeScript	Framework UI avec typage statique
React Router v7	Routage SPA (createBrowserRouter)
Zustand + middleware persist	Gestion d'état global + persistance localStorage
Vite	Bundler et serveur de développement
vite-plugin-pwa	Génération automatique du Service Worker et du Manifest
Vitest + Testing Library	Tests unitaires et de composants
Playwright	Tests E2E (Desktop Chrome + Mobile Chrome)
Storybook	Documentation des composants UI
ESLint + eslint-plugin-jsx-a11y	Linting + vérification accessibilité

Gestion de l'état

Le store Zustand (useMemoryStore) centralise :

• Les données (catégories, thèmes, cartes)
• La configuration de révision (niveaux, cartes/jour)
• La progression des cartes (niveau, date de prochaine révision)
• La simulation du temps (date simulée pour les tests)

Routage

Route	Page
/	Liste des catégories
/category/:categoryId	Détail d'une catégorie (thèmes)
/theme/:themeId	Détail d'un thème (cartes)
/theme/:themeId/cards/new	Création de carte
/theme/:themeId/cards/:cardId/edit	Édition de carte
/review	Configuration de révision
/review/:themeId	Session de révision
/review/:themeId/summary	Résumé de session

4. Tests et qualité

Tests unitaires et de composants (62 tests)

npm test -- --project=unit        # mode watch
npx vitest run --project=unit     # exécution unique

• 31 tests du store : CRUD catégories/thèmes/cartes, logique Leitner, intervalles, simulation de jours, scénario complet
• 31 tests de composants : Button, Input, Textarea, EmptyState (rendu, props, interactions, accessibilité)

Storybook

npm run storybook                 # mode dev sur http://localhost:6006
npm run build-storybook           # build statique

Composants documentés : Button (7 stories), Input (6 stories), Textarea (5 stories), EmptyState (4 stories).

Tests E2E (14 tests)

npm run test:e2e                  # lance tous les tests
npx playwright test --ui          # mode interactif

• Parcours CRUD : création catégorie, thème, carte, modification, suppression, données de démo
• Parcours révision : session complète, résumé, aucune carte disponible, simulation de jours
• Testés sur Desktop Chrome et Mobile Chrome (Pixel 5)

Couverture de tests

npm run test:coverage

5. Accessibilité et performance

Accessibilité (WCAG 2.1 AA)

• Navigation au clavier : tous les éléments interactifs sont accessibles au clavier
• Skip link : lien "Aller au contenu principal" au début de la page
• ARIA : labels sur les boutons d'action, role="list" sur les listes, aria-label sur les liens de navigation
• Focus visible : :focus-visible avec anneau bleu, masqué au clic souris
• Labels sr-only : labels accessibles mais masqués visuellement sur les champs de formulaire
• HTML sémantique : <header>, <nav>, <main>, <h1>, <fieldset>, <legend>
• Contrastes : palette de couleurs conforme WCAG AA
• ESLint jsx-a11y : vérification automatique des bonnes pratiques

Les rapports d'accessibilité (Lighthouse, WAVE) sont à générer via les outils navigateur sur le build de production.

Performance

L'application est optimisée pour la performance :

• Build Vite avec tree-shaking et code splitting
• CSS minimal avec variables custom (pas de framework CSS lourd)
• Pas de dépendances inutiles
• Service Worker pour le cache des assets

Les rapports Lighthouse sont à générer via Chrome DevTools sur le build de production (npm run build + npm run preview).

6. Données de test

Importer les données de démo

1. Lancer l'application (npm run dev)
2. Sur la page d'accueil, cliquer sur "Charger les données de démo"
3. Les données apparaissent immédiatement : 2 catégories, 3 thèmes, 10 cartes

Réinitialiser les données

Ouvrir la console du navigateur et exécuter :

localStorage.clear()

Puis recharger la page.

Structure des données de démo

Les données sont définies dans src/data/sampleData.ts :

• Langues : Anglais Vocabulaire (4 cartes), Espagnol Bases (3 cartes)
• Sciences : Maths Formules (3 cartes)