Het project van de week: bouw je eigen webapp in 18 minuten
Vandaag gaan we niet alleen ‘vertellen’. We bouwen deze week een eigen Single Use Software: een simpele, interactieve webapp waarin je grafieken ziet, kunt klikken, wisselen naar dark mode, en data kan exporteren als CSV of PDF.
Het onderwerp: je eigen mailbox omzetten in inzichten waar je iets mee kunt.
Opgelet: deze oefening is voor sommigen misschien piece-of-vlaai, maar ik heb gezocht naar een instapniveau dat voor iedereen toegankelijk en leerzaam is.
Stap 1: Maak screenshots van je inbox
Scroll door je inbox en maak screenshots van de eerste 3 tot 6 schermen. Mik op 50 à 100 mails in totaal, verspreid over de voorbije dagen. Geen export, geen CSV, geen gekloot met permissions, gewoon screenshots maken.
Stap 2: Bouw je webapp met één prompt
Open Claude, sleep al je screenshots erin en plak deze prompt:
Ik upload screenshots van mijn inbox (ongeveer 50 tot 100 mails). Bouw daaruit een volwaardige, interactieve web-app als één zelfstandig HTML-bestand — geen statisch dashboard.
Extractie: lees alle mails uit de screenshots en zet ze in een JSON-datastructuur. Per mail: datum, tijd (zo precies als zichtbaar), afzender, onderwerp, thread-lengte (als er een aantal zichtbaar is), of er een bijlage is, en een categorie uit {Actie, Administratie, Pingpong, Afleiding}.
Categorisatie:
Actie: mails waarop ik effectief moest reageren (leads, vragen van het team, to respond). Administratie: facturen, bevestigingen, receipts, inschrijvingen, systeem-notificaties. Pingpong: heen-en-weer met collega's over planning, vergaderingen, interne coördinatie. Afleiding: nieuwsbrieven, marketing, productupdates, netwerk-notificaties.
Bouw hiermee een web-app met vier schakelbare views via tabs bovenaan:
Dashboard: 5 stats-kaarten (totaal mails, pure afleiding, automatiseerbaar, echte actie, pingpong) + 3 grafieken + opvallend-sectie. Lijst: alle mails, sorteerbaar per kolom, met zoekbalk en categoriefilter. Tijdlijn: mails chronologisch gegroepeerd per uur van de dag. Automatisering: 3 focuskaarten met de types mails die mijn volume opblazen zonder mijn brein te vragen — per type een telling, een concrete automatiserings-suggestie en 5 voorbeelden uit mijn eigen data.
De 3 grafieken op het dashboard moeten wisselbare types hebben via kleine knopjes:
Categorie-verdeling: staaf, donut of polair. Top 10 afzenders: staaf of donut. * Mails per uur: staaf of lijn.
Interactiviteit:
Klik op een grafiek-element om automatisch naar de Lijst-view te springen, gefilterd op die categorie of afzender. Zoekbalk die filtert op onderwerp en afzender. Sorteerbare kolommen in de lijst (klik kolomhoofd). Klik op een categorielabel in de lijst om die mail te hercategoriseren via een klein menu. Wijzigingen bewaren in localStorage zodat ze niet verloren gaan bij refresh. Dark mode toggle rechtsboven, ook onthouden via localStorage. Filter-state in de URL (hash-params), zodat ik een bepaalde view kan bookmarken of delen via een link.
Export-knoppen rechtsboven:
CSV-export van de volledige dataset (inclusief mijn hercategorisaties). PDF-export via browser-print, met een print-stylesheet die de header, knoppen en filters verbergt en alle views onder elkaar toont.
Opvallend-sectie op het dashboard: langste thread, top 2 types voor automatisering, drukste uur, nachtmails (tussen 22u en 6u), mails met bijlagen.
Styling: modern, clean, responsive (werkt op mobiel én desktop). Duidelijke kleuren per categorie, consistent door de hele app. Strak lettertype. Dashboard dat niet misstaat in een directiekamer. Light én dark mode met CSS-variabelen.
Gebruik Chart.js voor de grafieken. Eindresultaat: één downloadbaar HTML-bestand dat volledig zelfstandig werkt in de browser, zonder backend, zonder installatie.Claude leest je mails uit de screenshots, categoriseert ze en bouwt de webapp als interactief artifact.
Normaliter zou je ongeveer met iets als dit moeten eindigen. Is dat gelukt?
Tip: download het HTML-bestand en open het in je browser voor de volledige ervaring.
Waarom deze oefening
Wat we net samen gebouwd hebben, is eigenlijk de bouwtekening van elk goed AI-project, in drie stappen:
Data verzamelen: je screenshots.
Die data inzichtelijk maken: het dashboard, de grafieken, de categorieën.
Pas daarna nadenken over automatisering: de Automatisering-tab, met concrete acties op basis van wat de data zegt.
De meesten beginnen meteen bij stap 3. Ze kopen een tool, nog vóór ze weten wat ze willen automatiseren. Met als gevolg: een dure oplossing voor een onzichtbaar probleem, en geen manier om te meten of het iets oplevert.
Door eerst je data te verzamelen en te visualiseren, zie je welke patronen je tijd écht opslokken. Pas dan weet je waar automatiseren de moeite loont, en waar het je alleen maar afleidt van je echte werk. Het dashboard is geen eindproduct; het is je kompas. En ondertussen heb je ontdekt dat wat vroeger een developer-opdracht was, nu een prompt van vijf minuten is geworden.
Welke data ga jij als volgende project inzichtelijk maken? Je agenda van de afgelopen maand? Je uitgaven van het kwartaal? De tickets die binnenkomen bij support? Je social-media-reacties? Kies er één, verzamel screenshots of exports, en start de cyclus opnieuw.
Hulp nodig bij het integreren van AI in je marketing en bedrijf? Stuur me een mailtje op [email protected].
Interessante nieuwsitems van afgelopen week
Discord-groep kraakt Anthropic's geheimste AI: Anthropic bouwde een AI die ze té gevaarlijk vonden voor publiek gebruik. Op de dag van de beperkte release hadden hobbyisten 'm al binnen — ze raadden de juiste webadressen. Niet China of Rusland dus, maar een Discord-chat. Bron: TheNextWeb
ChatGPT verhuist naar je Slack: OpenAI lanceerde agents die taken met meerdere stappen zelfstandig afwerken, direct in Slack, Google Drive of Salesforce. Je vraagt er 's avonds iets aan, 's morgens is het klaar. De opvolger van de custom GPTs, maar dan voor teams. Bron: VentureBeat
OpenAI's nieuwe beeld-AI loopt voorop: ChatGPT Images 2.0 denkt eerst na en kan het web doorzoeken voor het iets tekent. Het staat met dikke voorsprong bovenaan alle internationale ranglijsten. Sam Altman noemt het een sprong zoals van GPT-3 naar GPT-5, maar dan voor beeld. Bron: TechCrunch
Meta filmt je werkdag: Meta installeert software op de laptops van 8.000 Amerikaanse medewerkers om al hun klikken, toetsen en screenshots op te nemen - om er een AI-assistent mee te trainen. Uitschakelen kan niet, en het gebeurt net voor een grote ontslagronde op 20 mei. Bron: Fortune
Over de auteur
Hallo, ik ben Wouter, zaakvoerder van marketingbureau Yungo. Elke dag dompel ik me onder in de wereld van artificiële intelligentie. Met een diploma “Artificial Intelligence Programme” aan de online Universiteit van Oxford op zak, besteed ik dagelijks uren aan onderzoek en experimenten met AI. Benieuwd wat ik voor jou kan betekenen? Stuur me gerust een mailtje!
