Задача

Кейс от ФСП: собрать витрину спортивных мероприятий, по которой реально можно ориентироваться — искать турниры по виду спорта, возрастной группе, региону, а не листать всё подряд в надежде наткнуться на нужное.

Основная проблема состояла в том, что нет единого формата для регистрации мероприятий, что означает потребность в парсере необходимых данных (возраст, пол, весовая категория, состав и т.д.). Далее эти динамические фильтры необходимо перенести на клиент.

Реализация

Подробнее про парсер можно почитать в репозитории проекта. Я же расскажу про фронтенд.

Календарь слева задаёт дату, а справа — развёрнутый фильтр: вид спорта, команда, тип соревнования, пол и возрастная группа, дисциплина, страна/регион/город, диапазон числа участников и диапазон дат. Все параметры фильтра собираются в query-строку и уходят на бэкенд одним запросом — карточки мероприятий обновляются по мере того, как пользователь сужает выборку.

Я занимался фронтендом на SvelteKit: карточки мероприятий, форма фильтра, календарь и авторизация.

Название Стасик буквально ничего не обозначает. Иногда метаирония заходит слишком далеко.

Запуск

git clone https://github.com/InTeam-Russia/hack-fsp-nov2024-frontend
cd hack-fsp-nov2024-frontend
yarn
yarn dev