Engineering · 2026
A TV production workflow tool and admin apps for a national sports league — from approved Figma screens to working frontend, built against an agreed data contract.
Context
The league runs a TV production workflow: for every match, production and editorial staff coordinate broadcast data, additional productions, documents and contacts. I built the frontend for that tool, through the agency, working from the approved Figma specs.
The work came in two parts — a new production tool, and maintenance on the existing admin applications.
The production tool
I built a Dashboard Overview and a Match Details view for the production workflow. Match Details is organised into dedicated tabs — Basisdaten, Produktion, Redaktion, Zusatzproduktionen, Dokumente and Kontakte — each matched closely to the latest Figma frames, and laid out responsively for desktop, tablet and mobile.
Because the backend was being built in parallel, the frontend was built against an agreed JSON data contract for the views — typed TypeScript interfaces that mirror the contract, with mocked responses standing in for the live API. That let frontend and backend move at the same time instead of waiting on each other, and when the real endpoints landed they dropped in behind the same types without reworking the views.
The tabs are lazy: each one loads its own component and data only when opened, so a heavy Match Details view doesn’t pay for tabs the user never looks at. The responsive layout is driven from shared breakpoints rather than per-component media queries, so desktop, tablet and mobile stay consistent across every tab.
The admin apps
On the existing admin applications — ASP.NET with Angular — I refined the table layout so it read correctly against real backend data with consistent defaults. I also tightened the interaction details: adjusting icon ripple effects, removing misleading warning colours from delete actions, and fixing a layout inconsistency in the upload buttons.
How I work
This was legacy Angular and a codebase I hadn’t written. I lean on AI as a working partner to navigate unfamiliar code quickly — mapping the structure, drafting components, and cross-checking the data contract against the views — so I spend my attention on the design fidelity and the edge cases rather than on orientation.
The aim is the same every time: take the approved design and turn it into frontend that holds up against real data, from the Figma frame to a merged pull request.