Bracket Champions 26/27
Simulador interactivo y porra de la UEFA Champions League 26/27 adaptado al nuevo formato: 36 clubes en una sola tabla, 8 jornadas y 144 partidos. Predice marcadores, compite con amigos y sigue la clasificación en directo.
Problema
El nuevo formato de la Champions League sustituye la tradicional fase de grupos por una tabla única de 36 clubes y 8 jornadas (144 partidos). Los aficionados se encuentran con un sistema suizo complejo donde calcular el corte de octavos (1-8), los playoffs (9-24) y los criterios de desempate oficiales de la UEFA resulta imposible de computar manualmente.
Solución
Una aplicación web progresiva (PWA) de alto rendimiento construida con Lit y TypeScript que permite pronosticar los marcadores de las 8 jornadas, calcula automáticamente la tabla unificada aplicando los criterios oficiales de desempate UEFA, proyecta los cruces de playoffs y octavos, y permite crear porras privadas entre amigos con puntuación inteligente y clasificaciones en tiempo real.
Resultados
36
Clubes
8
Jornadas
144
Partidos
1
Tabla única
Stack tecnológico
- Lit (Web Components)
- TypeScript
- Vite
- Firebase Data Connect
- PostgreSQL
- Vite PWA Plugin
- CSS nativo con variables
Bracket Champions es una plataforma interactiva completa para seguir y predecir la UEFA Champions League bajo el nuevo formato de fase liga introducido por la UEFA. El proyecto nació para resolver la complejidad del nuevo formato ante la desaparición de los grupos tradicionales de 4 selecciones y la llegada del sistema suizo de 36 clubes en una clasificación unificada.
Funcionalidades principales
Simulador de Fase Liga (36 clubes)
El núcleo de la plataforma permite pronosticar los marcadores de las 8 jornadas (18 partidos por jornada, 144 en total). Con cada marcador introducido, el motor recalcula al instante la tabla clasificatoria completa aplicando con rigor los criterios oficiales de desempate de la UEFA (diferencia de goles, goles marcados, goles a domicilio y número de victorias).
Proyección de Eliminatorias y Playoffs
El sistema segmenta visualmente la tabla en las tres zonas críticas:
- Puestos 1 al 8: Clasificación directa a octavos de final con condición de cabezas de serie.
- Puestos 9 al 24: Cruces de playoff a ida y vuelta (los puestos 9-16 como cabezas de serie frente a los puestos 17-24).
- Puestos 25 al 36: Eliminación directa de la competición europea.
A partir de estas posiciones, la aplicación genera el cuadro eliminatorio proyectado hacia la gran final.
Porras Privadas y Modo Multijugador
Permite a cualquier usuario crear ligas privadas en segundos y compartirlas mediante enlace o código de invitación. El sistema reparte puntos según la precisión del pronóstico (5 puntos por resultado exacto, 3 por diferencia de goles acertada y 2 por acertar el ganador o empate) y actualiza el ranking del grupo en tiempo real.
Recursos del torneo
El portal integra además una suite de consulta deportiva completa:
- Calendario oficial de 144 partidos con fechas, horarios, canales de televisión y sedes.
- Base de datos de 36 clubes con fichas de plantilla, escudos y estadísticas de los jugadores.
- Guía de estadios con información detallada de cada sede y del estadio de la final (Estadio Metropolitano de Madrid).
- Experiencia PWA instalable que funciona con fluidez en dispositivos móviles y de escritorio sin requerir descargas de tiendas de apps.
Galería
Qué aprendí
- → Algoritmo de desempate UEFA: implementación precisa de los criterios para tablas suizas de 36 clubes (puntos, DG, goles a favor, victorias).
- → Web Components reactivos con Lit: arquitectura modular y ultraligera con renderizado instantáneo y soporte offline PWA.
- → Motor de porra multijugador: cálculo en tiempo real de puntuaciones ponderadas (resultado exacto, diferencia y signo) en ligas privadas.
- → Visualización de datos deportivos: diseño interactivo de calendarios, fichas de plantillas y cuadro eliminatorio responsive.