Vibe Coding для початківців: як я створив веб застосунок для фотобудки
Я письменник, а не кодер. Мої технічні навички зупинилися на базовому HTML ще у 1999 році.
Минулого тижня я створив свій перший справжній інструмент. Я використав Claude, щоб «vibe code» робочий веб застосунок для фотобудки для MLH.
Ось як людина, яка не вміє кодити, створила функціональний застосунок для живих заходів.
Проблема MLH проводить багато заходів. Нам потрібна була фотобудка, що працює в браузері.
- Учасники відкривають посилання на своїх телефонах.
- Вони роблять селфі або завантажують фото.
- Вони додають брендовану рамку.
- Вони зберігають фото в галерею.
- Жодних акаунтів. Жодних магазинів застосунків. Просто посилання.
Технічна стратегія Я хотів використовувати складний фреймворк. Claude відмовив мене від цієї ідеї.
Для живих заходів краще менше складних елементів. Я створив увесь інструмент в одному єдиному файлі index.html. Він використовує HTML, CSS та JavaScript. Тут немає складного етапу збірки. Він безкоштовно розміщується на GitHub Pages.
Бонус приватності Я використав HTML canvas, щоб поєднати фото та рамку. Уся обробка відбувається в браузері користувача. Фото ніколи не завантажується на сервер. Це робить процес приватним і безпечним для учасників.
Магія бекенду Статичний сайт все одно може мати бекенд. Для зберігання я використав Supabase.
- Організатори завантажують рамки в Supabase bucket.
- Учасники переглядають ці рамки через сайт.
- Безпека забезпечується політиками бази даних, а не прихованими паролями.
Підводні камені для початківців Vibe coding допомагає з архітектурою, але потрібно стежити за операційними деталями:
- Бази даних «сплять». Я навчився «пробуджувати» свій проєкт Supabase за день до заходу.
- Безпека зображень. Мені довелося додати специфічний рядок коду, щоб дозволити canvas використовувати віддалені зображення.
- Користувацький досвід. На телефонах кнопку «завантажити» важко знайти. Я змінив код, щоб використовувати нативне мобільне меню «поділитися» (share sheet). Це відправляє фото прямо в галерею.
Мої поради вам
- Обирайте проєкт із чіткими межами. Фотобудка має чіткий фініш. Соціальний застосунок — ні.
- Запитуйте ШІ «чому». Логіка важливіша за код.
- Переглядайте diffs. Не дозволяйте ШІ змінювати ваш сайт без вашого контролю.
- Приймайте рішення самостійно. ШІ займається синтаксисом, але ви керуєте обмеженнями.
Vibe coding — це не про те, щоб уникнути роботи. Це про те, щоб зосередитися на правильних проблемах.