Module 1
Introduction à V0
Introduction à V0
20min
Leçons vidéo
Exercices
Lab pratique
Qu'est-ce que V0 ? (Vercel + IA pour UI)
Architecture : GPT-4 + shadcn/ui + Tailwind
Différence avec Bolt.new, Cursor, Lovable
Cas d'usage : composants UI, pages, dashboards
Demo : Premier composant en 30 secondes
Module 2
Génération de Composants
Génération de Composants
30min
Leçons vidéo
Exercices
Lab pratique
Interface V0 : prompt → preview → code
Prompts efficaces pour UI components
Types de composants : buttons, cards, forms, navbars
Prévisualisation temps réel (light/dark modes)
Copier code et intégrer dans projet
Lab : Générer 5 composants variés
Module 3
Shadcn/ui et Tailwind CSS
Shadcn/ui et Tailwind CSS
25min
Leçons vidéo
Exercices
Lab pratique
Qu'est-ce que shadcn/ui ? (components library)
Tailwind CSS : utility-first styling
Composants V0 = shadcn/ui + Tailwind
Customiser couleurs, spacing, typography
Dark mode automatique
Lab : Landing page avec 6+ composants
Module 4
Pages et Layouts Complexes
Pages et Layouts Complexes
30min
Leçons vidéo
Exercices
Lab pratique
Générer pages complètes (multi-sections)
Dashboards avec charts (Recharts)
E-commerce : product grids, carts
Formulaires complexes avec validation
Navigation et routing (pour Next.js)
Lab : Dashboard analytics complet
Module 5
Itération et Customisation
Itération et Customisation
20min
Leçons vidéo
Exercices
Lab pratique
Chat conversationnel : "change [ÉLÉMENT] pour [NOUVEAU]"
Variantes : générer 3 versions d'un composant
Combiner composants (composition)
Export code et dependencies
Intégration dans Next.js App Router
Lab : Itérer sur composant (5 variantes)