§1The problem
Logging a game (who played, goals, minutes) and then finding those moments in the video takes a lot of manual work. There was no tool that combined the score kept on the watch with the game video and delivered the clips ready to watch.
§2What I built
- Web appInstallable PWA for iPhone, iPad and desktop: teams, roster, schedule, match, results and stats, with light and dark themes.
- Match modeWorks offline, with a send queue that flushes when the connection comes back.
- Watch appSwiftUI app to log goals and the end of the match, with a watch-face complication and a companion iPhone app.
- ServerAPI with a SQLite database.
- Video pipelineChunked upload, cuts around each goal or play, and highlight reels assembled with GPU acceleration (NVENC).
- Two camerasRecording with 2 phones, handed to video-campo to merge the footage.
§3The hard parts
5 entries- 01
Uploading large videos from a phone
Chunked, resumable upload with queued reprocessing.
- 02
Working offline
The match keeps going without internet and syncs later, with safe resending that never duplicates goals.
- 03
Watch and server on the same API contract
Including correcting and cancelling goals.
- 04
Database migrations
An automatic backup is made before any schema change.
- 05
Local access guard and shared types
Protection against browser attacks (DNS rebinding), and a monorepo with types shared between server and UI.
§4Result
In production on my home server, and I use it from my phone over a private network. Every stage of the plan (web app, server and watch) is done, and the watch app was tested on a real device.
§5Stack
- Next.js 16
- React 19
- TypeScript
- Zustand
- SQLite
- ffmpeg (NVENC)
- SwiftUI / watchOS
- pm2
- Tailscale
- Unit and e2e tests