Tactical Momentum Tracker

Tactical Momentum Tracker is a real-time sports analytics platform designed to detect, quantify, provides tactical insights, calculates dynamic victory probabilities, and User vs AI Simulation.

Comment

💡 Inspiration

Traditional sports metrics are static—possession percentages and total shot counts fail to convey the dynamic flow of a football match. Matches are won or lost in critical inflection points: a red card, a sequence of corners, or a miraculous double-save. We were inspired to create a tool that captures these invisible "waves" of energy and momentum in real time. Our goal was to design a platform that not only visualizes these swings but uses AI to predict comeback opportunities, simulate what-if scenarios, and recommend tactical formation updates immediately.

🎯 What it does

Tactical Momentum Tracker provides a premium suite of tools for sports analysts, coaches, and fans:

  1. Interactive Momentum Timeline: A custom D3.js timeline that maps net match momentum minute-by-minute using rolling weighted moving averages. Users can hover over event markers to see details of key inflection points.
  2. Tactical Dominance Heatmap: An interactive football pitch displaying real-time coordinate heat blobs of event intensity. It calculates attacking third territory penetration percentage and filters events by time blocks (0-30', 30-60', 60-90').
  3. Gemini Tactical AI Insights: An LLM-backed analysis engine that contextually processes momentum graphs and event logs to deliver formation recommendations, substitution choices, and strategic feedback.
  4. Match Scenario Simulator: A sandbox enabling users to queue hypothetical future events (e.g., “What if the home team gets a Red Card at minute 75?”) and instantly recalculate the win probability bar and momentum timeline.
  5. AI Auto-Simulate (Gemini): A button that queries Gemini to generate 3–5 high-fidelity future match events and 15–25 possession coordinate heat points, simulating the rest of the match in a single click.
  6. Export PDF Report: A clean, vector-grade print layout engine that builds a comprehensive, beautiful tactical PDF summarizing simulated events, AI insights, and final win probability.
  7. World Cup 2026 Center: Live standings, fixture grids, and a real-time sync button pulling match data directly from the World Cup 2026 API.
  8. User vs AI Manager Game: An interactive simulation page where users can manage their chosen country in the World Cup 2026 against AI, configure attacking/defensive styles, adjust mentalities mid-match, and view a detailed post-match coaching report by Gemini.
  9. Gemini API Limit WhatsApp Reporter: Automatically detects when Gemini API limits or quotas are exceeded, falling back to a rule-based engine and prompting the user with a notification popup containing a direct WhatsApp report button to the developer.

🛠️ How we built it

We constructed this project as a monorepo splitting logic between:

  • Backend: Python FastAPI serving REST API endpoints. It calculates momentum scores using an Exponential Weighted Moving Average (EMA) and queries Google Gemini using structured schemas.
  • Frontend: React (Vite-based) with a custom Glassmorphic dark styling, styled using vanilla CSS.
  • Data & Analytics: SQLite database accessed via SQLAlchemy, pre-populated with realistic dummy data. Data is processed using Pandas.
  • D3 Visualizations: SVG elements built from scratch to animate heat maps and responsive momentum lines.

🚧 Challenges we ran into

  • Smooth D3 Animations: Generating fluid transitions when filtering events by time window (e.g., 30-60') required fine-tuning D3.js enter/exit/merge selections to smoothly scale and fade heat circles.
  • Zero-Dependency PDF Export: High-fidelity PDF libraries often add massive bundle sizes or render blurry canvases. We bypassed this by writing an elegant CSS print stylesheet inside a temporary iframe, launching the native browser print dialogue for crisp vector text output.
  • Consistent Coordinate Generation: Ensuring that simulated AI events fell within realistic X/Y boundary boxes on the pitch required structured prompt engineering and post-generation coordinate mapping.

🏆 Accomplishments that we're proud of

  • Hover Synchronization: We successfully bound the React state of the Normalized Event Log list hover to the D3 SVG field coordinates, making the matching event dot grow and highlight dynamically when hovered in the log list.
  • Polished Dark Aesthetics: Built a customized theme with Obsidian-style transparency, neon green (#10b981), electric magenta (#d946ef), and bright cyan (#3b82f6) representing home, away, and neutral states.
  • Vibrant Offline Fallbacks: Even without a Gemini API Key, the application remains fully functional by reverting to a robust procedural simulation generator that matches live soccer heuristics.

📖 What we learned

  • How to build highly responsive, customized SVG graphics in React using D3.js hook bindings.
  • Structured output schema generation for Gemini APIs, converting raw responses directly into validated Pydantic models.
  • Refining mathematical rolling averages to approximate realistic human perception of sports momentum.

🔮 What's next for Tactical Momentum Tracker

  • Real-time WebSockets: Replacing the current update checks with a bi-directional websocket connection to stream events instantly.
  • Multi-Agent Coaching Staff: Splitting the LLM recommendations into distinct AI agents (e.g., Defensive Coach, Attacking Analyst, and Sports Psychologist).
  • Computer Vision Integration: Consuming coordinate data streams parsed directly from camera feeds.

Built With

Share this project:

Updates