Draftastic
Draftastic is a powerful team drafting web application designed to streamline the process of creating perfect teams from a pool of participants.
- Date
- 2023-
- Type
- Personal Project
- Stack
- Next.js (App Router)
- Typescript
- PostgreSQL
- Tailwind
- Prisma
- tRPC
- Shad (Radix) UI
- Websockets
- Vercel
Project Purpose and Goal
The concept behind Draftastic was born when I was involved in a tournament that involved the process of picking teams in a 'captains style draft'. The process of picking teams was being managed over a conference call, and tracked on a spreadsheet. It took over an hour to draft 100 participants into 20 teams of 5.
I knew this could be much better and go to work!
I was also motivated to create a truly full stack CRUD project for my own personal development. Personal projects I've worked on in the last few years have typically been more front-end leaning, and my back ends were usually restricted to GET requests on static data.
- Next.js (App Router)
- Typescript
- PostgreSQL
- Tailwind
- Prisma
- tRPC
- Shad (Radix) UI
- Websockets
- Vercel
Tech Stack and Explanation
I opted to use Next.js with the app router. I was very familar with Next by this point, but going for the newly released app router (at the time) exposed me to new technology that I now use daily in a professional environment. Using Next allowed me to have all of my front and back end code within the same codebase - and one of the joys of working on this project is my implementation of TRPC which provided me with end-to-end type safety across the project.
For styling I used Tailwind CSS, and I chose to use Shad UI, for accessible components with a fairly low footprint that played very nicely with Tailwind. To ensure that the drafting process felt collaborative and exciting, I implemented websockets for instant realtime updates whenever a draft was updated.
Problems Encountered
The biggest personal challenge when building Draftastic wasn't actually on the engineering side - it was actually on the design front. Designing and developing a project of this size alone is no easy feat, and I quickly started to feel my limitations as a designer creep in as I tried to create a delightful experience on both mobile and desktop. I truly started to appreciate just how difficult crafting a top-notch UX really is.
I also have to constantly battled with feature creep. The amount of ideas I have for Draftastic vastly outweighs the amount of time I have to work on it (I have a full time job after all). Keeping these in check and prioritising features that provide the most user value became key to the success of the project and avoiding burnout.
Lessons Learnt
Draftastic has become a real passion project of mine, and something I still work on regularly - so I'm sure there will be plenty more trials and tribulations on that journey
One thing that I'm trying to get better at is recognising that my time to work on this project is incredibly limited. A personal ambition of mine is to improve prioritisation of incoming work, and also seek to delegate more work to other people - especially on the design side!