Een Demo Bouwen met Claude Code: Vibecoding met Supabase en Vercel

Vibecoding is een nieuw softwareontwikkelingsparadigma waarbij de programmeur een AI-agent begeleidt via instructies in natuurlijke taal, waarbij de kunstmatige intelligentie de daadwerkelijke code schrijft. De term werd bedacht door Andrej Karpathy (mede-oprichter van OpenAI en voormalig Director of AI bij Tesla) in een beroemde tweet van februari 2025: "There's a new kind of coding I call vibecoding, where you fully give in to the vibes, embrace the exponentials, and forget that the code even exists."

In dit artikel bekijken we hoe je een complete, werkende demo bouwt met Claude Code als AI-agent, Supabase als backend (database, authenticatie, API) en Vercel voor deployment - allemaal met uitsluitend de gratis tiers van deze diensten.

1. Wat Is Vibecoding en Waarom Het Revolutionair Is

Vibecoding vertegenwoordigt een fundamentele paradigmaverschuiving in softwareontwikkeling. In plaats van code regel voor regel te schrijven, doet de ontwikkelaar het volgende:

1. Beschrijft wat hij wil in natuurlijke taal.
2. De AI-agent genereert de complete code.
3. De ontwikkelaar beoordeelt, test en itereert.

Waarom Het Werkt

• Snelheid: een project dat dagen zou duren kan in uren worden gebouwd.
• Toegankelijkheid: zelfs niet-expert ontwikkelaars kunnen werkende producten bouwen.
• Snelle iteratie: je kunt ideeën testen en veel sneller pivoteren.
• Productfocus: je concentreert je op het wat in plaats van het hoe.

Wanneer Vibecoding Gebruiken

Vibecoding is perfect voor:

• Demo's en MVP's: snel een prototype bouwen om een idee te valideren.
• Hackathons: een werkend product maken in slechts een paar uur.
• Nevenprojecten: nieuwe technologieën verkennen zonder wekenlang te investeren.
• Proof of Concept: technische haalbaarheid demonstreren aan stakeholders of investeerders.

Waarschuwing: Vibecoding is uitstekend voor demo's en prototypes. Voor productieklare applicaties met hoge veiligheids- en schaalbaarheidseisen is een grondige beoordeling van de gegenereerde code nog steeds essentieel.

2. De Tech Stack: Claude Code + Supabase + Vercel

Claude Code

Claude Code is de AI-coderingsagent van Anthropic. Het werkt direct in je terminal en kan:

• De gehele codebase lezen en begrijpen.
• Bestanden aanmaken, wijzigen en verwijderen.
• Terminalopdrachten uitvoeren.
• Interageren met API's en externe diensten.
• Versiebeheer met Git beheren.
• Autonoom itereren op fouten en bugs.

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

# Start in a project directory
cd my-project
claude

Supabase (Gratis Tier)

Supabase is een open-source Firebase-alternatief dat biedt:

• PostgreSQL Database: een complete relationele database.
• Authenticatie: inloggen met e-mail, Google, GitHub, etc.
• REST en Realtime API's: automatisch gegenereerd vanuit je schema.
• Opslag: voor bestanden en afbeeldingen.
• Edge Functions: serverloze functies.

De gratis tier omvat:

Vercel (Gratis Tier)

Vercel is het perfecte deployment-platform voor Next.js-applicaties:

• Automatische deployment vanuit GitHub.
• Preview deployments voor elke branch en PR.
• Wereldwijd CDN voor optimale prestaties.
• Serverless Functions inbegrepen.
• Basisanalytics gratis.

De gratis tier omvat:

3. Initiële Setup: De Omgeving Voorbereiden

Vereisten

Voordat je begint, zorg ervoor dat je het volgende hebt:

• Node.js 18+ geïnstalleerd.
• Git geconfigureerd.
• Een GitHub-account.
• Een Supabase-account (gratis op supabase.com).
• Een Vercel-account (gratis op vercel.com).
• Claude Code geïnstalleerd (npm install -g @anthropic-ai/claude-code).

Stap 1: Maak het Project Aan

Open de terminal en start Claude Code:

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

Nu kun je Claude Code instructies geven in natuurlijke taal:

You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
and shadcn/ui. Also initialize a Git repository.

Claude Code zal automatisch het volgende uitvoeren:

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

Stap 2: Configureer Supabase

1. Ga naar supabase.com en maak een nieuw project aan.
2. Noteer de Project URL en anon key uit Settings > API.
3. Ga terug naar de terminal met Claude Code:

You: Add Supabase to the project. Create a .env.local file with the variables
NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
Supabase client with SSR support for Next.js App Router.

Claude Code zal de volledige configuratie aanmaken:

// 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. De Demo Bouwen: Een Taakbeheer-app

Laten we een concrete demo bouwen: een taakbeheer-app met authenticatie, volledige CRUD en een moderne interface.

Definieer het Databaseschema

Geef Claude Code instructies om het schema te maken:

You: Create a SQL migration for Supabase with the following tables:

1. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
   created_at
2. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
   to 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 to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
   created_at, updated_at

Enable Row Level Security on all tables and create appropriate policies.

Claude Code genereert een volledige migratie:

-- Create enum types
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

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

-- Projects table
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()
);

-- Tasks table
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()
);

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

-- Profiles policies
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);

-- Projects policies
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);

-- Tasks policies
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())
  );

Je kunt deze migratie direct uitvoeren vanuit het Supabase-dashboard (SQL Editor) of via de CLI.

Genereer TypeScript Types

You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts

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

Bouw de Gebruikersinterface

Nu komt het krachtigste deel van vibecoding. Geef Claude Code instructies op hoog niveau:

You: Create a dashboard page for the task management app with:

1. Sidebar with navigation between projects
2. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3. Modal to create/edit tasks
4. Header with user avatar and logout
5. Modern design with shadcn/ui and Tailwind

Use data from Supabase with React Server Components where possible
and Client Components only where interactivity is needed.

Claude Code bouwt de gehele interface, component voor component.

Voeg Authenticatie Toe

You: Add a complete authentication system with:

1. Login page with email/password and GitHub login
2. Registration page
3. Middleware to protect authenticated routes
4. Automatic redirect for unauthenticated users
5. Automatic profile creation after registration

Claude Code configureert Next.js middleware en auth-pagina's:

// 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. Geavanceerde Vibecoding Patronen

Iteratieve Prompting

Het geheim van effectieve vibecoding is iteratie. Probeer niet alles in één prompt te beschrijven. Ga stap voor stap te werk:

Stap 1: "Create the base layout with header and sidebar"
Stap 2: "Add the project list in the sidebar with a button to create new ones"
Stap 3: "Create the Kanban view in the main area"
Stap 4: "Add drag & drop between columns"
Stap 5: "Implement the modal to create new tasks"
Stap 6: "Add toast notifications for user feedback"

Tip: Hoe specifieker en gecontextualiseerder de prompt, hoe beter het resultaat. Claude Code heeft toegang tot de gehele codebase, zodat het nieuwe functies coherent kan integreren.

Foutafhandeling

Wanneer iets niet werkt (en dat zal gebeuren), kun je eenvoudig zeggen:

You: I'm getting this error in the console: "TypeError: Cannot read property
'map' of undefined" in the TaskList component. Fix it.

Claude Code analyseert de code, identificeert het probleem en lost het op.

Refactoring met AI

You: The Dashboard component has become too large. Split it into smaller,
reusable components while maintaining the same functionality.

Testen

You: Add tests with Vitest for utility functions and Playwright tests for
the authentication and task creation flow.

6. Deployen naar Vercel: Van Code naar de Wereld

Stap 1: Push naar GitHub

You: Create an appropriate .gitignore, commit everything, and push to a new
GitHub repository called "my-demo-app".

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

Stap 2: Verbind Vercel

1. Ga naar vercel.com en klik op "Add New Project."
2. Importeer de GitHub-repository die je zojuist hebt aangemaakt.
3. Voeg omgevingsvariabelen toe:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Klik op "Deploy."

Stap 3: Configureer een Eigen Domein (Optioneel)

Vercel biedt een gratis URL zoals my-demo-app.vercel.app. Voor een eigen domein:

You: Add the configuration for a custom domain in vercel.json

Preview Deployments

Elke keer dat je een Pull Request opent op GitHub, maakt Vercel automatisch een preview deployment aan met een unieke URL. Perfect om wijzigingen te tonen voordat je merget.

7. Optimalisaties voor Je Demo

Prestaties

You: Optimize the app's performance:
1. Add loading states with Suspense and skeletons
2. Implement caching with Next.js unstable_cache
3. Optimize images with next/image
4. Add SEO metadata for each page

Realtime met Supabase

Een functie die altijd indruk maakt in demo's is realtime:

You: Add realtime synchronization for tasks using Supabase Realtime.
When a user updates a task, all other users should see the change
in real time without refreshing.

'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;
}

Donkere Modus

You: Add dark mode support with a toggle in the header.
Use Tailwind dark classes and save the preference in localStorage.

8. Best Practices voor Effectieve Vibecoding

1. Wees Specifiek in Je Prompts

Niet: "Make a nice page"
Wel: "Create a landing page with a hero section with a purple-blue gradient,
   a features section with 3 cards with icons, and an orange CTA button"

2. Bied Context

Niet: "Add authentication"
Wel: "Add authentication with Supabase Auth. The project uses Next.js 15 App
   Router with TypeScript. I want email/password login and OAuth with GitHub.
   Use the SSR pattern with @supabase/ssr"

3. Itereer in Kleine Stappen

Probeer niet alles in één prompt te bouwen. Ga stapsgewijs te werk:

1. Basislayout
2. Eén functie tegelijk
3. Styling en afwerking
4. Foutafhandeling
5. Testen

4. Beoordeel de Gegenereerde Code

Vibecoding betekent niet dat je de code niet leest. Beoordeel altijd:

• Beveiliging: RLS-beleid, invoervalidatie, gegevenssanering.
• Prestaties: N+1 query's, onnodig client-side componenten.
• Best practices: projectstructuur, naamgevingsconventies.

5. Gebruik Git Strategisch

You: Commit the changes with a descriptive message after each completed feature.

Dit stelt je in staat om terug te draaien als er iets misgaat.

9. Kosten: Is Het Echt Allemaal Gratis?

Hier is een kostenoverzicht per dienst:

Opmerking: Claude Code vereist een abonnement of API-tegoed, maar het rendement in termen van ontwikkelsnelheid is buitengewoon. Voor een demo of MVP liggen de totale kosten rond de $20.

Gratis AI-alternatieven

Als je de kosten op absoluut nul wilt houden, kun je gebruiken:

• Cursor (gratis tier met beperkingen).
• GitHub Copilot (gratis voor studenten en open source).
• Codeium/Windsurf (royale gratis tier).

10. Van Demo naar Product: Volgende Stappen

Zodra je demo live is, kun je als volgt verdergaan:

1. Verzamel feedback: deel de demo met potentiële gebruikers en verzamel meningen.
2. Itereer snel: gebruik vibecoding om gevraagde wijzigingen te implementeren.
3. Monitor metrics: Vercel Analytics en Supabase Dashboard geven je essentiële data.
4. Schaal wanneer nodig: upgrade pas naar betaalde plannen als je de vraag hebt gevalideerd.

Conclusie

Vibecoding met Claude Code, Supabase en Vercel vormt een krachtige combinatie om demo's en MVP's in recordtijd te bouwen. Wat vroeger weken ontwikkeling kostte, kan nu in slechts een paar uur worden bereikt, met een verrassend hoog kwaliteitsniveau.

De sleutel is vibecoding benaderen met de juiste mindset: het gaat er niet om "niet te weten hoe je moet coderen" maar om je mogelijkheden te versterken met AI-tools. Hoe meer je weet over de onderliggende technologieën (React, SQL, authenticatie, deployment), hoe effectiever je de AI-agent naar het gewenste resultaat kunt leiden.

De toekomst van softwareontwikkeling is hier, en de kosten om te beginnen zijn nog nooit zo laag geweest. Maak je demo, valideer het met echte gebruikers en bouw het volgende geweldige product.

Checklist voor je eerste demo:

• Claude Code geïnstalleerd en geconfigureerd
• Supabase-project aangemaakt met databaseschema
• Next.js-project geïnitialiseerd met shadcn/ui
• Authenticatie geconfigureerd
• Volledige CRUD geïmplementeerd
• Moderne en responsieve UI
• Gedeployed naar Vercel
• Deelbare URL klaar voor feedback