Blockchain Sports обратились к нам в критической ситуации: релиз продукта уже был просрочен, а менеджеры клубов продолжали тратить часы на ручную нарезку видео для каждого из десятков игроков. Родители юных хоккеистов не могли быстро найти моменты с участием своих детей в полноформатных записях матчей. Frontend-команда реализовала весь пользовательский интерфейс с нуля за 4 дня вместо запланированных 10, что позволило запустить продукт с минимальной задержкой.

Ситуация

Обзор продукта

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

Что не работало
Менеджеры клубов тратили часы на просмотр полных записей матчей и ручное создание нарезок для каждого из множества игроков, которых они ведут. Этот процесс был крайне трудозатратным и масштабировался линейно: чем больше игроков, тем больше времени требовалось. Родители сталкивались с аналогичной проблемой, пытаясь найти моменты участия своего ребенка в записи полного матча. Уже имелась ML-модель и backend-часть, но продукт не мог быть запущен из-за отсутствия пользовательского интерфейса.

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

Требования заказчика

• Разработать веб-приложение с интуитивным интерфейсом для загрузки видео
• Реализовать функционал автоматической нарезки моментов по номеру игрока через ML
• Обеспечить возможность просмотра, скачивания и шеринга созданных нарезок
• Интегрировать систему авторизации через email и социальные сети
• Встроить платежную систему для оплаты подписки
• Обеспечить удобную навигацию по найденным моментам с таймкодами

Ограничения

• Критичные сроки: релиз уже должен был состояться к моменту обращения
• Максимум 10 дней на разработку frontend-части
• Необходимость интеграции с уже существующим backend и ML-моделью от другой команды
• Разные команды работали над разными частями продукта параллельно

Frontend-спринт: от нуля до готового интерфейса за 4 дня
Команда приняла решение "навалиться всей гурьбой разработчиков" из-за критичности сроков. Была выбрана связка React + TypeScript для обеспечения типобезопасности и масштабируемости, а библиотека компонентов Shadcn позволила ускорить разработку UI без потери качества.

Параллельная работа нескольких frontend-разработчиков позволила одновременно создавать различные части интерфейса: систему авторизации, загрузчик видео, таблицу с таймкодами и интерфейс управления нарезками. Такой подход сократил время разработки более чем вдвое — с 10 до 4 дней.

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

Frontend был спроектирован с учетом асинхронной работы ML-обработки: пользователь получает уведомление о готовности нарезки, а не ждет у экрана. Интеграция с платежной системой и авторизацией через ВКонтакте ID и Яндекс обеспечила низкий порог входа для российской аудитории.

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

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

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

• Авторизация через соцсети — вход через ВКонтакте ID и Яндекс убирает необходимость запоминать пароли и снижает барьер для новых пользователей
• Загрузка видео с встроенным плеером — возможность сразу убедиться, что загружена корректная запись матча, не покидая интерфейс
• AI-распознавание по номеру — ML-алгоритм находит все появления игрока в кадре, анализируя номер на форме с точностью около 90%
• Интерактивная таблица таймкодов — список всех моментов с конкретным игроком, организованный по времени появления в матче
• Мгновенная перемотка по клику — выбор таймкода в таблице автоматически перематывает видео на нужный момент без задержек
• Каталог загруженных матчей — централизованное хранилище всех проанализированных игр с возможностью быстрого доступа
• Экспорт фрагментов — скачивание нарезки с моментами конкретного игрока для дальнейшего использования
• Шеринг из приложения — прямая отправка нарезок через мессенджеры или социальные сети
• Система подписки — встроенная оплата для доступа к расширенному функционалу и дополнительным минутам обработки

Продукт был успешно запущен в продакшн несмотря на просроченные первоначально сроки релиза. Двухэтапная разработка позволила минимизировать задержку: пока backend и ML дорабатывались, готовый frontend уже можно было использовать для тестирования интеграций.

© ИП Журавленко Артем Николаевич
ОГРНИП 325911200053358
ИНН 027816447864

О ПРОЕКТЕ

Mini Apps
Web приложения
Кейсы
О нас

КОНТАКТЫ

г. Симферополь, ул. Екатерининская, д. 40, стр. 1, эт. 3, оф. 15
+7 960 495 60 61
info@unitech.team

ИНФОРМАЦИЯ

Политика конфиденциальности
Программа партнерства

Разработка сайта