## MINI-PROJET APP -- SPA

### Informations générales

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

**Nom de l'application** : Leçons FL Studio

**Description en une phrase** : Similaire à l'exemple de cheatsheet, mais les capsules contiennent des informations essentielles, des techniques et des conseils pour une bonne production musicale.

**URL** : `projet-app.s0und.space`

---

### 1. PAGE DE DONNÉES ET AIDE

**Option choisie** : [x] Page de choix  [ ] Page de résultats
**Données JSON** : Les modules des leçons pour apprendre comment produire de la musique (spécifiquement FL Studio) (décrire le fichier et son contenu)
**Ce que l'utilisateur voit en arrivant** :
Les quatres choix de modules en grosses cartes

**Sujets d'aide** (3+ sujets) :
- /aide/filtrer : Comment filtrer
- /aide/vue-detaillee : Vue détaillée
- /aide/ressources-utiles : Ressources utiles

---

### 2. PAGE INTERACTIVE

**Description de l'expérience** :
trouver et apprendre sur plusieurs leçons techniques à propos de la création de musique, avec plusieurs outils pour aider la recherche

**Événements utilisateur** (3+ types) :
- [x] **Clic/tap** : pop up / selection des filtres
- [x] **Saisie clavier** : recherche par clavier
- [x] **Survol** : les popups avec le useState enSurvol, seulement eux!!!!!!

**Effets visuels** (2+ effets) :
- [x] survol des cartes interactives
- [x] splash des cartes interactives

---

### 3. COMPOSANTS PARAMÉTRÉS

**Composant popup** :
- Déclenché par : clic
- Données affichées : titre, icone, categorie, description, texte, source
- Effet d'apparition : apparition vers le bas avec transition par transparance

**Composant réutilisable** :
- Nom du composant : BlocConcept
- Props reçues : cle, indexConcept, concept, surClic, afficherCategorie, couleurCategorie, variante, texte
- Comportement paramétrable : couleur de la categorie et si elle est affiché ou pas
- Utilisé dans : 1. page interactive 2. page aide

---

### 4. FILTRE ET PERSISTANCE

**Recherche/filtre** : page interactive, filtrer par module et categorie (difficulté de la leçon)
(où dans l'app et sur quelles données)

**État persistant** : le moduleChoisi à la page choix
(quoi est sauvegardé, où est-ce lu)