Draftastic
A realtime team drafting app born from watching a tournament spend an hour picking teams over a conference call and a spreadsheet.
- Date
- 2023
- Type
- Personal Project
- Stack
- Next.js (App Router)
- TypeScript
- PostgreSQL
- Tailwind
- Prisma
- tRPC
- Shad (Radix) UI
- WebSockets
- Vercel
Context and Objective
I was in a tournament where we needed to pick teams in a 'captains style draft'. Someone was managing it over a conference call, tracking everything in a spreadsheet. It took over an hour to draft 100 participants into 20 teams. I knew this could be so much better.
I also wanted to build something properly full-stack for once. My personal projects had been pretty front-end heavy, with backends mostly just serving static data. Draftastic was my chance to build real CRUD functionality end-to-end.
- Next.js (App Router)
- TypeScript
- PostgreSQL
- Tailwind
- Prisma
- tRPC
- Shad (Radix) UI
- WebSockets
- Vercel
Architecture and Delivery
I used Next.js with the app router (which was brand new at the time). One of the best parts of this project was implementing tRPC for end-to-end type safety - it's genuinely delightful when your frontend and backend stay in sync automatically.
For styling I went with Tailwind CSS and Shad UI for accessible components that play nicely together. WebSockets handle realtime updates so everyone sees picks as they happen - the collaborative feel was important to get right.
Challenges and Trade-offs
The hardest part wasn't engineering - it was design. Building and designing a project this size solo really exposed my limitations. Creating a delightful experience on both mobile and desktop is genuinely difficult, and I have a new appreciation for how hard good UX really is.
Feature creep has been a constant battle. I have way more ideas for Draftastic than I have time to build (full-time job and all). Learning to ruthlessly prioritise what actually matters to users has been key to not burning out.
