Vibe coding для початківців: як я створив фотобудку за допомогою Claude

Я письменник, а не кодер. Мої технічні навички закінчуються на базовому HTML 1999 року.

Але я щойно створив справжній, робочий інструмент.

Я створив браузерну фотобудку для заходів MLH. Учасники можуть зробити селфі, додати брендовану рамку та зберегти її на свій телефон. Жодних магазинів додатків. Жодних акаунтів. Просто посилання.

Я використав метод під назвою vibe coding за допомогою Claude. Ось як я це зробив і чого навчився.

𝗧𝗵𝗲 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆

Я хотів щось надійне для живих заходів. Claude порадив уникнути складних фреймворків. Замість цього ми створили один файл index.html.

  • Він використовує HTML, CSS та JavaScript в одному файлі.
  • Немає етапів збірки чи інсталяцій.
  • Він безкоштовно хоститься на GitHub Pages.
  • У нього менше рухомих частин, тому його важче зламати.

𝗧𝗵𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗕𝗶𝗹𝗱

Додаток використовує HTML canvas, щоб поєднати селфі з прозорою рамкою у форматі PNG. Це відбувається повністю в браузері.

  • Фото користувача ніколи не залишає його пристрою.
  • Це автоматично захищає приватність.
  • Я додав жести, такі як pinch-to-zoom, для легкого вирівнювання фото.

Щоб керувати рамками без складного сервера, я використав Supabase.

  • Організатори завантажують рамки у storage bucket.
  • Учасники переглядають їх через публічне посилання.
  • Безпека забезпечується політиками бази даних, а не прихованими паролями.

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

Vibe coding допомагає з архітектурою, але ви повинні стежити за операційними деталями:

  • Database Sleep: Безкоштовні проєкти Supabase ставляться на паузу після періоду бездіяльності. Ви повинні «розбудити» їх перед початком заходу.
  • Canvas Tainting: Завантаження зображень з іншого джерела може зламати функцію збереження. Я виправив це за допомогою налаштувань crossOrigin.
  • Mobile UX: На телефонах я використовував нативне вікно поширення (share sheet). Це дозволяє користувачам зберігати фото безпосередньо в галерею одним натисканням.

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

Якщо ви хочете спробувати це, дотримуйтесь цих правил:

  • Обирайте проєкт із чіткими межами. Фотобудка — це зрозуміла мета. Додаток для соціальних мереж — це занадто масштабно.
  • Просіть ШІ пояснити «чому». Логіка важливіша за код.
  • Читайте diffs. Не дозволяйте ШІ змінювати ваш сайт, не переглянувши зміни спочатку.

Vibe coding не означає, що ви не розумієте свій проєкт. Це означає, що ШІ бере на себе синтаксис, тоді як ви керуєте логікою та компромісами.

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