HackathonSvelteKit, TypeScript, TailwindCSS

A Site for Browsing Sports Events

A calendar and search for sports events with multi-step dynamic filtering.

A Site for Browsing Sports Events

The Problem

A case from the FSP hackaton: build a showcase of sports events you can actually navigate by — searching tournaments by sport, age group, or region, rather than scrolling through everything hoping to stumble on the right one.

The core problem was that there’s no unified format for event registration, which meant the required data (age, gender, weight class, roster, etc.) had to be parsed out. Those dynamic filters then had to be carried over to the client.

Implementation

You can read more about the parser in the project’s repository. I’ll talk about the frontend.

The calendar on the left sets the date, and the expanded filter on the right covers sport, team, competition type, gender and age group, discipline, country/region/city, participant-count range, and date range. All filter parameters are collected into a query string and sent to the backend in a single request — event cards update as the user narrows the selection.

Event calendar and filter

I worked on the frontend in SvelteKit: event cards, the filter form, the calendar, and authentication.

Login

Registration

The name Stasik doesn’t literally mean anything. Sometimes meta-irony goes a bit too far.

How to Run

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