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:
- Beschrijft wat hij wil in natuurlijke taal.
- De AI-agent genereert de complete code.
- 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:
| Resource | Gratis Limiet |
|---|---|
| Database | 500 MB |
| Opslag | 1 GB |
| Bandbreedte | 5 GB |
| Edge Function-aanroepen | 500K/maand |
| Geauthenticeerde gebruikers | Onbeperkt |
| Projecten | 2 actieve projecten |
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:
| Resource | Gratis Limiet |
|---|---|
| Bandbreedte | 100 GB/maand |
| Serverless Function-uitvoering | 100 GB-uur/maand |
| Builds | 6.000 minuten/maand |
| Projecten | Onbeperkt |
| Deployments | Onbeperkt |
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
- Ga naar supabase.com en maak een nieuw project aan.
- Noteer de Project URL en anon key uit Settings > API.
- 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
- Ga naar vercel.com en klik op "Add New Project."
- Importeer de GitHub-repository die je zojuist hebt aangemaakt.
- Voeg omgevingsvariabelen toe:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEY
- 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:
- Basislayout
- Eén functie tegelijk
- Styling en afwerking
- Foutafhandeling
- 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:
| Dienst | Gratis Plan | Wanneer Je Betaalt |
|---|---|---|
| Claude Code | Vereist een Anthropic-plan (vanaf $20/maand) of API-sleutel | Direct, maar de waarde is enorm |
| Supabase | Royale gratis tier (2 projecten, 500MB DB) | Bij overschrijding van gratis tier-limieten |
| Vercel | Gratis tier voor persoonlijke projecten | Voor teams of commercieel gebruik |
| GitHub | Gratis voor openbare en privé-repo's | Enterprise-functies |
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:
- Verzamel feedback: deel de demo met potentiële gebruikers en verzamel meningen.
- Itereer snel: gebruik vibecoding om gevraagde wijzigingen te implementeren.
- Monitor metrics: Vercel Analytics en Supabase Dashboard geven je essentiële data.
- 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