4дні від ідеї до релізу
Case study
Сайт на мій день народження
До свого дня народження я створила сайт для друзів із програмою святкування та wishlist-ом, де подарунки можна анонімно забронювати в один клік.
Я сама визначила задачу, спроєктувала рішення та реалізувала його. Основною метою було зібрати всю інформацію про подію в одному місці, щоб не дублювати її в чатах і завжди мати одну актуальну версію подій.
Щоб зберегти приватність гостей, система не використовує акаунти чи персональні дані. Кожен користувач ідентифікується лише локальним токеном на своєму пристрої.
Claude Code
Claude Sonnet 5
Impeccable
Next.js
Supabase
Figma
Vercel
22 коміти
Процес
Проєкт зроблено за 4 дні, ≈20 годин роботи:
Idea & Goal→
Requirements→
Information Architecture→
Wireframes→
UI Exploration→
Final UI→
Responsive Design→
Development→
Launch
01
24.07 · ~4 год
Скаффолдинг Next.js, Supabase-бекенд, перший wireframe.
02
27.07 · ~2,5 год
UI-напрям, мобільна версія.
03
28.07 · 9 комітів
Дизайн-система, критика, обидві листівки-агенди, вішліст, мобільна поліровка.
04
29.07 · ~48 хв
Фінальна поліровка та фікс security-регресії перед релізом.
Outcomes
Що вийшло
22 коміти
8 SQL-міграцій
2 мови: EN / UK
- ✓Щоб не пояснювати одне й те саме в кожному чаті, зібрала всю інформацію про свято в одному місці.
- ✓За чотири робочі дні є продукт, яким друзі користуються під час підготовки і в самі дні свята.
- ✓Захист даних на рівні бази (RLS), живе оновлення статусу подарунків, захист від спаму запитів.
- ✓AI-native workflow
0%сесій із rage clicks
51унікальний відвідувач
77переглядів сторінки
52сесії в Clarity
25унікальних користувачів
80%трафіку з мобільного
74%середня глибина скролу
Дані: Vercel Web Analytics + Microsoft Clarity
Стек
З чого зроблено
- Next.js 15App Router: сторінки, layout, API-роут для резервації подарунка
- React 19 + TSкомпоненти й типи для двомовного (EN/UK) контенту
- Tailwind CSS v4уся верстка без окремих CSS-файлів
- Framer Motionточкові мікроанімації
- SupabasePostgres + RLS-політики + Realtime — жива синхронізація статусу «заброньовано» без акаунтів
- Vercelхостинг і деплой, керовані прямо з Claude Code
- Figmaджерело макетів для хіро, обох листівок-агенд, вішлісту й футера
- Claude Code + Impeccableгенерація коду й скіл для дизайн-процесу: init → document → critique