Hoe ik in 1 dag een volledige web app heb kunnen maken

Technologie is altijd aan het evolueren en dat is vooral het geval op het gebied van programmeren. Door mijn 8 jaar ervaring (eigenlijk meer richting 12 jaar, omdat ik echt elke dag heb geprogrammeerd) zag ik een duidelijk patroon in de trend van programmeren.

Het proces van programmeren gaat steeds sneller. Toen ik begon met programmeren was JavaScript nog in de kinderschoenen en was het nogal wankel en raar om te gebruiken — in de tijd dat var nog een ding was.

Functionaliteit ontwikkelen met JavaScript was toen behoorlijk tijdrovend. Daarna kwamen frameworks en libraries zoals React en Vue, waardoor het toevoegen van functionaliteit een stuk eenvoudiger werd. Hierdoor werden er ook meer webapplicaties ontwikkeld.

En nu hebben we natuurlijk AI en dat heeft alles in een stroomversnelling gebracht. Mensen kunnen nu in een fractie van de tijd een complete web app ontwikkelen. Dat heb ik persoonlijk ook ontdekt na het gebruiken van AI tijdens mijn werkprocessen.

In deze tutorial leg ik je uit hoe ik het doe en wat het proces allemaal inhoudt. Het zijn in totaal 6 stappen die ik volg om echt op lichtsnelheid een web app te maken die werkt, functioneel is en live staat.

Als je me niet gelooft: we gaan het in dit artikel hebben over dit project.

Live link: https://tweet.snelstack.com/

GitHub: https://github.com/LaupWing/nextjs-blog-to-tweet-repurpose

Het project dat ik gemaakt heb genereert high-performing short-form social media content van mijn blogposts. Je kunt inloggen en het slaat de gegenereerde social media posts op.

So without further ado, hier is stap nummer 1.

#1 Weet het probleem

Of het nou een gloednieuw project is of een project dat je gaat refactoren: het draait altijd om problemen oplossen. Je kunt wel een webapp maken, maar als je allemaal features aan het toevoegen bent die niks te maken hebben met het probleem dat je wilt oplossen, ben je alleen maar tijd aan het verspillen.

Het feit dat programmeren nu 10x sneller gaat, betekent niet dat je van het pad moet afwijken.

Weet altijd welk probleem je aan het oplossen bent. Of het probleem nu grootschalig is of kleinschalig zoals een feature: weet altijd welk probleem je aanpakt. Maar als je grootschalige probleem al verkeerd is, dan maken al die kleinschalige problemen niet eens meer uit.

Mijn webapplicatie lost een echt probleem op: het repurposen van blogs voor social media. Het voordeel hiervan is dat je kunt linken naar je blogpost om meer aandacht te krijgen. Meer aandacht betekent meer bezoekers en dus potentieel meer klanten.

#2 Weet de fundamentals

Ik blijf het zeggen en ik ga hier oprecht nog een heel apart artikel over schrijven. Als je de basics niet weet van programmeren, kom je nergens. De hoeveelheid mensen die het Dunning-Kruger syndroom hebben tegenwoordig is belachelijk.

Wat is het Dunning-Kruger effect? Een ander begrip hiervoor is "Mount Stupid": je denkt dat je ergens goed in bent, maar je bent eigenlijk net een beginner. Door AI denkt de gemiddelde mens dat ze weten hoe ze een web app moeten maken, maar ze zien de kleine nuances niet.

Ze krijgen misschien een klein gedeelte van de website af, maar zodra ze tegen een error lopen stopt het daar. En dan moeten ze bij mij aankloppen.

Het feit blijft dat je moet weten wat je aan het doen bent. AI kan wel code voor je schrijven, maar je moet wel blijven denken en het sturen. Zie het als een auto met cruise control: de auto rijdt, maar jij moet nog steeds sturen en weten waar je naartoe gaat.

#3 Gebruik de juiste tools

Oké, nu gaan we door naar het praktische gedeelte. Welke tools gebruik ik? Tot nu toe heb ik de meeste tools uitgeprobeerd en kom ik op deze combinatie uit die voor mij het beste werkt:

Claude Code om het project daadwerkelijk te bouwen en v0 om het begin te scaffolden.

Mijn workflow ziet er zo uit:

1. Design zoeken en tweaken — Ik zoek een design dat goed past bij het project, of het nou op Dribbble is of ThemeForest (nu Envato volgens mij). Dan maak ik een screenshot van het design.

2. v0 voor de basis — Ik stop die screenshot in v0 en genereer een beginpunt met React code. Ik blijf net zolang prompten in v0 tot ik een mooi brand-specifiek project heb.

3. Laravel setup — Daarna download ik het project en maak ik een nieuw project met Laravel (de beste framework, vooral voor AI vind ik). Het v0 project stop ik in een mapje genaamd design als referentie.

4. Claude Code voor de rest — Vervolgens gebruik ik Claude Code om de andere pagina's en specifieke componenten te maken, met het design mapje als referentie. Alle UI onderdelen maak ik eerst met boilerplate data of placeholder data voordat ik verder ga.

En ja, ook hier geldt: je moet de basis fundamentals beheersen van styling om dit goed uit te voeren. Gelukkig heb ik hier verstand van want ik heb meer dan 500 projecten gemaakt en heb ook een design opleiding gedaan.

#4 Data structuur

Nadat ik een ruwe versie heb van het project met de styling en boilerplate data — en ik echt tevreden ben met hoe het eruit ziet — ga ik de datastructuur ontwikkelen met Laravel.

De reden waarom ik dit doe is simpel: vaak genoeg is de UI/UX leidend voor de backend. Dat is in ieder geval wat ik heb meegemaakt. Dus als je tevreden bent met de UI/UX, dan leidt dat de datastructuur.

Dit was vroeger niet zo handig, omdat UI/UX gewoon heel lang duurde om te ontwikkelen. Maar door AI is het proces veranderd. Je kunt nu in een paar uur een complete frontend hebben en dan pas nadenken over je database schema.

Mijn aanpak:

• Bekijk welke data je op elke pagina nodig hebt
• Bepaal de relaties tussen je modellen
• Maak je migrations en models aan met Claude Code
• Vervang de boilerplate data met echte database queries

Dit zorgt ervoor dat je datastructuur precies past bij wat je frontend nodig heeft — geen overbodige velden, geen missende data.

#5 Tests schrijven (optioneel)

Ik ga eerlijk zijn: ik schrijf niet altijd tests voor elk project. Het hangt af van de scope en hoe kritisch de applicatie is.

Voor side projects of MVPs sla ik tests vaak over om snelheid te behouden. Maar voor productie-applicaties of projecten die lang moeten meegaan, zijn tests essentieel.

Wat ik wel altijd doe:

• Handmatig testen van de happy path
• Edge cases checken voor formulieren en authenticatie
• Feature tests voor kritieke functionaliteit als de app groeit

Met AI kun je trouwens ook snel tests genereren. Claude Code kan op basis van je code de bijbehorende tests schrijven. Dus zelfs als je "geen tijd" hebt voor tests, is dat excuus tegenwoordig een stuk minder valide.

#6 Live zetten

Dit is waar veel developers vastlopen. Ze hebben een werkend project lokaal, maar het live zetten voelt als een berg.

Mijn grootste tip: gebruik managed hosting zoals Laravel Forge of Ploi. Dit scheelt je zoveel tijd en hoofdpijn. Ja, het kost geld, maar dit artikel gaat om tijd besparen — en tijd is geld.

Met Forge:

• Server setup in minuten
• Automatische deployments via Git
• SSL certificaten met één klik
• Database backups geregeld

Het alternatief is zelf een server configureren met Nginx, PHP, MySQL, SSL, firewalls... Je bent uren kwijt aan iets wat Forge in 10 minuten doet.

En vergeet niet: een project dat niet live staat, bestaat niet. Liever snel live met 80% van de features dan nooit live met 100%.

Conclusie

Het bouwen van web apps is fundamenteel veranderd door AI. Wat vroeger weken duurde, kan nu in dagen of zelfs uren.

Maar — en dit is belangrijk — AI is een versneller, geen vervanging. Je moet nog steeds:

1. Het probleem begrijpen dat je oplost
2. De fundamentals kennen om AI goed te kunnen sturen
3. De juiste tools kiezen voor jouw workflow
4. Nadenken over datastructuur in plaats van blind code genereren
5. Testen waar nodig
6. Deployen zonder eindeloos uit te stellen

De developers die dit snappen en AI als tool gebruiken in plaats van als kruk, gaan de komende jaren enorm veel waarde leveren.

Heb je vragen over mijn workflow of wil je dat ik ergens dieper op inga? Laat het me weten.