Домашняя страница
/

Проект

Fame To Flame

VK Mini app для федерального конкурса

О проекте

О проекте

О проекте

Fame to flame — федеральный танцевальный чемпионат. Задача проекта VK Mini app в рамках чемпионата — обеспечить понятную и прозрачную систему регистрации участников, голосования, регистрации чеков транзакционной механики.

Мы за два месяца разработали и запустили платформу для 80 тысяч пользователей, которая объединила регистрацию чеков, загрузку и просмотр видео, голосование, розыгрыши и аналитику — и оставалась стабильной даже при высокой нагрузке. Внутри платформы пользователи могли действовать в трёх ролях — участников, зрителей и организаторов. Для каждой роли мы предусмотрели отдельные сценарии и создали удобные инструменты.

Участники снимали и загружали танцевальные видео, за которые голосовали зрители. Зрители регистрировали чеки после покупки напитков, получали баллы, чтобы голосовать за танцоров и участвовали в розыгрышах призов — от промокодов до айфонов.

Танцоры-победители онлайн-этапов выступили на отборочных турах в Красноярске, Краснодаре и Москве, а затем встретились на гранд-финале в столице.
Организаторы работали через админпанель: модерировали контент, управляли розыгрышами и следили за активностью пользователей.

Главная сложность — высокая нагрузка и необходимость стабильной работы на всех этапах. Команда Doubletapp обеспечила устойчивость системы, продумала интерфейсы и реализовала все механики конкурса без сбоев.

Задача

Задача

Задача

Основная задача проекта — усилить вовлечённость участников через интерактивный конкурс. Нам нужно было создать удобную и надёжную онлайн-платформу для регистрации чеков, загрузки танцевальных видео, голосования и проведения розыгрышей призов.

Что хотел заказчик:

  • Упростить коммуникацию с аудиторией в digital, объединить взаимодействие бренда и пользователей на одной платформе.
  • Связать офлайн-продажи с digital-активностями — регистрация чеков должна стать пропуском к голосованию и розыгрышам призов и стимулировать повторные продажи.
  • Поддержать позитивный имидж брендов через ассоциации с движением, музыкой, молодостью, спортом и энергией.
  • Популяризировать спорт и здоровый образ жизни через вовлекающий формат танцевального конкурса.

Для решения задач мы разработали комплексное цифровое решение — платформу с поддержкой VK Mini Apps и лендинга, способную работать без сбоев при высокой нагрузке и удобную для всех ролей участников.

FTF_scenarii

Решение

Решение

Решение

Мы начали с того, что подробно разобрали, кто и в каких ролях взаимодействует на платформе, нарисовали прототипы. Дизайн согласовали уже в первый месяц, а параллельно команда начала собирать backend и frontend.

Через два месяца мы запустили мини-приложение для VK: участники регистрировали чеки, загружали танцевальные видео, голосовали за понравившиеся ролики, участвовали в розыгрышах, а организаторы — управляли всем через удобную админпанель. Всё было сделано так, чтобы взаимодействие с платформой проходило без проблем, а результатами удобно было делиться в соцсетях.

Для этого проекта мы разработали несколько эффективных решений:

  • собственный видеоплеер с интерактивными функциями — свайпы, лайки, шаринг. Он был построен по принципу сервисов коротких роликов популярных платформ и обеспечивал полный контроль над видео, защиту от удаления и удобство для просмотра и перемотки.
  • оптимизировали загрузки, использовали продуманное кэширование для снижения нагрузки на сервер. Даже при большом потоке видео и голосов все запросы обрабатывались без задержек.
  • разработали удобный интерфейс с цветовым кодированием ролей, чтобы легче было понять, как работает конкурсная механика: где зарегистрироваться, как залить видео, где посмотреть призы.
  • подключили админпанель, которая позволила организаторам управлять контентом и держать под контролем аналитику проекта.

В результате участники с азартом загружали свои танцы, зрители голосовали за любимые ролики и делились эмоциями в соцсетях, организаторы держали всё под контролем, а финальный стрим прошёл гладко и без перебоев. Платформа получилась отзывчивой и надёжной, поэтому заказчик запланировал использовать ее для на следующий год и сделать конкурс регулярным.

FTF_masshtab

Результат

Результат

Результат

Платформа ожила: зрители покупали напитки, регистрировали чеки в приложении и тут же использовали баллы — голосовали за любимые ролики, участвовали в розыгрышах или обменивали их на билеты на офлайн-мероприятия и фирменный мерч. Среди призов были сертификаты партнёров, промокоды и даже айфоны. Всего платформу использовали 80 тысяч участников

Участники творили, делились энергией и получали реакции аудитории. Те, кто победил в онлайн-голосовании, выступили на отборочных турах в Красноярске, Краснодаре и Москве. Так, в Красноярске на сцену вышли 500 танцоров из 12 городов Сибири, выступления посмотрели 1500 зрителей. Финал конкурса прошел в столице 6–9 ноября: 150 лучших танцоров страны померялись силами, получили оценку международного жюри, а лучшие из лучших — призы от спонсоров.

Но вознаграждены в итоге оказались все участники. Конкурс помог не только прокачать танцевальные навыки, но и найти талантливых партнёров, друзей и наставников по всей стране. Платформа собрала всех в дружное сообщество, где можно было расти, делиться успехами и вдохновляться примером других.

На финальном этапе весь функционал конкурса плавно переехал на лендинг заказчика, сохранив все механики и обеспечив стабильную трансляцию гранд-финала. Платформа показала свою надёжность, выдержала пиковую нагрузку и обеспечила живое вовлечение аудитории, полностью реализовав цели конкурса и маркетинговые задачи бренда.

Этот проект стал примером того, как техническая экспертиза и внимание к пользовательскому опыту превращают сложную задачу в яркое цифровое событие. Команда Doubletapp создала живую экосистему, где технология, дизайн и маркетинг работают в полной гармонии.

BACKEND

Django
Django

Django

PostgreSQL
PostgreSQL

PostgreSQL

Redis
Redis

Redis

NGINX
NGINX

NGINX

FRONTEND

TypeScript
TypeScript

TypeScript

React
React

React

MONITORING

Grafana
Grafana

Grafana

Prometheus
Prometheus

Prometheus

Наша суперкоманда

ПавелFrontendИльяDesignДмитрийBackendКириллFrontendИванQAИванAccounting

BACKEND

BACKEND

BACKEND

Стриминговый сервис для видео

Мы создали стриминговый сервис для видео, работающий по принципу сервисов коротких роликов (YouTube Shorts). В отличие от стандартного воспроизведения в браузере, где при перемотке нужно дать видеофайлу прогрузиться до нужного момента, ролики передаются чанками — небольшими последовательными блоками данных. Мы реализовали конвертацию видео в формат HTTP-стриминга, благодаря чему просмотр начинается с любой точки ролика, а качество видео подстраивается под скорость соединения пользователя. Такой подход ускоряет доступ к контенту

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

Проект рассчитан на высокую нагрузку, поэтому для обеспечения скорости и масштабируемости команда использовала аппаратное ускорение видеокарт. Конвертация выполняется на видеокарте благодаря отдельным аппаратным блокам NVENC и NVDEC, где тысячи ядер позволяют распараллелить обработку видеороликов. По это причине разгружается процессор, который занимается обработкой HTTP-запросов, работой с базой данных (Postgres, Redis), фоновых задач (Celery). Пользователи получают быстрый отклик системы и возможность загружать видео без задержек, а платформа сохраняет стабильность при большой активности.

Оптимизация архитектуры бэкенда

Бэкенд мини-приложения построен на Django Ninja — лёгком и быстром фреймворке для создания API на Python. Основная база данных — PostgreSQL, а Redis используется как кэш и брокер сообщений для Celery. Через Celery запускаются асинхронные задачи — например, конвертация видео. Это позволяет разгрузить сервер: когда пользователь загружает ролик, система не ждёт окончания обработки, а передаёт задачу отдельному воркеру.

Видео автоматически преобразуются в три варианта с разным разрешением — 480p, 720p и 1080p. Для каждого варианта настроены собственные параметры аудио- и видеобитрейта, чтобы оптимизировать размер и скорость загрузки чанков. Такой подход обеспечивает стабильное воспроизведение видео и экономное использование ресурсов.

Кроме конвертации, через Celery выполняются и фоновые процессы — например, запуск и завершение розыгрышей и конкурсов, обновление рейтинга.

Кэширование

Чтобы обеспечить стабильную работу под высокой нагрузкой, в проекте реализованы три сценария кэширования. Они помогают сократить число запросов к серверу, снизить нагрузку на базу данных и ускорить отклик приложения.

1. Кэширование на стороне сервера.
Для хранения часто запрашиваемых данных используется Redis — хранилище типа in-memory, то есть работающее с данными, частично размещёнными в оперативной памяти. Это решение выбрано потому, что доступ к оперативной памяти в десятки раз быстрее, чем к диску: сервер может мгновенно выдавать закэшированные ответы без обращения к PostgreSQL. Благодаря этому система обрабатывает больше запросов при меньшей нагрузке. Почти половина API-эндпоинтов кэшируется именно в Redis, что особенно важно для пиковых периодов активности пользователей.

2. Кэширование на уровне фронтенда.
Некоторые данные сохраняются в браузере пользователя, что позволяет повторно использовать результаты предыдущих запросов. Например, список призов кэшируется на несколько часов — при повторном открытии страницы данные подгружаются локально, без обращения к серверу.
Для рейтинга участников используется другой подход: результаты хранятся в materialized view в PostgreSQL, которая обновляется каждые пять минут. Браузер знает, когда произойдёт следующее обновление, и использует кэш до этого момента. Такой способ подходит для данных с известным временем актуальности.

3. Условные HTTP-запросы.
Если данные на сервере не изменились, приложение получает ответ без тела запроса — только подтверждение, что актуальная версия уже есть в браузере. Это сокращает объём передаваемых данных и ускоряет загрузку страниц.

Дополнительно в проекте реализовано сжатие статики в формате gzip. При сборке фронтенда HTML-, CSS- и JS-файлы автоматически архивируются и отдаются пользователю в сжатом виде. Благодаря этому уменьшается трафик и ускоряется загрузка интерфейса.

Мониторинг

Чтобы контролировать стабильность системы и вовремя реагировать на любые сбои, в проекте настроен мониторинг на базе стандартного стека: Prometheus, Grafana и Alertmanager.

Prometheus собирает метрики с серверов: загрузку процессора, использование оперативной памяти и диска, количество запросов, время отклика и другие параметры. Эти данные хранятся как временные ряды, что позволяет отслеживать динамику нагрузки и вовремя замечать отклонения.

Grafana визуализирует метрики в виде удобных дашбордов — команда может в реальном времени видеть состояние системы и производительность отдельных компонентов.

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

Дополнительно реализовано централизованное логирование — все сервисы передают логи в общее хранилище. Это позволяет быстро находить и анализировать ошибки.

Интеграция в VK

В отличие от Telegram Mini Apps, где приложения можно запускать без каких-либо предварительных согласований, во «ВКонтакте» предусмотрен обязательный процесс модерации. Он проходит в два этапа.

На первом этапе приложение проверяет команда VK — оценивает корректность работы, интерфейс, оформление, задаёт уточняющие вопросы по логике. Второй этап — это открытое бета-тестирование в сообществе VK Testers, где добровольцы-тестировщики проверяют приложение и создают баг-репорты. Этот процесс помогает выявить все возможные неточности и убедиться, что приложение полностью готово к публикации. Мы успешно прошли все этапы и вывели приложение в каталог VK.

В качестве запасного плана рассматривался вариант перехода на Telegram Mini App. Бэкенд-сервисы уже были готовы к этому — достаточно было бы изменить схему авторизации. На фронтенде же пришлось бы существенно переработать код: SDK Telegram и VK Mini Apps различаются по структуре и набору функций. К счастью, этот сценарий не понадобился — приложение успешно прошло модерацию и было опубликовано в каталоге VK Mini Apps.

FRONTEND

FRONTEND

FRONTEND

Разработка плеера

Изначально рассматривался вариант использования встроенного iFrame от VK для отображения видео. Такой подход позволял получать ролики напрямую из VK без собственного хранилища и конвертации. Однако этот метод имел ряд ограничений:

  • невозможно было отслеживать удаление или скрытие видео пользователем, а также контролировать его приватность;
  • нельзя было добавить кастомные элементы управления — кнопки «лайк», «поделиться» или интерактивную ленту с возможностью свайпа.

Чтобы обеспечить полный контроль над видео и реализовать удобный интерфейс, команда разработала собственный плеер.

Для его работы понадобились:

  1. Собственное S3-хранилище видео на бэкенде;
  2. Конвертация роликов в несколько разрешений (480p, 720p, 1080p), чтобы плеер автоматически подстраивал качество под пропускную способность сети пользователя;
  3. Поддержка интерактивных функций: свайпы, лайки, возможность поделиться видео и плавная работа ленты на разных устройствах.

Такой подход позволил получить стабильное и предсказуемое поведение плеера, полностью управлять контентом на стороне платформы и обеспечить удобный пользовательский опыт даже при нестабильном интернете.

Оптимизация фронтенда

Фронтенд проекта был реализован как SPA-приложение, собранное и развернутое в виде статических файлов. После сборки итоговые HTML, CSS и JS-файлы компилируются и хранятся в Nginx-образе, откуда раздаются пользователям.

Чтобы ускорить загрузку и снизить нагрузку на сервер, были настроены gzip-сжатие и кэширование статических ресурсов. Это особенно важно для видеоленты, где пользователь быстро переходит между роликами и скорость отклика напрямую влияет на восприятие сервиса.

Дополнительно прорабатывалась логика постепенной подгрузки данных — плеер загружает следующую порцию видео только при прокрутке, что снижает потребление трафика и ускоряет отклик интерфейса.

Интеграция с VK SDK

Так как мини-приложение работает внутри VK, важной частью фронтенда стала интеграция с VK Mini Apps SDK — библиотекой, обеспечивающей взаимодействие между приложением и экосистемой «ВКонтакте».

С помощью SDK реализованы:

  • Авторизация пользователя;
  • Сканирование QR кодов;
  • Загрузка видео в профиль пользователя во «ВКонтакте».

DESIGN

DESIGN

DESIGN

Заказчику не пришлось тратить время на уточнения и согласования — команда сразу взяла задачу под полный контроль. Мы точно поняли механику конкурса, требования брендбука и визуальные приоритеты заказчика. Сначала подготовили прототипы и согласовали общую логику интерфейса. После этого дизайн двигался без задержек: все решения принимались быстро, в срок и не требовали доработок.

Ключевая находка — цветовое кодирование ролей пользователей. Каждая роль получила свой цвет: участники — голубой, зрители — оранжевый, пользователи, регистрирующие чеки — красная. Так интерфейс стал понятным с первого взгляда: цвет помогал моментально ориентироваться и отделять разные сценарии поведения в приложении. Простой и визуально чистый дизайн сделал продукт удобным и узнаваемым — без лишних согласований и сложных правок.

Давайте работать вместе!

Прикрепить файл