𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀: 𝗛𝗼𝘄 𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗣𝗵𝗼𝘁𝗼 𝗕𝗼𝗼𝘁𝗵 𝗪𝗲𝗯 𝗔𝗽𝗽
I am a writer, not a coder. My technical skills stopped at basic HTML in 1999.
Last week, I built my first real tool. I used Claude to "vibe code" a working photo booth web app for MLH.
Here is how a non-coder built a functional app for live events.
𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 MLH runs many events. We needed a browser-based photo booth.
- Attendees open a link on their phones.
- They snap a selfie or upload a photo.
- They add a branded frame.
- They save the photo to their camera roll.
- No accounts. No app stores. Just a link.
𝗧𝗵𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆 I wanted to use a complex framework. Claude talked me out of it.
For live events, fewer moving parts win. I built the entire tool in one single index.html file. It uses HTML, CSS, and JavaScript. There is no complex build step. It stays on GitHub Pages for free.
𝗧𝗵𝗲 𝗣𝗿𝗶𝘃𝗮𝗰𝘆 𝗕𝗼𝗻𝘂𝘀 I used an HTML canvas to combine the photo and the frame. All processing happens in the user browser. The photo never uploads to a server. This makes it private and secure for attendees.
𝗧𝗵𝗲 𝗕𝗮𝗰𝗸𝗲𝗻𝗱 𝗠𝗮𝗴𝗶𝗰 A static site can still have a backend. I used Supabase for storage.
- Organizers upload frames to a Supabase bucket.
- Attendees view those frames through the site.
- Security lives in database policies, not hidden passwords.
𝗧𝗵𝗲 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗚𝗼𝘁𝗰𝗵𝗮𝘀 Vibe coding helps with architecture, but you must watch for operational details:
- Databases sleep. I learned to wake up my Supabase project the day before an event.
- Image security. I had to add a specific line of code to allow the canvas to use remote images.
- User experience. On phones, a "download" is hard to find. I changed the code to use the native mobile share sheet. This sends the photo straight to the camera roll.
𝗠𝘆 𝗟𝗲𝘀𝘀𝗼𝗻𝘀 𝗳𝗼𝗿 𝗬𝗼𝘂
- Pick a project with hard boundaries. A photo booth is a finish line. A social app is not.
- Ask the AI "why." The reasoning is more important than the code.
- Read the diffs. Do not let the AI change your site without your review.
- Own the decisions. The AI handles syntax, but you handle the constraints.
Vibe coding is not about skipping the work. It is about focusing on the right problems.