Vibe Coding for Beginners: How I Built a Photo Booth with Claude

I am a writer, not a coder. My technical skills end at basic HTML from 1999.

But I just built a real, working tool.

I built a browser-based photo booth for MLH events. Attendees can snap a selfie, add a branded frame, and save it to their phones. No app store. No accounts. Just a link.

I used a method called vibe coding with Claude. Here is how I did it and what I learned.

The Strategy

I wanted something reliable for live events. Claude advised against complex frameworks. Instead, we built a single index.html file.

  • It uses HTML, CSS, and JavaScript in one file.
  • There are no build steps or installations.
  • It hosts for free on GitHub Pages.
  • It has fewer moving parts, so it is harder to break.

The Technical Bild

The app uses an HTML canvas to combine a selfie with a transparent PNG frame. This happens entirely in the browser.

  • The user's photo never leaves their device.
  • This protects privacy automatically.
  • I added gestures like pinch-to-zoom for easy photo alignment.

To manage frames without a complex server, I used Supabase.

  • Organizers upload frames to a storage bucket.
  • Attendees view them through a public link.
  • Security is handled by database policies, not hidden passwords.

Beginner Gotchas

Vibe coding helps with architecture, but you must watch for operational details:

  • Database Sleep: Free Supabase projects pause after inactivity. You must wake them up before an event.
  • Canvas Tainting: Loading images from a different source can break the save function. I fixed this using crossOrigin settings.
  • Mobile UX: On phones, I used the native share sheet. This lets users save photos directly to their camera roll in one tap.

My Advice for You

If you want to try this, follow these rules:

  • Pick a project with hard boundaries. A photo booth is a clear goal. A social media app is too big.
  • Ask the AI to explain the "why." The reasoning is more important than the code.
  • Read the diffs. Do not let AI change your site without you reviewing the changes first.

Vibe coding does not mean you do not understand your project. It means the AI handles the syntax while you handle the logic and the tradeoffs.

Source: https://dev.to/mlh/vibe-coding-for-beginners-how-i-built-a-working-photo-booth-web-app-with-claude-8ib

Optional learning community: https://t.me/GyaanSetuAi