𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝘃𝗼𝗼𝗿 𝗯𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀: 𝗛𝗼𝗲 𝗶𝗸 𝗲𝗲𝗻 𝗽𝗵𝗼𝘁𝗼 𝗯𝗼𝗼𝘁𝗵 𝘄𝗲𝗯-𝗮𝗽𝗽 𝗵𝗲𝗯 𝗴𝗲𝗯𝗼𝘂𝘄𝗱
Ik ben een schrijver, geen programmeur. Mijn technische vaardigheden stopten bij basis HTML in 1999.
Vorige week heb ik mijn eerste echte tool gebouwd. Ik heb Claude gebruikt om via "vibe coding" een werkende photo booth web-app te maken voor MLH.
Hier lees je hoe een niet-programmeur een functionele app bouwde voor live-evenementen.
𝗛𝗲𝘁 𝗣𝗿𝗼𝗯𝗹𝗲𝗲𝗺 MLH organiseert veel evenementen. We hadden een browsergebaseerde photo booth nodig.
- Deelnemers openen een link op hun telefoon.
- Ze maken een selfie of uploaden een foto.
- Ze voegen een frame met branding toe.
- Ze slaan de foto op in hun camera roll.
- Geen accounts. Geen app stores. Alleen een link.
𝗗𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹𝗲 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝗶𝗲 Ik wilde een complex framework gebruiken. Claude heeft me ervan afgehouden.
Bij live-evenementen win je met minder bewegende delen. Ik heb de hele tool gebouwd in één enkel index.html-bestand. Het maakt gebruik van HTML, CSS en JavaScript. Er is geen complexe build-stap. Het staat gratis op GitHub Pages.
𝗗𝗲 𝗣𝗿𝗶𝘃𝗮𝗰𝘆-𝗯𝗼𝗻𝘂𝘀 Ik heb een HTML canvas gebruikt om de foto en het frame te combineren. Alle verwerking vindt plaats in de browser van de gebruiker. De foto wordt nooit naar een server geüpload. Dit maakt het privé en veilig voor de deelnemers.
𝗗𝗲 𝗕𝗮𝗰𝗸𝗲𝗻𝗱-𝗺𝗮𝗴𝗶𝗲 Een statische site kan nog steeds een backend hebben. Ik heb Supabase gebruikt voor de opslag.
- Organisatoren uploaden frames naar een Supabase bucket.
- Deelnemers bekijken die frames via de site.
- Beveiliging zit in database policies, niet in verborgen wachtwoorden.
𝗗𝗲 𝗩𝗮𝗹𝗸𝘂𝗶𝗹𝗲𝗻 𝘃𝗼𝗼𝗿 𝗯𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀 Vibe coding helpt bij de architectuur, maar je moet letten op de operationele details:
- Databases gaan in slaapstand. Ik heb geleerd om mijn Supabase-project de dag voor een evenement te "wekken".
- Beveiliging van afbeeldingen. Ik moest een specifieke regel code toevoegen om het canvas toestemming te geven om remote afbeeldingen te gebruiken.
- Gebruikerservaring. Op telefoons is een "download" lastig te vinden. Ik heb de code aangepast om het native mobiele deelmenu (share sheet) te gebruiken. Dit stuurt de foto rechtstreeks naar de camera roll.
𝗠𝗶𝗷𝗻 𝗹𝗲𝘀𝘀𝗲𝗻 𝘃𝗼𝗼𝗿 𝗷𝗼𝘂
- Kies een project met duidelijke grenzen. Een photo booth heeft een duidelijk eindpunt. Een sociale app niet.
- Vraag de AI "waarom". De redenering is belangrijker dan de code.
- Lees de diffs. Laat de AI je site niet aanpassen zonder jouw controle.
- Neem de beslissingen. De AI regelt de syntaxis, maar jij beheert de randvoorwaarden.
Vibe coding gaat niet over het overslaan van het werk. Het gaat over het focussen op de juiste problemen.