Mundial 2026
Full stack web application that recreates the 2026 Football World Cup. The Angular frontend consumes a NestJS backend that acts as a BFF (Backend For Frontend) over a data API with SQLite. It was a team project in which each member developed a feature.
My role
My contribution was the Match Details feature, which lists and displays every match of the simulated World Cup with filtering by tournament stage. The feature is built on a layered architecture that separates the frontend (Angular) from the BFF (NestJS) and the data API, and includes both the backend endpoint and the interface component.
- Endpoint in the BFF (NestJS + TypeScript): design and implementation of GET /world-cup/matches, with a modular architecture (controller → service) that separates HTTP transport from business logic and from consuming the internal World Cup API.
- Data transformation (BFF pattern): the service consumes the World Cup API and transforms the raw data into a view-ready model — it builds the scoreline, distinguishes regular time / extra time / penalties, summarizes the goals (player and minute) and the cards per team, and exposes the player of the match.
- Filtering by stage and counts: dynamic filters by phase (group stage, round of 32, round of 16, quarterfinals, semifinals, third place and final), with a match count per stage and totals of played and pending matches.
- Frontend in Angular: match screen component with state handling (loading, error, "no simulation" and empty), match cards and visual enrichment with each team's flag.
- Validation and error handling: query param validation with class-validator / class-transformer (normalization of lang and stage) and centralized mapping of API errors to uniform business codes (WC_MATCHES_UNAVAILABLE → 409, WC_MATCHES_FETCH_FAILED → 502).
Key features
- Complete listing of the simulated World Cup matches, with scoreline, resolution type (regular time, extra time or penalties) and winner.
- Filtering by tournament stage (from the group stage to the final), with a match count per phase and totals of played / pending.
- Detail of each match: goal summary (player and minute), yellow and red cards per team and player of the match.
- Clear interface states: loading, error, "there's no simulated World Cup yet" and "no matches in this phase".
- Uniform responses thanks to centralized error handling with business codes.
- Per-team visual identity, with each team's flag on the cards.
Impact
By applying the BFF pattern, the frontend receives data already processed and ready to render: all the logic for building the scoreline, goal and card summaries, and filtering by stage lives in the backend, which keeps the Angular component simple and focused on presentation. Input validation and centralized error mapping guarantee consistent responses even when the data API doesn't have a simulated tournament yet, offering the user a clear and complete view of the World Cup journey.
Technologies
| Technology | Use / Implementation |
|---|---|
| Angular | Match screen component: filters by stage, cards and UI state handling. |
| NestJS | BFF endpoint (controller + service) that consumes and transforms the data from the World Cup API. |
| TypeScript | End-to-end static typing (DTOs and match interfaces). |
| RxJS | Asynchronous handling of the HTTP calls in Angular. |
| class-validator + class-transformer | Validation and normalization of the endpoint's query params. |
| SQLite + TypeORM | Persistence of the tournament data in the data API consumed by the BFF. |
| Swagger / OpenAPI | Documentation of the BFF endpoint. |