Ik wilde een simpele app om mijn gezondheid bij te houden. Slaap, water, beweging. Alle bestaande apps stuurden mijn data naar de cloud of kostten €10 per maand voor basis functionaliteit.
Dus besloot ik hem zelf te bouwen. Met één klein probleem: ik kan niet programmeren.
Dit is het verhaal van hoe ik met AI als co-pilot in een paar uur een werkende PWA bouwde. Met tests, CI/CD, en deployment. De hele rataplan.
De cijfers#
| |
|---|
| Mijn tijd | ~3,5 uur |
| AI tijd | ~21,5 uur |
| Ratio | 1:6 |
| Versie | 0.3.0 |
Live app: daily.modub.nl
De posts#
Lees het hele verhaal hieronder, of spring naar een specifiek moment.
Twee dagen lang werkte hetzelfde veld niet. Ik vulde “lezen” in, klikte opslaan, ging terug - en het vakje was weer leeg. Elke keer opnieuw.
Dit is het verhaal van een bug die me leerde dat AI-gegenereerde code zijn eigen valkuilen heeft. En dat mijn samenwerking met Claude nog lang niet vlekkeloos is.
De frustratie Het begon simpel. Claude had twee nieuwe velden toegevoegd: “lezen” (een checkbox) en “energie” (een emoji selector). De code zag er goed uit. De tests slaagden. Maar op mijn telefoon verdween de data gewoon.
...
Vandaag een korte maar leerzame sessie. Geen nieuwe features, alleen bugs opruimen. En dat bleek verrassend interessant.
De lijst Drie issues stonden open:
#44: Cafeïne statistieken tonen verkeerde data #45: Energie en habits worden niet opgeslagen #49: Statistieken werken niet goed Klinkt als een ramp. Maar de werkelijkheid was genuanceerder.
De echte bugs Issue #44 was legitiem. De app had twee formaten voor cafeïne data: een oud format (caffeineConsumed: true/false) en een nieuw format (caffeineCount: 2). De statistieken snapten alleen het oude format.
...
Mijn eigen gewoontes Elke health tracker heeft dezelfde checkboxes. Slaap. Water. Beweging. Maar mijn leven is niet standaard.
Vandaag bouwde ik custom habits.
Het probleem met standaard trackers Ik wil bijhouden of ik heb gemediteerd. Of ik piano heb gespeeld. Of ik die ene stretching routine heb gedaan.
Geen enkele tracker heeft precies die dingen. Je kunt kiezen uit hun lijstje, maar niet je eigen toevoegen.
Tot nu.
Hoe het werkt In de instellingen staat nu een nieuwe sectie: Custom Habits. Je klikt op “Nieuwe habit toevoegen”, typt een naam, kiest een emoji, klaar.
...
Vijf dingen af in één sessie Soms stroomt het gewoon. Je begint met “waar was ik gebleven?” en twee uur later heb je vijf verbeteringen doorgevoerd.
Vandaag was zo’n dag.
Hulp van een virtuele product owner Ik had een probleem: te veel ideeën, te weinig tijd. Wat moet ik eerst doen?
Normaal zou ik gewoon beginnen met wat het leukst lijkt. Maar deze keer vroeg ik het aan Tessa - mijn virtuele product owner.
...
De mens achter de prompt Na zeven sessies en een werkende app is het tijd voor een eerlijk gesprek. Want de verhalen hiervoor kunnen een verkeerd beeld geven.
Het misverstand “De AI bouwde een app in 16 uur.”
Dat is wat de cijfers zeggen. Maar het is niet het hele verhaal.
Wat ik doe (en waarom het ertoe doet) De juiste vragen stellen De AI kan alles bouwen. Maar alleen als je weet wat je moet vragen.
...
iOS polish “Het moet aanvoelen als een echte app” De app werkt. De app is live. Maar… het voelt nog als een website.
Tijd voor native feel.
Pull-to-refresh (30 min) Je kent het. Trek naar beneden, de app refresht. Zo simpel, zo verwacht op iOS.
Trek naar beneden → Refresh indicator 80px threshold voor trigger Smooth animatie overscroll-behavior voor browser compatibility Feels: Net een native app!
De code let startY = 0; let pulling = false; element.addEventListener('touchstart', (e) => { if (window.scrollY === 0) { startY = e.touches[0].pageY; pulling = true; } }); element.addEventListener('touchmove', (e) => { if (!pulling) return; const diff = e.touches[0].pageY - startY; if (diff > 80) { // Show indicator, trigger refresh } }); Simpel. Effectief. Native feel.
...
Mijn virtuele team Hoe tekstbestanden me helpen denken.
Het probleem Ik was aan het bouwen, maar ik miste iets. Niet de code - die kwam wel. Maar de richting. Wat moet ik eerst doen? Is dit goed genoeg? Mis ik iets?
Normaal zou je dit aan collega’s vragen. Een product owner. Een designer. Een tester. Maar ik werk alleen.
De oplossing: virtuele experts In mijn werkmap heb ik een verzameling “agents” - simpele tekstbestanden die Claude vertellen hoe hij moet denken. Het klinkt technisch, maar het is eigenlijk heel simpel.
...
We’re live! De kortste sessie Soms zijn de beste sessies de kortste.
Netlify setup (30 min) netlify.toml configuratie Build settings geconfigureerd Custom domain ready Auto-deploy op git push Het moment D e p l o y s u c c e s s f u l ! https://dailymo.netlify.app
Ik open de URL op mijn iPhone.
De app laadt. Smooth. Snel. De install prompt verschijnt.
...
Weet je dat gevoel wanneer je weken ergens aan werkt en het dan ineens… klikt? Vandaag was zo’n dag.
Van chaos naar structuur Ik begon deze sessie met één groot HTML-bestand van 2000+ regels. Hier schaam ik me een beetje voor, maar zo was het nu eenmaal gegroeid. Alles door elkaar: styling, logica, data.
Vier uur later? Netjes opgedeeld in ES Modules. Elk onderdeel in zijn eigen bestand. Zoals je kledingkast opruimen – je weet precies waar alles ligt.
...
Testing done 14:00 - “Waar was ik gebleven?” Na 3 dagen pauze open ik Claude Code:
“waar was ik gebleven?”
Claude herinnert zich alles. Session 3 was bezig met Issue #16 (Testing Milestone). Accessibility score was 51%.
Context switching is een non-issue met goede documentatie.
Manual testing afgerond (15 min) Screenshot script had een bug:
// Before: page.fill('#water-intake', '6') // FAIL - readonly! // After: 6× page.click('#water-add') // Works! 7 screenshots gemaakt, TC-01 t/m TC-07: ALL PASS!
...