Hoe ik een SaaS MVP bouwde in 24 uur met AI (stap-voor-stap handleiding)

Samenvatting

Je kunt van nul naar een gedeployde, betalingsgerede SaaS MVP in 24 uur. Geen speelgoed — een echt product met authenticatie, database, Stripe-facturering en een landingspagina. Hier is de uur-voor-uur breakdown en elke tool die ik heb gebruikt.

Totale kosten: ~$60 (voornamelijk domein + eerste maand services) Stack: Next.js + Supabase + Stripe + Cloudflare, gebouwd met Claude Code en Cursor, gedeployd met Y Build.

---

Waarom dit nu mogelijk is

Twee jaar geleden betekende het bouwen van een MVP in 24 uur overal afsnijden — geen authenticatie, geen betalingen, geen echte backend. Je lanceerde een statische pagina en noemde het een MVP.

In 2026 hebben AI-codeertools de berekening veranderd. Claude Code schrijft productiekwaliteit backendlogica. Cursor verwerkt frontend-iteratie op gespreksnelheid. Y Build deployt naar edge-infrastructuur zonder DevOps. Het knelpunt is niet meer coderen — het is beslissen wat je gaat bouwen.

Deze handleiding documenteert het exacte proces, uur voor uur.

---

Uur 1-2: Ideevalidatie (sla dit niet over)

De grootste fout bij 24-uursbouwprojecten is direct beginnen met coderen. Twee uur validatie bespaart je van het bouwen van iets dat niemand wil.

Wat ik deed

1. Probleemidentificatie — Reddit, Indie Hackers en X doorgebladerd voor klachten over bestaande tools. Een terugkerend pijnpunt gevonden: freelancers die moeite hebben met tijdregistratie over meerdere klanten zonder te schakelen tussen 5 verschillende apps.

1. Snelle concurrentieanalyse — Gezocht naar bestaande oplossingen. Toggl, Harvest, Clockify gevonden. Allemaal gericht op teams. Geen had een doodgewone "freelancer-first" modus met automatische facturering.

1. Landingspaginatest — Claude Code gebruikt om in 15 minuten een eenpagina-landingspagina te genereren. Een "Schrijf je in voor de wachtlijst"-knop toegevoegd met een eenvoudig e-mailformulier. Gepost op 3 relevante subreddits en 2 Slack-communities.

1. Validatiesignaal — Binnen 2 uur had ik 23 e-mailinschrijvingen en 4 DM's met de vraag "wanneer gaat dit live?" Dat is genoeg signaal.

Gebruikte tools

• Claude Code (landingspagina generatie)
• Supabase (e-mail capture — slechts één tabel)
• Reddit, Indie Hackers (distributie)

Kosten: $0

---

Uur 3-6: Bouw het kernproduct

Dit is waar AI-codeertools hun waarde bewijzen. Vier uur om een functionele SaaS-app te bouwen.

Uur 3: Projectopzet en datamodel

Claude Code geopend en het product beschreven:

"Build a Next.js 15 app with Supabase auth and database. The app is a freelancer time tracker. Data model: users, clients, projects, time_entries, invoices. Time entries have start/stop timestamps and belong to a project. Projects belong to a client. Invoices aggregate time entries by client for a date range."

Claude Code genereerde het complete datamodel, Supabase-migraties en authenticatieopzet in één pass. Ik reviewde het schema, maakte twee kleine aanpassingen (een hourly_rate-veld aan projecten toegevoegd, een status-enum aan facturen toegevoegd), en draaide de migraties.

Tijd: 40 minuten

Uur 4-5: Kernfuncties

Overgeschakeld naar Cursor voor frontend-iteratie. Drie schermen gebouwd:

1. Timerscherm — Timer starten/stoppen, klant en project selecteren, totaal van vandaag zien. Cursors inline-bewerking gebruikt om snel de UI te itereren. Begonnen met een basislayout, daarna spacing, kleuren en micro-interacties verfijnd via gesprek.

1. Dashboard — Weekoverzicht, uitsplitsing per klant, grafiek met uren per dag. Claude Code genereerde de data-aggregatiequery's. Cursor verwerkte het grafiekcomponent.

1. Factuurgenerator — Klant selecteren, datumbereik, PDF-factuur genereren. Claude Code gebruikt voor de PDF-generatielogica (html-to-pdf via Puppeteer-achtige rendering op de server).

Tijd: 2 uur

Uur 5-6: Polijsten en randgevallen

• Foutafhandeling en laadstatussen toegevoegd
• Mobiel responsieve layout (Cursor maakte dit snel — gewoon beschrijven wat er bij elk breakpoint moest veranderen)
• Lege statussen voor nieuwe gebruikers
• Onboardingflow: nieuwe gebruikers worden gevraagd hun eerste klant toe te voegen

Tijd: 1 uur

Gebruikte tools

• Claude Code (backendlogica, datamodel, API-routes, PDF-generatie)
• Cursor (frontend UI-iteratie, responsief design)
• Next.js 15, Supabase, Tailwind CSS

Kosten: $0 (gratis tiers)

---

Uur 7-8: Deployen met Y Build

Dit was vroeger het pijnlijke deel. CI/CD opzetten, omgevingsvariabelen configureren, DNS, SSL, CDN — makkelijk een hele dag DevOps-werk.

Wat ik deed

1. Repo verbonden — De GitHub-repo gekoppeld aan Y Build. Automatische detectie van Next.js, suggestie voor Cloudflare Workers-deployment.

1. Omgevingsvariabelen — Y Build haalde de vereiste env vars uit mijn .env.local en vroeg me elke te bevestigen voor productie. Supabase URL, anon key en service role key toegevoegd.

1. Aangepast domein — Domein gekocht ($12), DNS naar Y Builds nameservers gewezen. SSL automatisch ingericht.

1. Deploy — Eén klik. Y Build bouwde het project, optimaliseerde assets, deployde naar Cloudflares edge-netwerk over 300+ locaties. Totale deploytijd: 90 seconden.

1. AI SEO-opzet — Y Build genereerde automatisch metatags, Open Graph-afbeeldingen en een sitemap op basis van de app-pagina's. Gestructureerde data voor de landingspagina toegevoegd.

Tijd: 45 minuten (inclusief 20 minuten wachten op DNS-propagatie)

Gebruikte tools

• Y Build (deployment, DNS, SSL, SEO)
• Cloudflare (edge hosting via Y Build)

Kosten: $12 (domein)

---

Uur 9-12: Betalingen toevoegen en lanceringsvoorbereiding

Uur 9-10: Stripe-integratie

Claude Code gebruikt om Stripe toe te voegen:

• Prijzenpagina — Twee niveaus: Gratis (3 klanten, basistimer) en Pro ($12/mnd — onbeperkte klanten, facturering, rapporten)
• Betaalflow — Stripe Checkout-sessiecreatie, webhook-afhandeling voor abonnementsgebeurtenissen
• Factureringsportaal — Zelfbediening voor klanten voor planwijzigingen en annuleringen
• Feature gating — Middleware om abonnementsstatus te controleren en functies voor gratis gebruikers te beperken

Claude Code verwerkte de hele Stripe-integratie — webhook-handtekeningverificatie, abonnementslevenscyclusbeheer, klantenportaalopzet. Ik reviewde de webhook-handler zorgvuldig (hier wonen geldbuggen) en maakte één fix om het customer.subscription.updated-event correct af te handelen. Tijd: 1,5 uur

Uur 10-11: Landingspagina-upgrade

De validatie-landingspagina vervangen door een volwaardige:

• Herosectie met productscreenshot (screenshot van de draaiende app gemaakt)
• Functieraster met iconen
• Prijstabel
• FAQ-sectie
• Social proof (de 23 wachtlijstinschrijvingen gebruikt als "23 freelancers wachten al")

Cursor gebruikt voor snelle iteratie op tekst en layout. Claude Code genereerde de FAQ-content op basis van productfuncties. Tijd: 1 uur

Uur 11-12: Productdemovideo

Y Build Demo Cut gebruikt om een productdemovideo te genereren:

1. Demo Cut gericht op de gedeployde app-URL
2. AI doorliep de app — timer, dashboard, factuurgenerator
3. Demo van 60 seconden gegenereerd met voice-over, overgangen en achtergrondmuziek
4. Geëxporteerd voor Product Hunt-galerij en landingspagina-hero

Tijd: 10 minuten

Resterende tijd: Product Hunt-listingtekst geschreven, social media-posts voorbereid, analytics opgezet via Y Builds ingebouwde dashboard.

Gebruikte tools

• Claude Code (Stripe-integratie)
• Cursor (landingspagina)
• Y Build Demo Cut (productdemovideo)
• Stripe

Kosten: $0 (Stripe rekent per transactie, geen voorafkosten)

---

Uur 13-18: Lancering

Product Hunt-indiening

• Demovideo, screenshots en listingtekst geüpload
• Lancering gepland op 12:01 AM PT (optimale timing)
• "Maker comment" voorbereid die het 24-uursbouwverhaal uitlegt

Social media-blitz

• Het bouwverhaal op X gepost met screenshots van elke fase
• Gedeeld in 5 relevante Slack-communities (freelancergroepen, indie hackergroepen)
• Gepost op r/SaaS, r/Freelance en r/SideProject
• E-mail gestuurd naar de 23 wachtlijstinschrijvingen: "Het is live. Jullie zijn de eersten die het weten."

Resultaten bij uur 18

• 47 Product Hunt-upvotes
• 120 unieke bezoekers
• 8 aanmeldingen (gratis tier)
• 2 Pro-conversies ($24 MRR)

---

Uur 19-24: Itereren op feedback

Eerste gebruikers brachten drie problemen aan het licht:

1. Timer bleef niet behouden na pagina-refresh — Claude Code loste dit op in 10 minuten (timerstatus opgeslagen in localStorage + gesynchroniseerd met server)
2. Factuur-PDF-opmaak brak bij lange projectnamen — 5 minuten CSS-fix
3. Gebruikers wilden een "snel toevoegen" voor tijdregistraties zonder de timer — Claude Code bouwde een handmatig invoerformulier in 20 minuten

Fixes gedeployd via Y Build — elke deploy duurde minder dan 2 minuten.

Bij uur 24:

• 12 totale aanmeldingen


• 3 Pro-conversies ($36 MRR)


• Kernproduct stabiel en bruikbaar

---

Volledig kostenoverzicht

---

Wat ik anders zou doen

1. 30 minuten langer aan het datamodel besteden — Ik moest later twee velden toevoegen die voor de hand hadden gelegen met meer voorafgaand nadenken. AI is snel in het genereren van code, maar kan je bedrijfslogica niet valideren.

1. Analytics eerder opzetten — Ik voegde pas bij uur 15 eventtracking toe. Data over vroeg gebruikersgedrag gemist.

1. De Product Hunt-listing van tevoren schrijven — Ik schreef haastig tekst bij uur 11. Had het tijdens de validatiefase al moeten opstellen.

1. Stripe-webhooks grondiger testen — Had even schrik bij uur 16 toen een abonnementsupdate-webhook stil faalde. Test altijd de volledige abonnementslevenscyclus voor lancering.

---

De AI SaaS-stack van 2026

Als je vandaag een SaaS MVP bouwt, is dit de stack die ik aanbeveel:

---

Veelgestelde vragen

Moet ik een ontwikkelaar zijn om dit te doen? Je hebt basiskennis van technologie nodig — begrijpen wat een database is, wat een API doet, hoe webapps werken. Maar je hoeft geen code vanaf nul te schrijven. Claude Code en Cursor verzorgen de implementatie. Jij bent de productmanager. Wat als mijn idee niet gevalideerd wordt in 2 uur? Laat het vallen. Het punt van de 24-uursbeperking is snel bewegen. Als 2 uur validatie geen interesse toont, kies een ander idee. Je kunt altijd terugkomen. Is een 24-uurs MVP echt bruikbaar? Ja, als je meedogenloos scoped. Het geheim is één probleem goed oplossen, niet een volledige productoplossing bouwen. Mijn tijdtracker doet drie dingen: tijd bijhouden, een dashboard tonen, facturen genereren. Dat is het. Hoe ga ik om met schaling als het aanslaat? Supabase en Cloudflare (via Y Build) verwerken standaard aanzienlijk verkeer. Je krijgt pas schalingsproblemen bij duizenden dagelijkse actieve gebruikers. Op dat punt heb je inkomsten om in infrastructuur te investeren. Hoe zit het met mobiel? Responsief web eerst. Een speciale mobiele app is een Week 2-probleem — nadat je hebt gevalideerd dat mensen het product daadwerkelijk gebruiken.

---

Klaar om van code naar gedeployd product te gaan in minuten? Y Build verzorgt deployment, AI SEO, analytics en demovideo's — zodat jij je kunt concentreren op bouwen. Gratis starten.