Платформа футбольных турниров в реальном времени для университетского клуба
Pitch — платформа управления футбольными турнирами, которую мы сделали для XMUM Football Club при Xiamen University Malaysia. Болельщики получают счёт в реальном времени, расписание, турнирные таблицы, сетку плей-офф, список бомбардиров и составы команд по каждому турниру клубного сезона, а организаторы и секретари матчей — инструменты для проведения игрового дня. Главный турнир, X-CEED 2026 Football Cup, работает на xceed.my.
XCeed Football Cup
X-CEED 2026 Football Cup собрал восемь команд на стадионе XMUM с 26 по 30 июня 2026 года по схеме «круговой турнир плюс плей-офф»: две группы, затем полуфиналы и финал. Pitch обслуживал весь турнир — от первого группового матча до финала, в котором XMUM FC Team A обыграла El Cuervo FC со счётом 4:3. На странице турнира — чемпион, бегущая строка с итоговыми результатами и вкладки с текущими матчами, расписанием, таблицами, сеткой, бомбардирами и командами.
Ключевые возможности
- Счёт в реальном времени — главная страница, страницы турниров и панель секретаря подписаны на изменения в Postgres через Supabase Realtime, поэтому забитый гол появляется на публичных страницах без обновления.
- Три формата турнира — круговой турнир, круговой турнир со стадией плей-офф или сразу плей-офф, причём сетка может начинаться с любого раунда вплоть до 1/16 финала.
- Полный жизненный цикл матча — матч проходит статусы «запланирован», «идёт», «перерыв» и «завершён», с голами (по желанию — автор и минута), карточками и статистикой игроков.
- От группового этапа к плей-офф — таблицы групп с переключаемыми критериями при равенстве очков, редактируемый список вышедших команд, сетка, посеянная по ним, и расписание следующих раундов по мере завершения предыдущих.
- Ссылки для секретарей — организаторы назначают секретарей на турнир или матч, а у каждого матча может быть обновляемая ссылка с токеном, которая открывает отдельную панель для этой игры.
- Бэк-офис организатора — мастер создания турнира, команды и составы с импортом игроков из CSV, генерация расписания, распределение по группам и приглашения пользователей с обязательной сменой пароля при первом входе.
- Страницы, которыми удобно делиться — сгенерированные изображения Open Graph, метаданные для каждого турнира и команды и устанавливаемое PWA.
Архитектура и технологический стек
Фронтенд
Next.js 16.2 с App Router и React 19.2, TypeScript, Tailwind CSS 4 и примитивы Radix UI, собранные в небольшую дизайн-систему с историями Storybook для карточек матчей, турнирных таблиц и вида сетки. Файл proxy.ts — замена middleware в Next.js 16 — переписывает поддомены admin. и score. на их группы маршрутов и защищает обе части через Supabase Auth.
Данные и правила в Postgres
Supabase даёт Postgres, Auth и Realtime. Схема прошла через 38 миграций, и большинство правил турнира живут в базе данных, а не только в интерфейсе. Row Level Security ограничивает организаторов и секретарей их собственными турнирами и матчами, а триггеры следят за минимальным размером заявки, полным распределением по группам, фазами матча, временем начала и тем, чтобы групповой этап был завершён до старта плей-офф. Сброс сетки проходит через защищённую функцию базы данных, которую публичные клиенты выполнить не могут, а действия администраторов записываются в журнал аудита.
Бизнес-логика и тесты
Условия блокировки, переходы жизненного цикла матча, выбор вышедших команд, составление расписания и готовность турнира — это чистые модули на TypeScript, покрытые примерно 300 тестами на Vitest в 20 наборах. Playwright проверяет вход, админ-консоль, страницы турниров, адаптивную вёрстку и ошибки во время выполнения. Критичные правила, такие как минимальный размер заявки и полнота групп, проверяются на трёх уровнях — в чистой вспомогательной функции, на сервере и в триггере базы данных, — поэтому ошибка в одном слое не пропустит плохие данные.
Инфраструктура
Приложение деплоится на Vercel из main, а для каждого пул-реквеста создаётся превью-деплой, подключённый к отдельному тестовому проекту Supabase. Миграции применяются до того, как в основную ветку попадает зависящий от них код. Sentry собирает ошибки с клиента, сервера и edge-окружения, а health-эндпоинт обращается к базе данных, чтобы проект оставался активным между турнирами.
Наша роль
Мы спроектировали и сделали Pitch: продуктовые спецификации, дизайн-систему, приложение на Next.js, схему Supabase и политики RLS, наборы тестов и пайплайн деплоя. В репозитории больше 380 коммитов с мая по июнь 2026 года, в том числе автоматическая активация турниров, жизненный цикл матча в админке, единая панель секретаря с обновляемыми ссылками и раунд укрепления защиты базы данных.
Смежные работы
Ещё одна платформа с данными в реальном времени и бэк-офисами с разграничением ролей — Bronjoy. Pitch — пример нашей работы по разработке веб-приложений и дизайну цифровых продуктов.
