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

Case study N° 01 · Sports

Quick Plays

An offline-first play designer and playbook app for basketball and football coaches.

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

quickplays.app
Works offline
100%
Every edit lands in IndexedDB first; Supabase sync runs when a coach is signed in.
One designer
2sports
Courts and fields share the same timeline, playbooks and rosters.
To export MP4
0servers
ffmpeg.wasm encodes plays in the browser, so there is no render farm to pay for.
Play designer: Spread 4 Verticals drawn against two-high coverage, with routes, defensive zones, notes and a step timeline
Fig. 1|Spread 4 Verticals against two-high coverage. Routes, defensive zones and coaching notes share one step timeline that players can scrub.

The problem

Coaches draw plays on whiteboards and paper, then hope players remember them. Existing play-design tools are expensive, desktop-only, or tell the coach nothing about whether anyone actually studied the material.

What I built

A tablet-first web app where a coach designs animated plays on a court or field, organizes them into playbooks, manages rosters, plans practices, and shares plays with players. The app then shows who watched, who took the quiz, and who passed.

  • Play designer with players, cuts, screens, passes and dribbles on a step-by-step timeline. Plays can be scrubbed and replayed.
  • Playbooks, rosters, practice plans, call sheets, scouting and a player view.
  • Share links with pre-generated preview images, plus a film-study tracker for players.
  • Export plays as MP4 right in the browser using ffmpeg.wasm. No server render farm.

The hard part

Offline first, synced when signed in. Everything is written to IndexedDB (Dexie) first, so the app works in a gym with no Wi-Fi. When a coach is signed in, changes sync to Supabase Postgres with row-level security, and realtime subscriptions keep their devices in step. Undo and redo across the whole designer come from a Zustand store with temporal history (zundo).

Engineering

  • Strict TypeScript, CI on every push (lint, typecheck, unit tests in Vitest, end-to-end tests in Playwright), error monitoring in Sentry, product analytics in PostHog.
  • Static export to Cloudflare Pages with Git-connected deploys. Supabase migrations are versioned in the repo.
  • Stripe billing for paid tiers.

Result

Live at quickplays.app, with a demo mode for both sports. An App Store release is planned.

Figures

Practice planner: a drill library dragged onto a timed practice timeline, with plays attached to team periods
Fig. 2|The practice planner. Drills drag from the library onto a timed timeline, and team periods carry the plays they install.

Methods

Stack
Next.js 14, TypeScript, Tailwind, Zustand, Dexie / IndexedDB, Supabase, Stripe, ffmpeg.wasm, Cloudflare Pages, Playwright, Vitest.
Tests
Vitest unit tests and Playwright end-to-end, in CI on every push.
Status
Live since May 2026. Coaches, on the sideline tablet.