PlumTrack& Field

Plum Track & Field is the website of the Plum Mustangs track and field program. It puts school records, meet results, season archives, photos and training material in one place for the program’s athletes, families and coaches. I competed for the program as an athlete and later coached it.

The problem

The program has a lot of history to hold. There are 144 school records across eight lists, along with years of PIAA and WPIAL results, season archives, photo galleries and race video. Before the site, it was spread across an old website, the record board at the school, yearbooks and newspapers. Each record also has a history of the marks that held it before, and the site needed to show that. On top of the history, the site carries everyday information, such as the schedule and the order of events, and it has to read well on a phone.

What I built

The records section has eight lists, with indoor, outdoor and stadium records for boys and girls and junior high records for each. Each record opens a timeline of every mark that held it, with dates, meets and ties, and some entries link to video of the race. Of the 144 records, 64 have more than one mark in their history. Race videos play in a dialog over the records table.

Results pages list the program’s PIAA and WPIAL champions and placers. The season archives go year by year, with a rail of year buttons that becomes a drop-down on phones. Years without data still appear, grayed out. Photo galleries are grouped by year and open in a lightbox, where the arrow keys move between photos. A Learn section holds drill guides, including hurdle and ladder drills.

It’s a React single-page app built with Vite and hosted on Cloudflare Workers. Clean paths such as /records/boys-outdoor fall back to the app’s one page, and links in the old hash format (/#/records/…) are rewritten to clean paths when they load, so old bookmarks still work. On a phone the menu folds into grouped sections. The design carries the program’s purple and gold throughout.

Key decisions

Keep the content as data

Records, results, archives, photos and rosters live in JavaScript data files, and each kind of page has its own view to read them. Changing a record means editing its file and deploying again.

Store every record’s history

A record carries its current mark plus a progression list of every mark that held it, each with a date and a meet. That list is what lets a record show how it changed over the years. Some older entries have only a year.

Serve video through a Worker

Cloudflare’s static file server ignores byte-range requests, and Safari, like every browser on iOS, won’t play a video without them. A small Worker answers those requests for /videos/ with 206 Partial Content. Those runs count against the account’s free allowance of 100,000 Worker requests a day, which other sites share. Clips are also re-encoded to stay under Cloudflare’s 25 MiB file limit, and the full-size originals are kept out of the deploy. iPhone HDR footage gets tone-mapped to ordinary 8-bit color first, because most browsers won’t play it as shot.

A closer look

The home page sets the title inside a purple track, with the lanes numbered 1 to 6.

The school records table lists every event with its mark and year. Names are blurred in these screenshots.

Opening an event shows each time its record fell. The girls’ 100m hurdles record runs from 15.84 in 1980 to 14.69 in 2016; the 1981 mark stood until 2014 and was tied once along the way.

Season archives keep each year’s results a tap away. This one is 2016, with Tri-States Championship places and marks.

How I checked it

I checked the records and results against those same sources: the old site, the record board at the school, yearbooks and newspapers. While preparing this case study I found that the page’s canonical URL and its sharing URL pointed at a parked domain; both now point at plummustangs.net. The walkthrough was recorded from the site itself, with athlete names and photos blurred.