CricketPulse-Live

CricketPulse Live

CricketPulse Live is a real-time cricket broadcast dashboard built as a single-page React/TypeScript application. It is a fan and operations tool that combines live match scores, auto-generated commentary, and stadium management features.

Tech Stack

• Frontend: React 19, TypeScript, Vite, Tailwind CSS v4, Motion (Framer Motion successor), Lucide icons
• Backend/Proxy: Express (for the local Cricbuzz API proxy endpoint)
• AI: Google Gemini (@google/genai) — integrated but the current codebase uses a rule-based commentary engine
• Deployment: Dockerfile included

Core Features

The app has three main tabs:

1. Scores Tab — Live match scoreboard

   • Fetches real live scores from Cricbuzz's public page via a local /api/cricbuzz/live proxy (scraper)
   • Shows a featured match with innings, run rate, venue, and status
   • Filterable by match type (All / International / League / T20)
   • Auto-refreshes every 30 seconds
   • Match cards grid showing up to 6 simultaneous matches
   • Tactical "Match Lens" sidebar with batting/bowling/field insight cards

2. Commentary Studio Tab — Ball-by-ball commentary engine

   • Polls the live feed every 15 seconds and detects meaningful score changes (runs, wickets, overs)
   • Auto-generates contextual commentary strings (wicket alerts, boundaries, over completions, run rate updates)
   • Displays a scrollable commentary timeline with timestamps and animated entry transitions
   • Supports switching between up to 4 simultaneous live matches
   • Live "match pulse" summary card always shows the latest state

3. Ground Tab — Stadium operations dashboard

   • FoodCounter — tracks concession stand orders/counts
   • DistanceTracker — tracks distance (e.g., crowd/patrol movement)
   • StadiumExperience — stadium experience/operations panel
   • Matchday Control panel — fan operations cards (entry load, pitch conditions, weather, medical desk locations) with background images

Data Architecture

• The cricketApi.ts service normalizes Cricbuzz's raw JSON format (CricbuzzMatch) into a clean internal CricketMatch model
• No fake demo data — if the Cricbuzz feed is unavailable, the UI shows an honest empty/error state
• The API proxy (/api/cricbuzz/live) must be set via VITE_CRICBUZZ_WEB_FEED_URL env variable; for production this should be moved to a backend/serverless function

UI/UX Details

• Dark-mode default with a day/night toggle
• Interactive spotlight effect on the hero match visual (follows mouse)
• Animated tab transitions using motion/react
• Responsive layout with CSS Grid