Предыстория

Я люблю футбол. В детстве и будучи подростком ходил на секции по футболу, играл в компьютерный футбол (FIFA, PES) и смотрел футбольные матчи по телевизору и на стадионе. Этот вид спорта дарит мне весь спектр эмоций: радость от победы твоей команды в финальном матче турнира и разочарование после ее вылета из Лиги чемпионов, чувство сплоченности и всеобщей радости, когда собираются сборные из всех стран мира для участия в крупном турнире: чемпионате мира по футболу.

Для меня это событие - праздник, как Новый год или день рождения, только происходит он раз в четыре года😄 Пока ищу работу, я подумал, что будет интересной идеей совместить создание проекта про ЧМ и развитие навыков.

Начало работы

Я решил сделать fullstack-проект полностью и бэк, и фронт, выбрал для себя в качестве нового на бэке - NestJS, Prisma и PostgreSQL, а на фронте - React, TypeScript и Tailwind CSS. Собрал план разработки функционала: базовая идея приложения - возможность в рамках чемпионата мира следить за расписанием матчей, добавлять их в избранное, делать прогнозы - в общем такой личный дневник зрителя чемпионата. Codex помогал писать код, а архитектуру, требования и итоговые решения контролировал я. Го подробнее разбирать функционал.

Матчи

Встал вопрос: откуда брать матчи, ведь в статике их держать ненадежно и сложно поддерживать, потому что в процессе чемпионата пришлось бы постоянно их обновлять. Выбор пал на API https://www.football-data.org/documentation/quickstart, во-первых бесплатно😊 ну и в целом содержит весь функционал, который мне нужен: получение списка матчей по ЧМ, получение конкретного матча и т.д.

Изначальная идея в том, что пользователь всегда делает запрос по API и получает актуальные матчи, но тут в процессе работы у меня возникла проблема: запросы быстро упираются в лимит API. Поэтому я сделал получение данных из моего бэкенда, в котором происходит периодическая синхронизация БД с football-data.org.

Матчи получаю через запросы по RTK Query и отображаю их с пагинацией с возможностью выбора количества матчей на странице. Для удобства сделаны фильтры матчей по команде (можно по названию страны либо по клику на ее флаг), дате, группе, статусу и по избранным матчам. На матч можно кликнуть, и на странице матча уже сделать прогноз либо добавить в избранное - все это отобразится в профиле.

Профиль

На сайте есть возможность регистрации и аутентификации с использованием JWT - это нужно для того, чтобы добавлять интересные матчи в избранное, ставить прогнозы и участвовать в рейтинге зрителей😎 Одна из идей, которая пришла в процессе - это добавить элементы геймификации на сайт и я сделал систему пользовательского рейтинга.

У пользователя есть уровень, достижения, а также возможность занимать почетное место в таблице на странице рейтинга. В профиле указаны все прогнозы и избранные матчи, а также текущий прогресс.

Еще плюшки

Думали, это все? Ничего подобного, так как у меня был опыт создания мультиязычного сайта, то я решил запилить и сюда поддержку двух языков: русский и английский. Сделал через библиотеку react-intl, создал конфиги переводов и в основном тут переводил через ИИ, он очень хорошо решает такие монотонные задачи, как перевод большого объема текста и встраивание в код проекта. Добавлю, что по API матчи доступны только на английском языке, поэтому дополнительно на бэкенде сделал маппинг из английского в русский.

Я решил также попробовать поюзать Tailwind CSS, тут у меня смешанные чувства: с одной стороны неудобно запоминать все названия классов для стилей, а с другой стороны он дает удобную кастомизацию, с помощью которой довольно быстро получилось сделать следующую фичу: возможность переключения темы со светлой на темную, думаю, есть кому это будет актуально😊

Деплой

Я деплоил с нуля первый раз и тут мне ИИ подсказал делать через Render + Cloudflare, я согласился из-за простоты: все быстро завелось + бюджетно по ресурсам.

Сайт тут - тык (с vpn), дальше буду смотреть в процессе чемпионата, который, кстати, стартует уже 11 июня, ну и править возникшие баги. Всем добра:)