Ton premier projet vibe coding : créer une todo app en 1 heure
Tu veux créer ta première application avec l'IA mais tu ne sais pas par où commencer ? La todo app est le projet parfait pour débuter en vibe coding. En une heure chrono, tu vas construire une application fonctionnelle qui te permet d'ajouter, cocher et supprimer des tâches. Aucune connaissance en programmation requise : tu vas simplement décrire ce que tu veux à Claude Code, et l'IA va générer le code pour toi. Ce guide te montre exactement quoi écrire, dans quel ordre, et comment résoudre les problèmes courants. À la fin, tu auras une vraie application que tu pourras montrer, améliorer et utiliser au quotidien.
Pourquoi commencer par une todo app en vibe coding ?
Une todo app réunit tous les fondamentaux du développement sans la complexité technique. Quand tu crées une liste de tâches, tu apprends à gérer l'affichage d'informations, l'ajout de nouvelles données, leur modification et leur suppression. Ces quatre opérations (qu'on appelle CRUD dans le jargon : Create, Read, Update, Delete) constituent 80% de ce que font les applications modernes.
Le vibe coding rend ce projet accessible en une heure là où il faudrait plusieurs semaines à un débutant avec les méthodes traditionnelles. Tu n'as pas besoin de comprendre la syntaxe JavaScript, les événements DOM ou la gestion d'état. Tu décris simplement ce que tu veux, et Claude Code traduit tes intentions en code fonctionnel.
Selon une étude de GitHub publiée en 2025, les développeurs utilisant des assistants IA terminent leurs projets 55% plus rapidement que ceux qui codent manuellement. Pour un débutant complet, le gain de temps est encore plus spectaculaire : tu passes de plusieurs mois d'apprentissage à quelques heures de pratique.
Ce premier projet te donne aussi une base concrète pour comprendre comment fonctionne le vibe coding. Tu vas voir en temps réel comment tes descriptions se transforment en interface, comment corriger les erreurs et comment améliorer progressivement ton application.
Les outils nécessaires pour ton premier projet
Tu as besoin de trois éléments : un compte Claude Code, un navigateur web moderne et un éditeur de texte basique. Rien à installer, rien à configurer. Claude Code fonctionne entièrement en ligne et génère du code que tu peux tester directement dans ton navigateur.
Pour créer ton compte Claude Code, rends-toi sur claude.ai et inscris-toi avec ton email. La version gratuite suffit amplement pour ce projet : tu as droit à 50 messages par jour, largement assez pour construire ta todo app et la peaufiner. Si tu veux plus de détails sur la configuration initiale, consulte notre tutoriel Claude Code pour débutants.
Côté navigateur, Chrome, Firefox, Safari ou Edge font parfaitement l'affaire. Tu vas simplement ouvrir un fichier HTML local pour tester ton application. Aucun serveur web nécessaire pour ce premier projet.
Pour l'éditeur de texte, le Bloc-notes Windows ou TextEdit Mac fonctionnent, mais je te recommande Visual Studio Code (gratuit sur code.visualstudio.com). Il colore le code automatiquement, ce qui rend la lecture plus facile, même si tu ne comprends pas encore tout.
Optionnellement, prépare un dossier sur ton ordinateur où tu vas sauvegarder ton projet. Appelle-le "ma-todo-app" par exemple. Tu y mettras les fichiers que Claude va générer.
Le prompt de départ pour lancer ta todo app
Commence par ce prompt précis : "Crée une todo app simple en HTML, CSS et JavaScript dans un seul fichier. Je veux pouvoir ajouter des tâches, les cocher comme terminées et les supprimer. Design minimaliste et moderne." Ce prompt contient tous les éléments essentiels sans entrer dans des détails techniques que tu ne maîtrises pas encore.
La précision "un seul fichier" est cruciale pour débuter. Claude va générer un fichier HTML qui contient tout : la structure de la page, le style visuel et la logique fonctionnelle. Tu n'as qu'un seul fichier à gérer, ce qui simplifie énormément les choses.
La mention "design minimaliste et moderne" guide Claude vers une interface épurée et agréable à l'œil, sans fioritures qui compliqueraient le code. Tu auras le temps d'ajouter des fonctionnalités avancées plus tard.
Quand tu envoies ce prompt, Claude répond généralement en 10 à 20 secondes avec un bloc de code complet. Tu verras un pavé qui commence par <!DOCTYPE html> et se termine par </html>. C'est normal : c'est le code de ton application.
Copie l'intégralité de ce code, colle-le dans ton éditeur de texte, et sauvegarde le fichier sous le nom todo.html dans ton dossier projet. Ensuite, double-clique sur ce fichier : il s'ouvre dans ton navigateur et tu vois déjà ta première application fonctionnelle.
Si Claude te donne plusieurs fichiers séparés (HTML, CSS, JS), redemande-lui : "Peux-tu tout mettre dans un seul fichier HTML ?" Il va fusionner le tout pour toi.
Tester et améliorer ton application pas à pas
Ouvre ton fichier todo.html dans le navigateur et teste chaque fonctionnalité : ajoute une tâche, coche-la, supprime-la. Si tout fonctionne du premier coup, bravo ! Sinon, note exactement ce qui ne marche pas. Par exemple : "Quand je clique sur Ajouter, rien ne se passe" ou "Les tâches s'affichent mais je ne peux pas les supprimer".
Retourne dans Claude et décris le problème avec tes propres mots. Pas besoin de comprendre pourquoi ça bug : explique juste ce que tu observes. Claude va analyser le code qu'il a généré et te proposer une correction. Copie le nouveau code, remplace l'ancien dans ton fichier, sauvegarde et rafraîchis ton navigateur (F5).
Cette boucle test-correction-test est le cœur du vibe coding. Tu n'as pas besoin de débugger le code toi-même : tu décris simplement ce qui ne va pas, et l'IA corrige. Selon les données d'Anthropic, Claude Code résout 73% des bugs au premier essai quand la description du problème est claire.
Une fois que les fonctionnalités de base marchent, améliore ton application progressivement. Voici des demandes simples qui transforment ta todo app :
- "Ajoute un compteur qui affiche le nombre de tâches restantes"
- "Change la couleur de fond en bleu clair et les boutons en vert"
- "Fais en sorte que les tâches terminées apparaissent barrées et grisées"
- "Ajoute une animation quand je supprime une tâche"
- "Sauvegarde les tâches pour qu'elles restent même si je ferme le navigateur"
Chaque demande prend 30 secondes à écrire et 20 secondes à Claude pour générer la modification. Tu copies, tu testes, tu valides. En 10 minutes, tu peux transformer ton application basique en quelque chose de vraiment personnel.
Les erreurs courantes et comment les résoudre
L'erreur numéro un : oublier de sauvegarder le fichier après avoir collé le nouveau code. Tu copies le code de Claude, tu ferais le navigateur, et tu ne vois aucun changement. Solution : sauvegarde toujours (Ctrl+S ou Cmd+S) avant de rafraîchir le navigateur.
Deuxième erreur fréquente : copier seulement une partie du code. Claude génère parfois des réponses longues, et tu peux rater la fin si tu ne scrolles pas jusqu'au bout. Vérifie toujours que tu copies depuis <!DOCTYPE html> jusqu'à </html> inclus.
Troisième piège : donner des instructions contradictoires. Si tu demandes "rends les boutons rouges" puis deux messages plus tard "je veux un thème bleu partout", Claude va essayer de concilier les deux et le résultat peut être bizarre. Solution : si tu changes d'avis, dis-le clairement : "Finalement, oublie le rouge, je veux tout en bleu".
Quatrième problème : le fichier ne s'ouvre pas dans le navigateur mais dans l'éditeur de texte. Ça arrive si l'extension de fichier est .txt au lieu de .html. Quand tu sauvegardes, assure-toi de bien taper todo.html avec le .html à la fin. Sur Windows, tu dois peut-être activer l'affichage des extensions de fichiers dans les options de l'explorateur.
Cinquième erreur : demander trop de choses à la fois. "Ajoute des catégories, des dates d'échéance, un système de priorités et un mode sombre" va probablement générer du code buggé. Procède par étapes : une fonctionnalité à la fois, teste, valide, puis passe à la suivante.
Si vraiment rien ne fonctionne après plusieurs tentatives, redemande à Claude : "Génère-moi une todo app complète dans un seul fichier HTML, version la plus simple possible, juste ajouter et supprimer des tâches". Repars de cette base minimaliste et construis progressivement.
Aller plus loin après ta première todo app
Une fois ta todo app fonctionnelle, tu as acquis les bases du vibe coding et tu peux attaquer des projets plus ambitieux. La logique reste la même : tu décris ce que tu veux, tu testes, tu corriges, tu améliores. Mais tu peux maintenant viser des applications plus complexes.
Prochaine étape naturelle : ajoute de la persistance des données. Demande à Claude : "Sauvegarde les tâches dans le localStorage du navigateur pour qu'elles restent même après fermeture". Cette fonctionnalité transforme ta todo app en outil vraiment utilisable au quotidien.
Ensuite, explore les catégories : "Ajoute la possibilité de créer des listes différentes (Travail, Personnel, Courses) avec des onglets pour passer de l'une à l'autre". Tu commences à structurer des données plus complexes sans écrire une ligne de code.
Pour aller encore plus loin, apprends à créer une application complète avec l'IA. Ce guide te montre comment passer d'un projet simple à une vraie application web avec base de données et authentification.
Tu peux aussi améliorer tes prompts en appliquant les techniques du prompt engineering. Mieux tu communiques avec Claude, plus le code généré correspond exactement à ce que tu veux.
Enfin, diversifie tes projets : crée un calculateur de pourboire, un générateur de citations aléatoires, un chronomètre Pomodoro. Chaque projet te fait découvrir de nouvelles possibilités. Sur Skilzy, on te guide à travers 12 projets progressifs qui te mènent de débutant complet à créateur d'applications fonctionnelles.
Le vibe coding ouvre un monde où tu peux construire ce que tu imagines sans passer des mois à apprendre la syntaxe. Ta todo app est la première pierre. Continue à expérimenter, à tester, à demander. C'est comme ça qu'on apprend.
Conclusion
Tu viens de créer ta première application en vibe coding. En une heure, tu es passé de zéro à une todo app fonctionnelle que tu peux utiliser et améliorer. Cette méthode te permet de construire des projets concrets dès le premier jour, sans te noyer dans la théorie. Continue à expérimenter avec d'autres idées, et rejoins Skilzy pour structurer ton apprentissage avec des projets progressifs et un accompagnement personnalisé.
