𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀: 𝗛𝗼𝘄 𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗣𝗵𝗼𝘁𝗼 𝗕𝗼𝗼𝘁𝗵 𝘄𝗶𝘁𝗵 𝗖𝗹𝗮𝘂𝗱𝗲

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.

𝗧𝗵𝗲 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆

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 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.

𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗚𝗼𝘁𝗰𝗵𝗮𝘀

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.

𝗠𝘆 𝗔𝗱𝘃𝗶𝗰𝗲 𝗳𝗼𝗿 𝗬𝗼𝘂

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.

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

اختیاری سیکھنے کی کمیونٹی: https://t.me/GyaanSetuAi