"Building & Deploying a Smart Stadium Assistant with React, Docker, and Google Cloud Run"

Meghana Anupoju — Tue, 14 Apr 2026 09:45:21 +0000

Have you ever been completely lost trying to find your seat in a massive 80,000-seat stadium? Or missed a crucial moment because you were stuck in a long food queue?

I set out to solve this problem by designing and prototyping a Smart Stadium Experience System — an intelligent digital assistant that improves navigation, reduces waiting times, and enhances overall event experience.

Problem Statement

Large-scale venues often face challenges such as:

Crowd congestion
Long queues at food stalls and entry gates
Difficulty in navigation
Lack of real-time updates

These issues negatively impact user experience and safety.

Solution Overview

The solution is a smart, real-time assistant system that:

Monitors crowd density
Predicts waiting times
Suggests optimized routes
Sends real-time alerts

It acts as a personal guide inside the stadium, helping users make smarter decisions.

Architecture: React + Vite

The frontend is built using React with Vite for fast performance and smooth development.

Core Interfaces:

Attendee Navigation App
- Find seats and facilities
- View crowd density
- Get optimized routes
Admin Dashboard
- Monitor crowd activity
- Trigger emergency alerts
- Broadcast announcements

To simulate real-time behavior, I created a SimulatorContext using React Context API, which updates crowd density and queue times every few seconds.

Decision-Making Logic

The system uses rule-based intelligent logic:

If crowd density exceeds a threshold → suggest alternate routes
If waiting time is high → recommend nearby stalls
If emergency occurs → guide users to safest exits This ensures dynamic and context-aware assistance.

Key Features

AI-based crowd monitoring (simulated data)
Smart navigation with less crowded routes
Real-time queue management
Emergency guidance system
Admin dashboard for control and monitoring

Dockerizing the Application

To deploy the application, I containerized it using Docker.
Since React apps are static after build, I used Nginx to serve the files efficiently.

Dockerfile


dockerfile
FROM node:22-alpine as builder
WORKDIR /app
COPY package.json package-lock.json* ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

⚠️ Fixing React Routing with Nginx
React Router requires all routes to redirect to index.html. Without this, direct navigation causes 404 errors.

nginx.conf
server {    
     listen 8080;    
     server_name _;    
     root /usr/share/nginx/html;    
     index index.html;    

     location / {        
         try_files $uri $uri/ /index.html;    
   }
 }

☁️ Deployment Challenge: Node Version Issue

During deployment on Google Cloud Run, I encountered a build error:
npm WARN EBADENGINE Unsupported engine
The issue was that Vite requires Node 20+, but my Docker image used Node 18.

Solution:
-Updated base image to node:22-alpine
-Rebuilt and redeployed successfully


## Google Services Used
This project integrates key Google services:

-Firebase (planned integration) for real-time data handling

-Google Maps API for navigation and route visualization

-Google Cloud Run for scalable container deployment

-Google Cloud Build for automated builds



🌐 Live Demo
👉 https://stadium-ai-assistant-455356131916.us-central1.run.app/

## How It Works

-User opens the app inside the stadium

-System fetches simulated real-time data

-Analyzes crowd and queue conditions

-Suggests optimal routes and actions

-Sends alerts and updates


## Challenges Faced

-Handling client-side routing with Nginx

-Docker configuration for React apps

-Node version compatibility issues

-Keeping the project lightweight


## Assumptions

-Data is simulated (no real sensors used)

-Users have internet access

-Google Maps approximates indoor navigation

-Prototype built for demonstration purposes


## Future Improvements

-Integration with Firebase Firestore

-Real IoT sensor data

-Advanced AI/ML prediction models

-Indoor positioning systems


## Conclusion

This project demonstrates how modern web technologies and cloud platforms can solve real-world problems in large-scale environments. By combining intelligent decision-making, real-time simulation, and cloud deployment, the Smart Stadium Assistant provides a scalable and practical solution for improving stadium experiences.


## Final Thoughts

-Building this project helped me understand:

-Real-time system design

-Cloud deployment using Google Cloud Run

-Practical use of AI logic in real-world applications



## Author
Meghana Anupoju

DEV Community: Meghana Anupoju