Jaylan BallouDeveloper & Data Analyst
Résumé
WorkRésuméContactUpdated Oct 15, 2026

Case study N° 02 · Sports

Titan Stats

Keyboard-first live stat entry and broadcast graphics for a high school football broadcast.

By Jaylan Ballou·Solo: design, build, deploy·Live since Sep 2026·1 min read

Try the demo

Sample data, runs in your browser

titanstats.app
Booth box-score refresh
4s
Updates in place without reloading, and shows RECONNECTING instead of going blank.
Fed by one play log
10pages
Overlay, booth box score, leaders and the public site read the same records.
Stored twice
0stats
Every number is derived from the log, so undo and edit are always correct.
Titancast game page after a final: last down, ball spot and drive summary over a live field graphic, with the final and recent plays
Fig. 1|Titancast, the public game page. Down, ball spot and the drive summary all come from the same log as the broadcast overlay.

The problem

The Port Arthur Memorial Titans broadcast needed live stats on screen, but there was one person in the press box to log every play. Generic stat apps are slow and click-heavy, and they break when the stadium Wi-Fi does.

What I built

A single-operator tool that logs a full game from the keyboard and feeds the broadcast overlay, a live box score for the broadcasters, leaders pages, and the public site at titanstats.app.

  • A command language made of keystrokes. C 81 18 T ⏎ logs a completed pass to #81 for 18 yards and a touchdown. The passer is implied by the pinned QB, and focus moves on as each field resolves.
  • Booth box score that refreshes every 4 seconds in place without reloading, and shows RECONNECTING rather than going blank.
  • Generated graphics: social cards, QR codes and a splash image rendered with resvg.

The hard part

Records are the only stored state. Every number on screen is derived. Stat lines, team totals and the feed are all recomputed from an append-only log of records. Nothing is stored twice, so undo and edit are always correct. A completed pass is one record with two credits, so the QB’s and receiver’s yards can never drift apart.

The typed path and the click path dispatch the same reducer actions, and a test asserts that both produce identical records.

Offline first

The browser’s local data is the source of truth during a game. Cloudflare D1 is only a published copy, so a dropped connection never stops logging.

Result

Used on real Friday-night broadcasts in the 2026 season.

Figures

Press-box stat entry screen in the demo: score and clock, the pinned quarterback, the command line, quick-entry buttons and the play feed
  1. The quarterback is pinnedSo a completed pass only needs the receiver, the yards and a result.
  2. Typing and clicking agreeC 81 18 T ⏎ dispatches the same action as the buttons, and a test asserts the records match.
  3. One record, two creditsPasser and receiver yards come from the same entry, so they can never drift apart.
  4. The feed is the logEach card is one record. Undo pops it, and every total recomputes.
Fig. 2|The press-box tracker in the demo, on its sample roster. One typed line logs a whole play.
titanstats.app public site: “Titans vs. Everybody” header with the 2026 schedule and final scores
Fig. 3|titanstats.app, the public site. Schedule and final scores are published from the same records.

Before

Previous scorebug on the stream: team logos, score 34–0, and "1ST · DOWN 2"

Score, quarter and the current down.

After

New scorebug on the stream: PAM 13, GCM 0, 1st & 10 at the PAM 44, Q2 1:50, with a possession marker

Live game clock, down and distance, ball spot and possession, all fed from the press box by Titan Stats and /clock.

Fig. 4|The broadcast scorebug, before and after.
Records in the log04812Kickoff3 min6 min9 minEnd Q1TD, #11 to #81, 24 ydsINT, #4, 14-yd return12 records6:10 into Q1
Fig. 5|Every record in the demo game’s first quarter, by game clock. The box score, leaders and play feed are all recomputed from these twelve rows, so a correction in one place is a correction everywhere.

Methods

Stack
React 18, TypeScript, Vite, Vitest, Cloudflare Pages Functions, Cloudflare D1, resvg.
Data
The demo runs in your browser on sample data; nothing is sent anywhere.
Tests
Vitest, including a test that typed and clicked entries produce identical records.
Status
Live since Sep 2026. Press box, Friday nights.