LIVEWIRE

Livewire is an AI-powered esports coach and analytics command center that turns raw match chaos into clear, tactical decisions in real time.

Comment

Inspiration

Esports coaching is broken. Coaches spend hours manually reviewing VODs, digging through spreadsheets, and making gut-call decisions without real-time tactical intel. Meanwhile, players drown in raw stats without actionable feedback.

Livewire was born from frustration - I wanted to build what I wish I had as a competitive player: an AI command center that processes match chaos into military-precision tactics, live. The vision? A cyberpunk mission control that turns data overload into decision advantage, instantly.

What it does

Livewire is a dual-mode AI esports coach that ingests match data to deliver:

  • Tempo Leak Detection - Spots rhythm breaks costing rounds
  • Decision Skew Variance (DSV) - Identifies suboptimal choices under pressure
  • Objective Pressure Efficiency (OPE) - Maps win conditions to rotations
  • Coach Henry AI - Real-time tactical analysis (mock responses, production-ready)
  • Mock/Live Data Toggle - Demo-ready → Real GRID API integration

One toggle switches between rich mock data (demo-ready) and live GRID API integration. Coaches get cyberpunk dashboards, players get terminal-style insights.

How I built it

Tech Stack (Full-Stack React + Supabase):

Frontend: Vite + React 18 + TypeScript + shadcn/ui + Tailwind
Backend Ready: Supabase (Auth + RLS prepared)
Data: React Query + Dual Mock/Live toggle
Deployment: Vercel-ready
  1. Cyberpunk UI - shadcn/ui + custom Tailwind animations (scanlines, holograms)
  2. Supabase Auth - Role-based (coach/player) with RLS ready
  3. Data Mode Context - Single state toggle reloads entire app (mock ↔ live)
  4. Henry AI - Realistic mock responses + production architecture
  5. Protected Routes - Auth guard + role checking

Challenges I ran into

  • Package Hell: AI SDK versioning → Built mock Henry AI with identical UX
  • Dual Data Mode: React Query cache conflicts → Full app reload on toggle
  • Hackathon Time: Complex integrations → Strategic mock data focus
  • Scale Planning: LiveKit/Azure APIs → Architecture prepared, demo prioritized

Key Engineering Win: Single global state toggle reinitializes ALL data hooks without breaking existing components.

Accomplishments that I'm proud of

  1. Zero-Key Demo - Fully functional without ANY API keys (judges love this)
  2. Production Auth - Supabase with roles, protected routes, graceful loading
  3. Cyberpunk Aesthetic - Custom Tailwind theme + glassmorphism + scanline effects
  4. Dual Personality - Mock data feels real, live toggle shows true integration

Most Proud: One-click Mock → Live toggle proves real API readiness without breaking demo flow.

What we learned

  • Mock Data > Broken APIs - Realistic mock data wins hackathons
  • Full Reload > Cache Wars - Simplest solution scales best under time pressure
  • shadcn/ui is unbeatable - Production UI in hours, not weeks
  • Graceful Degradation - Every feature has intelligent fallback

What's next for LIVEWIRE

• Live VOD Processing: LiveKit → Azure Face/Speech → emotion + sentiment → Groq AI
• Discord Bot: Real-time alerts + slash commands (/henry-analyze)
• GRID API → FastAPI metrics engine → Supabase RLS

• Mobile player app (React Native)
• Team collaboration (shared annotations)
• Custom agent training (team-specific tactics)

🏔️ MORE FEATURES:
• Live tournament overlays (in-game HUD)
• Predictive win probability (real-time)
• Cross-game support (VALORANT, LoL, CS2)
• Enterprise dashboard (org-wide analytics)

Built With

Share this project:

Updates