Скретч — промосайт акции банковской карты в торговой сети: промокоды со стираемых карточек
Покупка от 700 ₽ в магазинах сети даёт карточку розыгрыша со стирающимся слоем и промокодом. Промокод регистрируют на сайте, и он участвует в розыгрыше своей недели — сертификатов на покупки, смартфон, планшет и умные часы, а держатели банковской карты сети участвуют и в розыгрыше главного приза — 1 000 000 ₽.
- Роль
- Фронтенд-разработчик
- Сроки
- 2026, май — июнь
Задача
Собрать новую основу акций на Vue 3 и TypeScript и сделать на ней приложение к лендингу из Tilda: регистрацию промокодов с входом в одном окне, кабинет с промокодами по неделям, список победителей внутри лендинга и обратную связь.
Что входит в решение
- Новая основа на Vue 3 и TypeScript: типизированный слой API, модели данных, свой плагин модальных окон с промис-интерфейсом, релизы с версиями.
- Регистрация промокода с входом в одном окне: гость вводит код с карточки и телефон и подтверждает номер четырьмя последними цифрами входящего звонка или кодом из SMS; у участника — своё окно, а также окна успеха и ошибки кода.
- Кабинет: промокоды по шести неделям с датами и числом кодов в розыгрыше недели, шансы в розыгрыше главного приза и выигранные призы с окном получения.
- Список победителей — отдельное Vue-приложение, смонтированное в блок лендинга: стили приложения копируются во фрейм и досинхронизируются через MutationObserver; фильтр по призу на сервере, поиск по телефону, пагинация.
- Связка с лендингом через postMessage: кнопки Tilda открывают окна промокода, входа и вопроса и внешние ссылки; список магазинов-участников — полноэкранное окно с сеткой регионов.
- Выход при истёкшей сессии по событию, отправка ошибок на сервер логов, адаптивная вёрстка.
Коммерческий проект в команде: весь фронтенд сделал я, промо-страница собрана в Tilda. Скриншоты сняты с локальной сборки на тестовых данных; названия и логотипы карты, сети и программы лояльности скрыты, лендинг под окнами размыт.