Built against
a frozen contract.
Real endpoints dropped in.
Six tabsOne contractZero rewrites
Scroll ↓

via OPTEN AG · Jan — Mar 2026

Sports League Production Platform.

Client
via OPTEN AG
Role
Frontend engineering
Stack
Angular · ASP.NET · TypeScript
Timeline
Jan — Mar 2026

A TV production workflow tool for a national sports league: dashboard overview and match detail views with six spec-aligned tabs, built against an agreed JSON data contract so frontend and backend could move in parallel. Plus admin UI refinement on legacy ASP.NET.

A production crew, not an audience

This platform is not fan-facing. Its users are the people who put matches on television: the crew planning cameras, feeds, commentary positions and delivery windows for a national league’s season. That audience changes every design decision — density over decoration, everything scannable at a glance, and no interaction that costs an extra click on a match day.

Two levels, six tabs

The information architecture settled into two levels. A dashboard gives the season-wide overview: what is scheduled, what is at risk, what needs a decision today. A match detail view holds six tabs, each aligned to a section of the client’s production spec, so the crew navigates the tool with the same vocabulary they already use in their documents. The tabs share one layout skeleton, which keeps the density consistent and the code small.

The match detail view — Zusatzproduktionen tab, with the crew’s own vocabulary as navigation
The match detail view — Zusatzproduktionen tab, with the crew’s own vocabulary as navigation

Shipping in parallel with a contract

The backend did not exist yet, and waiting for it would have cost the whole timeline. So the first deliverable was not a screen — it was an agreed JSON data contract, negotiated with the backend team and frozen before either side started. I built every view against mocks that matched that shape exactly; when the real endpoints arrived, they dropped in without reworking a single view. Three months from kickoff to a frontend the crew could use.

Drag the diagram sideways to read it

One agreed JSON shape let frontend and backend build simultaneously against the same truth

The legacy half

Alongside the new Angular frontend sat an existing ASP.NET admin interface — functional, and visually a decade behind the product it now belonged to. I refined it in place rather than proposing a rewrite nobody had budget for: tightened spacing and hierarchy, aligned controls to the new design language, and fixed the interactions that made routine admin work slower than it needed to be. Unglamorous work, and the fastest available improvement to the crew’s actual day.

Frontend delivered against the contract — real endpoints dropped in without reworking the views.