A real-time player rotation tracker built for the sideline: low setup, no accounts, order when the chaos on the bench with kids!
Overview
As a parent, my child’s soccer coaches on the sideline needed to track who’s been on the field, for how long, and when to rotate. Spreadsheets are too slow, clipboards get wet, and most sports apps are over-engineered. Bench’d is a single‑tap rotation manager that lives entirely in the browser — open the page, add your squad, and start the match.
Goal
Build a dead‑simple, offline‑first rotation tracker with free AI tools that:
- Handles the chaos of real‑world substitutions
- Works on any device (phone, tablet, laptop) without installing anything
- Survives a full match without draining the battery
- Gives coaches instant, glanceable feedback on player time
Role
AI Prompt Engineer
User Experience, Prototyping, UI Design
Tools
Claude, OpenCode CLI,
Models used: Sonnet 4.6
Big Pickle
Team
Solo!
Timeline
Half a day for initial prototype with iterations and improvements over 4 days
Rapid prototyping with AI pair‑programming
The entire first iteration of the app was built in a single interactive session using OpenCode AI, an agentic CLI tool. Rather than wireframing in Figma first, I described the core mechanics “a list of players, a send‑to‑field button, a timer per player” the AI generated working HTML instantly. From there we iterated in real time:
- Layout & hierarchy — The settings menu was restructured from a flat list into grouped sections (Players, View, Game, About) with section labels and icons, making it scannable at a glance.
- Icon system — Grid/list view toggles, light/dark mode, and the player stats indicators (Σ, Nx, ◑) were refined to use clear, lightweight unicode symbols rather than emoji.
- Responsive layout — A grid/list toggle lets coaches choose between seeing all players at once (grid) or a scannable vertical list with stats inline.
Coach, parent and AI review
The page was shared with my child’s’ parent chat group for feedback and testing. Over the next few days tweaks and changes were applied to give it a better polish and meet the needs of parents and coaches.
The next step was to get Claude to review what OpenCode had produced – OpenCode generated users stories and documentation for a developer to build the app, this was then fed to Claude to review and build it’s version. Comparisons were made and any improvements were migrated across.
Key Features
Player rotation at a tap
Tap “Send On” to put a player on the field — their session timer starts immediately. Tap “Bench” to bring them off; their total time accumulates, their times‑on‑field counter increments, and they re‑enter the bench queue.
Session timer bar
Each on‑field player shows a progress bar that sweeps from green → yellow → red over the configured rotation cycle (default 10 minutes). When the bar hits red, it pulses — a clear signal that this player needs a break.
Stats at a glance
Tapping any stat badge opens a detailed info popup displaying their rotations and total on field time over the entire match.
Score keeper
The page allows for keeping track of the score with a handy little score tracker at the bottom of the page.
Game management
The match timer tracks elapsed time across two halves. The timer can be paused and resumed at any point, and half‑time automatically resets the session timers while preserving total player time.
Result
A fully functional, production‑ready rotation tracker in a single HTML file. Coaches and parents can bookmark it, add it to their home screen, and use it on any device.