DRAFT Support

DRAFT Support is an AI-powered draft analysis assistant that gives esports teams real-time, data-driven recommendations during champion select.

Comment

💡 Inspiration

Professional League of Legends teams spend hours manually analyzing draft matchups using spreadsheets and outdated databases. The draft phase determines 70% of a game's outcome, yet teams lack real-time decision support. We wanted to democratize the analytical advantage—giving any competitive team access to the same data-driven insights that top esports organizations use.

The GRID esports dataset gave us access to 2,751 professional games across 74 teams and 5 major leagues. We realized we could transform that raw data into an intelligent system that coaches and players could leverage within seconds of champion select.

🎮 What it Does

DRAFT Support is a real-time draft analysis platform that:

  • Analyzes Draft State - As picks and bans happen, the system instantly evaluates team composition, synergies, and counter-matchups
  • Recommends Champions - Ranked recommendations with 6 scoring factors (win rate, synergy, counter strength, team comfort, meta relevance, draft balance)
  • Predicts Win Probability - Dynamic circular gauge showing your projected win rate updated after each action
  • Predicts Opponent Moves - ML model forecasts enemy team's next pick based on historical patterns and current game state
  • Warns of Threats - Alerts coaches to dangerous enemy compositions and missed synergy opportunities
  • Profiles Teams - 74 professional teams with draft tendencies, champion pools, and first-pick patterns

The Interface:

  • Beautiful cinematic landing page introducing the platform
  • Real-time draft board with recommendations
  • Live win rate gauge with smooth animations
  • Opponent prediction tracker
  • Critical alerts and warnings
  • Fully responsive design

🛠️ How We Built It

Frontend (Modern Stack):

  • Migrated from Create React App to Vite (10x faster builds)
  • React + TypeScript for type-safe component architecture
  • Tailwind CSS for cinematic dark UI inspired by professional esports branding
  • Custom animations and scroll-reveal effects
  • Responsive design working on desktop and tablet

Backend (Data-Driven):

  • FastAPI with async WebSocket support for real-time updates
  • Alternative lightweight HTTP server (no external dependencies)
  • Data-driven recommendation engine analyzing:
    • 159 unique champions across 5 roles
    • 74 professional teams with draft tendencies
    • Synergy matrices (1,564+ champion pairs analyzed)
    • Counter matchup data from professional play
    • Meta shifting across 5 major leagues and 2 years of data

Data Processing Pipeline:

  • Custom GRID esports dataset parser (data_loader.py - 738 lines)
  • Incremental statistics aggregation for memory efficiency
  • Hierarchical data organization (global, by league, by tournament, by year)
  • Batch processing with checkpointing every 100 series
  • Processed data output: ~1 MB JSON files (champion stats, synergies, counters, team profiles)

Architecture:

  • Modular design: draft_predictor.py (607 lines) handles all ML logic
  • Recommendation scoring with weighted factors (25% win rate, 25% synergy, 20% counters, 15% comfort, 10% meta, 5% balance)
  • Team-specific prediction using historical first-pick and comfort metrics
  • Stateless API design for easy scaling

🚧 Challenges We Ran Into

  1. Data Inconsistency - GRID esports data had missing fields, duplicate entries, and inconsistent champion naming. We built validation and error recovery into the batch processor.
  2. Pydantic Version Conflicts - FastAPI and local dependencies clashed on Pydantic versions. We created an alternative HTTP server to avoid dependency hell while keeping the API identical.
  3. Real-Time Performance - Recommendation scoring needed to complete in <100ms for a responsive UI. We optimized data structures and pre-computed expensive aggregations.
  4. Team Comfort Metrics - Different teams have different champion preferences that change over time. We implemented rolling statistics tracking to capture meta shifts within teams.
  5. Modeling Opponent Behavior - Predicting opponent picks is non-trivial when teams adapt strategies. We weighted recent games more heavily and accounted for remaining champion pool.
  6. UI/UX Complexity - Displaying 6 recommendation factors, win probability, and warnings simultaneously without overwhelming the user. Multiple iterations on the UI led to the final dashboard design.

🏆 Accomplishments We're Proud Of

✅ Complete Data Pipeline - Processed 2,751 professional games into structured, queryable JSON files with hierarchical organization

✅ Production-Ready Frontend - Migrated to modern tooling (Vite) with cinematic UI and smooth animations. Completely redesigned with Tailwind CSS and custom components

✅ Multi-Factor Recommendation Engine - Sophisticated scoring system balancing 6 different factors rather than naive single-metric rankings

✅ Real-Time Architecture - WebSocket support for live updates with sub-100ms API response times

✅ Professional Design - Landing page with scroll-reveal effects, responsive design, custom typography (Playfair Display + Inter), glassmorphism UI elements

✅ Zero Deployment Dependencies - Alternative HTTP server with no external dependencies beyond Python stdlib (FastAPI optional)

✅ Documented & Clean - Well-organized codebase with clear separation of concerns (models, data processing, API layer, frontend)

✅ Scalable Architecture - Stateless API design, modular components, easy to extend with new features

📚 What We Learned

  1. Data Quality Matters More Than Volume - Having 2,751 games meant nothing until we cleaned and validated the data. 80% of the work was preprocessing.
  2. Professional Esports Data is Valuable - Teams pay for draft analysis tools. This data-driven approach gives competitive advantage—worth the complexity.
  3. Multi-Factor Models Trump Simple Metrics - Single-metric recommendations (just win rate) often miss context. Our 6-factor system is more nuanced and useful.
  4. Real-Time is Non-Negotiable - Draft decisions happen in seconds. A system that takes minutes to analyze is worthless. Fast iteration on the backend was critical.
  5. UI/UX is Half the Product - The best algorithm means nothing if coaches can't quickly understand the recommendation. Design clarity matters as much as the logic.
  6. Team Patterns are Predictable - Professional teams are creatures of habit. Teams consistently pick certain champions first or in specific situations. This historical data is powerful.
  7. Modern Tooling is Worth It - Vite vs Create React App was a revelation. Faster builds = faster iteration = better product.

🚀 What's Next for DRAFT Support

Near-term (Production Ready):

  • Deploy backend to cloud (AWS EC2 or DigitalOcean)
  • Host frontend on CDN
  • Add authentication for team accounts
  • Email notifications for new meta shifts

Medium-term (Expand Data):

  • Integrate live game data feeds for real-time meta tracking
  • Add patch impact analysis (champion balance changes)
  • Track player-specific champion statistics (e.g., "Faker's LeBlanc win rate")
  • Seasonal trend analysis

Long-term (Next Level):

  • Mobile app for coaches on the sideline
  • Coach dashboard with saved draft histories and team notes
  • Integration with esports tournament APIs
  • Predictive in-game recommendations (itemization, objective priority)
  • Comparison mode: "How does our comp match this historical game?"

Stretch Goals:

  • Support for other MOBAs (Valorant ability selection, DotA 2 drafting)
  • Monetization: Premium tiers for pro teams with deep analytics
  • API access for third-party esports platforms
  • Live tournament integration (auto-pull opponent's recent games)

Built With

  • fast
Share this project:

Updates