## MINI-PROJET APP -- SPA

### Informations générales

**Cadriciel choisi** : [x] Next.js

**Nom de l'application** : Cheatsheet Interactive

**Description en une phrase** : Application de fiches de syntaxe comparant React, Next.js et Vue.js concept par concept, avec grille colorée filtrée dynamiquement et popup de comparaison.

**URL** : `macheatsheet.xyz/editeur/`

### Construction et lancement

```
cd exemple-cheatsheet-nextjs/
npm install
npm run build
npm start
```
Ouvrir http://localhost:3000 dans un navigateur

---

### 1. PAGE DE CHOIX

**Données JSON** : `donnees/concepts.json` -- 14 concepts de programmation web (composants, état, événements, routage, cycle de vie, styles, données)

**Champs par élément** : id, titre, categorie, icone, description, react, nextjs, vuejs (8 champs)

**Ce que l'utilisateur voit en arrivant** :
Trois grandes cartes sombres représentant React (bleu), Next.js (noir) et Vue.js (vert). Chaque carte affiche le nom du cadriciel, une description, les concepts-clés et un lien « Explorer les fiches ». Le cadriciel choisi est sauvegardé dans localStorage et pré-sélectionné lors de la prochaine visite.

---

### 2. VUE INTERACTIVE

**Description de l'expérience** :
Une grille de fiches colorées organisées par catégorie. Trois onglets en haut permettent de basculer entre React, Next.js et Vue.js. Chaque fiche affiche l'icône du concept, sa catégorie en badge coloré, le titre et un aperçu de la première ligne de code. Le changement de cadriciel déclenche une réanimation de toute la grille.

**Événements utilisateur** (3+ types) :
- [x] **Clic/tap** : Changer de cadriciel (onglets), cliquer une fiche pour ouvrir le popup, filtrer par catégorie
- [x] **Saisie clavier** : Recherche en temps réel par titre ou description de concept
- [x] **Survol** : Élévation et ombre portée sur les fiches au hover, rotation du bouton fermer du popup

**Effets visuels** (2+ effets) :
- [x] **Animation d'élément** : Apparition en cascade des fiches (apparitionBloc avec délai progressif), réanimation au changement de cadriciel
- [x] **Retour visuel** : Popup avec effet scale+fondu (popupApparition), fondu de l'overlay avec backdrop-filter blur
- [x] **Transition de page** : Fondu et glissement vertical à l'entrée de chaque page

---

### 3. COMPOSANT POPUP

**Déclenché par** : Clic sur une fiche de concept dans la grille

**Données affichées** : Icône du concept, titre, badge de catégorie, description pédagogique, code complet pour le cadriciel actif avec onglets pour comparer les 3 cadricels côte à côte, indicateur visuel du cadriciel sélectionné

**Effet d'apparition** : Scale de 0.92 à 1 + translateY + fondu (animation popupApparition avec courbe cubic-bezier rebondissante). Overlay avec backdrop-filter blur(8px). Fermeture par bouton ✕ avec rotation 90° au hover, ou par touche Escape, ou par clic sur l'overlay.

---

### 4. COMPOSANT RÉUTILISABLE

**Nom du composant** : BlocConcept

**Props reçues** : concept (objet), cadricicielActif (chaîne), surClic (fonction), couleurCategorie (chaîne), etiquetteCategorie (chaîne), variante (chaîne)

**Comportement paramétrable** : La prop `variante` contrôle le rendu -- `'complet'` affiche l'icône, le badge catégorie, le titre et un aperçu de code sur fond sombre ; `'compact'` n'affiche que l'icône, le badge et le titre, sans aperçu de code

**Utilisé dans** :
1. Page feuille -- grille interactive de concepts (variante `complet`)
2. Popup -- concepts reliés de la même catégorie (variante `compact`)

---

### 5. ÉLÉMENTS TECHNIQUES

**Recherche/filtre** : Champ de recherche en temps réel sur la page feuille, filtre par titre ou description du concept. Filtres de catégorie colorés (Composants, État, Événements, Routage, Cycle de vie, Styles, Données) combinés avec la recherche textuelle. Compteur de résultats affiché.

**État persistant** : Cadriciel préféré sauvegardé dans localStorage sous la clé `cadricicielChoisi`. Écrit au clic sur un cadriciel (page de choix ou onglets), lu au montage de la page feuille. Le cadriciel est pré-sélectionné lors de la prochaine visite.

---

### 6. AIDE INTÉGRÉE

**Sujets d'aide** (4 sujets) :
- /aide/syntaxe : Guide de syntaxe et conventions utilisées
- /aide/comparaison : Comparaison des trois cadricels
- /aide/ressources : Liens vers la documentation officielle
- /aide/projet : À propos du projet et technologies utilisées

---

### Composants

| Composant | Rôle | Réutilisé? |
|-----------|------|------------|
| Navigation | Barre de navigation SPA | Oui - sur toutes les pages via _app.js |
| BlocConcept | Fiche de concept (complet ou compact) | Oui - grille principale + concepts reliés dans popup |
| PopupConcept | Popup de comparaison de code | Non - page feuille seulement |