Journal de bord — Vibe Coding Cotonou

5 jours. 1 app. 0 agence.

Mon process Vibe Coding complet, de l'idée brute au produit déployé, raconté depuis Cotonou.

Le Vibe Coding permet de passer d'une idée d'application à un produit fonctionnel déployé en 5 jours, sans équipe de développement. Jour 1 : validation. Jour 2 : architecture. Jours 3 et 4 : code via prompts IA. Jour 5 : mise en ligne et premiers utilisateurs réels. Stack utilisée : Cursor + Claude + Supabase + Vercel + Tailwind CSS.

Jour 1 — Idée et validation

7h00 - 19h00 · Objectif : savoir si l'idée vaut la peine d'être codée

Le lundi, je ne touche pas à Cursor. Pas une seule ligne de code. C'est la règle numéro un, et c'est celle que les gens violent le plus souvent.

Je commence par 45 minutes avec Claude. Je décris mon idée brute, et je lui demande de jouer l'avocat du diable. Qui a ce problème ? Combien sont-ils prêts à payer ? Pourquoi les gens n'utiliseraient pas mon app ?

Ensuite, je fais quelque chose de simple : je vais sur 3 groupes WhatsApp de freelances béninois et je pose une question directe. En 2 heures, 17 réponses. C'est suffisant pour valider.

Jour 2 — Architecture et design

8h00 - 18h00 · Objectif : le plan avant le code

Le mardi, je dessine. Pas sur Figma — pour des apps simples, le temps passé sur Figma est du temps perdu. Je décris mes interfaces directement dans Cursor via des prompts très précis.

Je liste d'abord les pages de l'app dans un document Google. Pour mon app de devis : accueil/login, dashboard freelance, créateur de devis, prévisualisation, page publique client, page de succès. Six pages. C'est tout.

Je demande ensuite à Claude l'architecture Next.js adaptée avec Supabase. En 20 minutes, j'ai une arborescence de dossiers, les tables de base de données, et les API routes nécessaires. L'après-midi, je crée le projet Supabase, définis les tables et génère les types TypeScript.

Jour 3 — Frontend

7h30 - 20h00 · Objectif : toutes les interfaces visibles et cliquables

C'est le jour le plus intense. J'initialise le projet Next.js avec Tailwind CSS, j'ouvre Cursor, et je commence à prompter.

Ma règle de prompting frontend : je décris chaque composant comme si je l'expliquais à un designer. Pas "crée un formulaire" — "Crée un formulaire avec un header qui affiche le numéro de devis, deux colonnes pour les infos client et les lignes de prestation, chaque ligne avec description, quantité, prix unitaire et total automatique. Mobile-first, police sans-serif, accent bleu."

Je travaille composant par composant dans un ordre logique : layout global, navbar, accueil, dashboard, formulaire devis, prévisualisation, page client. A chaque composant fini, je passe au suivant. Je ne reviens pas en arrière — c'est une règle du Vibe Coding : avancer, ne pas peaufiner.

Jour 4 — Backend et base de données

8h00 - 21h00 · Objectif : l'app devient vraiment fonctionnelle

Le jeudi est le jour le plus exigeant. On connecte les interfaces aux données réelles, on implémente l'authentification, les choses peuvent vraiment casser.

Je commence par la connexion à Supabase. Les tables sont déjà là depuis le Mardi. Je demande à Cursor de générer les API routes Next.js pour chaque opération CRUD. Cursor s'appuie sur les types TypeScript de Supabase — les erreurs de typage sont détectées avant l'exécution.

L'après-midi : génération du lien public unique par UUID, page de validation côté client, mise à jour automatique du statut quand le client accepte. A 21h, tout fonctionne en local. Je teste sur mon téléphone via l'IP locale. C'est là que le Vibe Coding devient addictif.

Jour 5 — Déploiement et premiers utilisateurs

9h00 - 17h00 · Objectif : en ligne, vivant, utilisé

Le déploiement sur Vercel prend 8 minutes : je connecte le repo GitHub, configure les variables d'environnement Supabase, je clique sur Deploy. Vercel gère le build, le CDN et le HTTPS automatiquement.

Une fois en ligne, je fais mes tests en conditions réelles. Je crée un compte sur l'URL de production, génère un devis test, et envoie le lien à ma femme sur WhatsApp. Elle valide depuis son téléphone. Le statut se met à jour dans mon dashboard. C'est ce moment que je cherche.

L'après-midi, je partage l'app dans les groupes WhatsApp où j'avais posté mes questions le Lundi. En 4 heures : 12 inscriptions. Pas énorme — mais 12 vrais retours valent plus qu'un millier d'avis imaginaires.

Tu es mon développeur principal pour ce projet Next.js.

CONTEXTE :
- App : [nom de l'app]
- But : [1 phrase claire]
- Stack : Next.js 14 (App Router), TypeScript, Tailwind CSS, Supabase, Vercel
- Sécurité : données utilisateur privées

RÈGLES :
1. TypeScript strict partout
2. React Server Components par défaut, Client Components uniquement si nécessaire
3. Jamais de console.log en production
4. Tailwind uniquement pour les styles
5. Fichiers en kebab-case

Pour chaque tâche : plan en 3 lignes d'abord, puis le code.

Crée le composant React [nom du composant].

DESCRIPTION VISUELLE :
[Mise en page précise : colonnes, spacing, couleurs, états hover]

PROPS :
- [prop1] : [type] — [description]
- [prop2] : [type] — [description]

COMPORTEMENT :
- État par défaut : [description]
- Sur interaction : [description]
- Cas d'erreur : [description]

CONTRAINTES :
- Mobile-first, responsive jusqu'à 375px
- Accessible (rôles ARIA, labels)
- Pas de nouvelle dépendance

Génère le SQL complet pour Supabase incluant :

1. La table [nom] avec ces colonnes :
   - id (uuid, primary key, default gen_random_uuid())
   - user_id (uuid, references auth.users, not null)
   - [autres colonnes avec types exacts]
   - created_at (timestamptz, default now())
   - updated_at (timestamptz)

2. Un trigger pour auto-update de updated_at

3. Les RLS policies :
   - SELECT : l'utilisateur ne voit que ses lignes
   - INSERT : l'utilisateur insère seulement ses lignes
   - UPDATE : l'utilisateur modifie seulement ses lignes
   - DELETE : l'utilisateur supprime seulement ses lignes

4. Les types TypeScript à coller dans types/database.ts

J'ai une erreur. Voici le contexte complet :

ERREUR :
[Coller l'erreur exacte du terminal ou de la console]

FICHIER :
[Coller le code complet ou la section pertinente]

CE QUE J'ESSAIE DE FAIRE :
[1 phrase]

CE QUE J'AI DÉJÀ ESSAYÉ :
[Lister les tentatives]

Explique la cause racine en 2 lignes.
Donne la correction minimale sans refactoriser le reste.

Fais un audit de mon projet Next.js avant déploiement.

Vérifie dans cet ordre :
1. Les variables d'environnement sont-elles dans .env.example ?
2. Y a-t-il des console.log à supprimer ?
3. Les images sont-elles avec next/image ?
4. Les metadata (title, description) sont-elles sur chaque page ?
5. Le .gitignore inclut-il .env.local ?
6. Y a-t-il des dépendances inutilisées ?
7. Le build `npm run build` passe-t-il sans erreurs TypeScript ?

Pour chaque point : OK ou A corriger. Si A corriger, la correction exacte.

Faut-il savoir coder pour faire du Vibe Coding ?

Pas besoin d'être développeur senior, mais une connaissance de base est un vrai accélérateur. Si vous savez lire du JavaScript, comprendre ce qu'est une API REST, et vous déplacer dans un terminal, vous serez à l'aise.

Combien coute ce process complet côté outils ?

Le budget mensuel pour la stack complète tourne autour de 50 à 80 USD. Cursor Pro 20 USD, Claude Pro 20 USD, Vercel et Supabase gratuits pour commencer.

Quels types d'apps peut-on créer en 5 jours ?

Les apps CRUD avec authentification sont dans la zone idéale : SaaS de gestion, plateformes de réservation simples, outils internes d'équipe, générateurs de contenu.

Le code généré par l'IA est-il maintenable ?

Oui, avec les bons prompts et une relecture humaine. Le code Claude Sonnet est TypeScript strict, bien structuré et documenté.

Peut-on faire du Vibe Coding sans connexion stable à Cotonou ?

C'est le principal frein technique. Une connexion 4G LTE fiable avec un forfait data conséquent est non négociable. Les espaces de coworking de Fidjrossè ou Cadjehoun ont généralement de la fibre dédiée.

Comment gérer le paiement des clients africains dans son app ?

FedaPay, CinetPay et Wave pour le mobile money. Pour un MVP, un paiement hors-app confirmé manuellement suffit. L'automatisation vient en v2.

Est-ce que 5 jours c'est réaliste ?

C'est réaliste pour un MVP — pas pour un produit fini. En 5 jours vous avez une app fonctionnelle, déployée, utilisable par de vrais utilisateurs.

Quels projets pour débuter le Vibe Coding à Cotonou ?

Un générateur de devis ou de factures, un système de réservation pour salon ou restaurant, ou un outil de gestion de stock pour boutique.

Passer à l'action

Vous voulez construire votre app ou apprendre la méthode ?

Deux options selon votre situation.