Wil je je eerste app met AI bouwen maar weet je niet waar je moet beginnen? Een todo app is het perfecte project om met vibe coding te starten. In één uur bouw je een werkende applicatie waarmee je taken kunt toevoegen, afvinken en verwijderen. Geen programmeerkennis nodig: je beschrijft gewoon wat je wilt aan Claude Code, en de AI genereert de code voor je. Deze gids laat je precies zien wat je moet schrijven, in welke volgorde, en hoe je veelvoorkomende problemen oplost. Aan het einde heb je een echte app die je kunt laten zien, verbeteren en dagelijks gebruiken.

Waarom beginnen met een todo app in vibe coding?

Een todo app bevat alle basisprincipes van ontwikkeling zonder de technische complexiteit. Als je een takenlijst maakt, leer je informatie weergeven, nieuwe gegevens toevoegen, deze wijzigen en verwijderen. Deze vier bewerkingen (CRUD genoemd in vakjargon: Create, Read, Update, Delete) vormen 80% van wat moderne apps doen.

Vibe coding maakt dit project in één uur haalbaar, terwijl het een beginner met traditionele methoden weken zou kosten. Je hoeft JavaScript-syntaxis, DOM-events of state management niet te begrijpen. Je beschrijft gewoon wat je wilt, en Claude Code vertaalt je intenties in werkende code.

Volgens een GitHub-onderzoek uit 2025 voltooien ontwikkelaars die AI-assistenten gebruiken hun projecten 55% sneller dan handmatig codeerders. Voor een absolute beginner is de tijdwinst nog spectaculairder: je gaat van maanden leren naar enkele uren oefenen.

Dit eerste project geeft je ook een concrete basis om te begrijpen hoe vibe coding werkt. Je ziet in real-time hoe je beschrijvingen in een interface veranderen, hoe je fouten corrigeert en hoe je je app stap voor stap verbetert.

De tools die je nodig hebt voor je eerste project

Je hebt drie dingen nodig: een Claude Code-account, een moderne webbrowser en een basale teksteditor. Niets om te installeren, niets om in te stellen. Claude Code werkt volledig online en genereert code die je direct in je browser kunt testen.

Om je Claude Code-account aan te maken, ga je naar claude.ai en meld je aan met je e-mailadres. De gratis versie is meer dan voldoende voor dit project: je hebt 50 berichten per dag, ruim genoeg om je todo app te bouwen en af te stemmen. Voor meer details over de initiële setup, raadpleeg onze Claude Code tutorial voor beginners.

Qua browser werken Chrome, Firefox, Safari of Edge prima. Je opent gewoon een lokaal HTML-bestand om je app te testen. Geen webserver nodig voor dit eerste project.

Voor de teksteditor werken Windows Kladblok of Mac TextEdit, maar ik raad Visual Studio Code aan (gratis op code.visualstudio.com). Het kleurt code automatisch, wat het lezen makkelijker maakt, zelfs als je nog niet alles begrijpt.

Optioneel: maak een map op je computer aan waar je je project opslaat. Noem het bijvoorbeeld "mijn-todo-app". Daar zet je de bestanden die Claude genereert.

De startprompt voor je todo app

Begin met deze precieze prompt: "Maak een eenvoudige todo app in HTML, CSS en JavaScript in één bestand. Ik wil taken kunnen toevoegen, ze als voltooid afvinken en verwijderen. Minimalistisch en modern design." Deze prompt bevat alle essentiële elementen zonder technische details die je nog niet beheerst.

De precisering "één bestand" is cruciaal om mee te beginnen. Claude genereert een HTML-bestand dat alles bevat: de paginastructuur, de visuele stijl en de werkende logica. Je hoeft maar één bestand te beheren, wat alles veel vereenvoudigt.

De vermelding "minimalistisch en modern design" stuurt Claude naar een schone en aantrekkelijke interface, zonder franje die de code ingewikkelder maakt. Je kunt later geavanceerde functies toevoegen.

Wanneer je deze prompt verstuurt, antwoordt Claude meestal in 10 tot 20 seconden met een compleet codeblok. Je ziet een groot stuk dat begint met <!DOCTYPE html> en eindigt met </html>. Dat is normaal: dit is de code van je app.

Kopieer al deze code, plak het in je teksteditor, en sla het bestand op als todo.html in je projectmap. Dubbelklik vervolgens op dit bestand: het opent in je browser en je ziet al je eerste werkende app.

Als Claude je meerdere aparte bestanden geeft (HTML, CSS, JS), vraag het dan: "Kun je alles in één HTML-bestand zetten?" Het voegt alles voor je samen.

Je app stap voor stap testen en verbeteren

Open je todo.html-bestand in de browser en test elke functie: voeg een taak toe, vink het af, verwijder het. Als alles meteen werkt, gefeliciteerd! Zo niet, noteer precies wat niet werkt. Bijvoorbeeld: "Wanneer ik op Toevoegen klik, gebeurt er niets" of "Taken verschijnen maar ik kan ze niet verwijderen".

Ga terug naar Claude en beschrijf het probleem met je eigen woorden. Je hoeft niet te begrijpen waarom het buggy is: leg gewoon uit wat je ziet. Claude analyseert de code die hij heeft gegenereerd en stelt een correctie voor. Kopieer de nieuwe code, vervang de oude in je bestand, sla op en vernieuw je browser (F5).

Deze test-correctie-test-loop is het hart van vibe coding. Je hoeft de code zelf niet te debuggen: je beschrijft gewoon wat niet klopt, en de AI corrigeert het. Volgens Anthropic-gegevens lost Claude Code 73% van de bugs op bij de eerste poging als de probleembeschrijving duidelijk is.

Zodra de basisfuncties werken, verbeter je je app geleidelijk. Hier zijn eenvoudige verzoeken die je todo app transformeren:

  • "Voeg een teller toe die het aantal resterende taken weergeeft"
  • "Verander de achtergrondkleur in lichtblauw en de knoppen in groen"
  • "Zorg ervoor dat voltooide taken doorgestreept en grijs verschijnen"
  • "Voeg een animatie toe wanneer ik een taak verwijder"
  • "Sla taken op zodat ze blijven staan zelfs als ik de browser sluit"

Elk verzoek kost 30 seconden om te schrijven en 20 seconden voor Claude om de wijziging te genereren. Je kopieert, test en valideert. In 10 minuten kun je je basisapp transformeren in iets echt persoonlijks.

Veelvoorkomende fouten en hoe je ze oplost

Fout nummer één: het bestand niet opslaan nadat je de nieuwe code hebt geplakt. Je kopieert de code van Claude, je sluit de browser, en je ziet geen verandering. Oplossing: sla altijd op (Ctrl+S of Cmd+S) voordat je de browser vernieuwt.

Tweede veelgemaakte fout: slechts een deel van de code kopiëren. Claude genereert soms lange antwoorden, en je kunt het einde missen als je niet omlaag scrollt. Controleer altijd dat je kopieert van <!DOCTYPE html> tot en met </html>.

Derde valkuil: tegenstrijdige instructies geven. Als je zegt "maak de knoppen rood" en twee berichten later "ik wil overal een blauw thema", probeert Claude beide te combineren en het resultaat kan raar zijn. Oplossing: als je van gedachten verandert, zeg het duidelijk: "Vergeet het rood, ik wil alles blauw".

Vierde probleem: het bestand opent in de teksteditor in plaats van de browser. Dit gebeurt als de bestandsextensie .txt is in plaats van .html. Zorg ervoor dat je todo.html met de .html aan het einde typt. Op Windows moet je mogelijk bestandsextensies weergeven in de verkenneropties.

Vijfde fout: te veel tegelijk vragen. "Voeg categorieën, vervaldatums, een prioriteitssysteem en donkere modus toe" genereert waarschijnlijk buggy code. Ga stap voor stap: één functie tegelijk, test, valideer, ga dan naar de volgende.

Als echt niets werkt na meerdere pogingen, vraag Claude: "Genereer me een volledige todo app in één HTML-bestand, zo eenvoudig mogelijk, alleen taken toevoegen en verwijderen". Begin opnieuw met deze minimale basis en bouw geleidelijk op.

Verder gaan na je eerste todo app

Zodra je todo app werkt, heb je de basisprincipes van vibe coding onder de knie en kun je ambitieuzere projecten aanpakken. De logica blijft hetzelfde: je beschrijft wat je wilt, test, corrigeert, verbetert. Maar je kunt nu complexere apps nastreven.

Volgende natuurlijke stap: voeg gegevenspersistentie toe. Vraag Claude: "Sla taken op in de localStorage van de browser zodat ze blijven staan na sluiting". Deze functie transformeert je todo app in een echt bruikbaar dagelijks hulpmiddel.

Vervolgens verken je categorieën: "Voeg de mogelijkheid toe om verschillende lijsten te maken (Werk, Persoonlijk, Boodschappen) met tabbladen om ertussen te schakelen". Je begint complexere gegevens te structureren zonder één regel code te schrijven.

Om nog verder te gaan, leer je een volledige app met AI te maken. Deze gids laat je zien hoe je van een eenvoudig project naar een echte web-app met database en authenticatie gaat.

Je kunt ook je prompts verbeteren door prompt engineering-technieken toe te passen. Hoe beter je met Claude communiceert, hoe preciezer de gegenereerde code aansluit bij wat je wilt.

Tenslotte diversifieer je projecten: maak een fooi-calculator, een willekeurige citaatgenerator, een Pomodoro-timer. Elk project ontdekt nieuwe mogelijkheden. Op Skilzy, begeleiden we je door 12 progressieve projecten die je van absolute beginner naar app-maker brengen.

Vibe coding opent een wereld waarin je kunt bouwen wat je je voorstelt zonder maanden syntaxis te leren. Je todo app is de eerste steen. Blijf experimenteren, testen, vragen. Zo leer je.

Conclusie

Je hebt zojuist je eerste app in vibe coding gemaakt. In één uur ben je van nul naar een werkende todo app gegaan die je kunt gebruiken en verbeteren. Deze methode laat je vanaf dag één concrete projecten bouwen, zonder je in theorie te verdrinken. Blijf experimenteren met andere ideeën en sluit je aan bij Skilzy om je leren te structureren met progressieve projecten en persoonlijke begeleiding.