Кейс Webcraftly · Aurora & Leo

Aurora & Leo — техническое описание

0. Бизнес-цели и успех (обязательно)

  • Цель бизнеса (12–24 мес): Собрать подтверждения от 100% гостей (≈80 человек) за 6 недель до свадьбы и снизить число звонков паре с вопросами; как продукт студии — продавать 4+ сайта-приглашения в месяц.
  • Кто платит vs кто пользуется: Платит пара молодожёнов (или студия-организатор); пользуются гости.
  • Ценность для пользователя (одной фразой): Гость за 1 минуту узнаёт всё о дне свадьбы и подтверждает участие.
  • KPI успеха v1 (3–7 измеримых):
    • ≥ 90% гостей отправили RSVP до дедлайна
    • ≤ 5 звонков паре с вопросами «где/когда»
    • Время загрузки на mobile < 2 с
    • ≥ 95% визитов с телефона без ошибок вёрстки
  • Монетизация / экономика: Для студии: шаблон-приглашение 15–35 тыс. ₽ за сайт, допродажи — персональный дизайн, фотогалерея после свадьбы.
  • Go-to-market: Портфолио студии, свадебные агентства и площадки как партнёры, Instagram/Pinterest-референсы, сарафан от гостей.
  • SEO / контент / маркетинг в v1: Не индексируется (noindex) — приватная страница по ссылке; SEO только у лендинга студии.
  • Конкуренты / аналоги (1–3) и отличие: Сервисы Wedding-сайтов (WeddyWood, Zola), открытки в Canva. Отличие: персональный дизайн, RSVP с меню и трансфером, таймер, оффлайн-карта.
  • Анти-цели v1: Не делаем список подарков с оплатой, загрузку фото гостями и мультиязычность в v1.

1. Название и суть

  • Название проекта: Aurora & Leo — сайт-приглашение на свадьбу
  • Одной фразой: Праздничный одностраничник-приглашение с таймером, программой, картой и RSVP.
  • Для кого: Гости свадьбы: друзья, родственники разных возрастов, преимущественно с телефона.
  • Проблема: Гости теряют детали из мессенджеров, а паре трудно собрать ответы, предпочтения по меню и трансферу.
  • Связь с §0: каждый сценарий v1 ведёт к KPI конверсии и измеряется целями в аналитике.

2. Границы

IN SCOPE (обязательно в v1):

  • Hero с именами, датой и таймером обратного отсчёта на JS
  • История пары (коротко)
  • Дата и место: адрес, карта (статичная картинка/embed-заглушка), кнопка «Построить маршрут»
  • Программа дня по времени
  • Дресс-код с палитрой
  • RSVP: имя, придёт/не придёт, +1, меню, трансфер, пожелания
  • Контакты организатора
  • Админка: список ответов и экспорт CSV

OUT OF SCOPE:

  • Онлайн-оплата подарков
  • Фотогалерея гостей
  • Мультиязычность
  • Регистрация гостей

Позже (v2+):

  • Галерея после свадьбы
  • Персональные ссылки для каждого гостя
  • Напоминание за день в Telegram
  • Плейлист-пожелания

3. Стек

  • Frontend: React 19 + Vite (продакшен); макет — чистый HTML/CSS/JS без сборки
  • Стили UI: CSS Modules / собственная дизайн-система по INPUT/DESIGN.html
  • Backend: Node.js 20 LTS + Express
  • БД OLTP: PostgreSQL 16
  • Аналитика / OLAP: Яндекс Метрика; OLAP не требуется в v1
  • Кэш / очереди / observability: не требуется в v1; логи pino, uptime-мониторинг
  • Хостинг / облако: VPS в РФ (Timeweb Cloud / Selectel), Nginx, Docker Compose
  • Монолит / модульный монолит / сервисы: модульный монолит

4. Ключевые сценарии

  1. Гость открывает ссылку из WhatsApp, видит «осталось 46 дней», смотрит программу и отправляет RSVP «приду, +1, рыба, нужен трансфер».
  2. Гость, который не сможет прийти, отмечает «к сожалению, не смогу» и оставляет поздравление.
  3. Организатор выгружает CSV с ответами и считает меню и места в трансфере.

5. Сущности и данные

СущностьПоля (примерно)СвязиЗаметки
Rsvpid, guest_name, attending, plus_one, plus_one_name, menu, transfer, allergies, message, created_atN:1 EventПовторная отправка обновляет ответ по имени+телефону
Eventcouple_names, date_time, venue, address, lat, lng, dress_code, rsvp_deadline1:N Rsvp, ProgramItemОдин на сайт
ProgramItemtime, title, description, iconN:1 Event5–7 пунктов

6. Интеграции

  • Яндекс Карты — ссылка на маршрут (embed в v1 заглушкой)
  • Telegram — уведомление паре о новом RSVP
  • Экспорт CSV

7. Нефункциональные требования

  • Ожидаемая нагрузка: До 200 гостей, пик 50 визитов в день после рассылки
  • Latency / доступность: TTFB < 300 мс, LCP < 2,5 с на mobile, доступность 99,5%
  • Retention EventLog / evidence / audit: логи 30 дней, заявки/заказы 3 года, бэкап БД ежедневно с хранением 14 дней
  • Compliance: 152-ФЗ: согласие гостя на обработку имени и ответа, удаление данных через 30 дней после события; страница noindex

8. Безопасность

  • Доступ по секретной ссылке, noindex; админка по JWT; rate-limit на RSVP; аллергии — минимально необходимые сведения.
  • HTTPS (Let's Encrypt), helmet, CSP, валидация входных данных на сервере, секреты в .env вне репозитория.

9. UX / клиенты

  • Mobile-first (90% трафика), анимации умеренные, учитывать prefers-reduced-motion.
  • Доступность: контраст AA, фокус-состояния, подписи полей форм.

9b. Дизайн

  • HTML-референс: INPUT/DESIGN.html (картинки в INPUT/assets/, описания в INPUT/assets/DESCRIPTIONS.md)

9c. CI/CD и окружения

  • Окружения: local / ci / staging / production
  • CI: GitHub Actions — lint, тесты, сборка Docker-образа; деплой на staging по merge в main, на production по тегу
  • Хостинг: VPS в РФ, Docker Compose, Nginx reverse proxy

10. Ограничения

  • Язык кода: TypeScript (strict) на фронте и бэке; автотесты Vitest + Playwright для ключевых сценариев
  • Запрещённые практики: хранение секретов в репозитории, ПД в логах, inline-SQL без параметров

11. Готовые модули

  • logging-pino
  • rate-limiting
  • caching-redis
  • auth-jwt
  • websocket-socketio
  • admin-panel
  • file-upload
  • crud-table
  • payments-stripe
  • search
  • email-nodemailer

12. Критерии приёмки v1

  • Таймер корректно считает дни/часы/минуты/секунды до 15.08.2027 16:00 и показывает «Сегодня!» после
  • RSVP с «не приду» скрывает поля меню и трансфера
  • Форма не отправляется без имени и выбора участия
  • Карта и маршрут доступны без JS-ошибок офлайн
  • Страница содержит meta robots noindex
  • Корректно на 360–1440 px

13. Свободные заметки

Проект Webcraftly

Нужен такой же продукт?

Сайт-приглашение на свадьбу: таймер, программа дня, RSVP и маршрут.