1 
2**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."_
3 
4In 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.
5 
6## 1. Wat Is Vibecoding en Waarom Het Revolutionair Is
7 
8Vibecoding vertegenwoordigt een fundamentele paradigmaverschuiving in softwareontwikkeling. In plaats van code regel voor regel te schrijven, doet de ontwikkelaar het volgende:
9 
101. **Beschrijft** wat hij wil in natuurlijke taal.
112. **De AI-agent** genereert de complete code.
123. **De ontwikkelaar** beoordeelt, test en itereert.
13 
14### Waarom Het Werkt
15 
16- **Snelheid**: een project dat dagen zou duren kan in uren worden gebouwd.
17- **Toegankelijkheid**: zelfs niet-expert ontwikkelaars kunnen werkende producten bouwen.
18- **Snelle iteratie**: je kunt ideeën testen en veel sneller pivoteren.
19- **Productfocus**: je concentreert je op het _wat_ in plaats van het _hoe_.
20 
21```mermaid
22flowchart LR
23    A[Idea] --> B[Natural language prompt]
24    B --> C[Claude Code generates code]
25    C --> D[Review and test]
26    D --> E[Iteration]
27    E --> B
28    D --> F[Deploy to Vercel]
29```
30 
31### Wanneer Vibecoding Gebruiken
32 
33Vibecoding is perfect voor:
34 
35- **Demo's en MVP's**: snel een prototype bouwen om een idee te valideren.
36- **Hackathons**: een werkend product maken in slechts een paar uur.
37- **Nevenprojecten**: nieuwe technologieën verkennen zonder wekenlang te investeren.
38- **Proof of Concept**: technische haalbaarheid demonstreren aan stakeholders of investeerders.
39 
40> **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.
41 
42## 2. De Tech Stack: Claude Code + Supabase + Vercel
43 
44### Claude Code
45 
46Claude Code is de AI-coderingsagent van Anthropic. Het werkt direct in je terminal en kan:
47 
48- De gehele codebase lezen en begrijpen.
49- Bestanden aanmaken, wijzigen en verwijderen.
50- Terminalopdrachten uitvoeren.
51- Interageren met API's en externe diensten.
52- Versiebeheer met Git beheren.
53- Autonoom itereren op fouten en bugs.
54 
55```bash
56# Install Claude Code
57npm install -g @anthropic-ai/claude-code
58 
59# Start in a project directory
60cd my-project
61claude
62```
63 
64### Supabase (Gratis Tier)
65 
66Supabase is een open-source Firebase-alternatief dat biedt:
67 
68- **PostgreSQL Database**: een complete relationele database.
69- **Authenticatie**: inloggen met e-mail, Google, GitHub, etc.
70- **REST en Realtime API's**: automatisch gegenereerd vanuit je schema.
71- **Opslag**: voor bestanden en afbeeldingen.
72- **Edge Functions**: serverloze functies.
73 
74De gratis tier omvat:
75 
76| Resource | Gratis Limiet |
77|----------|-----------|
78| Database | 500 MB |
79| Opslag | 1 GB |
80| Bandbreedte | 5 GB |
81| Edge Function-aanroepen | 500K/maand |
82| Geauthenticeerde gebruikers | Onbeperkt |
83| Projecten | 2 actieve projecten |
84 
85### Vercel (Gratis Tier)
86 
87Vercel is het perfecte deployment-platform voor Next.js-applicaties:
88 
89- **Automatische deployment** vanuit GitHub.
90- **Preview deployments** voor elke branch en PR.
91- **Wereldwijd CDN** voor optimale prestaties.
92- **Serverless Functions** inbegrepen.
93- **Basisanalytics** gratis.
94 
95De gratis tier omvat:
96 
97| Resource | Gratis Limiet |
98|----------|-----------|
99| Bandbreedte | 100 GB/maand |
100| Serverless Function-uitvoering | 100 GB-uur/maand |
101| Builds | 6.000 minuten/maand |
102| Projecten | Onbeperkt |
103| Deployments | Onbeperkt |
104 
105## 3. Initiële Setup: De Omgeving Voorbereiden
106 
107### Vereisten
108 
109Voordat je begint, zorg ervoor dat je het volgende hebt:
110 
111- **Node.js 18+** geïnstalleerd.
112- **Git** geconfigureerd.
113- Een **GitHub**-account.
114- Een **Supabase**-account (gratis op [supabase.com](https://supabase.com)).
115- Een **Vercel**-account (gratis op [vercel.com](https://vercel.com)).
116- **Claude Code** geïnstalleerd (`npm install -g @anthropic-ai/claude-code`).
117 
118### Stap 1: Maak het Project Aan
119 
120Open de terminal en start Claude Code:
121 
122```bash
123mkdir my-demo-app && cd my-demo-app
124claude
125```
126 
127Nu kun je Claude Code instructies geven in natuurlijke taal:
128 
129```
130You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
131and shadcn/ui. Also initialize a Git repository.
132```
133 
134Claude Code zal automatisch het volgende uitvoeren:
135 
136```bash
137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
138npx shadcn@latest init
139git init && git add . && git commit -m "Initial commit"
140```
141 
142### Stap 2: Configureer Supabase
143 
1441. Ga naar [supabase.com](https://supabase.com) en maak een nieuw project aan.
1452. Noteer de **Project URL** en **anon key** uit Settings > API.
1463. Ga terug naar de terminal met Claude Code:
147 
148```
149You: Add Supabase to the project. Create a .env.local file with the variables
150NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
151Supabase client with SSR support for Next.js App Router.
152```
153 
154Claude Code zal de volledige configuratie aanmaken:
155 
156```typescript
157// src/lib/supabase/client.ts
158import { createBrowserClient } from '@supabase/ssr';
159 
160export function createClient() {
161  return createBrowserClient(
162    process.env.NEXT_PUBLIC_SUPABASE_URL!,
163    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
164  );
165}
166```
167 
168```typescript
169// src/lib/supabase/server.ts
170import { createServerClient } from '@supabase/ssr';
171import { cookies } from 'next/headers';
172 
173export async function createClient() {
174  const cookieStore = await cookies();
175 
176  return createServerClient(
177    process.env.NEXT_PUBLIC_SUPABASE_URL!,
178    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
179    {
180      cookies: {
181        getAll() {
182          return cookieStore.getAll();
183        },
184        setAll(cookiesToSet) {
185          cookiesToSet.forEach(({ name, value, options }) =>
186            cookieStore.set(name, value, options)
187          );
188        },
189      },
190    }
191  );
192}
193```
194 
195## 4. De Demo Bouwen: Een Taakbeheer-app
196 
197Laten we een concrete demo bouwen: een **taakbeheer-app** met authenticatie, volledige CRUD en een moderne interface.
198 
199### Definieer het Databaseschema
200 
201Geef Claude Code instructies om het schema te maken:
202 
203```
204You: Create a SQL migration for Supabase with the following tables:
205 
2061. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
207   created_at
2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
209   to profiles), created_at
2103. tasks: id (uuid), title (text), description (text), status (enum:
211   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
212   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
213   created_at, updated_at
214 
215Enable Row Level Security on all tables and create appropriate policies.
216```
217 
218Claude Code genereert een volledige migratie:
219 
220```sql
221-- Create enum types
222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');
224 
225-- Profiles table
226CREATE TABLE profiles (
227  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
228  username TEXT UNIQUE,
229  avatar_url TEXT,
230  created_at TIMESTAMPTZ DEFAULT NOW()
231);
232 
233-- Projects table
234CREATE TABLE projects (
235  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
236  name TEXT NOT NULL,
237  description TEXT,
238  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
239  created_at TIMESTAMPTZ DEFAULT NOW()
240);
241 
242-- Tasks table
243CREATE TABLE tasks (
244  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
245  title TEXT NOT NULL,
246  description TEXT,
247  status task_status DEFAULT 'todo',
248  priority task_priority DEFAULT 'medium',
249  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
250  assigned_to UUID REFERENCES profiles(id),
251  due_date TIMESTAMPTZ,
252  created_at TIMESTAMPTZ DEFAULT NOW(),
253  updated_at TIMESTAMPTZ DEFAULT NOW()
254);
255 
256-- Enable RLS
257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
260 
261-- Profiles policies
262CREATE POLICY "Users can view own profile"
263  ON profiles FOR SELECT USING (auth.uid() = id);
264CREATE POLICY "Users can update own profile"
265  ON profiles FOR UPDATE USING (auth.uid() = id);
266 
267-- Projects policies
268CREATE POLICY "Users can view own projects"
269  ON projects FOR SELECT USING (auth.uid() = owner_id);
270CREATE POLICY "Users can create projects"
271  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
272CREATE POLICY "Users can update own projects"
273  ON projects FOR UPDATE USING (auth.uid() = owner_id);
274CREATE POLICY "Users can delete own projects"
275  ON projects FOR DELETE USING (auth.uid() = owner_id);
276 
277-- Tasks policies
278CREATE POLICY "Users can view tasks in their projects"
279  ON tasks FOR SELECT USING (
280    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
281  );
282CREATE POLICY "Users can create tasks in their projects"
283  ON tasks FOR INSERT WITH CHECK (
284    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
285  );
286CREATE POLICY "Users can update tasks in their projects"
287  ON tasks FOR UPDATE USING (
288    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
289  );
290CREATE POLICY "Users can delete tasks in their projects"
291  ON tasks FOR DELETE USING (
292    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
293  );
294```
295 
296Je kunt deze migratie direct uitvoeren vanuit het Supabase-dashboard (SQL Editor) of via de CLI.
297 
298### Genereer TypeScript Types
299 
300```
301You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts
302```
303 
304```bash
305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts
306```
307 
308### Bouw de Gebruikersinterface
309 
310Nu komt het krachtigste deel van vibecoding. Geef Claude Code instructies op hoog niveau:
311 
312```
313You: Create a dashboard page for the task management app with:
314 
3151. Sidebar with navigation between projects
3162. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3173. Modal to create/edit tasks
3184. Header with user avatar and logout
3195. Modern design with shadcn/ui and Tailwind
320 
321Use data from Supabase with React Server Components where possible
322and Client Components only where interactivity is needed.
323```
324 
325Claude Code bouwt de gehele interface, component voor component.
326 
327### Voeg Authenticatie Toe
328 
329```
330You: Add a complete authentication system with:
331 
3321. Login page with email/password and GitHub login
3332. Registration page
3343. Middleware to protect authenticated routes
3354. Automatic redirect for unauthenticated users
3365. Automatic profile creation after registration
337```
338 
339Claude Code configureert Next.js middleware en auth-pagina's:
340 
341```typescript
342// src/middleware.ts
343import { createServerClient } from '@supabase/ssr';
344import { NextResponse, type NextRequest } from 'next/server';
345 
346export async function middleware(request: NextRequest) {
347  let supabaseResponse = NextResponse.next({ request });
348 
349  const supabase = createServerClient(
350    process.env.NEXT_PUBLIC_SUPABASE_URL!,
351    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
352    {
353      cookies: {
354        getAll() {
355          return request.cookies.getAll();
356        },
357        setAll(cookiesToSet) {
358          cookiesToSet.forEach(({ name, value }) =>
359            request.cookies.set(name, value)
360          );
361          supabaseResponse = NextResponse.next({ request });
362          cookiesToSet.forEach(({ name, value, options }) =>
363            supabaseResponse.cookies.set(name, value, options)
364          );
365        },
366      },
367    }
368  );
369 
370  const { data: { user } } = await supabase.auth.getUser();
371 
372  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
373    const url = request.nextUrl.clone();
374    url.pathname = '/auth/login';
375    return NextResponse.redirect(url);
376  }
377 
378  return supabaseResponse;
379}
380 
381export const config = {
382  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
383};
384```
385 
386## 5. Geavanceerde Vibecoding Patronen
387 
388### Iteratieve Prompting
389 
390Het geheim van effectieve vibecoding is **iteratie**. Probeer niet alles in één prompt te beschrijven. Ga stap voor stap te werk:
391 
392```
393Stap 1: "Create the base layout with header and sidebar"
394Stap 2: "Add the project list in the sidebar with a button to create new ones"
395Stap 3: "Create the Kanban view in the main area"
396Stap 4: "Add drag & drop between columns"
397Stap 5: "Implement the modal to create new tasks"
398Stap 6: "Add toast notifications for user feedback"
399```
400 
401> **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.
402 
403### Foutafhandeling
404 
405Wanneer iets niet werkt (en dat zal gebeuren), kun je eenvoudig zeggen:
406 
407```
408You: I'm getting this error in the console: "TypeError: Cannot read property
409'map' of undefined" in the TaskList component. Fix it.
410```
411 
412Claude Code analyseert de code, identificeert het probleem en lost het op.
413 
414### Refactoring met AI
415 
416```
417You: The Dashboard component has become too large. Split it into smaller,
418reusable components while maintaining the same functionality.
419```
420 
421### Testen
422 
423```
424You: Add tests with Vitest for utility functions and Playwright tests for
425the authentication and task creation flow.
426```
427 
428## 6. Deployen naar Vercel: Van Code naar de Wereld
429 
430### Stap 1: Push naar GitHub
431 
432```
433You: Create an appropriate .gitignore, commit everything, and push to a new
434GitHub repository called "my-demo-app".
435```
436 
437```bash
438git add .
439git commit -m "feat: complete task management demo"
440gh repo create my-demo-app --public --push --source=.
441```
442 
443### Stap 2: Verbind Vercel
444 
4451. Ga naar [vercel.com](https://vercel.com) en klik op "Add New Project."
4462. Importeer de GitHub-repository die je zojuist hebt aangemaakt.
4473. Voeg omgevingsvariabelen toe:
448   - `NEXT_PUBLIC_SUPABASE_URL`
449   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
4504. Klik op "Deploy."
451 
452```mermaid
453flowchart LR
454    A[GitHub Push] --> B[Vercel Build]
455    B --> C[Automatic Deploy]
456    C --> D[Public URL]
457    D --> E[Global CDN]
458```
459 
460### Stap 3: Configureer een Eigen Domein (Optioneel)
461 
462Vercel biedt een gratis URL zoals `my-demo-app.vercel.app`. Voor een eigen domein:
463 
464```
465You: Add the configuration for a custom domain in vercel.json
466```
467 
468### Preview Deployments
469 
470Elke 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.
471 
472## 7. Optimalisaties voor Je Demo
473 
474### Prestaties
475 
476```
477You: Optimize the app's performance:
4781. Add loading states with Suspense and skeletons
4792. Implement caching with Next.js unstable_cache
4803. Optimize images with next/image
4814. Add SEO metadata for each page
482```
483 
484### Realtime met Supabase
485 
486Een functie die altijd indruk maakt in demo's is **realtime**:
487 
488```
489You: Add realtime synchronization for tasks using Supabase Realtime.
490When a user updates a task, all other users should see the change
491in real time without refreshing.
492```
493 
494```typescript
495'use client';
496 
497import { useEffect, useState } from 'react';
498import { createClient } from '@/lib/supabase/client';
499import type { Task } from '@/types/database';
500 
501export function useRealtimeTasks(projectId: string) {
502  const [tasks, setTasks] = useState<Task[]>([]);
503  const supabase = createClient();
504 
505  useEffect(() => {
506    const channel = supabase
507      .channel('tasks-changes')
508      .on(
509        'postgres_changes',
510        {
511          event: '*',
512          schema: 'public',
513          table: 'tasks',
514          filter: `project_id=eq.${projectId}`,
515        },
516        (payload) => {
517          if (payload.eventType === 'INSERT') {
518            setTasks((prev) => [...prev, payload.new as Task]);
519          } else if (payload.eventType === 'UPDATE') {
520            setTasks((prev) =>
521              prev.map((t) =>
522                t.id === payload.new.id ? (payload.new as Task) : t
523              )
524            );
525          } else if (payload.eventType === 'DELETE') {
526            setTasks((prev) =>
527              prev.filter((t) => t.id !== payload.old.id)
528            );
529          }
530        }
531      )
532      .subscribe();
533 
534    return () => {
535      supabase.removeChannel(channel);
536    };
537  }, [projectId, supabase]);
538 
539  return tasks;
540}
541```
542 
543### Donkere Modus
544 
545```
546You: Add dark mode support with a toggle in the header.
547Use Tailwind dark classes and save the preference in localStorage.
548```
549 
550## 8. Best Practices voor Effectieve Vibecoding
551 
552### 1. Wees Specifiek in Je Prompts
553 
554```
555Niet: "Make a nice page"
556Wel: "Create a landing page with a hero section with a purple-blue gradient,
557   a features section with 3 cards with icons, and an orange CTA button"
558```
559 
560### 2. Bied Context
561 
562```
563Niet: "Add authentication"
564Wel: "Add authentication with Supabase Auth. The project uses Next.js 15 App
565   Router with TypeScript. I want email/password login and OAuth with GitHub.
566   Use the SSR pattern with @supabase/ssr"
567```
568 
569### 3. Itereer in Kleine Stappen
570 
571Probeer niet alles in één prompt te bouwen. Ga stapsgewijs te werk:
572 
5731. Basislayout
5742. Eén functie tegelijk
5753. Styling en afwerking
5764. Foutafhandeling
5775. Testen
578 
579### 4. Beoordeel de Gegenereerde Code
580 
581Vibecoding betekent niet dat je de code niet leest. Beoordeel altijd:
582 
583- **Beveiliging**: RLS-beleid, invoervalidatie, gegevenssanering.
584- **Prestaties**: N+1 query's, onnodig client-side componenten.
585- **Best practices**: projectstructuur, naamgevingsconventies.
586 
587### 5. Gebruik Git Strategisch
588 
589```
590You: Commit the changes with a descriptive message after each completed feature.
591```
592 
593Dit stelt je in staat om terug te draaien als er iets misgaat.
594 
595## 9. Kosten: Is Het Echt Allemaal Gratis?
596 
597Hier is een kostenoverzicht per dienst:
598 
599| Dienst | Gratis Plan | Wanneer Je Betaalt |
600|---------|-----------|-------------|
601| **Claude Code** | Vereist een Anthropic-plan (vanaf $20/maand) of API-sleutel | Direct, maar de waarde is enorm |
602| **Supabase** | Royale gratis tier (2 projecten, 500MB DB) | Bij overschrijding van gratis tier-limieten |
603| **Vercel** | Gratis tier voor persoonlijke projecten | Voor teams of commercieel gebruik |
604| **GitHub** | Gratis voor openbare en privé-repo's | Enterprise-functies |
605 
606> **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.
607 
608### Gratis AI-alternatieven
609 
610Als je de kosten op absoluut nul wilt houden, kun je gebruiken:
611 
612- **Cursor** (gratis tier met beperkingen).
613- **GitHub Copilot** (gratis voor studenten en open source).
614- **Codeium/Windsurf** (royale gratis tier).
615 
616## 10. Van Demo naar Product: Volgende Stappen
617 
618Zodra je demo live is, kun je als volgt verdergaan:
619 
620```mermaid
621flowchart TD
622    A[Live Demo] --> B{User Feedback}
623    B --> C[Product Iteration]
624    C --> D[Product-Market Fit]
625    D --> E[Scaling]
626    E --> F[Supabase Pro Plan]
627    E --> G[Vercel Pro Plan]
628    E --> H[Custom Domain]
629```
630 
6311. **Verzamel feedback**: deel de demo met potentiële gebruikers en verzamel meningen.
6322. **Itereer snel**: gebruik vibecoding om gevraagde wijzigingen te implementeren.
6333. **Monitor metrics**: Vercel Analytics en Supabase Dashboard geven je essentiële data.
6344. **Schaal wanneer nodig**: upgrade pas naar betaalde plannen als je de vraag hebt gevalideerd.
635 
636 
637## Conclusie
638 
639Vibecoding 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.
640 
641De 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.
642 
643De 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.
644 
645> **Checklist voor je eerste demo:**
646>
647> - [x] Claude Code geïnstalleerd en geconfigureerd
648> - [x] Supabase-project aangemaakt met databaseschema
649> - [x] Next.js-project geïnitialiseerd met shadcn/ui
650> - [x] Authenticatie geconfigureerd
651> - [x] Volledige CRUD geïmplementeerd
652> - [x] Moderne en responsieve UI
653> - [x] Gedeployed naar Vercel
654> - [x] Deelbare URL klaar voor feedback
655