Work / Front-end / Retina · GAME TV
The same interface, rebuilt in Next.js
Project 10 of 28 in the archive 01 of 08 in Front-end development See the whole discipline ↗
The four screens
The sequence editor with its timeline, the sequence list, the stores and devices list, and the permissions matrix for the two user roles.
These are the four screens that carry the daily work with Retina: assembling what goes on air, knowing what is scheduled, knowing on which store and which screen, and deciding who may touch what.
How it is built
Next.js, React and TypeScript, with Tailwind CSS as the styling layer.
The semantic tokens of the original design system are carried into the Tailwind theme: colour, type and spacing come from a single place, just as they did in the product.
Live
The rebuild is deployed and the repository is public: it can be used, and it can be read.
Open it full size: the editor, the lists and the permissions matrix
Opens in a new tab. The data you will see is invented.
The repository: View the code on GitHub ↗
Where it comes from
This is the front-end face of a two-sided project: the design of the original product —the platform and its sequence editor— is told in the GAME TV · Retina product design case.
I designed and built the original product at GAME España; this rebuild is my own work, with invented data and no company code or assets.
Next in Front-end development
SKÅL Madrid · The site in Angular
