Application displays detailed data about Ekstraklasa (polish footall league) matches: results, timeline, statistics and lineups.
The app is using the . Due to CORS policy of Sportradar's API, the project cannot be deployed and hosted. I'm aware that I could work on some intermediary backend service to make it work, yet it's outside of scope of this project.
On the main page the user is able to:
- see table with all matches from the selected season. User is provided with information about team names, match date, final scores and the stadium name
- quickly identified who won and lost the match or whether the match ended with tie
- if the match was finished (ergo not postponed or closed), the user is able to click on the match he/she is interested in and see it's details
After being redirected to the match details, the user is able to:
- see the match summary (scores, half-scores, names of the players who scored goals)
- see the match highlights in a form of a vertical timeline. After clicking (on mobile devices) or hovering (on wider screens) user is provided with information on the players who performed the highlighted events (scores, yellow/red cards, substitutions)
- see the match statistics for both of the teams, presented in a way that make it easy to compare the teams results
- see the teams lineups, where are provided information on field players and substitute players. If the player was engaged in important event (goal score, obtaning card, being substituted in/out), this information is also visible.
The app design is fully responsive and adjusted to mobile devices
- migrating state management to React Query
- code cleaning and refactoring (also in terms of accessibility)
- React, TypeScript, TailwindCSS, MUI, React-router-dom
Because the app cannot be deployed, I decided to record a short video, presenting how the app looks and behaves. It's available here:
football-demo.mp4
-
Desktop
Home
Highlights
Statistics
Lineups
-
Mobile
Home
Highlights
Statistics
Lineups
\