Сайт до дня народження з анонімним wishlist
До свого дня народження я створила сайт для друзів із програмою святкування та wishlist-ом, де подарунки можна анонімно забронювати.
- Моя роль
- Product Designer · Design Engineer
- Тривалість
- 4 дні · ~20 годин чистої роботи
- Стек
- Next.js · Supabase · Vercel · Figma · Claude Code
- Онлайн
- sweet27.vercel.app
Огляд
Я поставила собі задачу, спроєктувала рішення і сама його випустила. Чотири дні від ідеї до живої адреси, наодинці і з дизайном, і з кодом.
Проблема
Усе про святкування жило в переписках і перенабиралося наново для кожного, хто питав наступним. Не було єдиної версії, яку можна перевірити.
У wishlist була ще одна проблема: він працює тільки тоді, коли гості бачать, що вже зайняте, і при цьому не мусять називати себе.
Що з цього вийшло
- Чотири робочі дні дали продукт, яким друзі справді користувалися — і поки готувались, і в самі дні.
- Row-level security у базі, живе оновлення статусу подарунків і обмеження частоти запитів проти спаму.
- AI-native процес: спроєктовано і зібрано в Claude Code, задеплоєно з тієї ж сесії.
Джерело: Vercel Web Analytics + Microsoft Clarity, 51 відвідувач за 52 сесії Clarity
Забронювати подарунок без акаунта
Wishlist потребував двох речей, які зазвичай тягнуть у різні боки: усі мають бачити, що вже заброньовано, і ніхто не має реєструватися чи віддавати особисті дані, щоб забронювати.
Тому на сайті немає акаунтів узагалі. Кожен відвідувач упізнається лише за токеном, який згенеровано і збережено на його ж пристрої. База зберігає, який подарунок зайнято і який анонімний токен його зайняв, але не те, хто ця людина. Row-level security тримає це правило на рівні бази, а не інтерфейсу, тож воно діє незалежно від того, що попросить клієнт.
Вийшло бронювання в один клік, статус якого оновлюється наживо для всіх інших на сторінці, а той, хто дарує, лишається анонімним — зокрема й для мене.
Процес
Чотири дні, близько 20 годин роботи.
Каркас на Next.js, бекенд на Supabase, перший вайрфрейм.
Ідея і мета, Вимоги, Інформаційна архітектура, ВайрфреймиВізуальний напрям і мобільний макет.
Пошук UI, АдаптивДизайн-система, прохід критикою, обидві картки програми, wishlist і мобільне полірування.
Фінальний UI, РозробкаФінальне полірування і регресія безпеки, виправлена перед релізом.
Запуск
На чому зібрано
- Next.js 15
- App Router: сторінки, layout і API-роут, який бронює подарунок
- React 19 + TS
- компоненти й типи для двомовного контенту (EN/UK)
- Tailwind CSS v4
- уся верстка, без жодного окремого CSS-файлу
- Framer Motion
- кілька точкових мікроанімацій
- Supabase
- Postgres + row-level security + Realtime для живого статусу «заброньовано» між пристроями, без акаунтів
- Vercel
- хостинг і деплої, прямо з Claude Code
- Figma
- джерело макетів для хіро, обох карток програми, wishlist і підвалу
- Claude Code + Impeccable
- генерація коду плюс скіл дизайн-процесу: init → document → critique