Кейс 07 / 17 · Платформа данных Формулы-1 · 2026

Apex

Веб-приложение о Формуле-1 в эстетике печатной программки Гран-при: полная статистика чемпионата, форма пилотов, история команд и трасс — на живых данных Ergast API.

https://f1.lkxa.ru

Время разработки: 13 дней
Маршрутов: 12
Глубина архива: 1950–2026
Вес бандла (gzip): ≈122 КБ

Задача

Существующие сайты о Формуле-1 — это либо новостные ленты с рекламой и попапами, либо сухие таблицы без визуальной иерархии. Не хватало продукта, который подаёт данные чемпионата как цельное издание: с типографикой, ритмом и вниманием к деталям уровня спортивных медиа.

Решение

SPA на React + Vite без бэкенда: все данные тянутся напрямую из открытого Ergast API (через поддерживаемое зеркало Jolpica) и Wikipedia REST API. Собственный сетевой слой с очередью запросов, экспоненциальным backoff и двухуровневым кэшем делает навигацию мгновенной и почти не нагружает API. Дизайн-система построена как швейцарская печатная программка: модульная сетка, линейки, точечные выноски, полутоновые фотопластины, табличные цифры.

Ключевое

React 18 + Vite + React Router 6 · Ergast API + Wikipedia REST · 2 темы, 2 языка · 12 маршрутов, без бэкенда

Что сделано

Дизайн-система «печатная программка Гран-при»: 12-колоночная сетка, типографские линейки, точечные выноски (dotted leaders), нумерация разделов
Две редакции оформления: Paper (светлая) и Night (тёмная) — переключатель в шапке, выбор запоминается, первый визит следует настройке ОС
Полная двуязычность RU/EN: интерфейс, статусы сходов, форматы дат и локализованные тексты из Wikipedia
Русская локализация Wikipedia через langlinks: английский заголовок статьи резолвится в кириллический с учётом редиректов
Тройная форма множественного числа для русского («1 победа / 2 победы / 5 побед»)
Собственный сетевой слой: очередь с ограничением параллелизма (2 запроса, интервал 220 мс) и backoff по 429/5xx с учётом Retry-After
Двухуровневый кэш (память + localStorage): живые данные на 15 минут, историческая статистика на 24 часа, дедупликация одновременных запросов
Постраничная загрузка (ergastPaged): график позиций по кругам — это ~12 страниц, которые тянутся параллельно через очередь и кэшируются одной записью
График позиций по кругам («спагетти»): линия на каждую машину в цветах команды, наведение выделяет пилота и гасит остальных, пит-стопы обведены, подписи на правом крае разведены от коллизий
Графики набора очков по гонкам с интерактивным ридаутом при наведении
Полутоновые фотопластины: ч/б с растровой сеткой, дуотон в цвет команды при наведении — маскирует разнокалиберность исходных фото из Wikipedia
Динамический акцентный цвет: страница окрашивается в ливрею команды, о которой идёт речь (лидер чемпионата, выбранный пилот, победитель гонки)
Обратный отсчёт до ближайшей гонки и расписание уик-энда (FP1–квалификация, спринт если есть)
Страница гонки: протокол финиша, квалификация, спринт, график позиций, пит-стопы — во вкладках
Архив всех сезонов 1950–2026: индекс по десятилетиям, страница сезона с фичером чемпиона, итоговыми зачётами и календарём с победителями
Страницы трасс: статистика, описание, список всех победителей с 1950 года, топ по победам среди пилотов и команд, все розыгрыши Гран-при
Страница пилота: карьерная статистика, биография, прогресс в чемпионате против напарника, покруговый лог всех гонок сезона
Скелетоны вместо спиннеров: заглушки повторяют форму реального контента, ничего не «прыгает» при загрузке
Адаптивная вёрстка: на мобильных навигация и переключатели убраны в выпадающую панель, широкие таблицы скроллятся внутри контейнера
Анимации на Framer Motion: переходы страниц, счётчики очков, прогресс-бары, отрисовка линий графиков — только transform/opacity
Чистый CSS без фреймворка: семантические токены, единая 8pt-шкала отступов, обе редакции описаны наборами токенов
Конфиг nginx для деплоя статики: SPA-fallback, иммутабельный кэш хешированных ассетов, gzip

Этапы

Ресёрч и дизайн-язык (2 дня) — Изучение актуальных направлений, отбор эстетики печатной программки, дизайн-система на токенах, светлая и тёмная редакции
Сетевой слой (2 дня) — Клиент Ergast: очередь запросов, backoff, двухуровневый кэш, дедупликация, постраничная сборка покруговых данных
Основные страницы (3 дня) — Главная, гонщики, команды, календарь, протокол гонки, зачёт — вёрстка на модульной сетке, скелетоны
Визуализации (2 дня) — График позиций по кругам, графики набора очков, полутоновые пластины, обратный отсчёт, расписание уик-энда
Локализация RU/EN (2 дня) — Словарь интерфейса, статусы сходов, форматы дат, русские тексты Wikipedia через langlinks, склонения
Архив и трассы (1 день) — Сезоны 1950–2026, страницы сезона и трассы, история победителей, кросс-линковка
Полировка и деплой (1 день) — Мобильная навигация, де-коллизия подписей графика, оптимизация запросов, конфиг nginx

Следующий проект: Звук века