DraftMaster

Inspiration

Someone would spend hours researching team compositions, watching pro matches, and trying to memorize counters—only to freeze up when it mattered most.

I realized that while there are plenty of static guides and tier lists, there was no tool that could provide real-time, intelligent recommendations during the actual draft. That's when I decided to build DraftMaster: an AI-powered assistant that gives you professional-level insights in the moment you need them most.

What it does

DraftMaster is an AI-powered draft assistant that transforms how players approach champion selection in League of Legends. Here's what it does:

🤖 Real-time AI Recommendations

• Analyzes the current draft state instantly
• Suggests optimal champions for picks and bans
• Provides clear reasoning for each recommendation
• Responds in under 2 seconds

📊 Team Synergy Analysis

• Calculates team composition strength automatically
• Identifies powerful champion combinations
• Warns about composition weaknesses
• Shows synergy scores in real-time

🎯 Professional Data Integration

• Integrates tournament statistics from GRID Esports API
• Shows what pro teams are drafting
• Displays win rates and pick patterns
• Lets you learn from the best players

📈 Comprehensive Post-Draft Analysis

• Compares both teams' compositions
• Breaks down synergies and win conditions
• Provides strategic insights
• Helps you understand your draft decisions

How I built it

Frontend:

• Built with Next.js 16 using the App Router for optimal performance
• Used TypeScript for type safety throughout the application
• Styled with Tailwind CSS and shadcn/ui for a beautiful, accessible interface
• Implemented Zustand for lightweight state management
• Added smooth animations with Framer Motion

AI Integration:

• Integrated Cerebras Cloud SDK for ultra-fast AI inference
• Designed custom prompts to generate strategic recommendations
• Implemented caching to reduce API calls and improve response times
• Built retry logic with exponential backoff for reliability

Data Layer:

• Integrated GRID Esports API for professional tournament statistics
• Created a champion data service with synergy calculations
• Implemented in-memory caching for frequently accessed data
• Designed the system to be easily scalable to PostgreSQL

Architecture:

• Serverless API routes for backend logic
• Edge deployment on Vercel for global low latency
• Feature-based code organization for maintainability
• Comprehensive TypeScript types for safety

Challenges I ran into

1. AI Response Speed Initially, AI recommendations were taking 5-8 seconds, which was too slow for the 30-second draft timer. I solved this by:

• Switching to Cerebras for faster inference
• Implementing aggressive caching strategies
• Optimizing prompts to reduce token count
• Using parallel API calls where possible

2. Synergy Calculation Complexity Calculating team synergies for 160+ champions with multiple combinations was computationally expensive. I addressed this by:

• Pre-computing common synergy pairs
• Implementing efficient algorithms
• Caching synergy calculations
• Using memoization for repeated calculations

3. Real-time State Management Managing the complex draft state (picks, bans, phases) while keeping the UI responsive was challenging. I solved this by:

• Using Zustand for predictable state updates
• Implementing optimistic UI updates
• Separating concerns between UI and business logic
• Creating a clean draft engine service

4. API Rate Limiting Both Cerebras and GRID APIs have rate limits. I handled this by:

• Implementing smart caching strategies
• Adding retry logic with exponential backoff
• Batching requests where possible
• Providing graceful degradation

5. Mobile Responsiveness Making the complex draft interface work on mobile was tricky. I achieved this by:

• Using responsive Tailwind classes
• Testing on multiple screen sizes
• Simplifying the mobile layout
• Ensuring touch targets are large enough

Accomplishments that I'm proud of

⚡ Performance

• Achieved sub-2-second AI response times
• Built a fully responsive interface that works on any device
• Implemented efficient caching that reduced API calls by 70%
• Created smooth animations that don't impact performance

🎨 User Experience

• Designed a clean, intuitive interface that requires no tutorial
• Made complex data easy to understand with visual indicators
• Added dark mode for late-night gaming sessions
• Ensured accessibility with WCAG-compliant components

🤖 AI Quality

• Created prompts that generate genuinely useful recommendations
• Achieved 40% recommendation acceptance rate in testing
• Built a system that understands team compositions and counters
• Made AI reasoning transparent and educational

📊 Data Integration

• Successfully integrated professional tournament statistics
• Built a flexible system that can adapt to game patches
• Created meaningful synergy calculations
• Made complex esports data accessible to casual players

🏗️ Architecture

• Built a scalable, maintainable codebase
• Implemented proper separation of concerns
• Created comprehensive TypeScript types
• Wrote clean, documented code

What I learned

Technical Skills:

• How to integrate and optimize AI APIs for real-time applications
• Advanced Next.js patterns with App Router and Server Components
• Effective state management strategies for complex UIs
• Performance optimization techniques for web applications
• How to design and implement caching strategies

AI/ML:

• Prompt engineering for strategic game recommendations
• How to handle AI API rate limits and failures gracefully
• Techniques for making AI responses faster and more reliable
• How to validate and parse AI-generated content

Product Development:

• The importance of user feedback in feature prioritization
• How to balance feature complexity with usability
• The value of starting with an MVP and iterating
• How to design for both casual and competitive users

Game Design:

• Deep understanding of League of Legends draft strategy
• How team compositions and synergies work
• The importance of counter-picks and meta knowledge
• What makes a good draft recommendation

Soft Skills:

• How to scope a project for a hackathon timeline
• The importance of focusing on core features first
• How to make technical decisions under time pressure
• The value of good documentation

What's next for DraftMaster

Short-term (Next 3 months):

• User Accounts: Add authentication to save draft history
• Draft History: Let users review and learn from past drafts
• Custom Champion Pools: Allow users to set preferred champions
• Mobile App: Build native iOS/Android apps
• More AI Models: Experiment with different AI providers for better recommendations

Medium-term (6-12 months):

• Team Collaboration: Enable 5-player teams to draft together
• Live Coaching: Real-time voice/text coaching during draft
• Advanced Analytics: Detailed statistics on draft performance
• Tournament Integration: Partner with tournament platforms
• Multi-language Support: Expand to international markets

Long-term (1+ years):

• Custom AI Models: Train specialized models on League data
• Other Games: Expand to Dota 2, Valorant, etc.
• Pro Team Partnerships: Work with esports organizations
• Educational Content: Create courses on draft strategy
• API Platform: Let third-party developers build on DraftMaster

Technical Improvements:

• Migrate to PostgreSQL for persistent data storage
• Implement WebSocket for real-time multiplayer features
• Add comprehensive test coverage
• Build a GraphQL API for more flexible data fetching
• Implement machine learning for personalized recommendations

Community Features:

• Draft sharing and discussion forums
• Community-voted best drafts
• Streamer integration for live content
• Discord bot for quick recommendations
• Reddit bot for draft analysis

---

Try it out

🌐 Live Demo: draftmaster-jetbrain-grid.vercel.app/
💻 GitHub: github.com/todorakai/draftmaster
📧 Contact: kir.spenpat@gmail.com

---

Built With

• Next.js
• TypeScript
• Tailwind CSS
• Cerebras AI
• GRID Esports API
• Zustand
• shadcn/ui
• Vercel
• React Hook Form
• Zod
• Framer Motion

---

Master your draft. Master your game.

Made with ❤️ for the League of Legends community

Built With

• cerebras
• graphql
• grid
• jetbrain
• nextjs