🚀 Cards - Application Intelligente d'Apprentissage

Application de cartes flash avancée avec 7 systèmes d'optimisation pour l'apprentissage adaptatif. Migrée de Flutter vers React TypeScript pour une expérience web moderne et performante.

🗂️ Phases d'Optimisation

Phase 1: Base performance (lazy routes, GPU warmup isolé, web vitals dev, accessibilité skip link).
Phase 2: Event bus global, externalisation des règles d'optimisation, WorkerPool, instrumentation réseau (fetch tracker), dépréciation SystemIntegrationMaster.
Phase 3: Réactivation PWA, bridge gamification initial, test PWA, store performance (pendingRequests), diagnostics param URL.
Phase 4: Micro-benchmarks Vitest (npm run bench), script smoke perf (npm run perf:smoke), bannière offline, panneau diagnostics enrichi (pending requests, mémoire, dernière optimisation), stratégie Workbox API (NetworkFirst), bridge gamification XP/session.

Phase 5: Personnalisation & Adaptation

Recommandations dynamiques multi-règles (performance, rétention, streak, challenge).
Scoring adaptatif de la file d'étude (due + difficulté + rétention).
Historique apprentissage learning-history.json + gate npm run perf:learn:check (chute accuracy >15%).
Hook useLearningProfile + événements learningProfileUpdated & recommendations.
Sparklines Accuracy / Mastery dans le panneau diagnostics + top recommandations.
Alertes in-session (baisse de précision >20%) pour micro‑pause / ajustement.

✨ Fonctionnalités Principales

🧠 7 Systèmes d'Optimisation Révolutionnaires

🎨 Advanced Rendering System - Performance de rendu optimisée avec WebGL
🧠 Algorithmic Optimization Engine - Algorithmes d'IA avec Web Workers
⚡ Performance Optimizer - Monitoring temps réel des métriques
🎯 System Integration Master (déprécié) - remplacé par bus d'événements + règles externalisées
📚 Intelligent Learning System - IA d'apprentissage adaptatif
🌊 Fluid Transition Mastery - Animations fluides avancées
💾 Memory Manager - Gestion intelligente de la mémoire
🌐 Fetch Tracker - Instrumentation réseau (pending/total requests)
👷 Worker Pool - Délégation tâches lourdes multi-workers

🎮 Modes d'Étude Interactifs

📝 Quiz Mode - Questions à choix multiples avec feedback intelligent
⚡ Speed Round - Sessions chronométrées avec scoring en temps réel
🎯 Matching Game - Glisser-déposer pour associations visuelles
✍️ Writing Practice - Saisie manuelle avec vérification automatique

📊 Analytics Avancées

Algorithme de répétition espacée (SM-2)
Tableaux de bord personnalisés
Métriques de progression détaillées
Prédiction de rétention
Heatmap d'activité quotidienne
Détection Leech & fonction Bury
Recherche avancée (deck, tag, cartes dues, leeches)
Cartes Cloze (masques dynamiques)

🛠️ Stack Technologique

Technologie	Version	Description
React	18.2+	Framework UI moderne
TypeScript	5.0+	Typage statique
Vite	4.4+	Build tool ultra-rapide
Tailwind CSS	3.3+	Framework CSS utilitaire
Framer Motion	10.16+	Animations fluides
Dexie.js	3.2+	Base de données IndexedDB
Zustand	4.4+	State management léger
Chart.js	4.4+	Graphiques interactifs
Vitest	0.34+	Framework de test

🚀 Installation et Configuration

Prérequis

Assurez-vous d'avoir Node.js installé sur votre système :

Téléchargez Node.js : https://nodejs.org/
Installez la version LTS (recommandée)
Vérifiez l'installation :
```
node --version
npm --version
```

Installation des Dépendances

# Cloner le projet (si depuis un repo)
git clone <repository-url>
cd cards

# Installer les dépendances
npm install

# Démarrer le serveur de développement
npm run dev

# Ouvrir http://localhost:3000 dans votre navigateur

Scripts Disponibles

# Développement
npm run dev          # Serveur de développement
npm run build        # Build de production
npm run preview      # Prévisualisation du build

# Tests
npm run test         # Tests unitaires
npm run test:ui      # Interface de test
npm run test:coverage # Couverture de code

# Qualité du code
npm run lint         # Linting ESLint
npm run typecheck    # Vérification TypeScript

🏗️ Architecture du Projet

src/
├── core/                    # 🧠 Systèmes d'optimisation
│   ├── AdvancedRenderingSystem.ts
│   ├── AlgorithmicOptimizationEngine.ts
│   ├── PerformanceOptimizer.ts
│   ├── SystemIntegrationMaster.ts
│   ├── IntelligentLearningSystem.ts
│   ├── FluidTransitionMastery.ts
│   └── MemoryManager.ts
├── data/                    # 💾 Couche de données
│   ├── database/           # IndexedDB avec Dexie
│   ├── repositories/       # Accès aux données
│   └── stores/            # State management
├── domain/                  # 🎯 Logique métier
│   ├── entities/          # Modèles (Card, Deck, Stats)
│   ├── usecases/          # Cas d'usage
│   └── services/          # Services métier
├── ui/                     # 🎨 Interface utilisateur
│   ├── components/        # Composants réutilisables
│   ├── pages/            # Pages principales
│   ├── hooks/            # Hooks personnalisés
│   └── styles/           # Styles globaux
└── utils/                  # 🛠️ Utilitaires
    ├── algorithms/        # Algorithmes d'apprentissage
    ├── helpers/          # Fonctions utilitaires
    └── constants/        # Constantes

📊 Modèle de Données

🃏 Card (Carte Flash)

interface Card {
  id: number
  deckId: number
  frontText: string
  backText: string
  frontImage?: string
  backImage?: string
  frontAudio?: string
  backAudio?: string
  tags: string
  difficulty: number
  lastReviewed?: Date
  reviewCount: number
  easinessFactor: number
  repetitions: number
  intervalDays: number
  nextReviewDate?: Date
  createdAt: Date
  updatedAt: Date
}

📚 Deck (Paquet de Cartes)

interface Deck {
  id: number
  name: string
  description: string
  coverImage?: string
  category: string
  difficulty: string
  tags: string
  isPublic: boolean
  createdAt: Date
  updatedAt: Date
  cards?: Card[]
  stats?: DeckStats
}

📈 DeckStats (Statistiques)

interface DeckStats {
  id: number
  deckId: number
  totalCards: number
  studiedCards: number
  masteredCards: number
  averageScore: number
  totalStudyTime: number
  lastStudyDate: Date
  studyStreak: number
  createdAt: Date
  updatedAt: Date
}

🎯 Algorithme d'Apprentissage

Cards utilise l'algorithme SM-2 (SuperMemo) optimisé pour la répétition espacée :

Facteur de facilité adaptatif selon les performances
Intervalles optimaux calculés automatiquement
Prédiction de rétention basée sur l'historique
Recommandations personnalisées d'apprentissage

🔧 Configuration de Développement

Extensions VS Code Recommandées

{
  "recommendations": [
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-vscode.vscode-typescript-next",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense"
  ]
}

Variables d'Environnement

Créez un fichier .env.local :

# Configuration de l'application
VITE_APP_NAME="Cards"
VITE_APP_VERSION="1.0.0"

# Configuration de la base de données
VITE_DB_NAME="CardsDB"
VITE_DB_VERSION=1

# Configuration des performances
VITE_ENABLE_PERFORMANCE_MONITORING=true
VITE_CACHE_DURATION=3600000

🧪 Tests

Tests Unitaires

npm run test

Tests de Couverture

npm run test:coverage       # génère aussi coverage/badge.svg

Profilage de Tests (optionnel)

TEST_PROFILING=1 npm run test:run

Le profilage affiche un résumé trié par durée pour cibler les scénarios lents (seuil par défaut 50ms, indicateur 🔥).

Tests E2E (à venir)

npm run test:e2e

🚀 Déploiement

Build de Production

npm run build

PWA (Progressive Web App)

L'application est configurée comme PWA avec :

Cache intelligent
Mode hors ligne
Installation sur l'appareil
Notifications push (à venir)

Déploiement Cloud

Compatible avec :

Vercel (recommandé)
Netlify
GitHub Pages
AWS S3 + CloudFront

📈 Performance

Optimisations Implémentées

Bundle splitting automatique
Lazy loading des composants
Virtual scrolling pour les grandes listes
Web Workers pour les calculs intensifs
Service Worker pour le cache
Image optimization avec lazy loading

Métriques Cibles

First Contentful Paint : < 1.5s
Largest Contentful Paint : < 2.5s
Cumulative Layout Shift : < 0.1
Time to Interactive : < 3.5s

Observabilité & Logging Avancé

Panneau diagnostics activable via VITE_ENABLE_DIAGNOSTICS=true (sparkline FPS, adaptations seuil)
Logger structuré avec rate‑limit (suppression consolidée) & batching configurable (VITE_ENABLE_LOG_BATCHING)
Historique des adaptations FPS (abaissement progressif du seuil pour réduire bruit)
Budgets centralisés : src/utils/performanceBudgets.ts (fps, mémoire, latence)
API clés : logger.getSuppressionSummary(), logger.configureBatch(), logger.setBatchingEnabled()
Feature flags centralisés : src/utils/featureFlags.ts

🔒 Sécurité et Confidentialité

Données locales : Stockage 100% local avec IndexedDB
Aucune collecte de données personnelles
RGPD compliant par design
Open source et transparent

🤝 Contribution

Fork le projet
Créez une branche feature (git checkout -b feature/amazing-feature)
Committez vos changements (git commit -m 'Add amazing feature')
Push vers la branche (git push origin feature/amazing-feature)
Ouvrez une Pull Request

📝 Licence

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.

🎯 Roadmap

Version 1.0 (Actuelle)

✅ Migration Flutter → React TypeScript
✅ 7 systèmes d'optimisation
✅ 4 modes d'étude
✅ Analytics de base

Version 1.1 (Prochaine)

🔄 Import/Export Anki
🔄 Synchronisation cloud
🔄 Mode collaboratif
🔄 Plugins communautaires

Version 2.0 (Future)

🎯 IA avancée pour recommandations
🎯 Reconnaissance vocale
🎯 Réalité augmentée
🎯 Gamification poussée

💬 Support

Documentation : Wiki du projet
Issues : GitHub Issues
Discussions : GitHub Discussions
Discord : Serveur communautaire

Développé avec ❤️ par Alox92

Cards - Révolutionnez votre apprentissage avec l'intelligence artificielle

Name		Name	Last commit message	Last commit date
Latest commit History 26 Commits
.vscode		.vscode
bench		bench
docs		docs
e2e		e2e
memory-bank		memory-bank
public		public
scripts		scripts
src		src
test-results		test-results
.env.example		.env.example
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
INFRASTRUCTURE_OPTIMIZATION_REPORT.md		INFRASTRUCTURE_OPTIMIZATION_REPORT.md
README.md		README.md
TESTING_GUIDE.md		TESTING_GUIDE.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

Folders and files

Latest commit

History

Repository files navigation

🚀 Cards - Application Intelligente d'Apprentissage

🗂️ Phases d'Optimisation

Phase 5: Personnalisation & Adaptation

✨ Fonctionnalités Principales

🧠 7 Systèmes d'Optimisation Révolutionnaires

🎮 Modes d'Étude Interactifs

📊 Analytics Avancées

🛠️ Stack Technologique

🚀 Installation et Configuration

Prérequis

Installation des Dépendances

Scripts Disponibles

🏗️ Architecture du Projet

📊 Modèle de Données

🃏 Card (Carte Flash)

📚 Deck (Paquet de Cartes)

📈 DeckStats (Statistiques)

🎯 Algorithme d'Apprentissage

🔧 Configuration de Développement

Extensions VS Code Recommandées

Variables d'Environnement

🧪 Tests

Tests Unitaires

Tests de Couverture

Profilage de Tests (optionnel)

Tests E2E (à venir)

🚀 Déploiement

Build de Production

PWA (Progressive Web App)

Déploiement Cloud

📈 Performance

Optimisations Implémentées

Métriques Cibles

Observabilité & Logging Avancé

🔒 Sécurité et Confidentialité

🤝 Contribution

📝 Licence

🎯 Roadmap

Version 1.0 (Actuelle)

Version 1.1 (Prochaine)

Version 2.0 (Future)

💬 Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages