Créer un LMS Marque Blanche avec l'IA : Guide Pro
Maîtrisez le vibe coding pour créer un LMS pro en marque blanche avec Lovable. Apprenez à lancer un SaaS éducatif multi-tenant avec Stripe et Supabase en un temps record.
Aperçu du projet
Le cas : Créer un LMS en marque blanche avec l'IA
Construire un système de gestion de l'apprentissage (LMS) professionnel a traditionnellement été une entreprise colossale nécessitant des mois de développement. Cependant, le vibe coding a fondamentalement changé la donne. Ce guide démontre comment construire un LMS multi-tenant en marque blanche, conçu pour les formateurs indépendants et les académies d'entreprise.
Le problème central résolu ici est la barrière à l'entrée élevée pour créer une expérience d'apprentissage personnalisée. Les petits centres de formation dépendent souvent de plateformes rigides. Notre solution, construite avec Lovable, permet à n'importe quel créateur de lancer sa propre académie avec hébergement vidéo, suivi de progression et certification automatisée.
Public Cible
- Formateurs Indépendants : Souhaitant vendre des cours sans frais de plateforme élevés.
- RH en Entreprise : Ayant besoin d'un portail privé pour l'onboarding des employés.
- Bootcamps : Nécessitant une plateforme robuste pour la gestion du curriculum et le suivi des notes.
Fonctionnalités clés
Un LMS pro demande plus qu'un simple lecteur vidéo. Voici les 8 fonctionnalités essentielles que nous allons implémenter :
- Architecture Multi-Tenant : Sous-domaines ou chemins uniques pour différentes organisations.
- Constructeur de Cours : Interface glisser-déposer pour créer des modules et leçons.
- Intégration Vidéo : Lecture fluide via Mux ou intégrations YouTube/Vimeo.
- Tableau de Bord Étudiant : Vue personnalisée des cours suivis et barres de progression.
- Moteur de Quiz : Tests automatisés pour valider l'acquisition des connaissances.
- Paiement Stripe : Vente de cours à l'unité ou par abonnement mensuel.
- Certificats PDF Automatisés : Génération de diplômes dès 100% de complétion.
- Analytiques Instructeur : Données en temps réel sur l'engagement et le taux de réussite.
Stack & intégrations
Pour garantir scalabilité et performance, nous utilisons une stack moderne centrée sur Lovable Cloud :
- Lovable Cloud : Le moteur pour le frontend, la logique backend et l'hébergement.
- Supabase : Base de données, Auth (Email/Google) et Storage pour les PDF.
- Stripe : Traitement des paiements pour la vente de formations.
- Resend : Emails transactionnels pour les messages de bienvenue et certificats.
- Mux (Optionnel) : API de streaming vidéo haute performance.
Prompts Lovable concrets
Copiez et collez ces prompts dans Lovable pour bâtir votre LMS étape par étape.
1. Design system & identité visuelle
Je construis un LMS professionnel en marque blanche nommé 'EduFlow'. J'ai besoin d'un design system complet axé sur la concentration et la clarté. Crée un thème via des tokens HSL dans index.css.
- Utilise un bleu royal pour le primaire (221 83% 53%) et un ardoise (slate) pour la typo (215 25% 27%).
- Implémente une esthétique académique propre avec des arrondis rounded-lg pour les cartes et 32px pour les conteneurs principaux.
- Typographie : Inter pour le corps de texte et une police Serif pour les titres afin de donner un aspect premium.
- Dark Mode : Assure un contraste élevé avec des fonds slate-950 et du texte muté slate-400.
- Composants : Personnalise les boutons shadcn avec des dégradés subtils et des états de focus clairs.
- Tokens : Définis --primary, --secondary, --accent, --muted, et --card avec des valeurs HSL spécifiques.
L'objectif est une ambiance 'Académie Moderne' qui inspire confiance et professionnalisme.
2. Schéma de base de données & RLS
Crée le schéma de base de données pour le LMS EduFlow sur Supabase. Structure requise :
1. 'profiles' : lié à auth.users, stocke full_name, avatar_url, et role (student, instructor, admin).
2. 'organizations' : name, slug (pour la marque blanche), logo_url, owner_id.
3. 'courses' : title, description, thumbnail_url, price, organization_id, published (boolean).
4. 'modules' : title, order_index, course_id.
5. 'lessons' : title, content (markdown), video_url, duration, order_index, module_id.
6. 'enrollments' : user_id, course_id, progress_percent (0-100), completed_at.
Configure la sécurité RLS :
- Les organisations sont visibles par tous, mais seul le propriétaire peut éditer.
- Les cours sont visibles si 'published' est vrai.
- Les leçons sont accessibles uniquement aux étudiants inscrits ou à l'instructeur.
- Les profils ne sont modifiables que par leur propriétaire.
Génère le SQL complet pour les tables, clés étrangères et politiques RLS.
3. Authentification & onboarding
Crée un flux d'onboarding et d'authentification pour EduFlow.
- Page d'inscription avec Email/Mot de passe et Login Google.
- Après inscription, redirige vers un écran de choix de rôle : 'Je veux apprendre' ou 'Je veux enseigner'.
- Si 'Enseigner', demande le nom de l'organisation et crée l'entrée dans la table 'organizations'.
- Crée une page de paramètres de profil pour mettre à jour la bio et l'avatar.
- Protège toutes les routes internes (/dashboard, /courses/edit) via un composant de mise en page qui vérifie la session.
- Design un écran de connexion magnifique avec une illustration éducative sur le côté.
- Utilise des libellés en français comme 'Se connecter', 'Créer un compte', 'Bienvenue'.
4. Écran Constructeur de Cours
Crée l'interface du Constructeur de Cours pour les instructeurs d'EduFlow. C'est un tableau de bord complexe.
- Sidebar gauche : Vue en arborescence glissable des Modules et Leçons.
- Zone principale : Éditeur de texte riche (ou markdown) pour le contenu et champ pour l'URL vidéo.
- Barre supérieure : Boutons 'Enregistrer le brouillon' et 'Publier', plus un toggle 'Aperçu'.
- Ajoute des boutons 'Ajouter un module' et 'Ajouter une leçon' à l'intérieur de chaque module.
- Utilise les composants shadcn/ui comme les Accordéons pour les modules et des Tabs pour basculer entre 'Contenu' et 'Paramètres'.
- Intègre la sauvegarde en temps réel dans Supabase au fur et à mesure des modifications.
- Reste sur un fond blanc épuré pour maximiser la concentration sur la création.
5. Intégration Stripe & Inscription
Implémente la logique de paiement et d'inscription pour EduFlow.
- Sur la page de présentation du cours, ajoute un bouton 'Acheter le cours'.
- Intègre une Edge Function Supabase qui crée une session Stripe Checkout pour le prix du cours.
- L'URL de succès doit rediriger vers /dashboard/courses/[id] et déclencher un webhook.
- Le webhook doit créer une ligne dans la table 'enrollments' pour l'utilisateur.
- Ajoute une logique pour vérifier si l'utilisateur est déjà inscrit ; si oui, change le bouton par 'Continuer l'apprentissage'.
- Affiche les prix en Euros (€).
- Sécurise le flux pour que le contenu des leçons reste masqué tant que l'inscription n'est pas validée en base.
6. Polish & SEO
Optimise EduFlow pour la production et le référencement.
- Design Responsive : Assure que le lecteur de cours fonctionne sur mobile (vidéo en haut, liste des leçons dessous).
- États de chargement : Ajoute des Skeletons pour le dashboard et la liste des cours.
- Feedback : Utilise des toasts sonner ou shadcn pour 'Cours enregistré', 'Paiement réussi', 'Profil mis à jour'.
- SEO : Ajoute un composant SEO dynamique sur la page du cours qui définit le Title, la Meta Description et l'image OpenGraph selon les données du cours.
- Page 404 : Design une page d'erreur sympa sur le thème de l'éducation.
- Accessibilité : Vérifie que toutes les icônes ont des aria-labels et que les contrastes respectent les normes WCAG AA.
Pièges courants & solutions
Comment gérer les gros fichiers vidéo sans se ruiner ? Ne stockez jamais les vidéos directement sur Supabase Storage pour du streaming. Utilisez un service spécialisé comme Mux ou intégrez des liens YouTube/Vimeo privés. Cela garantit une lecture fluide et un CDN mondial sans surcharger votre base de données.
Comment empêcher le partage de compte entre étudiants ? Bien qu'il soit impossible de l'empêcher à 100%, vous pouvez limiter le nombre de sessions actives ou suivre l'adresse IP. Les propriétaires de LMS se concentrent généralement sur la valeur de la communauté et les certificats nominatifs qui perdent leur sens s'ils sont partagés.
Pourquoi mon webhook Stripe ne valide pas les inscriptions ? Assurez-vous qu'en développement vous utilisez la CLI Stripe pour transférer les événements. En production, vérifiez que l'URL de votre Edge Function est correcte dans le dashboard Stripe et que vous vérifiez la signature du webhook pour la sécurité.
FAQ
Puis-je proposer des cours gratuits ?
Oui, il suffit de régler le prix à 0 et de contourner la logique Stripe pour ces articles, en créant directement une inscription quand l'utilisateur clique sur "Rejoindre".
Est-il possible d'ajouter un forum communautaire ?
Absolument. Vous pouvez ajouter une table 'discussions' dans Supabase liée à course_id et construire un système de commentaires avec Lovable en 30 minutes.
Comment fonctionnent les certificats ?
Quand la progression atteint 100%, vous pouvez déclencher une Edge Function qui utilise une bibliothèque comme jspdf pour générer un PDF au nom de l'utilisateur, puis le stocker dans Supabase Storage.
Conclusion
Bâtir un LMS pro prenait autrefois des mois. Avec le vibe coding et Lovable, vous pouvez passer du concept à une académie multi-tenant fonctionnelle en un week-end. En suivant ce guide, vous avez l'architecture d'un SaaS éducatif scalable. Prêt à enseigner ? Commencez à bâtir votre EduFlow dès aujourd'hui !
Maquette interactive
Aperçu statique d'un écran clé du projet.
Gestion des Cours
| Nom du Cours | Statut | Ventes | Prix |
|---|---|---|---|
| Bases de Lovable | Publié | 452 | 49 € |
| Mastering SaaS Design | Brouillon | 0 | 129 € |
Schéma de base de données
À coller dans Lovable Cloud (Supabase). RLS incluses.
-- Schéma de base de données pour EduFlow LMS
-- 1. Table des Organisations (Multi-tenancy)
CREATE TABLE organizations (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
name TEXT NOT NULL,
slug TEXT UNIQUE NOT NULL,
logo_url TEXT,
owner_id UUID REFERENCES auth.users(id) NOT NULL,
created_at TIMESTAMPTZ DEFAULT now()
);
-- 2. Table des Profils Utilisateurs
CREATE TABLE profiles (
id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
full_name TEXT,
avatar_url TEXT,
role TEXT CHECK (role IN ('student', 'instructor', 'admin')) DEFAULT 'student',
updated_at TIMESTAMPTZ DEFAULT now()
);
-- 3. Table des Cours
CREATE TABLE courses (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
organization_id UUID REFERENCES organizations(id) ON DELETE CASCADE,
title TEXT NOT NULL,
description TEXT,
thumbnail_url TEXT,
price DECIMAL(10,2) DEFAULT 0.00,
published BOOLEAN DEFAULT false,
created_at TIMESTAMPTZ DEFAULT now()
);
-- 4. Table des Modules
CREATE TABLE modules (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
course_id UUID REFERENCES courses(id) ON DELETE CASCADE,
title TEXT NOT NULL,
order_index INTEGER NOT NULL,
created_at TIMESTAMPTZ DEFAULT now()
);
-- 5. Table des Leçons
CREATE TABLE lessons (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
module_id UUID REFERENCES modules(id) ON DELETE CASCADE,
title TEXT NOT NULL,
content TEXT, -- Contenu Markdown
video_url TEXT,
duration TEXT,
order_index INTEGER NOT NULL,
created_at TIMESTAMPTZ DEFAULT now()
);
-- 6. Table des Inscriptions (Enrollments)
CREATE TABLE enrollments (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
course_id UUID REFERENCES courses(id) ON DELETE CASCADE,
progress_percent INTEGER DEFAULT 0,
completed_at TIMESTAMPTZ,
created_at TIMESTAMPTZ DEFAULT now(),
UNIQUE(user_id, course_id)
);
-- Activer la RLS
ALTER TABLE organizations ENABLE ROW LEVEL SECURITY;
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE courses ENABLE ROW LEVEL SECURITY;
ALTER TABLE modules ENABLE ROW LEVEL SECURITY;
ALTER TABLE lessons ENABLE ROW LEVEL SECURITY;
ALTER TABLE enrollments ENABLE ROW LEVEL SECURITY;
-- Politiques RLS
-- Les cours publiés sont visibles par tous
CREATE POLICY "Cours publics visibles" ON courses FOR SELECT USING (published = true);
-- Les leçons ne sont visibles que par les inscrits ou l'instructeur
CREATE POLICY "Leçons pour inscrits" ON lessons FOR SELECT
USING (
EXISTS (
SELECT 1 FROM enrollments
WHERE enrollments.user_id = auth.uid()
AND enrollments.course_id = (SELECT course_id FROM modules WHERE modules.id = module_id)
)
OR
EXISTS (
SELECT 1 FROM courses
JOIN organizations ON courses.organization_id = organizations.id
WHERE courses.id = (SELECT course_id FROM modules WHERE modules.id = module_id)
AND organizations.owner_id = auth.uid()
)
);
-- Les profils sont modifiables par leur propriétaire
CREATE POLICY "Profil modifiable par soi" ON profiles FOR UPDATE USING (id = auth.uid());Roadmap & estimation
Bases du LMS
- →Configuration du schéma Supabase (Cours, Modules, Leçons)
- →Implémentation de l'Auth et du Dashboard Instructeur basique
- →Construction de l'éditeur de leçons avec support Markdown
- →Création de la vue Étudiant avec lecteur vidéo et suivi de progression
Monétisation & Engagement
- →Intégration Stripe Checkout pour la vente de cours
- →Emails de bienvenue automatisés via Resend
- →Support des slugs multi-tenant pour les organisations
- →Moteur de quiz avec notation automatisée
Passage à l'Échelle Pro
- →Génération de certificats PDF à la fin du cours
- →Tableau de bord d'analytiques avancées pour instructeurs
- →Forums de discussion communautaires par cours
- →Optimisation application mobile et support PWA
Envie d'aller plus loin ?
Téléchargez le guide PDF complet pour maîtriser Lovable de A à Z.
Voir les guides