portfolio/formation.md

Parfait Killian. Voici tous les prompts structurés bloc par bloc pour développer ta plateforme de formation ultra sécurisée avec abonnement Stripe, cours vidéo/textes, exercices exécutables, progression, etc. dans Cursor.

Chaque bloc est indépendant et peut être copié-collé dans Cursor directement pour guider la création pas à pas.

---

🧱 Bloc 1 – Authentification sécurisée (frontend uniquement)

Tu crées une plateforme de formation avec cours vidéo/textes, exercices interactifs, paiement par abonnement via Stripe, progression personnalisée et haut niveau de sécurité.

Commence par créer l’authentification côté frontend (Vue 3 + TypeScript).

Fonctionnalités :
- Inscription (email, mot de passe, plan choisi — non fonctionnel pour l’instant)
- Connexion avec token (JWT ou cookie, à simuler)
- Déconnexion
- Mot de passe oublié
- Vérification d’email (page après inscription)

Implémente :
- un store Pinia `useAuthStore`
- une couche `authService.ts` avec appels mockés
- des vues `LoginView`, `RegisterView`, `ForgotPasswordView`
- composants UI réutilisables pour formulaire
- navigation protégée (route guards)

---

🧱 Bloc 2 – Intégration Stripe (paiement + plans)

Ajoute le système de paiement mensuel avec Stripe.

Fonctionnalités :
- Plans d’abonnement multiples (mensuel, annuel, premium, etc.)
- Paiement sécurisé via Stripe Checkout ou Billing Portal
- Stockage du statut de souscription côté backend
- Accès conditionnel aux cours selon le plan

Frontend :
- Crée une page "Plans" avec boutons "S’abonner"
- Intègre Stripe.js et redirige vers Checkout
- Gère le retour de paiement via `success_url` / `cancel_url`

Backend (simulé ou prêt pour implémentation future) :
- Création d’un client Stripe à l’inscription
- Webhooks Stripe pour gérer statut de paiement

---

🧱 Bloc 3 – Architecture des cours (textes + vidéos + code)

Crée la structure d’un cours dans le système.

Fonctionnalités :
- Un cours contient plusieurs chapitres
- Un chapitre contient des leçons (texte, vidéo, exercices)
- Une leçon contient du contenu markdown + vidéo + zone de code

Modèle (à représenter en TypeScript dans frontend pour l’instant) :
- Course: id, title, description, cover, plan_required
- Chapter: id, course_id, title, position
- Lesson: id, chapter_id, title, content (markdown), video_url, exercise_type

Crée les vues :
- `CourseOverview.vue` pour explorer un cours
- `LessonViewer.vue` avec affichage markdown + vidéo + éditeur de code

---

🧱 Bloc 4 – Progression utilisateur dans les cours

Crée un système pour suivre la progression individuelle de l’utilisateur.

Fonctionnalités :
- Chaque utilisateur peut suivre plusieurs cours
- Chaque leçon peut être marquée comme complétée
- Affichage de la progression dans le cours (ex: 4/10 leçons terminées)
- Synchronisé avec le backend (mocké pour l’instant)

Implémente :
- Un store Pinia `useProgressStore`
- Une structure : { user_id, course_id, completed_lessons: [lesson_ids] }
- Affiche des badges de progression dans l’UI

---

🧱 Bloc 5 – Éditeur de code avec exécution sandboxée

Ajoute une zone d’exécution de code dans certaines leçons (exercices interactifs).

Fonctionnalités :
- Zone d’édition avec CodeMirror ou Monaco Editor
- Bouton "Exécuter"
- Envoi du code à une API d’exécution (Docker, VM, ou service type Piston ou Playground)
- Récupération de l’output stdout/stderr

Commence avec un backend mocké (`codeRunnerService.ts`) qui renvoie une sortie simulée, prêt à être branché sur un vrai moteur plus tard.

UI :
- Composant `CodeExercise.vue` avec éditeur + output + reset
- Validation des exercices dans la progression si output match attendu

---

🧱 Bloc 6 – Sécurité avancée & protection des routes

Implémente une sécurité frontend renforcée.

Fonctionnalités :
- Redirection automatique si token expiré
- Accès conditionnel selon abonnement (plan actif ou non)
- Navigation dynamique : masquer les cours inaccessibles

Ajoute :
- Middleware de navigation Vue Router pour bloquer l’accès aux routes protégées
- Contrôle d’accès par rôle/plan dans `authStore`
- Méthodes helpers comme `canAccess(course)` ou `hasPlan(planName)`

---

🧱 Bloc 7 – Tableau de bord utilisateur (dashboard)

Crée un dashboard utilisateur avec :
- Cours suivis et progression
- Plan actuel et facturation
- Historique des paiements (via Stripe si connecté)
- Accès aux paramètres de compte

Crée la vue `DashboardView.vue` avec :
- Composants `UserCourses.vue`, `BillingInfo.vue`, `AccountSettings.vue`
- Requêtes via les stores et services simulés

---

🧱 Bloc 8 – Administration des cours (interface admin)

Crée une interface pour que l’administrateur puisse :
- Créer, modifier, supprimer des cours
- Ajouter des chapitres, leçons, vidéos, exercices

Crée la vue `AdminCoursesView.vue` avec :
- Liste des cours avec boutons d’action
- Formulaires dynamiques pour ajouter chapitre/leçon
- Éditeur markdown intégré + upload vidéo

Utilise Pinia ou un store temporaire pour gérer les états du formulaire.

---

🧱 Bloc 9 – Gestion des erreurs et UX propre

Ajoute une UX propre et robuste :
- Toasts pour succès/erreurs
- Indicateurs de chargement dans tous les appels API
- Pages 404 / 403 / erreur serveur
- Fallbacks pour vidéos, markdown, et éditeur de code

Ajoute un composable `useToast.ts` pour centraliser l'affichage des messages et erreurs.

---

Souhaites-tu que je t’aide à écrire le backend ou les services API de ces blocs en parallèle ? (Rails, Node.js, autre ?)