РАЗБОР ПРОЕКТАВЕБ-ПРИЛОЖЕНИЕ

Забег — тест для промо бегового события с карточкой участника

Небольшое встраиваемое приложение для сайта бегового события: участник выбирает, бегун он или болельщик, указывает имя и стартовый номер, отвечает на пять вопросов и получает карточку со своим типом бегуна, которую можно скачать.

Vue 3TypeScriptFrontendShadow DOM

Роль: Фронтенд-разработчик
Сроки: 2026, июль

Первый вопрос теста: бегун или болельщик

Задача

За два дня сделать тест по макету и встроить его на сайт события так, чтобы он не зависел от стилей страницы и обновлялся без правок на её стороне.

Что входит в решение

Встраивание одним скриптом: загрузчик берёт актуальные файлы из version.json и монтирует приложение в Shadow DOM.
Стили внутри Shadow DOM: шрифты регистрируются на странице-хосте, CSS-переменные переносятся с :root, относительные url() переписываются в абсолютные.
Тест по шагам: выбор роли с иллюстрациями, форма с переключателем пола, именем и стартовым номером (или «Пока без номера»), вопросы со счётчиком.
Результат с бэкенда: персональная картинка с именем и номером, скачивание фото и прохождение заново.
Адаптивная вёрстка под телефон.

Форма с полом, именем и стартовым номером — Форма: пол, имя и стартовый номер

Вопрос теста с вариантами ответа — Вопросы теста со счётчиком

Результат теста с карточкой участника — Результат: карточка с именем и номером (здесь — тестовая заглушка вместо картинки с бэкенда)

Коммерческий проект в команде: весь фронтенд по готовому дизайну сделал я. Скриншоты сняты с локальной сборки на тестовых данных, названия события и бренда скрыты.

Следующий проект Лупа — промо продуктового бренда с игрой «найди предметы»ПРОМОСАЙТ