FootyTracker
Организация игр и статистика любительского спорта.
Спроектировал и разработал
Мой вклад — проектирование интерфейса и разработка приложения.
- Игровой день
- Счёт и статистика
- Роли и данные
Задача
Собрать составы, счёт и статистику клуба в одном месте.
Весь игровой вечер в одном продукте
Любительскому клубу нужны не только счёт и таблица. Сначала нужно собрать участников, разделить команды, провести матч и разобраться со взносами. Схема ниже собрана для кейса по публичному описанию работающего сервиса.
Визуальные примеры ниже взяты из публичной страницы. Это демонстрационные данные, а не скриншоты личного кабинета клуба.
Собрать людей и перейти к игре
Публичная схема описывает три действия: отметить пришедших, распределить команды и вести матч. Повторный игровой вечер может начинаться с прошлого состава. Автобаланс предлагается как помощь организатору при разделении игроков.
Счёт читается первым, события — следом
На табло самый крупный элемент — 3:2. Цветные маркеры связывают команды со счётом; статус и таймер вынесены выше. В ленте события различаются минутой, типом и именем игрока. Это демонстрационное табло на публичной странице.
Много чисел — один понятный порядок
Строка команды объединяет игры, победы, ничьи, поражения, мячи, разницу и очки. Заголовки колонок остаются компактными; цвет и знак помогают различить положительную и отрицательную разницу. Очки завершают строку как итог.
Игроку достаточно своей ссылки
Карточка соединяет ближайшую игру, ответ об участии и личную статистику. Два действия «Буду» и «Не смогу» отвечают на главный вопрос организатора. Голы, передачи и число игр расположены ниже и не мешают этому выбору.
Финансы остаются в контексте игры
Денежная сумма и число оплативших вынесены в главный уровень: 54 000 ₸ и 12 из 14. Публичное описание также предусматривает список долгов и подготовленный текст напоминания. Здесь показана именно сводка, доступная на открытой странице.
Один характер для разных типов данных
Тёмное табло выделяет текущую игру. Светлая таблица поддерживает сравнение, зелёная карточка — действие игрока, лаймовая сводка — деньги. Ниже собраны реальные фрагменты интерфейса: их можно раскрыть и увеличить по отдельности.
Табличные и финансовые данные＋
От интерфейса — к данным и правам
Документация проекта связывает Expo Router, TypeScript, React Query, Zustand и Supabase. Доступ разделён между организатором, игровым администратором и зрителем; данные компаний изолируются через RLS. Публичная версия отдельно объясняет работу без связи и доступ по ссылке.
На телефоне — от приглашения до табло
Мобильная версия перестраивает первый экран в одну колонку: обещание сервиса, основное действие, затем табло. Крупные цифры и названия команд сохраняют приоритет. На десктопе текст и табло работают рядом.
Полная публичная страница＋
Характер проекта
Спортивная редакционная подача: узкие заголовки, контрастные цифры и тёмное табло на светлом фоне.
0123456789
#10452F#111614#F5F6F4#E0483FOswald + Inter
Oswald задаёт характер заголовкам и счёту. Inter используется в акцентных подписях и действиях, системный шрифт — в основном тексте веб-версии.
Цвет помогает читать события
Зелёный связывает бренд и основные действия. На табло цвет команд и маркеры событий отделяют счёт от служебных данных.
Что получилось
Интерфейс для игровых дней, счёта, таблиц и игроков. Веб-приложение с базой данных и разграничением доступа.
Открыть сайт ↗