Comment Créer une Démo avec Claude Code : Vibecoding avec Supabase et Vercel

Le vibecoding est un nouveau paradigme de développement logiciel dans lequel le programmeur guide un agent IA à travers des instructions en langage naturel, laissant l'intelligence artificielle écrire le code effectif. Le terme a été inventé par Andrej Karpathy (co-fondateur d'OpenAI et ancien Director of AI chez Tesla) dans un célèbre tweet de février 2025 : « Il y a un nouveau type de coding que j'appelle vibecoding, où tu t'abandonnes complètement aux vibes, tu embrasses les exponentielles et tu oublies que le code existe. »

Dans cet article, nous verrons comment construire une démo complète et fonctionnelle en utilisant Claude Code comme agent IA, Supabase comme backend (base de données, authentification, API) et Vercel pour le déploiement — le tout en exploitant exclusivement les tiers gratuits de ces services.

1. Qu'est-ce que le Vibecoding et pourquoi est-il révolutionnaire

Le vibecoding représente un changement de paradigme fondamental dans le développement logiciel. Au lieu d'écrire du code ligne par ligne, le développeur :

1. Décrit ce qu'il veut en langage naturel.
2. L'agent IA génère le code complet.
3. Le développeur revoit, teste et itère.

Pourquoi ça fonctionne

• Rapidité : un projet qui nécessiterait des jours peut être construit en quelques heures.
• Accessibilité : même les non-développeurs expérimentés peuvent construire des produits fonctionnels.
• Itération rapide : vous pouvez tester des idées et pivoter beaucoup plus rapidement.
• Focus sur le produit : vous vous concentrez sur le quoi plutôt que sur le comment.

Quand utiliser le vibecoding

Le vibecoding est parfait pour :

• Démos et MVP : construire rapidement un prototype pour valider une idée.
• Hackathons : créer un produit fonctionnel en quelques heures.
• Side projects : explorer de nouvelles technologies sans y investir des semaines.
• Proof of Concept : démontrer la faisabilité technique à des parties prenantes ou investisseurs.

Attention : Le vibecoding est excellent pour les démos et prototypes. Pour des applications de production avec des exigences élevées en matière de sécurité et de scalabilité, une révision approfondie du code généré reste indispensable.

2. La stack technologique : Claude Code + Supabase + Vercel

Claude Code

Claude Code est l'agent de coding IA d'Anthropic. Il fonctionne directement dans votre terminal et peut :

• Lire et comprendre l'ensemble du codebase.
• Créer, modifier et supprimer des fichiers.
• Exécuter des commandes dans le terminal.
• Interagir avec des API et services externes.
• Gérer le versioning avec Git.
• Itérer de manière autonome sur les erreurs et bugs.

# Installazione di Claude Code
npm install -g @anthropic-ai/claude-code

# Avvio in una directory di progetto
cd my-project
claude

Supabase (Tier gratuit)

Supabase est une alternative open source à Firebase qui propose :

• Base de données PostgreSQL : une base de données relationnelle complète.
• Authentification : connexion par e-mail, Google, GitHub, etc.
• API REST et Realtime : générées automatiquement à partir de votre schéma.
• Storage : pour les fichiers et images.
• Edge Functions : fonctions serverless.

Le tier gratuit comprend :

| Ressource | Limite gratuite | |---------|----------------| | Database | 500 Mo | | Storage | 1 Go | | Bandwidth | 5 Go | | Edge Function invocations | 500K/mois | | Utilisateurs authentifiés | Illimités | | Projets | 2 projets actifs |

Vercel (Tier gratuit)

Vercel est la plateforme de déploiement parfaite pour les applications Next.js :

• Déploiement automatique depuis GitHub.
• Preview deployments pour chaque branche et PR.
• CDN global pour des performances optimales.
• Serverless Functions incluses.
• Analytics de base gratuites.

Le tier gratuit comprend :

| Ressource | Limite gratuite | |---------|----------------| | Bandwidth | 100 Go/mois | | Serverless Function execution | 100 Go-heures/mois | | Builds | 6 000 minutes/mois | | Projets | Illimités | | Déploiements | Illimités |

3. Configuration initiale : préparer l'environnement

Prérequis

Avant de commencer, assurez-vous d'avoir :

• Node.js 18+ installé.
• Git configuré.
• Un compte GitHub.
• Un compte Supabase (gratuit sur supabase.com).
• Un compte Vercel (gratuit sur vercel.com).
• Claude Code installé (npm install -g @anthropic-ai/claude-code).

Étape 1 : Créer le projet

Ouvrez le terminal et lancez Claude Code :

mkdir my-demo-app && cd my-demo-app
claude

Vous pouvez maintenant donner des instructions à Claude Code en langage naturel :

Vous : Crée un projet Next.js 15 avec App Router, TypeScript, Tailwind CSS et
shadcn/ui. Initialise aussi un dépôt Git.

Claude Code exécutera automatiquement :

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
npx shadcn@latest init
git init && git add . && git commit -m "Initial commit"

Étape 2 : Configurer Supabase

1. Rendez-vous sur supabase.com et créez un nouveau projet.
2. Notez le Project URL et la anon key dans la section Settings > API.
3. Retournez au terminal avec Claude Code :

Vous : Ajoute Supabase au projet. Crée un fichier .env.local avec les variables
NEXT_PUBLIC_SUPABASE_URL et NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure le client
Supabase avec support SSR pour Next.js App Router.

Claude Code créera la configuration complète :

// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          );
        },
      },
    }
  );
}

4. Construire la démo : une app de gestion de tâches

Construisons une démo concrète : une application de gestion de tâches avec authentification, CRUD complet et interface moderne.

Définir le schéma de la base de données

Donnez des instructions à Claude Code pour créer le schéma :

Vous : Crée une migration SQL pour Supabase avec les tables suivantes :

1. profiles : id (uuid, FK vers auth.users), username (text), avatar_url (text),
   created_at
2. projects : id (uuid), name (text), description (text), owner_id (uuid, FK
   vers profiles), created_at
3. tasks : id (uuid), title (text), description (text), status (enum :
   todo/in_progress/done), priority (enum : low/medium/high), project_id (uuid,
   FK vers projects), assigned_to (uuid, FK vers profiles), due_date (timestamp),
   created_at, updated_at

Active Row Level Security sur toutes les tables et crée les policies appropriées.

Claude Code générera une migration complète :

-- Crea i tipi enum
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

-- Tabella profiles
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tabella projects
CREATE TABLE projects (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tabella tasks
CREATE TABLE tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  status task_status DEFAULT 'todo',
  priority task_priority DEFAULT 'medium',
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
  assigned_to UUID REFERENCES profiles(id),
  due_date TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Abilita RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Policy per profiles
CREATE POLICY "Users can view own profile"
  ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);

-- Policy per projects
CREATE POLICY "Users can view own projects"
  ON projects FOR SELECT USING (auth.uid() = owner_id);
CREATE POLICY "Users can create projects"
  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
CREATE POLICY "Users can update own projects"
  ON projects FOR UPDATE USING (auth.uid() = owner_id);
CREATE POLICY "Users can delete own projects"
  ON projects FOR DELETE USING (auth.uid() = owner_id);

-- Policy per tasks
CREATE POLICY "Users can view tasks in their projects"
  ON tasks FOR SELECT USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can create tasks in their projects"
  ON tasks FOR INSERT WITH CHECK (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can update tasks in their projects"
  ON tasks FOR UPDATE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can delete tasks in their projects"
  ON tasks FOR DELETE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );

Vous pouvez exécuter cette migration directement depuis le tableau de bord Supabase (SQL Editor) ou via la CLI.

Générer les types TypeScript

Vous : Génère les types TypeScript depuis la base de données Supabase et sauvegarde-les dans src/types/database.ts

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts

Construire l'interface utilisateur

Voici la partie la plus puissante du vibecoding. Donnez des instructions de haut niveau à Claude Code :

Vous : Crée une page dashboard pour l'app de gestion de tâches avec :

1. Sidebar avec navigation entre les projets
2. Vue Kanban avec 3 colonnes (Todo, In Progress, Done) avec drag & drop
3. Modal pour créer/modifier des tâches
4. Header avec avatar utilisateur et déconnexion
5. Design moderne avec shadcn/ui et Tailwind

Utilise les données de Supabase avec React Server Components où possible
et Client Components uniquement là où l'interactivité est nécessaire.

Claude Code construira l'ensemble de l'interface, composant par composant.

Ajouter l'authentification

Vous : Ajoute un système d'authentification complet avec :

1. Page de connexion avec email/mot de passe et connexion via GitHub
2. Page d'inscription
3. Middleware pour protéger les routes authentifiées
4. Redirection automatique pour les utilisateurs non authentifiés
5. Création automatique du profil après l'inscription

Claude Code configurera le middleware Next.js et les pages d'authentification :

// src/middleware.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();

  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
    const url = request.nextUrl.clone();
    url.pathname = '/auth/login';
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
};

5. Patterns avancés de vibecoding

Le prompting itératif

Le secret d'un vibecoding efficace est l'itération. N'essayez pas de tout décrire dans un seul prompt. Procédez par étapes :

Étape 1 : "Crée le layout de base avec header et sidebar"
Étape 2 : "Ajoute la liste des projets dans la sidebar avec un bouton pour en créer de nouveaux"
Étape 3 : "Crée la vue Kanban dans la zone principale"
Étape 4 : "Ajoute le drag & drop entre les colonnes"
Étape 5 : "Implémente le modal pour créer de nouvelles tâches"
Étape 6 : "Ajoute les notifications toast pour le feedback utilisateur"

Astuce : Plus le prompt est spécifique et contextualisé, meilleur sera le résultat. Claude Code a accès à l'ensemble du codebase et peut donc intégrer de nouvelles fonctionnalités de manière cohérente.

Gestion des erreurs

Quand quelque chose ne fonctionne pas (et ça arrivera), vous pouvez simplement dire :

Vous : J'ai cette erreur dans la console : "TypeError: Cannot read property 'map' of undefined"
dans le composant TaskList. Corrige-la.

Claude Code analysera le code, identifiera le problème et le résoudra.

Refactoring avec l'IA

Vous : Le composant Dashboard est devenu trop volumineux. Divise-le en composants
plus petits et réutilisables, en conservant les mêmes fonctionnalités.

Testing

Vous : Ajoute des tests avec Vitest pour les fonctions utilitaires et des tests
avec Playwright pour le flux d'authentification et la création de tâches.

6. Déploiement sur Vercel : du code au monde entier

Étape 1 : Pousser sur GitHub

Vous : Crée un .gitignore approprié, committe tout et pousse sur un nouveau
dépôt GitHub appelé "my-demo-app".

git add .
git commit -m "feat: complete task management demo"
gh repo create my-demo-app --public --push --source=.

Étape 2 : Connecter Vercel

1. Rendez-vous sur vercel.com et cliquez sur « Add New Project ».
2. Importez le dépôt GitHub que vous venez de créer.
3. Ajoutez les variables d'environnement :
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Cliquez sur « Deploy ».

Étape 3 : Configurer le domaine (optionnel)

Vercel fournit une URL gratuite de type my-demo-app.vercel.app. Pour un domaine personnalisé :

Vous : Ajoute la configuration pour un domaine personnalisé dans vercel.json

Preview Deployments

Chaque fois que vous ouvrez une Pull Request sur GitHub, Vercel créera automatiquement un preview deployment avec une URL unique. Parfait pour montrer les modifications avant le merge.

7. Optimisations pour la démo

Performance

Vous : Optimise les performances de l'app :
1. Ajoute des loading states avec Suspense et skeleton
2. Implémente le caching avec unstable_cache de Next.js
3. Optimise les images avec next/image
4. Ajoute les metadata SEO pour chaque page

Realtime avec Supabase

Une fonctionnalité qui impressionne toujours dans les démos est le realtime :

Vous : Ajoute la synchronisation realtime pour les tâches en utilisant Supabase Realtime.
Quand un utilisateur met à jour une tâche, tous les autres utilisateurs doivent voir
le changement en temps réel sans rafraîchir la page.

'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@/lib/supabase/client';
import type { Task } from '@/types/database';

export function useRealtimeTasks(projectId: string) {
  const [tasks, setTasks] = useState<Task[]>([]);
  const supabase = createClient();

  useEffect(() => {
    const channel = supabase
      .channel('tasks-changes')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'tasks',
          filter: `project_id=eq.${projectId}`,
        },
        (payload) => {
          if (payload.eventType === 'INSERT') {
            setTasks((prev) => [...prev, payload.new as Task]);
          } else if (payload.eventType === 'UPDATE') {
            setTasks((prev) =>
              prev.map((t) =>
                t.id === payload.new.id ? (payload.new as Task) : t
              )
            );
          } else if (payload.eventType === 'DELETE') {
            setTasks((prev) =>
              prev.filter((t) => t.id !== payload.old.id)
            );
          }
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [projectId, supabase]);

  return tasks;
}

Dark mode

Vous : Ajoute le support du dark mode avec un toggle dans le header.
Utilise les classes dark de Tailwind et sauvegarde la préférence dans localStorage.

8. Bonnes pratiques pour un vibecoding efficace

1. Soyez spécifique dans vos prompts

❌ "Fais une belle page"
✅ "Crée une landing page avec une hero section avec un dégradé violet-bleu, une section
   features avec 3 cards avec icônes, et un CTA avec un bouton orange"

2. Donnez du contexte

❌ "Ajoute l'authentification"
✅ "Ajoute l'authentification avec Supabase Auth. Le projet utilise Next.js 15 App
   Router avec TypeScript. Je veux un login avec email/mot de passe et OAuth avec GitHub.
   Utilise le pattern SSR avec @supabase/ssr"

3. Itérez par petites étapes

N'essayez pas de tout construire en un seul prompt. Procédez par incréments :

1. Layout de base
2. Une fonctionnalité à la fois
3. Styling et finitions
4. Gestion des erreurs
5. Testing

4. Révisez le code généré

Le vibecoding ne signifie pas ne pas lire le code. Révisez toujours :

• Sécurité : politiques RLS, validation des entrées, assainissement des données.
• Performance : requêtes N+1, composants inutilement côté client.
• Bonnes pratiques : structure du projet, conventions de nommage.

5. Utilisez Git de manière stratégique

Vous : Committe les modifications avec un message descriptif après chaque fonctionnalité complétée.

Cela vous permet de revenir en arrière si quelque chose tourne mal.

9. Coûts : vraiment tout gratuit ?

Voici un récapitulatif des coûts pour chaque service :

| Service | Plan gratuit | Quand payer | |----------|---------------|----------------| | Claude Code | Nécessite un abonnement Anthropic (à partir de 20 $/mois) ou une clé API | Immédiatement, mais la valeur est énorme | | Supabase | Tier gratuit généreux (2 projets, 500 Mo DB) | Au-delà des limites du tier gratuit | | Vercel | Tier gratuit pour les projets personnels | Pour les équipes ou l'usage commercial | | GitHub | Gratuit pour les dépôts publics et privés | Fonctionnalités enterprise |

Note : Claude Code nécessite un abonnement ou des crédits API, mais le retour sur investissement en termes de vitesse de développement est extraordinaire. Pour une démo ou un MVP, le coût total est de l'ordre de 20 $.

Alternatives gratuites pour l'IA

Si vous souhaitez maintenir le coût à zéro absolu, vous pouvez utiliser :

• Cursor (tier gratuit avec limitations).
• GitHub Copilot (gratuit pour les étudiants et l'open source).
• Codeium/Windsurf (tier gratuit généreux).

10. De la démo au produit : prochaines étapes

Une fois votre démo en ligne, voici comment poursuivre :

1. Recueillez du feedback : partagez la démo avec des utilisateurs potentiels et recueillez leurs avis.
2. Itérez rapidement : utilisez le vibecoding pour implémenter les modifications demandées.
3. Surveillez les métriques : Vercel Analytics et le tableau de bord Supabase vous fournissent des données essentielles.
4. Montez en charge quand c'est nécessaire : passez aux plans payants uniquement quand vous avez validé la demande.

Conclusion

Le vibecoding avec Claude Code, Supabase et Vercel représente une combinaison extrêmement puissante pour construire des démos et MVP en un temps record. Ce qui nécessitait auparavant des semaines de développement peut désormais être réalisé en quelques heures, avec un niveau de qualité surprenant.

La clé est d'aborder le vibecoding avec le bon état d'esprit : il ne s'agit pas de « ne pas savoir programmer », mais d'amplifier vos capacités avec des outils IA. Plus vous maîtrisez les technologies sous-jacentes (React, SQL, authentification, déploiement), plus vous serez efficace pour guider l'agent IA vers le résultat souhaité.

L'avenir du développement logiciel est là, et le coût pour commencer n'a jamais été aussi bas. Créez votre démo, validez-la auprès d'utilisateurs réels et construisez le prochain grand produit.

Checklist pour votre première démo :

• [x] Claude Code installé et configuré
• [x] Projet Supabase créé avec schéma de base de données
• [x] Projet Next.js initialisé avec shadcn/ui
• [x] Authentification configurée
• [x] CRUD complet implémenté
• [x] Interface moderne et responsive
• [x] Déploiement sur Vercel effectué
• [x] URL partageable prête pour le feedback