PlayOverlay

PlayOverlay is a desktop broadcast graphics application I built using Electron, React and TypeScript to support live streaming of grassroots football matches. It runs as a dual window system: a control interface for entering scores and match events, and a fullscreen output window on a second display. The output is rendered against a configurable key colour and composited with live video using an ATEM Mini before being streamed to YouTube.

The app provides a live score bug with team abbreviations, match timer including added time, and a structured penalty shootout display. Because it is used during live matches, the interface is designed to reduce operator error. For example, penalty entry enforces alternating kicks between teams and includes a safe undo flow that correctly rolls back both the visual indicators and the score. State is managed centrally with typed React hooks to avoid inconsistencies between what is shown and what is stored.

Alongside the desktop app, I built a small Next.js application to handle licensing and activation. The Electron client runs in demo mode until activated via an API endpoint. The backend uses Supabase and Stripe to manage purchases and activation records. The goal was not heavy handed DRM, but a simple activation model that made it viable to distribute as a paid application rather than a one off internal tool.