Как я собрал PWA для ЧМ-2026 на React TS: опыт с Claude Fable и agentic workflows

Когда последний раз вы пытались быстро проверить расписание матчей или составы команд? Лично у меня этот кейс вызывал digital-фрустрацию: десяток вкладок, куча рекламы, медленные сайты федераций. В итоге я собрал 26worldcup.github.io — PWA на React TypeScript, которая решает ровно мои боли.

Почему это не очередной спортивный портал

Главное отличие — complete lack of bullshit. Никаких:

• Кук и GDPR-баннеров
• Автовоспроизводящегося видео
• Бесконечных related-статей
• Ломающейся верстки на мобилах

Технический стек сознательно минималистичен:

• React 18 + TypeScript
• Vite вместо CRA
• PWA-ready с offline-кэшированием
• Ежедневные автообновления данных

Но фишка не в технологиях, а в UX-философии:

// Вместо традиционного роутинга
<Layout>
  {isMobile ? <MobileNav /> : <DesktopTabs />}
  <Suspense fallback={<Skeleton />}>
    <Outlet />
  </Suspense>
</Layout>

Такой подход дает TTI < 1.2s даже на слабых устройствах. Для сравнения: ESPN.com грузится 4-6s с тем же контентом.

Claude Fable в production: мой опыт

Проект стал полигоном для тестирования Claude Fable — нового AI-ассистента от Anthropic. Вот честные наблюдения:

Что получилось хорошо:

• Генерация многоязычных JSON-структур (23 языка!)
• Оптимизация запросов к football-data API
• Автоматизация daily updates через GitHub Actions

Где Fable проигрывает Opus 4.8:

• Работа с датами и timezones (пришлось править вручную)
• Генерация TypeScript-типов для вложенных структур
• Цена: $20 за 1M токенов vs $10 у Opus

Интересный кейс — реализация live-прогнозов. Fable предложил использовать Bayesian inference, но на практике хватило простой линейной регрессии:

# Упрощенная модель прогноза
def predict_win_prob(home_elo, away_elo, venue_impact=0.1):
    elo_diff = home_elo - away_elo + venue_impact
    return 1 / (1 + 10**(-elo_diff/400))

Agentic workflow для спортивных данных

Самый ценный инсайт: автоматизация сбора данных через RAG (Retrieval-Augmented Generation). Вместо того чтобы парсить сайты вручную, настроил pipeline:

1. Extract: Python-скрипты с BeautifulSoup для FIFA.com
2. Transform: Claude обрабатывает сырые данные в структурированный JSON
3. Load: GitHub Actions деплоит обновления 4 раза в сутки

Для локализации использовал гибридный подход:

• Основной контент — через DeepL API
• Спортивные термины — ручная правка носителями (спасибо Reddit-коммьюнити)

Что это значит для фронтенд-разработчика

1. PWA — не мертвая технология. Особенно для нишевых кейсов, где важны оффлайн-работа и скорость.

2. AI-ассистенты уже полезны в production. Но не как silver bullet, а как “умный copilot” для рутинных задач.

3. Open-source — лучшая документация. Вместо README.md я приложил полный workflow с автоапдейтами.

Если ваш проект похож на мой — попробуйте собрать минимальную версию за weekend. Мой рецепт: Next.js для SSR, Vercel для хостинга и Claude для boilerplate-кода. А дальше — итерации по реальным пользователям (даже если это только вы).

Попробуй сам: DigitalOcean — $200 кредитов для новых пользователей.

Источник: https://26worldcup.github.io