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

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.

Vibe Coding dành cho người mới bắt đầu: Cách tôi xây dựng một ứng dụng web photo booth hoạt động được với Claude

Lập trình từng là về cú pháp. Đó là về việc bạn biết đặt dấu chấm phẩy ở đâu, cách khai báo biến, và cách quản lý các cấu trúc dữ liệu phức tạp. Nhưng gần đây, một phương pháp mới đã xuất hiện, và nó không giống với bất kỳ thứ gì tôi từng biết: Vibe Coding.

Vibe Coding là gì?

Vibe coding không phải là về việc bạn thuộc lòng mọi thư viện hay cú pháp ngôn ngữ. Thay vào đó, nó là về việc bạn truyền đạt "vibe" (ý tưởng, cảm giác và mục tiêu) của ứng dụng bạn muốn xây dựng cho một mô hình ngôn ngữ lớn (LLM) như Claude.

Thay vì viết từng dòng mã, bạn đóng vai trò là một người điều phối, mô tả tầm nhìn của mình và để AI thực hiện phần kỹ thuật nặng nhọc. Bạn không còn là một người thợ xây đang đặt từng viên gạch; bạn là một kiến trúc sư đang mô tả bản thiết kế.

Dự án của tôi: Một ứng dụng Web Photo Booth

Để thử nghiệm khái niệm này, tôi đã quyết định xây dựng một ứng dụng web photo booth đơn giản. Mục tiêu là tạo ra một trang web cho phép người dùng:

1. Truy cập webcam của họ.
2. Chụp một bức ảnh.
3. Áp dụng các bộ lọc màu thú vị.
4. Tải ảnh xuống.

Và quan trọng nhất: Tôi muốn làm điều này mà không cần viết một dòng code thủ công nào.

Quy trình thực hiện

1. Prompt ban đầu (The Initial Prompt)

Tôi bắt đầu bằng cách mở Claude và đưa ra một prompt mô tả ý tưởng tổng thể. Tôi không cố gắng giải thích cách hoạt động của API webcam; tôi chỉ mô tả những gì tôi muốn thấy.

"Tôi muốn xây dựng một ứng dụng web photo booth đơn giản bằng HTML, CSS và JavaScript. Ứng dụng cần có thể truy cập webcam, có một nút để chụp ảnh, và sau khi chụp, người dùng có thể chọn giữa các bộ lọc màu khác nhau (như đen trắng hoặc sepia). Hãy làm cho giao diện trông thật hiện đại và thân thiện với người dùng."

Claude ngay lập tức tạo ra một khối mã hoàn chỉnh. Tôi sao chép nó vào một tệp HTML và mở trên trình duyệt. Nó hoạt động! Tôi có thể thấy mình trong webcam, nhấn nút, và ảnh hiện ra với bộ lọc.

2. Kiểm tra "Vibe" (The Vibe Check)

Mặc dù ứng dụng hoạt động, nhưng "vibe" của nó chưa đúng. Nó trông quá... cơ bản. Nó giống như một bài tập về nhà của sinh viên năm nhất hơn là một ứng dụng thực thụ. Nó thiếu đi sự thú vị, sự lôi cuốn mà một buồng chụp ảnh cần có.

Đây là lúc Vibe Coding thực sự phát huy tác dụng. Thay vì tự mình đi tìm các thuộc tính CSS để thay đổi màu sắc hay bo góc, tôi chỉ cần nói với Claude về cảm giác tôi muốn.

3. Lặp lại và tinh chỉnh (Iteration)

Tôi tiếp tục đưa ra các prompt để tinh chỉnh "vibe" của ứng dụng:

• Prompt 1: "Nó hoạt động tốt, nhưng hãy làm cho giao diện trông giống như một ứng dụng thập niên 90. Thêm hiệu ứng nhiễu (noise) vào ảnh, sử dụng font chữ pixel và làm cho các nút bấm trông có vẻ 'retro' hơn."
• Prompt 2: "Hãy thêm một hiệu ứng chuyển cảnh mượt mà khi bộ lọc được áp dụng. Và làm cho khung hình webcam có một chút hiệu ứng đổ bóng để trông có chiều sâu hơn."

Mỗi lần tôi gửi prompt, Claude lại cập nhật mã nguồn. Tôi không cần hiểu cách tạo hiệu ứng nhiễu bằng CSS hay cách xử lý chuyển cảnh phức tạp; tôi chỉ cần biết mình muốn nó trông như thế nào.

Kết luận: Rào cản đã bị phá bỏ

Vibe coding đang thay đổi cuộc chơi. Nó hạ thấp rào cản gia nhập thế giới lập trình một cách đáng kinh ngạc. Giờ đây, khả năng xây dựng phần mềm không còn bị giới hạn bởi việc bạn có nhớ cú pháp hay không, mà bởi khả năng bạn có thể mô tả ý tưởng của mình một cách rõ ràng và sáng tạo đến mức nào.

Nếu bạn có một ý tưởng, bạn đã có thể bắt đầu xây dựng nó ngay lập tức. Bạn không cần phải là một kỹ sư phần mềm; bạn chỉ cần có một "vibe" tốt và một người bạn đồng hành AI mạnh mẽ.