Cover story · p.5
The team's public site rebuilt as an onboard broadcast: video under scanlines, readouts in the corners, a grid walk of driver posters and a calendar that counts down to the next round. Behind it, on its own hostname, the console that edits every word of it without a deploy.
A Formula 4 team's public site and the console that edits it, in one deployment
№By the numbersp.4
01Overviewp.5
The first version was a set of hand-built pages reading a checked-in JSON file. Changing a headline meant a commit and a deploy, and only somebody with the repository could do it. This rebuild keeps the F4 design language, racing yellow on carbon, and moves every word into Postgres behind a console.
The home page opens on the team's onboard video under scanlines and grain, framed by the readouts a broadcast puts in the corners. The three words of the name wipe in one at a time, the season's numbers count up along the baseline, and the drivers arrive as a grid walk: on a wide screen the section pins itself and the posters travel sideways as the page scrolls.
The console is not a rewrite. Every screen, the media library, the rich-text editor, the role model and the S3 pipeline are ported from the CTR Unified platform, so they arrive already working. What is new is the branding, the single-site shape, and the wiring from those tables into this site's own pages.
Sticker sheet peel & apply
Video at full strength under scanlines and grain, corner readouts, the name wiped in word by word, numbers counting up.
Driver posters pinned and travelling sideways with the scroll; a snapping row on a phone and under reduced motion.
The calendar and the home page read the same published season, so they can never disagree about the next round.
The Host header decides: the admin hostname gets the console at its own root, every other host gets the site and nothing else.
Folders on Neon object storage, browser-side WebP conversion, presigned PUTs for video, and a usage scan before any delete.
Saving an article clears the index, the home band, the sitemap and both the new and the old address after a rename.
02Two front doorsp.7
One deployment, one process, one database connection. The middleware reads the Host header and mounts the console at the admin hostname's root; the mount folder itself 404s on every host, so the public domain carries no admin surface at all.
chennaiturboriders.in
Server components reading one memoised query per request, the F4 design kept, every page cached for a minute and cleared the moment its content changes.
admin.chennaiturboriders.in
A monochrome tool palette in IBM Plex Sans, so the tool never reads as part of the thing it edits. One bright colour: the yellow of the action that writes.
Shared by both
03Under the hoodp.9
Three chains the console runs many times a week: publishing an article, uploading a photograph, and keeping an address alive after a rename.
From the editor to the home page
TipTap with headings, lists, links, images from the media picker, normalised to a bounded document before it is stored.
Category, author and tags: the two columns this deployment added to the shared article schema so the pages could keep their design.
The console draws the article with the same shell the public page uses, so what is previewed is what ships.
Every table has one server-only repository; a client import of it is a build error, not a leaked connection string.
The news index, the home page's latest band, the sitemap, and the article's own address, old and new.
From a file to a URL on a page
Photographs and logos become WebP and are capped before they leave the machine, so a few hundred kilobytes arrive, not a camera original.
Video goes straight to the bucket with a presigned request; the serverless upload route refuses bodies over a few megabytes by design.
Every object this site writes sits under MEDIA_PREFIX, which is what keeps the library from listing another site's uploads.
Public objects carry max-age=31536000, immutable, straight from Neon object storage or a CDN in front of AWS.
Six queries, however many keys: everything that points at a file is listed in the dialog, because a delete would otherwise surface months later as a missing picture.
One table for every URL the site publishes
PRIMARY KEY (site, entity type, slug): an address belongs to exactly one thing, so two drivers can never hold the same URL.
A partial unique index over (entity type, entity id) WHERE is_current means a thing has one current slug and any number of former ones.
A rename keeps the previous slug as a redirect, resolved by one indexed lookup instead of a JSONB scan.
After a rename the stale page sits under the address that is now a redirect, so the old path is revalidated along with the new.
04Key screensp.13
The full home page: the video hero, the tagline marquee, the team band, the grid walk, the car's specifications, the calendar with its countdown, the latest news and the partner marquee. Everything on it is a row in the console.
On a wide screen the drivers section pins itself and the posters travel sideways as the page is scrolled down, the pit lane seen from the pit wall. The distance is measured, not guessed: the track's real width less the window's, so the last poster stops flush with the edge.
The season's rounds with their circuits, and a next-race panel whose countdown rolls each digit like a departures board. The home page reads the same published season, so the two can never disagree about which round is next.
Each driver has a poster, a profile and highlights, edited on one console screen and drawn on the drivers page, the home reel and their own address, which survives a rename.
The tool palette is deliberately not the site's: warm greys one step apart, hairline separation, IBM Plex Sans, and a single yellow button for the action that writes to the database.
Folders, tiles, an upload zone and a breadcrumb over one prefix of the bucket. Deleting asks the usage scan first and lists every page that would lose a picture.
05Tracksidep.19
The site on a phone, and the console too. A Capacitor shell wraps the same site for Android.
06Stack and rulesp.21
07More screensp.23
Advertisement · back cover
