Football Live Scores App

A web application that displays live football (soccer) games with real-time scores and match information from multiple data sources.

• Real-time live scores from multiple APIs
• Date navigation to view matches from different days
• Live updates via Server-Sent Events for ongoing matches
• Multiple data sources for comprehensive coverage
• Auto-refresh functionality
• Responsive design with TailwindCSS
• Competition grouping for organized viewing
• Match status indicators (Live, Finished, Scheduled)

├── backend/
│   ├── index.ts             # Main Hono server with live data integration
│   └── README.md
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main React component with live updates
│   │   ├── MatchCard.tsx    # Individual match display
│   │   └── LoadingSpinner.tsx
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # Frontend entry point
│   └── style.css            # Custom styles
├── shared/
│   ├── types.ts             # Shared TypeScript types
│   └── utils.ts             # Shared utility functions
└── README.md

The app integrates with multiple free football APIs for comprehensive coverage:

• football-data.org - Free tier provides access to major European leagues
• TheSportsDB - Free API with global football coverage
• OpenLigaDB - German football leagues (Bundesliga)

• GET /api/matches - Today's matches from all sources
• GET /api/matches/:date - Matches for specific date (YYYY-MM-DD)
• GET /api/live - Server-Sent Events for live score updates

• Real-time score updates via Server-Sent Events
• Automatic refresh every 30 seconds for live matches
• Toggle to enable/disable live updates
• Visual indicator when live updates are active

• Date picker to view matches from any date
• Automatic detection of today's matches
• Historical match data access

• Combines data from multiple sources
• Removes duplicate matches
• Fallback to mock data if APIs are unavailable
• Error handling for API failures

Optional API keys for enhanced data access:

FOOTBALL_DATA_API_KEY=your_football_data_org_api_key

1. View Today's Matches: App loads today's matches automatically
2. Live Updates: Live matches update automatically every 30 seconds
3. Date Selection: Use the date picker to view matches from other dates
4. Manual Refresh: Click refresh button to update match data
5. Live Toggle: Enable/disable real-time updates for live matches

• Backend: Hono (TypeScript) with multiple API integrations
• Frontend: React with TypeScript and Server-Sent Events
• Styling: TailwindCSS for responsive design
• Data: Multiple free football APIs with fallback support
• Real-time: Server-Sent Events for live score updates

• Uses free tiers of multiple APIs for maximum coverage
• Implements fallback mechanisms for reliability
• Handles rate limiting and API errors gracefully
• Combines data from different sources intelligently