Project · 2026

Match-day Board

An editorial match-day board for grassroots 11v11 football. Share a public RSVP link in your team chat, watch replies land in real time, then build the starting XI on a drag-and-drop tactics board and export it as PNG or PDF.

TypeScript
Vite
Supabase
html-to-image
jsPDF
Vitest

View code

Match-day RSVP page styled as a ticket stub, with a form on the left and a live color-coded attendee list on the right. — Public RSVP link: players reply and the attendee list updates in real time.

The edit-your-RSVP view with name, preferred position, and a Yes/Maybe/No availability toggle. — Anyone with the link can update their own RSVP and preferred position.

Problem

Organizing a grassroots 11v11 match usually means chasing replies in a group chat and then guessing at a lineup. I wanted one link a captain could drop in the team chat that collected RSVPs in real time and turned the confirmed squad into a shareable starting XI.

Approach

A match-day organizer built with Vite and vanilla TypeScript (no frontend framework):

Captains share a public RSVP link; replies land in real time using Supabase realtime with row-level security and secure RSVP RPCs.
Once the squad is set, players are dragged and dropped onto a tactics board to build the starting XI.
The finished lineup exports as PNG (html-to-image) or PDF (jsPDF).
A zero-config local demo mode backed by localStorage runs with no backend at all.

Highlights

Real-time RSVPs secured with row-level security and RPCs rather than an open table.
Drag-and-drop tactics board with PNG and PDF export.
Runs framework-free, and demoable offline via localStorage.
Covered by Vitest.