Bracket Champions 26/27
Interactive simulator and prediction pool for the UEFA Champions League 26/27. Predict match results in the 36-club league phase across 8 matchdays, compete with friends, and follow the live standings.
Problem
The new UEFA Champions League format replaced traditional groups with a single 36-club league table and 8 matchdays (144 matches). Fans face a complex Swiss-style system where working out the direct round of 16 cutoff (top 8), the knockout playoffs (9-24), and official UEFA tie-breaking criteria is impossible to calculate by hand.
Solution
A high-performance progressive web app (PWA) built with Lit and TypeScript that lets users forecast scores across all 8 matchdays, automatically recalculates the single 36-team standings using official UEFA tie-breaking criteria, projects playoff and round of 16 matchups, and enables private multiplayer prediction leagues with real-time scoring.
Results
36
Clubs
8
Matchdays
144
Matches
1
Single table
Tech stack
- Lit (Web Components)
- TypeScript
- Vite
- Firebase Data Connect
- PostgreSQL
- Vite PWA Plugin
- Native CSS with variables
Bracket Champions is a comprehensive interactive web platform for tracking and predicting the UEFA Champions League under UEFA’s new league-phase format. The project was created to eliminate fan confusion following the removal of traditional group stages and the introduction of the unified 36-club Swiss system.
Core Features
League Phase Simulator (36 Clubs)
The core of the application lets fans predict scores across all 8 matchdays (18 matches per matchday, 144 in total). With every entered score, the engine instantly recalculates the entire unified standings, strictly applying UEFA’s official tie-breaking rules (goal difference, goals scored, away goals, and total wins).
Knockout & Playoff Projections
The system visually segments the standings into three critical zones:
- Positions 1 to 8: Direct qualification for the round of 16 as seeded teams.
- Positions 9 to 24: Two-legged knockout phase play-offs (positions 9-16 seeded against 17-24).
- Positions 25 to 36: Direct elimination from European competitions.
From these standings, the app projects the subsequent knockout bracket leading up to the final.
Private Pools & Multiplayer Leagues
Users can spin up private leagues in seconds and invite friends via direct link or code. The engine distributes points based on prediction precision (5 points for an exact score, 3 for correct goal difference, and 2 for picking the winning outcome or draw) and updates group rankings as live matches conclude.
Tournament Resources
The platform also includes a complete sports reference suite:
- Full 144-match official schedule with kick-off dates, times, TV broadcasters, and host stadiums.
- 36-club database featuring full squad rosters, official crests, and player profiles.
- Stadium guide with stadium details and coverage of the final venue (Estadio Metropolitano in Madrid).
- Installable PWA experience delivering lightning-fast mobile and desktop performance without requiring app store downloads.
Gallery
What I learned
- → UEFA tie-breaking algorithms: precise implementation of criteria for 36-club Swiss tables (points, goal difference, goals scored, away goals, wins).
- → Reactive Web Components with Lit: modular, ultra-lightweight architecture with sub-millisecond rendering and PWA offline capability.
- → Multiplayer prediction engine: real-time computation of weighted scores (exact score, goal difference, match outcome) within private leagues.
- → Sports data visualization: interactive design for match schedules, club rosters, and responsive knockout brackets.
Architecture · technical leadership · .NET
Hiring a .NET Software Architect or Tech Lead?
Open to full-time employment in software architecture or technical leadership on .NET products. Tell me about the role and the team: I reply within 24–48 h.