Stadium Economics Tracker

A comprehensive web application to track and analyze the economics of major US sports stadiums, focusing on public subsidies and their return on investment.

🏟️ Features

• Interactive Map: Leaflet.js powered map showing stadium locations
• ROI Analysis: Calculate public cost per win for each stadium
• Data Visualization: Sortable table ranking stadiums by various metrics
• Policy Insights: Detailed funding source information
• Responsive Design: Mobile-friendly interface with dark/light mode
• Professional UI: Economist-style clean typography and data presentation

🛠️ Technology Stack

• Frontend: Astro + Tailwind CSS + Leaflet.js
• Backend: Cloudflare Workers + Hono.js
• Database: Cloudflare D1 (SQLite)
• Deployment: Cloudflare Pages + Workers

📊 Stadium Data

Currently tracking 5 major NFL stadiums:

• Allegiant Stadium (Las Vegas Raiders)
• SoFi Stadium (Los Angeles Rams/Chargers)
• Mercedes-Benz Stadium (Atlanta Falcons)
• U.S. Bank Stadium (Minnesota Vikings)
• Levi's Stadium (San Francisco 49ers)

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Cloudflare account (for deployment)

Development Setup

1. Install dependencies:

   npm install

2. Start development server:

   npm run dev

3. Open browser: Visit http://localhost:4321

Database Setup

1. Create Cloudflare D1 database:

   npx wrangler d1 create stadium-economics

2. Initialize database schema:

   npm run db:init

3. Update wrangler.toml with your database ID

Worker Development

1. Start worker in development:

   npm run worker:dev

2. Deploy worker:

   npm run worker:deploy

📁 Project Structure

economics-of-mlb/
├── src/
│   ├── pages/
│   │   └── index.astro           # Main frontend page
│   └── worker.ts                 # Cloudflare Worker backend
├── schema.sql                    # D1 database schema
├── wrangler.toml                 # Cloudflare configuration
├── package.json                  # Dependencies
├── astro.config.mjs             # Astro configuration
├── tailwind.config.mjs          # Tailwind CSS configuration
└── tsconfig.json                # TypeScript configuration

🔧 Available Scripts

• npm run dev - Start Astro development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run worker:dev - Start Worker development
• npm run worker:deploy - Deploy Worker to Cloudflare
• npm run db:init - Initialize D1 database

📈 Key Metrics

The application calculates several important metrics:

• Public Cost per Win: Public subsidy divided by total wins since stadium opening
• Subsidy Percentage: Public contribution as percentage of total cost
• ROI Analysis: Efficiency of public investment in terms of team success

🎨 UI Features

• Theme Toggle: Dark/light mode with system preference detection
• View Toggle: Switch between interactive map and data table
• Interactive Sidebar: Detailed stadium information on click
• Responsive Design: Mobile-optimized interface
• Professional Styling: Clean, data-focused design inspired by The Economist

🚀 Deployment

Cloudflare Pages + Workers

1. Build the project:

   npm run build

2. Deploy to Cloudflare Pages:

   • Connect your GitHub repository
   • Set build command: npm run build
   • Set build output directory: dist

3. Deploy Worker:

   npm run worker:deploy

🧪 Testing

The application includes:

• Interactive map functionality
• Sidebar display on marker clicks
• Theme toggle functionality
• Responsive design verification
• Data table sorting
• ROI calculations validation

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Stadium financial data sourced from public records
• Team performance data from NFL statistics
• Map tiles provided by OpenStreetMap
• Icons and styling inspired by The Economist's data visualization standards