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