An hour in a spreadsheet
I was at a tournament where someone had to sort 100 people into 20 teams. Captains called out picks, one person updated a spreadsheet, and the whole thing took over an hour. I built Draftastic so captains could pick and everyone else could watch the teams fill in real time.
I'd built front ends and backends before, but never one where people had to see the same changes as they happened. A live draft gave me turn order, picks and a timer to keep in sync. That was the part I wanted to figure out.
Keeping the draft in sync
Each pick changes the available players, team rosters, current captain and timer. I used tRPC to keep the client and server shapes aligned, and WebSockets to push those changes to everyone watching. I loved not having to babysit the types on both sides. Owners and editors can pause, undo and reassign; captains can pick when it's their turn.
Draftastic grew beyond captain picks. Some events need manual assignment or auto-pick, then a way to move people around afterwards. Auto-pick can balance golf teams by handicap or use AI to distribute people by custom criteria. Team setup previews who would be left out before an organiser changes the capacity.
StackNext.js (App Router), TypeScript, PostgreSQL, Tailwind, Prisma, tRPC, Shad UI, WebSockets, Vercel
The design work was harder than the code
Captains needed their turn and the player pool; organisers needed pause, undo and reassign; everyone else needed to follow the picks. I revisited the mobile layout repeatedly because it was easy to make one group's controls obscure everyone else's view.
I have more ideas for Draftastic than belong in the main flow. I keep coming back to the same job: let people pick teams together without needing a spreadsheet narrator.