Mundial 2026

Mi rol

Mi aporte fue la feature de Detalles de Partidos, que lista y muestra todos los partidos del Mundial simulado con filtrado por etapa del torneo. La feature se apoya en una arquitectura en capas que separa el frontend (Angular) del BFF (NestJS) y de la API de datos, e incluye tanto el endpoint del backend como el componente de la interfaz.

• Endpoint en el BFF (NestJS + TypeScript): diseño e implementación de GET /world-cup/matches, con arquitectura por módulos (controlador → servicio) que separa el transporte HTTP de la lógica de negocio y del consumo de la API interna del Mundial.
• Transformación de datos (patrón BFF): el servicio consume la World Cup API y transforma los datos crudos en un modelo listo para la vista — arma el marcador, distingue tiempo regular / prórroga / penales, resume los goles (jugador y minuto) y las tarjetas por equipo, y expone el jugador del partido.
• Filtrado por etapa y conteos: filtros dinámicos por fase (fase de grupos, dieciseisavos, octavos, cuartos, semifinales, tercer puesto y final), con conteo de partidos por etapa y totales de jugados y pendientes.
• Frontend en Angular: componente de la pantalla de partidos con manejo de estados (carga, error, "sin simulación" y vacío), tarjetas de partido y enriquecimiento visual con las banderas de cada selección.
• Validación y manejo de errores: validación de los query params con class-validator / class-transformer (normalización de lang y stage) y mapeo centralizado de los errores de la API a códigos de negocio uniformes (WC_MATCHES_UNAVAILABLE → 409, WC_MATCHES_FETCH_FAILED → 502).

Funcionalidades clave

• Listado completo de los partidos del Mundial simulado, con marcador, tipo de resolución (tiempo regular, prórroga o penales) y ganador.
• Filtrado por etapa del torneo (desde la fase de grupos hasta la final), con conteo de partidos por fase y totales de jugados / pendientes.
• Detalle de cada partido: resumen de goles (jugador y minuto), tarjetas amarillas y rojas por equipo y jugador destacado del partido.
• Estados de interfaz claros: carga, error, "todavía no hay un Mundial simulado" y "sin partidos en esta fase".
• Respuestas uniformes gracias a un manejo de errores centralizado con códigos de negocio.
• Identidad visual por selección, con la bandera de cada equipo en las tarjetas.

Impacto logrado

Aplicando el patrón BFF, el frontend recibe los datos ya procesados y listos para renderizar: toda la lógica de armado del marcador, resúmenes de goles y tarjetas, y el filtrado por etapa vive en el backend, lo que mantiene el componente Angular simple y enfocado en la presentación. La validación de la entrada y el mapeo centralizado de errores garantizan respuestas consistentes incluso cuando la API de datos no tiene todavía un torneo simulado, ofreciendo al usuario una vista clara y completa del recorrido del Mundial.

Tecnologías