Werken met een dedicated vibe code tool
Je kiest een dedicated vibe code tool zoals Codex, Cursor, Claude Code, Google AI Studio, Lovable, Bolt of Google Antigravity en snapt waarom je niet meer in een los HTML-bestand werkt.
Vibe Coden Gevorderd
Maak van je eerste app een compleet product met meerdere bestanden, een database en een vaste plek op het web.
In de basiscursus maakte je een eerste werkend appje. Nu leer je werken met een grotere projectmap, database, versiebeheer en een publiceerflow die je kunt blijven onderhouden.
Van prototype naar publiceerbare webapp
- Voor wie
- Je hebt de basisroute of een eerste appje gemaakt
- Tools
- Codex, Cursor, Claude Code, Google AI Studio, Lovable, Bolt of Google Antigravity
- Benodigd
- Supabase-account, GitHub-account, Vercel of Netlify
De lessen
Je werkt van een eerste project in een vibe-codeomgeving naar een webapp met geheugen, versiebeheer en een nette publicatieflow. Iedere les draait om een concrete stap in dat maakproces.
Naar les 1
Een database koppelen met Supabase
Je geeft je app geheugen met Supabase, zodat gebruikers iets kunnen invullen en jij gegevens later kunt terugzien.
Supabase slim en veilig gebruiken
Je leert hoe je het gratis Supabase-plan slim gebruikt, hoe je pauzeren voorkomt en hoe je leerling-/studentgegevens extra beschermt.
Ontwerp bewust voor leren
Je kiest bewust wanneer je uitlegt, laat oefenen, ondersteunt, beloont en uitdaagt en maakt daarvan een didactische briefing.
Een sterk bouwplan maken
Je maakt eerst een PRD en faseplan, zodat de AI weet waar de onderwijsapp heen moet en jij tussendoor kunt testen.
Slim itereren zonder je app kapot te maken
Je kiest bewust tussen een kleine wijziging met screenshot, drie oplossingsopties of een wijzigingsplan voor grotere aanpassingen.
Geef je project een vast geheugen
Je legt blijvende afspraken vast in AGENTS.md of het instructiebestand van jouw tool, zodat de AI ze bij nieuwe taken blijft meenemen.
AI als tester gebruiken
Je laat AI als tester meekijken naar flows, mobiel gebruik, rollen, databasegedrag en onderwijslogica.
Slimmer opslaan met GitHub
Je bewaart je project veilig in GitHub, begrijpt versies en kunt terug naar een eerdere stand.
Slim publiceren via Vercel of Netlify
Je koppelt GitHub aan Vercel of Netlify, zodat je onderwijswebapp netjes online staat en updates overzichtelijk blijven.
Zet je webapp als app op je telefoon
Je maakt je live onderwijswebapp installeerbaar, zet hem met een eigen icoon op een telefoon en test de belangrijkste flow.
Volledig voorbeeld en eindopdracht
Je kijkt naar een volledig voorbeeld en bouwt daarna zelf één complete onderwijswebapp met Supabase, GitHub en publicatie.
Volgende stap
Ga verder met Vibe Coden Expert
In de Expert-cursus voeg je AI toe aan je eigen webapp. Je werkt met OpenRouter, verschillende modellen, veilige API-sleutels en duidelijke limieten voor gebruik en kosten.
Bekijk Vibe Coden ExpertKlaar om groter te bouwen?
Start met de overstap van een los HTML-bestand naar een echte vibe-codeomgeving.