Een leesapp voor mijn zoontje, in vier uurtjes gebouwd met AI
Intro
Mijn zoontje van vier is dol op lezen. Hij pakt boeken van de plank, vraagt wat er op straatbordjes staat en straalt als hij een woord herkent. Er zijn leesspelletjes genoeg voor zijn leeftijd — zowel apps als fysieke kaartensets, letterdozen en memoryspellen — maar ze voelen allemaal hetzelfde: een vaste woordenlijst die je niet kunt aanpassen, nauwelijks mogelijkheden om moeilijkheidsgraad of taal in te stellen, en geen terugkoppeling over wat goed gaat en wat niet. Bij apps komt daar nog een betaalscherm na drie minuten bij, en veel zijn bovendien alleen in het Engels.
Ik wilde iets wat ik zelf kon beheren. Iets wat offline werkt op zijn iPad, bijhoudt welke woorden hij al kent en geen reclame toont. En eerlijk gezegd wilde ik ook gewoon een leuk project bouwen.
Het resultaat is "Lees & Zoek!": een lees- en woordspelletje als Progressive Web App, zelfgehost in Docker, met 341 woorden, een statistieken-API en ondersteuning voor vier talen. Gebouwd in een avond van vier uurtjes, met hulp van AI.
Niet zo technisch? Klik hier voor de simpele uitleg
Dit is de korte versie in gewone taal.
1. Het probleem
Leesspelletjes voor jonge kinderen bestaan genoeg — zowel apps als fysieke kaartensets en memoryspellen. Maar ze zijn allemaal beperkt: je kunt de woordenlijst niet aanpassen, de moeilijkheidsgraad is vastgelegd en er is geen feedback over wat goed gaat en wat niet. Bij apps zie je na een paar minuten een betaalscherm. Fysieke kaartjes tonen geen voortgang, raken kwijt en geven geen terugkoppeling over welke woorden moeilijk zijn.
2. De oplossing
Ik bouwde mijn eigen leesspelletje. Een woord verschijnt groot in beeld, en mijn zoontje moet het bijpassende plaatje aantikken. Simpel, maar precies goed voor een kind dat leert lezen.
3. Hoe het werkt
De app draait op mijn thuisserver en is altijd bereikbaar op zijn iPad. Ik kan zelf woorden toevoegen, categorieën aanpassen en de moeilijkheidsgraad instellen. Er zijn statistieken: welke woorden gaan goed, waar heeft hij moeite mee?
4. Wat AI deed
Ik had de app ook zonder AI kunnen bouwen, maar het zou veel langer hebben geduurd. Met AI waren de meeste onderdelen in een paar minuten opgezet. Ik beschreef wat ik wilde, de code rolde eruit, en ik paste aan waar nodig.
5. Het resultaat
Een spelletje op maat voor mijn zoon: zijn woorden, zijn tempo, zijn taal. En ik heb volledig in de hand hoe het werkt. Oh, en opa vindt het ook leuk om zijn Frans bij de spijkeren.
TL;DR: "Lees & Zoek!" is een woord-plaatje-koppelspel voor jonge kinderen. Vanilla JS frontend, nginx, Node.js statistieken-API, 341 woorden in 30 categorieën, NL/EN/DE/FR, zes visuele thema's, Docker Compose. Gebouwd in ~4 uur met AI.
De aanleiding
Er zijn genoeg leesspelletjes voor kinderen van vier. Het probleem is niet het aanbod, het is de inflexibiliteit. Je krijgt de woordenlijst die de maker heeft gekozen, vaak Engelstalig, bijna nooit aan te passen. Wil je één specifieke categorie oefenen, of woorden toevoegen die je kind deze week op school tegenkomt? Pech. Wil je de app op vakantie zonder internet gebruiken? Soms wel, soms niet, afhankelijk van de app.
Hetzelfde geldt voor fysieke spelletjes. Kaartensets, letterdozen en memoryspellen zijn prima om mee te beginnen, maar ze kennen geen terugkoppeling. Je ziet niet welke woorden hij al goed kent en welke hij steeds opnieuw fout heeft. Een kaartje dat altijd goed gaat zit in dezelfde stapel als een kaartje waar hij elke keer op vastloopt. En als hij eenmaal door de set heen is, is het klaar, tenzij je een nieuwe set koopt.
Bovendien loopt mijn zoontje al tegen de limieten van standaard spelletjes aan. Hij is vier en vraagt al naar langere woorden. Apps en fysieke sets houden daar vaak geen rekening mee.
Op een avond dacht ik: dit is gewoon een frontend-app met een woordenlijst en wat spellogica. Ik kan dit zelf bouwen, en dan heb ik precies wat ik wil. Een half uur later had ik een werkend prototype. Nog 4 uur later was het af.
Wat doet de app?
De spelflow is bewust simpel gehouden. Een woord verschijnt groot in beeld, duidelijk leesbaar, in een van de vijf beschikbare lettertypes die ontworpen zijn voor beginnende lezers. Daaronder een raster van plaatjes (emoji's). De speler tikt het plaatje dat bij het woord hoort.
Goed geantwoord? Confetti, een vrolijk geluidje en automatisch door naar het volgende woord. Fout? Het kaartje schudt even, en je mag het opnieuw proberen. Geen straf, geen tijdsdruk, gewoon rustig oefenen.
Instellingen voor ouders
Achter een eenvoudige oudersvergrendeling zit een instellingenpaneel.
Daar kun je de taal kiezen (Nederlands, Engels, Duits of Frans), een visueel thema instellen, de woordlengte filteren en kiezen of statistieken zichtbaar zijn. De moeilijkheidsgraad loopt van makkelijk (1–4 letters) tot moeilijk (8+ letters), met de mogelijkheid om alles door elkaar te spelen.
Lettertypes zijn een bewuste keuze: Andika en Lexend zijn specifiek ontwikkeld om lezen voor beginners te vergemakkelijken.
Statistieken
De app houdt per woord bij hoe vaak het goed en fout beantwoord is, of het in één keer goed was, hoe snel er gereageerd werd en met welk ander woord het soms verward wordt. Die data is inzichtelijk via een rapportpaneel, met filters op categorie, moeilijkheid en tijdsperiode. Er is ook een CSV-export voor als ik de data elders zou willen analyseren. Dat is een stukje beroepsdeformatie. Als analist wil je in ieder geval de data hebben. Ookal doe je er nooit iets mee.
De architectuur
De app bestaat uit twee containers die via Docker Compose samenwerken.
Frontend: nginx + vanilla JS
De spelinterface is een statische HTML/CSS/JS-app geserveerd door nginx. Geen framework, geen bundler, geen build-stap. Ik koos bewust voor vanilla JS: de app is klein genoeg om het niet nodig te hebben, en het scheelt enorm in complexiteit bij zelfhosting.
De app is ook een Progressive Web App (PWA): via een manifest.json en een service worker is hij installeerbaar op iOS en Android. Mijn zoontje opent hem als een echte app vanaf het startscherm van zijn iPad, zonder browser-adresbalk.
Backend: Node.js statistieken-API
Een lichte Express-server slaat speldata op als JSON op schijf. Elke spelbeurt wordt als event weggeschreven met tijdstempel, apparaat-ID, sessie-ID, het doelwoord, het aangeklikte woord, de responstijd en of het op de eerste poging goed was. De API bouwt daar een rapport van op: per woord, per categorie, per dag.
Er is geen database. Een JSON-bestand op de NFS-mount van mijn NAS is voor dit gebruik meer dan voldoende, en het maakt backup en herstel triviaal.
Docker Compose
Twee containers, een gedeeld netwerk, één commando om te starten. De woordenlijst en speldata worden als volumes gemount vanuit de NAS. De app is bereikbaar op leesmemory.lan via Nginx Proxy Manager.
De woordenlijst
De app bevat 341 woorden, verdeeld over 30 categorieën. Van dier-boerderij tot voertuig-lucht, van fruit tot heelal. Elk woord heeft een emoji als afbeelding: geen copyright-gedoe, altijd herkenbaar.
Elk woord heeft vertalingen in vier talen, wat de meertaligheidsondersteuning eenvoudig maakt: dezelfde woordenlijst, andere taal in de instellingen, en de app werkt direct in het Nederlands, Engels, Duits of Frans.
De woordenlijst is een gewoon JSON-bestand dat ik zelf kan aanpassen. Er zijn ook CLI-tools meegeleverd om woorden in bulk toe te voegen of de store te migreren bij structuurwijzigingen.
En misschien nog wel het allerleukste, deze hele lijst is ook samengesteld door een LLM. Ik heb een paar foutjes moeten herstellen, maar dat was minimaal werk.
De rol van AI: eerlijk verhaal
Ik had dit project ook zonder AI kunnen bouwen. Ik ken JavaScript, ik ken Docker, ik weet hoe een app eruitziet. Maar het had veel langer geduurd, waarschijnlijk een week aan lange avonden in plaats van één avondje.
Wat AI goed deed
- Structuur neerzetten. De basisarchitectuur van frontend + API + Docker Compose was in een paar minuten opgezet. Ik beschreef wat ik wilde, de scaffolding rolde eruit.
- Specifieke onderdelen uitwerken. De statistieken-API is het meest complexe onderdeel: event-opslag, aggregatie per woord en categorie, dagelijkse overzichten, CSV-export. Dat had ik handmatig veel langer bezig gehouden. Nu beschreef ik het datamodel en kreeg ik werkende code terug.
- Edge cases afhandelen. PWA-installatie op iOS heeft zijn eigenaardigheden. De service worker cache-strategie voor offline gebruik ook. AI liep die gevallen langs zonder dat ik ze zelf allemaal hoefde te bedenken.
- Snel itereren. "Ik wil ook confetti als er een vraag goed is beantwoord" en tien seconden later had ik de code. Dat soort kleine toevoegingen gaan zo snel dat je veel meer durft te proberen.
Wat AI niet deed
- Het idee bedenken. Het probleem met bestaande leesspelletjes heb ik zelf geconstateerd, de oplossing ook.
- De keuzes maken. Welke lettertypes, welke categorieën, welke moeilijkheidsindeling: dat zijn pedagogische en ontwerpkeuzes die ik zelf heb gemaakt.
- Foutloos werken. De eerste versie van de PWA-service worker cachete te agressief, waardoor updates niet doorkwamen. Dat kostte een debugsessie, maar was snel opgelost nadat ik het probleem was geïdentificeerd.
In vier uur bouwen wat anders een weekend had gekost betekent dat je het gewoon doet in plaats van het half-afgemaakt in een notitie te laten staan.
Resultaat
Mijn zoontje speelt het veel. Hij vraagt er zelf om. Hij vindt het Feest-thema het mooist, de regenboogversie met overdreven confetti bij elk goed antwoord.
Op een avond zaten Liese, Tim en ik te gokken wanneer hij woorden van acht letters of meer zou kunnen lezen. Tim zei dat hij dat al wel kon. Ik dacht dat dat nog wel een poosje zou duren. We openden de app. Papegaai: gelijk goed. Saxofoon: moeiteloos.
Ik had het mis.
Vragen / feedback
Als je vragen hebt over de aanpak, de stack of een specifiek onderdeel, stel ze dan via mijn contactformulier en ik neem contact met je op.