Touchline

Inspiration

Managing a stadium of 80,000+ fans during the FIFA World Cup 2026 is not just a logistical hurdle; it is a complex, high-stakes operational challenge. Traditional venue dashboards are static—they show how many people are in the stadium right now. But what happens when a sudden anomaly occurs, like a turnstile failure at the East Gate or a 30-minute delay on an inbound Metro line? Static data fails during dynamic crises. We were inspired to build a tool that shifts stadium operations from reactive observation to proactive operational intelligence using Generative AI.

What it does

Touchline is a Generative AI-enabled Stadium Hub designed around a dynamic Three-Mode Architecture (Fan, Organizer, and Volunteer). Instead of merely reporting bottlenecks on a dashboard, the platform actively solves them.

For Organizers, Touchline automatically generates a live AI situational briefing—synthesizing crowd heatmaps, transit delays, and match events into concise dispatch directives. For Fans, the floating AI assistant acts as a multilingual guide, cross-referencing live crowd density to route them away from congested gates in real-time. For Volunteers, the system automatically triages incidents and assigns tasks based on where the stadium is experiencing the most pressure.

How we built it

We engineered a highly modular React 18 architecture powered by an Edge SSR environment (Vite + Nitro). Because real-time physical stadium data wasn't available for the hackathon, we built a decoupled JavaScript Simulation Engine. This engine simulates volatile crowd capacities across six stadium zones using a drift-biased random walk algorithm, mimicking real-world surge unpredictability.

Rather than relying on rigid if/else trees for anomaly handling, we built a zero-latency Intent Classification Pipeline. When the simulated crowd density in a specific zone crosses the critical $85\%$ threshold, the pipeline automatically injects that telemetry payload directly into the system prompt of Google Gemini 2.0 Flash. The AI then synthesizes this raw data into contextual, role-specific directives—routing fans away from bottlenecks while simultaneously assigning volunteers to manage the surge.

Challenges we ran into

Our biggest hurdle was adhering to incredibly strict automated testing and static analysis constraints within the hackathon environment. We faced unexpected penalties in our code's testability metrics when trying to integrate complex UI updates with AI API calls. To solve this, we had to completely refactor the codebase to isolate the UI rendering from the business logic. We relied on pure JavaScript functions wrapped in strict exception handling to create a bulletproof execution environment, achieving a flawless 163/163 passing test suite.

Accomplishments that we're proud of

We are incredibly proud to have engineered a flawless, production-ready architecture. Despite rigid technical constraints, we successfully optimized our codebase to achieve exceptional performance, robust security, and deep WCAG 2.1 AA accessibility compliance.

A specific technical win was building a system that dynamically handles screen-reader compatibility for real-time Generative AI directives. By carefully implementing aria-live="polite" regions and aria-hidden toggles, we ensured that visually impaired fans receive immediate AI routing updates without their screen readers being overwhelmed.

What we learned

This project taught us the critical importance of decoupling business logic from UI components to ensure maximum testability. We also learned how to leverage edge-side rate limiting (implementing a strict token-bucket algorithm) to protect enterprise API keys without degrading the user experience. Most importantly, we learned that the best AI solutions do not just process data; they provide immediate, actionable clarity in moments of high pressure.

What's next for Touchline

The immediate next step for Touchline is integrating live IoT turnstile data and transit APIs to replace our simulation engine with real-world telemetry. Beyond the 2026 World Cup, we envision scaling Touchline's underlying architecture beyond stadiums, applying it to city-wide event transit grids, smart city evacuation planning, and large-scale festival crowd management.

Built With

• accessibility
• api
• css3
• edge-functions
• framer-motion
• generative-ai
• javascript
• lucide-icons
• mathematics
• nitro
• radix-ui
• react
• recharts
• server-side-rendering
• shadcn-ui
• tailwindcss
• tanstack-query
• tanstack-router
• typescript
• vercel
• vite
• vitest
• web-development