РАЗБОР ПРОЕКТАВЕБ-ПРИЛОЖЕНИЕ
Праздник — промо аптечной сети: Tilda внутри Vue-приложения
Супер-розыгрыш в честь открытия юбилейной аптеки сети: покупатели регистрируют чеки, получают промокод на скидку и участвуют в еженедельных розыгрышах и главном — сертификате на путешествие. На основе этого проекта потом сделана вторая акция сети — «Юбилей».
- Роль
- Фронтенд-разработчик
- Сроки
- 2026, сентябрь — октябрь
Задача
Превратить статичный экспорт страницы из Tilda в приложение: встроить её, связать её кнопки с окнами приложения, сделать по макету регистрацию чеков, победителей и личный кабинет и подключить API акции — так, чтобы всё работало и виджетом на сайте сети.
Что входит в решение
- Основа с нуля: Vue 3, Vite, TypeScript и TanStack Query; один код собирается и сайтом, и виджетом в Shadow DOM.
- Встраивание Tilda: сначала веб-компонентом с Shadow DOM, затем прямой вставкой HTML — скриптам Tilda нужен настоящий document; клики по её кнопкам приходят в приложение через postMessage.
- Таблица победителей с фильтром по призу и поиском по телефону, встроенная прямо в страницу Tilda.
- Вход через аккаунт покупателя сети (SSO) с передачей UTM-меток, цели Метрики в регистрации чеков и формах.
- Кабинет: история чеков с розыгрышами, в которых участвует каждый чек, призы с промокодами, уведомления из бэкенда по одному и скелетоны при загрузке.
- Регистрация чека: QR-код камерой, фото или ручной ввод.
- Контракт API в OpenAPI и тесты слоя API без браузера и бэкенда.
Коммерческий проект в команде: весь фронтенд сделал я, промо-страница собрана в Tilda. Скриншоты сняты с локальной сборки на тестовых данных, название и логотип сети скрыты.