GreenDots — IPL 2026 Dot Ball Trees Tracker

Every dot ball in IPL 2026 plants 19 trees. GreenDots tracks this in real-time — showing live scores, per-match tree counts, bowler/batsman dot rankings, and team leaderboards.

Disclaimer: GreenDots is an independent, fan-made project. Not affiliated with IPL, BCCI, Tata Group, or any cricket franchise.

Stack

• Backend: Cloudflare Worker + Hono.js + D1 SQLite + Durable Objects (WebSocket)
• Frontend: React + TypeScript + Tailwind CSS + Framer Motion
• Data: S3 JSONP feeds scraped every 5 minutes during match hours

Pages

Route	Description
/	Live match dashboard with real-time scores and tree count
/matches	Match schedule with filters (upcoming, live, completed)
/matches/:id	Match detail — scorecard, phase breakdown, per-innings bowler/batsman leaderboards
/teams	Team standings ranked by dots bowled/faced
/teams/:team	Team detail — top bowlers, batsmen, recent matches
/players	Player rankings — top 10 dot bowlers and batsmen
/players/:type/:name	Player detail — overall stats, match-by-match performance

Features

• Real-time score updates via WebSocket
• Batting-first team always shown on left (standard sports layout)
• Per-innings bowler and batsman leaderboards in 2-column grid
• Share any page as an image with watermark
• Phase breakdown (Powerplay, Middle, Death overs)
• Team and player trend indicators (rank changes)
• Responsive design with max-width container for desktop
• Mobile bottom navigation with live indicator

Setup

npm install

# Copy config and fill in your D1 database ID
cp wrangler.toml.example wrangler.toml

# Create D1 database
npx wrangler d1 create greendots-db

# Apply migrations
npx wrangler d1 migrations apply greendots-db --local

# Start dev server
npm run dev -- --test-scheduled

API

Endpoint	Description
GET /api/matches?status=live	List matches by status
GET /api/matches/:id	Match detail with innings, bowler/batsman dots
GET /api/matches/:id/innings/:no	Single innings detail
GET /api/tournaments/summary	Total dots, trees, matches played
GET /api/tournaments/leaderboards/bowlers	Top dot bowlers
GET /api/tournaments/leaderboards/batsmen	Most dot balls faced
GET /api/tournaments/leaderboards/teams	Team dot rankings
GET /ws/matches/:id	WebSocket for live updates

Scripts

Command	Description
npm run dev	Local dev server
npm run dev -- --test-scheduled	Dev server with cron on startup
npm test	Run tests
npm run typecheck	TypeScript check
npm run deploy	Deploy to Cloudflare

Project Structure

src/
  index.ts                  # Worker entry
  types.ts                  # TypeScript types
  fixtures.ts               # IPL 2026 schedule (74 matches)
  routes/
    api.ts                  # REST API
    ui.ts                   # HTML page
    ws.ts                   # WebSocket upgrade
  services/
    parser.ts               # JSONP feed parser
    insights.ts             # Dot ball analytics
  db/
    queries.ts              # D1 query helpers
  durable-objects/
    match-room.ts           # WebSocket hub per match
  cron/
    scraper.ts              # Cron job orchestrator
frontend/
  src/
    views/                  # Page components
    components/             # Shared UI components
    layout/                 # Header, BottomNav, Background
    hooks/                  # useFetch, useWebSocket, useReveal
    lib/                    # API client, utils, types, share
    styles/                 # Tailwind CSS