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.
Live app: daily.modub.nl
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. ...
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! ...
21:00 - “Het mag wel mooier” Ik kijk naar mijn app. Het werkt. Maar… het is niet mooi genoeg. Ik had referentie screenshots verzameld (Fastic, HealthTrack UI Kit, etc.) en zei tegen Claude: “Kijk naar deze voorbeelden en kom met een nieuw ontwerp.” Complete design overhaul (1 uur) UI Specialist ging los: Quick stats 2×2 grid met circular progress Water intake visualisatie: 8 druppel iconen die oplichten! 💧 Alcohol selector: grotere pills Health score: compacter, minder dominant Gradient accenten: terracotta & sage green (premium look!) Grotere headings, meer breathing room Result: App ziet er nu uit als een €10/maand premium product. En het is gratis! ...
12:10 - “Ok laten we starten!” Sessie 2. Tijd om écht te bouwen. In de volgende 50 minuten bouwde Claude: Complete MVP implementatie (35 min) Frontend Developer maakte: storage.js (250+ lines) - localStorage management, export, sanitization healthScore.js (200+ lines) - 0-100% score algoritme met gewogen metrics app.js (350+ lines) - Main application logic, events, UI updates main.css (700+ lines) - Fastic-inspired mobile-first design Totaal: ~1,500 lines in 35 minuten. WTF. ...
“Ik kan dat toch niet?” Als je dit leest, heb je waarschijnlijk wel eens gedacht: “Ik wil graag [app/website/tool] maken, maar ik kan niet programmeren.” Ik ook. Totdat ik het gewoon deed. Het idee Ik wilde mijn dagelijkse gezondheid bijhouden. Slaap, water, beweging, pijn… je kent het wel. Er zijn apps voor, maar: Ze sturen mijn data naar de cloud (privacy? Bye bye!) Ze zijn bloated met features die ik niet nodig heb Ze kosten €10/maand voor basic functionaliteit Dus dacht ik: “Fuck it, ik bouw het zelf.” ...