Als afscheid bij bol leek het me leuk om terug te kijken op de afgelopen 5 jaar waarin ik er gewerkt heb. Ik had een boel leuke foto’s gemaakt met diverse collega’s de afgelopen jaren en wilde deze graag tonen op een ludieke en passende manier.

Een slideshow was een optie, makkelijk maar ook saai, langzaam en niet interactief. Nee, ik wilde iets dat bij me past en terug komt op mijn goodbye speech én mijn huidige enthousiasme voor nieuwe AI-mogelijkheden zoals vibe-coding kracht kon bijzetten. Ik koos om zelf een online versie van een “where’s Waldo” puzzel te maken, maar dan met mijn eigen foto’s van de afgelopen 5 jaar!

Het project startte ik met Claude Sonnet 3.7 waarbij ik met deze prompt:

Ik wil graag een website maken die heet “where’s wally” het idee is om een groot aantal foto’s te gebruiken die online beschikbaar zijn (de gebruiker heeft ze dus al gedeeld online). Deze foto’s moeten allemaal genummerd worden en rechtsonder in de foto getoond worden. Alle foto’s moeten in het zichtveld van de website getoond worden. Helemaal rechts boven moet er een QR code staan die een speljoiner can scannen om vervolgens een nummer door te geven waar deze persoon denkt waar Wally zich verstopt heeft. De foto zal daarmee flink vergroot worden (tot de helft van het scherm). Elke QR scan joiner mag maar 1 keer raden. De foto met Wally, moet de naam wally hebben waar de spelmaker zelf dit erin zet heeft.

Help mij met dit spel verder uitspecificeren zodat ik het makkelijk kan bouwen met lovable. Ik kan een map met foto’s deze vanuit min icloud, die zal ik bij het aanmaken van een spel moeten doorgeven.

Daarna volgde er nog meer iteraties omdat ik dit simpele maar toch leuke idee ook nog wel op andere plekken zou kunnen toepassen waarbij je foto’s wil tonen op een grootscherm en mensen wil laten interacteren en zoeken naar een bepaald onderdeel.

Zie hier mijn interactie met Claude.ai en het resultaat: https://claude.ai/share/895653ac-d9cf-4074-9c69-f6bbe621c7a1

Vervolgens gebruikte ik de markdown van Claude in Lovable.app om er een werkend geheel van te maken. Het lukte mij overigens niet om tijdens het vibe-coding zonder database deze web app op te zetten en duidelijk te maken via prompts dat we bij het nummeren van afbeeldingen enkel het client-memory nodig hadden en vervolgens op basis daarvan een statische JS te genereren waarbij het “geheime” waldo nummer meegegeven wordt aan de de speler en bij juist raden er een leuke verrassing getoond wordt.

Om mijn doel toch te bereiken koos ik ervoor om een Supabase database aan te maken en Lovable zijn magie te laten uitvoeren d.m.v. een database, maar zonder het opslaan van afbeeldingen want daar zit vaak PII bij en daar wil ik voor een project als dit weg blijven.

Het uiteindelijke resultaat kun je hier bekijken en spelen: https://waldo.dev.bellefroid.nl