РАЗБОР ПРОЕКТАВЕБ-ПРИЛОЖЕНИЕ
Сезон — летняя промоакция: виджет в Shadow DOM с кабинетом и достижениями
Акция для покупателей: регистрируешь чеки, получаешь достижения — первый чек, неделя подряд, пять чеков — и забираешь за них призы, а в еженедельных розыгрышах можно выиграть больше. Промо-страница сделана в Tilda, всё интерактивное — приложение, встроенное в неё.
- Роль
- Фронтенд-разработчик
- Сроки
- 2026, июнь — август
Задача
Сделать встраиваемое приложение акции с нуля: вход и регистрацию с подтверждением телефона, регистрацию чеков, личный кабинет с достижениями и выдачей призов, таблицу победителей — и встроить его в страницу Tilda так, чтобы стили не пересекались.
Что входит в решение
- Встраивание одним скриптом: загрузчик берёт актуальные файлы из version.json, монтирует приложение в Shadow DOM и выносит на страницу то, что внутри теневого дерева не работает, — @font-face, базу rem, CSS-переменные; CSS разделяется на этапе сборки через PostCSS, модули загрузчика покрыты тестами.
- Таблица победителей — отдельное приложение в своём Shadow DOM, которое монтируется в любой блок #winners на странице: фильтры по дате и призу, поиск по телефону, карточки на телефоне.
- Регистрация и вход по телефону: код подтверждения, а после таймера — подтверждение звонком с опросом статуса каждые 3 секунды; восстановление пароля.
- Регистрация чека: QR-код камерой с подсветкой, распознавание QR на загруженном фото, ручной ввод; повторная отправка отклонённого чека с исправленными данными.
- Кабинет: история чеков с фильтрами, призы, достижения в карусели с перетаскиванием на телефоне и получение призов за достижения с данными для доставки.
- Ссылки на документы приходят из API и подставляются и в приложение, и в страницу Tilda; обратная связь с темами из API.
Коммерческий проект в команде: весь фронтенд сделал я, промо-страница собрана в Tilda. Скриншоты сняты с локальной сборки на тестовых данных, названия бренда и компании скрыты.