Débuter avec le Vibe Coding : Premier Projet en 30 Minutes

De zéro à un projet fonctionnel

Pas de préambule. L'objectif : partir de rien et obtenir une application web fonctionnelle en 30 minutes, en utilisant l'IA pour écrire le code. Le projet sera une page de suivi d'habitudes — simple, utile, démonstratif.

Prérequis

Node.js 18+ installé. Vérification rapide dans le terminal :

node --version
# v18.x.x ou supérieur

Git installé. Pas obligatoire pour ce tutoriel, mais indispensable pour tout projet réel.

Un compte sur Cursor (gratuit) ou Windsurf (gratuit). Ce tutoriel utilise Cursor, mais les étapes s'appliquent à n'importe quel IDE IA.

Étape 1 — Installation (5 minutes)

Télécharger Cursor depuis le site officiel. L'installation est standard — suivant, suivant, terminer.

Au premier lancement, Cursor propose d'importer les paramètres de VS Code. Accepter si VS Code est déjà utilisé — extensions, thèmes et raccourcis sont récupérés automatiquement.

Cursor demande ensuite de choisir un modèle IA. Pour débuter, Claude Sonnet offre le meilleur compromis entre vitesse et qualité. Le modèle se change à tout moment.

Étape 2 — Créer le projet (3 minutes)

Ouvrir le terminal intégré ( Ctrl+ `) et créer un projet Next.js :

npx create-next-app@latest habit-tracker --typescript --tailwind --app --src-dir

Accepter les options par défaut. Le projet se crée en quelques secondes.

Ouvrir le dossier dans Cursor :

cd habit-tracker
code .

L'indexation IA du projet démarre automatiquement. Une barre de progression apparaît en bas — l'IA analyse la structure pour proposer des suggestions contextuelles.

Étape 3 — Le premier prompt (5 minutes)

Ouvrir le panneau chat de Cursor avec Ctrl+L. C'est ici que la conversation avec l'IA commence.

Premier prompt :

Crée une page de suivi d'habitudes dans src/app/page.tsx.

Fonctionnalités :
- Liste d'habitudes avec checkbox pour marquer comme fait
- Bouton pour ajouter une nouvelle habitude
- Compteur de streak (jours consécutifs)
- Les données sont stockées en localStorage
- Design sombre avec Tailwind, style moderne et minimal

L'IA génère le code complet du composant. Cursor affiche un diff — les lignes ajoutées en vert, les supprimées en rouge.

Le point important : lire le diff avant d'accepter. Pas besoin de comprendre chaque ligne à ce stade, mais vérifier que la structure générale correspond à la demande. Le bouton "Accept" applique les changements.

Étape 4 — Lancer et vérifier (2 minutes)

npm run dev

Ouvrir http://localhost:3000 dans le navigateur. La page de suivi d'habitudes apparaît. Les habitudes se cochent, le compteur fonctionne, les données persistent en localStorage.

Si quelque chose ne fonctionne pas — erreur dans le terminal, page blanche, fonctionnalité manquante — c'est normal. Passer à l'étape suivante.

Étape 5 — Itérer (10 minutes)

C'est la phase la plus importante du vibe coding : l'itération. Le premier résultat n'est jamais parfait. L'objectif est de l'améliorer par des instructions successives.

Quelques exemples de prompts d'itération :

Corriger un bug :

Le compteur de streak ne se remet pas à zéro quand une journée est manquée. Corrige la logique pour qu'il reset si la dernière validation date de plus de 24h.

Améliorer le design :

Ajoute des animations subtiles : fade-in quand une habitude est ajoutée, transition quand une checkbox est cochée. Utilise les classes Tailwind animate.

Ajouter une fonctionnalité :

Ajoute un bouton pour supprimer une habitude avec une confirmation. Le bouton apparaît au hover sur chaque ligne.

Chaque prompt produit un diff. Accepter, vérifier dans le navigateur, itérer. Le cycle prend 30 secondes à 2 minutes par itération.

Étape 6 — Sauvegarder (5 minutes)

Initialiser un dépôt Git et faire un premier commit :

git init
git add .
git commit -m "feat: habit tracker MVP"

La règle fondamentale du vibe coding : commit avant chaque session agent. Si l'IA casse quelque chose, un git checkout . restaure l'état précédent en une seconde.

Les erreurs fréquentes au départ

Prompt trop vague. "Fais-moi une app cool" ne produit rien d'utilisable. Plus le prompt est spécifique (fonctionnalités, techno, contraintes), meilleur est le résultat.

Accepter sans lire. L'IA génère parfois des imports incorrects, des dépendances non installées, ou du code qui écrase des modifications précédentes. Le diff existe pour être lu.

Ne pas commiter. Sans Git, une erreur de l'IA peut détruire 30 minutes de travail. Avec Git, c'est un rollback de 2 secondes.

Changer de sujet en plein chat. L'IA perd le contexte quand la conversation mélange trop de sujets. Un chat par tâche. Si le sujet change, ouvrir un nouveau chat.

La suite

Ce premier projet donne un aperçu du workflow. Pour aller plus loin :

• Qu'est-ce que le vibe coding ? — Comprendre le concept en profondeur
• Les meilleurs outils de vibe coding — Choisir l'outil adapté
• Cursor vs Windsurf — Comparer les deux IDE IA principaux

Le vibe coding s'apprend en pratiquant. Le meilleur moment pour commencer est maintenant.