De app plannen met AI
Zet een idee om in features en een plan.
De app plannen met AI is een gratis Vibe-coding-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vibe-coding. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vibe-coding bevat in totaal 4 lessen.
Van idee naar een echte app
Welkom bij het grote werk: een full-stack-app bouwen door volledig met AI te praten. Full-stack betekent dat drie lagen samenwerken — de frontend (wat gebruikers zien), de backend (de logica op een server) en een database (waar gegevens worden opgeslagen).
Voordat je ook maar één regel code genereert, maak je een plan. Een duidelijk plan is het verschil tussen een nette build en een onoverzichtelijke puinhoop. Het goede nieuws: AI is een uitstekende partner bij het plannen. In deze les zet je een idee van één zin om in een concrete lijst met functies en een bouwplan.
Begin met één zin
Elke app begint als een vaag idee. Je eerste taak is om dat samen te vatten in één duidelijke zin waarin staat voor wie de app is en wat die doet.
Maak je geen zorgen over perfectie. Je verfijnt de zin met AI. Een zwakke ideeënzin is "een coole app voor taken". Een sterke zin is specifiek over de gebruiker en de waarde.
Here is my app idea in one sentence:
"A simple web app where freelancers can log their work hours per client and see a weekly total."
Act as a product mentor. Ask me 3 sharp questions that would change how we build this, then restate my idea as a crisp one-liner.Laat AI de kernfuncties vinden
Als je idee duidelijk is, vraag je AI om het op te splitsen in functies. Een functie is één ding dat een gebruiker kan doen: "een tijdregistratie toevoegen", "het weektotaal bekijken" of "een klant aanmaken".
De valkuil is dat je om alles vraagt. Laat de AI de vereisten (je MVP) scheiden van de extra's. Je bouwt eerst de vereisten.
Based on this app idea:
"A web app where freelancers log work hours per client and see a weekly total."
List the core features as short user actions. Split them into two groups:
1. MUST-HAVE for a first working version (MVP)
2. NICE-TO-HAVE for later
Keep the MVP list to 5 features or fewer.Schets het gegevensmodel
Apps slaan informatie op, en de manier waarop je die informatie organiseert is het gegevensmodel. Denk in termen van dingen (entiteiten) en de velden die ze hebben.
Voor onze timerapp: een Client heeft een naam. Een TimeEntry heeft uren en een datum en hoort bij een klant. AI kan dit voor je voorstellen, zodat het databaseontwerp geen giswerk is.
Propose a simple data model for this app:
"Freelancers log hours per client and see a weekly total."
For each entity, give me:
- the entity name
- its fields and their types
- how entities relate to each other (one-to-many, etc.)
Keep it minimal — only what the MVP needs.Breng de schermen in kaart
Maak vervolgens een lijst van de schermen (pagina's) waar een gebruiker doorheen gaat. De meeste kleine apps hebben er maar een paar nodig: een hoofddashboard, een formulier om gegevens toe te voegen en misschien een instellingenpagina.
Door de schermen vroeg te benoemen, kan AI navigatie bouwen die logisch is en voorkom je dat je pagina's bedenkt die je niet nodig hebt.
For the freelancer hours app, list the screens a user needs.
For each screen give:
- its name
- what the user sees there
- what actions they can take
Then describe how a user navigates between them. Keep it to 3-4 screens for the MVP.Kies een technologiestack (met hulp van AI)
De technologiestack is de verzameling tools waarmee je app wordt gebouwd. Als beginner hoef je opties niet uit je hoofd te leren — vraag AI om een beginnersvriendelijke, goed ondersteunde stack aan te bevelen en uit te leggen waarom.
Voor vibe coding is een veelgebruikte, AI-vriendelijke stack Next.js (frontend en backend in één) met een gehoste database. Laat de AI zijn keuze onderbouwen, zodat je de beslissing begrijpt.
I'm a beginner building the freelancer hours app by prompting AI. Recommend ONE simple, modern tech stack for the frontend, backend, and database.
For each choice:
- name the tool
- one sentence on why it's beginner-friendly
- note if it deploys easily to Vercel
Favor tools that AI editors like Cursor and v0 support well.Zet het plan om in een specificatiebestand
Een professionele aanpak: laat AI je hele plan in één specificatiedocument schrijven (vaak een bestand PROJECT.md of spec.md). Dit wordt het gedeelde geheugen dat je in elke AI-tool plakt, zodat die het juiste bouwt.
Tools zoals Cursor en Claude Code lezen projectbestanden automatisch. Als je een specificatie in je repository bewaart, blijft de AI tijdens de hele build op één lijn.
Combine everything we discussed into a single PROJECT.md spec for the freelancer hours app. Include sections:
## Idea
## MVP Features
## Data Model
## Screens
## Tech Stack
## Out of Scope (for now)
Write it in clean Markdown so I can save it in my repo and feed it to any AI tool.Bepaal de volgorde van de bouwstappen
Je kunt niet alles tegelijk bouwen. Vraag AI om een bouwvolgorde — de reeks stappen waarmee je zo snel mogelijk een werkende app krijgt, met in elke fase iets dat je kunt uitvoeren.
Een goede volgorde is meestal: eerst het gegevensmodel, daarna een backend die het leest en schrijft, vervolgens een frontend die met de backend communiceert en als laatste de login. Elke stap moet iets opleveren dat je daadwerkelijk kunt uitvoeren.
Using our PROJECT.md, give me an ordered, step-by-step build plan for the freelancer hours app.
Rules:
- Each step should end with something I can run and see working.
- Start from the database/data model and build outward.
- Put authentication near the end.
- Number the steps so I can tackle them one prompt at a time.Een klein voorproefje van de gegevens
Voordat je een echte database gebruikt, kun je je gegevens schetsen als gewone JavaScript-objecten. Zo wordt het gegevensmodel concreet. Zo kunnen onze timergegevens eruitzien als een array — precies de vorm die een frontend zou weergeven.
Voer de code uit om een weektotaal op basis van voorbeeldregistraties te berekenen. Dit is het soort logica dat AI later kan uitbreiden tot je echte app.
const entries = [
{ client: "Acme", hours: 3, date: "2026-06-01" },
{ client: "Acme", hours: 2, date: "2026-06-02" },
{ client: "Globex", hours: 4, date: "2026-06-03" }
];
const total = entries.reduce((sum, e) => sum + e.hours, 0);
console.log("This week:", total, "hours");
const byClient = {};
for (const e of entries) {
byClient[e.client] = (byClient[e.client] || 0) + e.hours;
}
console.log("Per client:", byClient);Houd je aan het plan, maar blijf flexibel
Een plan is een beginpunt, geen kooi. Tijdens het bouwen leer je nieuwe dingen — een functie is moeilijker dan verwacht of een scherm blijkt overbodig. Dat is normaal.
Als het plan verandert, werk je PROJECT.md bij en vertel je het aan de AI. Als je de specificatie actueel houdt, blijft elke volgende prompt gebaseerd op de werkelijkheid in plaats van op een verouderde droom.
We finished step 2 and decided to drop the 'export to CSV' feature for now and add a 'notes' field to each time entry.
Update the relevant sections of PROJECT.md to reflect these two changes, and show me only the sections that changed.Wat een sterk plan je oplevert
Met een idee van één zin, een MVP-functielijst, een gegevensmodel, een schermoverzicht, een stack en een geordend bouwplan in een specificatiebestand ben je klaar om vol vertrouwen te bouwen.
Elke prompt vanaf hier kan naar dit plan verwijzen, zodat de AI jouw app bouwt — geen generieke app. Plannen voelt misschien langzaam, maar het is de snelste weg naar een echte, werkende full-stack-app.
Korte controle
Laten we de planningsworkflow vastleggen.
Samenvatting: plan eerst, bouw slim
Je hebt geleerd hoe je met AI een vaag idee omzet in een plan dat je kunt bouwen:
- Vat het idee samen in één duidelijke zin
- Splits functies op in MVP en later
- Schets een minimaal gegevensmodel en schermoverzicht
- Kies een beginnersvriendelijke technologiestack
- Sla alles op in een PROJECT.md-specificatie en maak een geordend bouwplan
Hierna verbind je de frontend en backend met elkaar, zodat je schermen daadwerkelijk met een server kunnen communiceren.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 25
- Lessen
- 100
Veelgestelde vragen
Is de les “De app plannen met AI” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vibe-coding, waaronder “De app plannen met AI”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vibe-coding bevat in totaal 4 lessen.
Wat leer ik in “De app plannen met AI”?
Zet een idee om in features en een plan. Je oefent met Vibe-coding door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vibe-coding te beginnen?
Ervaring vooraf is niet nodig. Vibe-coding op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “De app plannen met AI”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vibe-coding?
Ja. Elke les over Vibe-coding bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De app plannen met AI
- Frontend en backend samen
- Een database toevoegen
- Gebruikersaccounts en inloggen