TacticFrame
A football tactics board that runs in the browser without an account, which I plan, build, and run on my own.
10Languages for the interface and articles
- 2026.09 ~ Present
- Firstage
- Planning, design, development, and operations (solo)
Core value
Draw and play back tactics without an account, then export the movement you want to explain as a video.
Outcomes
- Saves and exports video inside the browser, with no server
- 10 tactics guides and 7 match analyses
- Interface and articles in 10 languages
- Launched in September 2026 and run solo
Tech stack
Context
TacticFrame is a tactics board for people who want to explain how a football team moves. You place a formation on a horizontal pitch, chain scenes in time order, and draw player movement as arrows that play back. It runs in the browser without an account, with ten tactical guides and seven match analyses beside the editor. It runs as a Firstage service, and I handle planning, design, development, and operations alone.
Decisions and implementation
- The editable project is not sent to a server. It lives in the browser’s IndexedDB, and a save appends a revision and moves the current-revision pointer in one transaction. A saved project that cannot be read, or has an unknown version, is left untouched and opens in a protected state.
- Player positions are normalized coordinates from 0 to 1 across the pitch, so a scene looks the same at any screen size. Moving players, reordering scenes, and changing scene length have keyboard alternatives, and playback follows the reduced-motion setting.
- Video export stays in the browser. A frozen copy of the project is drawn on a separate Konva canvas and recorded with MediaRecorder, capped at two minutes and 64 MiB. If the tab is hidden or the encoder fails, the partial file is discarded and the user can retry with the same copy.
- Match data is stored in Cloudflare D1 as immutable revisions, and only a validated revision can be activated. The public pointer moves separately, public pages read only the revision it names, and a failed D1 read does not fall back to another source.
- I build each release from a clean checkout so work in progress cannot slip in, and I record the previous Worker version as the rollback target before deploying. Afterward I check the live site at 1440px wide, at 390px portrait, and in mobile landscape.
Current state
I started TacticFrame in September 2026, published an early version at tacticframe.com that month, and still run it alone. The interface and articles come in ten languages, translated and edited with AI, and native-speaker review is not finished. Link sharing is not built, and the project is not affiliated with any club, league, or player.