MB.
All work

Calendar Events

Web App · React · Sports Dashboard · Event Calendar · Streaming Guide · TV Schedule · PWA

Calendar Events
Calendar Events is a web app designed as a personal dashboard to follow sports events, calendars, standings, TV schedules, and streaming content. The app was created to gather into a single experience sections that would normally be spread across different websites, sports apps, TV guides, and platforms. The Home screen aggregates relevant upcoming events from the main sections and presents them with premium cards, live countdowns, highlighting the very next event, and an “Tonight on TV” card dedicated to evening programs. The goal is to offer a quick overview of what's about to happen, what to watch, and which appointments deserve attention. The sports sections are dedicated to Jannik Sinner, Juventus, Formula 1, and MotoGP. For Jannik Sinner, the app shows a synthetic profile, results, and tournament schedule; for Juventus, match calendar and Serie A standings; for Formula 1, GP calendar, driver and constructor standings; for MotoGP, weekend calendar, rider and constructor standings. Each section is designed to make relevant information accessible in an organized and visual way. The Calendar view aggregates Juventus, F1, and MotoGP in two modes: month-style, like Google Calendar, and a chronological agenda grouped by day. Clickable sport filters allow quickly including or excluding Juventus, Formula 1, and MotoGP, with the state persisted in the browser. The synchronization button allows real-time data updates along with the Home screen. The Streaming section adds a media dimension to the app. It includes a tab for evening TV, with a real schedule organized by channel families, and a “New Releases” tab transformed into an Italy Catalog. The catalog uses TMDB data to show movies and series available in Italy, with filters for provider, type, genre, sorting, and time window. The main providers managed by the UI are Netflix, Prime Video, Disney+, and HBO Max. The streaming content detail shows enriched information such as genres, director or creators, runtime or seasons, main cast, YouTube trailer when available, Italian providers with logos and links to availability via JustWatch. The UI also displays a summary of active filters and the effective window, making it clearer why a list might be extensive, reduced, or empty. From a user experience perspective, Calendar Events aims for a premium sports/media identity: event cards with a gold border, hover lift, soft glow, next event highlight, countdown updated every second, light/dark theme, and responsive layout. The interface is designed to be usable on both desktop and mobile, with attention to content legibility and quick access. The project represents a personal dashboard for sports passions and content to watch: it combines live events, calendars, standings, schedules, and streaming in one app, with external data integrations, a refined UI, and an aggregation logic designed to reduce fragmentation across different sources.
Year
2026
Stack
ReactTypeScriptViteTailwind CSSshadcn/uiRadix UIReact QueryReact RouterSupabase Edge FunctionsTMDB APIVitestPlaywrightPWA