VSCode + Claude Code: zo ben ik begonnen met vibecoden

Ik ben geen developer van beroep. Ik ben IT-ondernemer, heb altijd wat met code gedaan, maar een volwaardige webapplicatie bouwen van A tot Z was iets dat ik altijd aan anderen uitbesteedde. Tot ik Claude Code ontdekte.

Sindsdien heb ik meerdere productie-applicaties gebouwd die dagelijks door echte gebruikers worden gebruikt. Niet als hobbyproject in een hoekje — live, op mijn eigen VPS, met een CI/CD pipeline en alles erop en eraan.

Dit is hoe dat begon.

De eerste stap: VSCode als thuisbasis

Als je gaat vibecoden met Claude Code, is VSCode de meest logische omgeving. Niet omdat het verplicht is, maar omdat alles er gewoon werkt: de terminal, de extensies, de bestandsnavigatie. Claude Code draait als CLI in de terminal, en VSCode geeft je alles in één scherm.

Wat ik gebruik:

• VSCode als editor
• Claude Code extensie (of gewoon claude in de geïntegreerde terminal)
• GitHub Copilot heb ik ooit geprobeerd, maar gedeactiveerd — twee AI's tegelijk is verwarrend

De setup is minimaal. Claude Code heeft geen zware configuratie nodig. Je installeert het, je opent een project, en je begint.

Hoe een vibecode-sessie er bij mij uitziet

Ik open VSCode, navigeer naar mijn project, en start een Claude Code-sessie in de terminal. Daarna beschrijf ik wat ik wil bouwen — in gewone taal, in het Nederlands als dat beter voelt.

Geen pseudocode, geen technische spec vooraf. Ik zeg iets als:

"Ik wil een pagina waarop gebruikers hun series kunnen bijhouden met statussen als Watching, Completed en Dropped. De data moet opgeslagen worden in PostgreSQL."

Claude bedenkt een aanpak, legt die aan me voor, en begint dan pas te schrijven. Ik kan bijsturen, afkeuren, of gewoon zeggen "doe maar." Dat iteratieve ritme is wat vibecoden zo prettig maakt.

Wat ik er mee gebouwd heb

Binged — een familie PWA voor het bijhouden van series en films. Live op binged.wallieweb.nl. Mijn vrouw en twee dochters gebruiken het dagelijks. Het heeft TMDB-integratie, co-watching, een PWA die installeerbaar is op iOS, Microsoft-authenticatie, en AI-aanbevelingen via de Claude API. Stack: Next.js 14, PostgreSQL, Prisma, NextAuth.

YieldRunner — een persoonlijk investing dashboard voor mijn dividend-portfolio. Versie 1.73 inmiddels. Modules voor dividend capture trading, loan notes tracking, een watchlist van 248+ tickers. Stack: Next.js 16, Supabase, React 19, Tailwind v4.

Wallieweb — de site die je nu leest. Gebouwd met Next.js, gedeployed via GitHub Actions naar mijn eigen VPS.

Ik had dit drie jaar geleden niet voor mogelijk gehouden.

De drie dingen die het verschil maken

1. CLAUDE.md is je geheugen

Elke project-repo heeft een CLAUDE.md bestand in de root. Daarin beschrijf ik de architectuur, de conventies, de stack-keuzes en de dingen die Claude niet moet doen. Bijvoorbeeld:

# YieldRunner — CLAUDE.md

## Stack
- Next.js 16, App Router, React 19
- Supabase Auth + PostgreSQL met Row Level Security
- Tailwind v4 — dark: variant altijd NA light variant

## Conventies
- Mobile-first. Nooit horizontaal scrollende tab-balk.
- Alle UI-teksten in het Nederlands.
- Nieuwe module: 4 stappen — type, MODULE_LABELS, sidebar, page guard.

Zonder dit bestand heeft Claude bij elke nieuwe sessie geen context. Met dit bestand herken je je eigen project terug in elke suggestie.

2. Kleine stappen, geen grote sprongen

De verleiding is groot om één grote prompt te schrijven: "Bouw een volledig authenticatiesysteem met login, registratie, wachtwoord-reset en 2FA." Dat werkt zelden goed.

Wat wel werkt: één ding tegelijk. "Voeg een login-pagina toe die verbindt met NextAuth." Dan: "Voeg een sessie-check toe op de dashboard-route." Dan: "Implementeer 2FA via TOTP."

Elke stap is te reviewen, te testen, en terug te draaien als het fout gaat.

3. Begrijp wat er gebouwd wordt

Dit klinkt logisch, maar het is de grootste valkuil. Als Claude code schrijft die je niet begrijpt, en je klikt het erdoor, stapelen de problemen zich op. Ik lees altijd de diff voordat ik commit. Niet om elk regel te doorgronden, maar om te snappen wat er verandert en waarom.

Claude legt het graag uit als je het vraagt. "Waarom gebruik je hier een server action in plaats van een API route?" is een perfecte vraag — en het antwoord leert je iets.

Concrete setup in 5 minuten

1. Installeer Claude Code via de terminal: npm install -g @anthropic-ai/claude-code
2. Open je project in VSCode
3. Open de geïntegreerde terminal (`Ctrl+``)
4. Typ claude om een sessie te starten
5. Maak een CLAUDE.md aan in je project-root met je stack en conventies

Dat is het. Geen plugins, geen speciale configuratie. De magie zit in hoe je de sessie opbouwt, niet in de tooling.

Tot slot

Vibecoden is geen vervanging voor development-kennis — het is een versneller. Hoe meer je begrijpt van wat er gebouwd wordt, hoe beter de samenwerking met Claude wordt. Maar de drempel om te beginnen is lager dan ooit.

Als ik één ding had geweten voordat ik begon: maak die CLAUDE.md vanaf dag één. Alles wat je daarin zet, betaalt zich terug bij elke volgende sessie.

De volgende post gaat over hoe ik mijn eigen deployment-pipeline heb opgezet — van git push tot live op mijn VPS, volledig automatisch.