Свитшот — промосайт акции производителя кормов для питомцев: баллы за чеки и задания, магазин призов с фото питомца
С сентября по ноябрь покупки кормов бренда от 1500 ₽ в зоомагазинах регистрировались на сайте: за каждые полные 1500 ₽ в чеке начислялось 2 балла. Баллы добавляли задания — анкета питомца, рассказ о нём, фото питомца и две игры. За 3 балла можно было сразу получить гарантированный приз, а накопленные баллы обменять на призы из каталога — книги о кошках и собаках, заставки и стикеры с питомцем, онлайн-консультацию ветеринара, футболки и свитшоты с фотографией своего питомца. Каждый месяц чеки участвовали ещё и в розыгрыше ценного приза.
- Роль
- Фронтенд-разработчик
- Сроки
- 2026, июль — октябрь
Задача
Собрать фронтенд акции на новой основе — Vue 3, TypeScript и типизированный по OpenAPI слой API: регистрацию и вход, регистрацию чеков, баллы, магазин призов, задания с питомцем, игры, кабинет с призами и галерею питомцев.
Что входит в решение
- Основа на Vue 3 и TypeScript: типы API из спецификации OpenAPI, axios с обновлением токена по ответу 401 и повтором запроса, Pinia с сохранением профиля, свой плагин модальных окон с промис-интерфейсом, логирование ошибок, проверка типов и линтеры в pre-commit, релизы с версиями.
- Регистрация по телефону, почте и паролю: подтверждение номера входящим звонком или SMS, подтверждение почты кодом из письма с начислением баллов, восстановление пароля, вход по токену активации из ссылки.
- Регистрация чека: сканер QR-кода, ручной ввод или фото; на загруженном фото QR-код ищется прямо в браузере (BarcodeDetector или его WASM-полифил) и проверяется по формату фискальных данных.
- Магазин призов за баллы: цена, остаток, заказ с подтверждением; в кабинете — мгновенный обмен 3 баллов на гарантированный приз, статус заявки на физический приз, выбор варианта и проверка фото питомца для именных вещей, всплывающие уведомления о новых призах.
- Задания с питомцем: анкета с породами из справочника, рассказ от 500 символов, загрузка фото с редактором на canvas — перетаскивание и масштаб, только JPG и PNG до 10 МБ; викторина «Правда или миф?» из 10 утверждений с пояснениями; игра «три в ряд» во фрейме, связанная с сайтом через postMessage.
- Галерея фото питомцев, победители с поиском, вопросы и ответы, режим «скоро» до старта акции, цели аналитики с глубиной прокрутки, адаптивная вёрстка.
Коммерческий проект в команде: весь фронтенд по готовому дизайну сделал я, игра «три в ряд» — отдельная сборка другого разработчика. Скриншоты сняты с локальной сборки на тестовых данных — призы и их картинки тоже тестовые; логотипы и название бренда скрыты, продукция и магазины-партнёры не показаны.