⚾ Moneyball Coach AI: Cloud9 Edition

## Inspiration 💡

The inspiration for Moneyball Coach AI was born at the intersection of Billy Beane’s sabermetrics philosophy and the high-octane world of esports. We realized that while traditional sports have embraced data-driven decision-making for decades, esports—despite being digital-native—often relies on "gut feeling" and fragmented spreadsheets.

We asked ourselves: What if we could give Cloud9 the ultimate digital analyst? We wanted to move beyond basic KDA stats and build a system that identifies win conditions, tracks hidden efficiency metrics, and democratizes professional-grade analytics.

## What it does 🤖📊

Moneyball Coach AI is a comprehensive analytics suite that transforms raw match data into actionable strategic insights.

• ⚡ Real-Time Ingestion: Consumes live match data streams via the GRID API, parsing thousands of events per second with sub-second latency.
• 🧠 Predictive AI Modeling: Uses historical data to calculate live Win Probability, Gold Efficiency, and Objective Control Ratings tailored specifically to Cloud9's playstyle.
• 🔍 Player Performance Granularity: Drills down into micro-mechanics—tracking lane proximity, jungle pathing efficiency, and resource allocation relative to the team's economy.
• 📉 The "Moneyball" Dashboard: A centralized command center that highlights undervalued assets (e.g., "This support player's vision score correlates 85% to a win state in the mid-game").

## How we built it 🛠️

We architected this platform with a heavy focus on type safety and performance, resulting in a codebase that is 96.8% TypeScript.

• Core Framework: We utilized Next.js to handle server-side rendering for SEO and rapid client-side hydration for the dashboard.
• Data Pipeline:
  • Ingestion: We built a custom TypeScript adapter to interface with the GRID API, normalizing complex nested JSON structures into strict TypeScript interfaces.
  • State Management: Leveraged React Query and Zustand to handle high-frequency state updates without triggering unnecessary re-renders in the DOM.
• Visualization: We implemented Recharts and D3.js wrappers to render GPU-accelerated heatmaps and dynamic line graphs that react to live data packets.
• Styling: Used Tailwind CSS for a utility-first approach, ensuring the UI remains responsive and follows the strict Cloud9 brand guidelines (Cyan/White/Black).

## Challenges we ran into 🚧

• Type Safety vs. Chaos: The GRID API returns massive, deeply nested data objects that change based on the game state. Creating rigid TypeScript interfaces (types/grid-schema.ts) that were flexible enough to handle edge cases without breaking the build was a massive undertaking.
• The "Firehose" Effect: Handling real-time websocket streams meant dealing with race conditions where kill events would arrive before the player entity was fully initialized. We had to implement a buffer queue system to ensure causal consistency in the event log.
• Noise Reduction: Determining which stats actually matter. We spent hours filtering out "vanity metrics" to focus on the stats that actually correlate with victory.

## Accomplishments that we're proud of 🏆

• Zero-Latency Dashboard: Achieving a "glass-to-glass" latency where the dashboard updates almost synchronously with the live stream.
• The "Coach's Eye" UI: We successfully abstracted complex backend queries into a clean, understandable UI that a non-technical coach could use during a timeout.
• Robust TypeScript Architecture: Maintaining a 96%+ TypeScript codebase meant our runtime errors were virtually non-existent during the final demo. The type inference saved us countless hours of debugging.

## What we learned 🧠

• Data Storytelling is Key: Having the data isn't enough; how you present it determines its value. We learned to prioritize insights over raw numbers.
• Esports Data is 4D: Unlike baseball, esports data has spatial coordinates (X, Y, Z map logic) and temporal context. Handling spatial queries in TypeScript gave us a deep appreciation for geometric algorithms.
• API Rate Limiting: We learned the hard way about optimizing API calls to respect GRID’s limits while maintaining the illusion of real-time updates through optimistic UI updates.

## What's next for Moneyball Assistant Coach 🚀

• 🔮 Draft Phase Simulator: Integrating an AI that suggests picks and bans in real-time based on the opponent's historical champion pools.
• 🗣️ NLP Coach Assistant: Adding a chatbot interface (LLM integration) where the coach can ask, "How is Blaber performing against enemy jungle pathing?" and get a text summary.
• 📱 Mobile Companion App: A React Native port to allow analysts to track scrims from the sideline.
• ☁️ Cloud9 Community Hub: Opening a public-facing tier where fans can predict match outcomes using our proprietary models.

Built With

• git
• github
• grid-esports-api
• next.js
• node.js
• openai-api
• react
• recharts
• tailwind-css
• tanstack-query
• typescript
• vercel
• zustand