Case Study - A Pocket Guide to Southport Air Show, Built in an Afternoon

Overview

Southport Air Show brings a couple of hundred thousand people onto a few miles of seafront over one weekend. The display schedule is published as a PDF and a poster — neither of which is much use when you're stood on wet sand, the wind is up, and you want to know whether the thing overhead is the Hawk T1 or whether you've got half an hour before the Red Arrows.

The other problem is signal. Put that many phones on one beach and the network gives up. Anything that needs to load on the day won't.

So we built southportairshowtimes.co.uk — an unofficial pocket guide that answers one question, what's flying right now, and keeps answering it with no connection at all. Start to finish it took an afternoon.

The Constraints Shaped the Build

It has to work with no signal. A service worker caches the page, the fonts and the icon on first visit, so once it's been opened at home it opens on the beach regardless. When the phone drops offline a bar appears at the top confirming the schedule is still live — so nobody is left wondering whether they're looking at a stale page.

It has to be readable one-handed, outdoors. Dark palette, large type, a single "on now / up next" panel at the top with a countdown. Everything else — parking, where to stand, what to bring, accessibility, what happens if a display is cancelled — is collapsed underneath.

Times slip, and the fix has to be possible from a phone. The running order and a notice banner live in two small JSON files fetched on load, every 60 seconds while open, and whenever the phone comes back online. Editing a time is a one-line commit from the GitHub mobile app; every open page picks it up within a minute, with no redeploy of the app itself and no service worker cache to bust. The two files are fetched independently, so a bad edit to one leaves the other working, and the copy baked into the HTML is the offline fallback.

Details That Earn Their Place

Time zones. Every slot is stored as an absolute instant in UK time, then formatted in the phone's own zone. If a visitor's phone isn't on UK time, a banner offers a toggle between device time and Southport ground time — a small thing that stops a whole category of confusion.

Install prompt that knows the device. iOS Safari gets the Share-icon instruction, iOS Chrome gets told to reopen in Safari, Android and desktop Chrome get a real install button wired to the browser's own prompt. It appears once, then never again.

Preview mode. A ?t= parameter fakes the clock, so the live panel could be tested and demoed weeks before the show.

Cookieless analytics. Vercel Web Analytics via a plain script tag, no npm package, no cookie banner. The service worker skips it deliberately so beacons are never replayed from cache.

Technical Implementation

The whole thing is one index.html — markup, styles and script in a single file — plus sw.js, a web app manifest, an SVG icon and the two JSON files. No framework, no build step, no dependencies beyond Google Fonts, which degrade to system faces if they haven't loaded.

That isn't minimalism for its own sake. For a site whose entire job is to open instantly and keep working with no network, every dependency is a thing that can fail on a beach. A build step would have added time to a project measured in hours and given nothing back.

Deployment is a static drop on Vercel. Total payload is a few tens of kilobytes.

Why We Built It

Partly because we wanted the thing to exist and go to the air show ourselves. Partly because it's a good demonstration of something we believe: the right tool for a job is often much smaller than the tool you'd reach for by default.

Not every project needs a framework, a CMS and a fortnight. Some need one focused afternoon and a very clear idea of the one question the user is actually asking.

What we did