Football Live Scores

{formatDate(selectedDate)}

\n \n

\n {/* Date picker */}\n \n \n {/* Live updates toggle */}\n {isToday && (\n \n {liveUpdatesEnabled ? '● Live' : '○ Live'}\n \n )}\n \n {/* Refresh button */}\n \n 🔄\n {refreshing ? 'Refreshing...' : 'Refresh'}\n \n

\n \n {lastUpdated && (\n

\n Last updated: {new Date(lastUpdated).toLocaleTimeString()}\n

\n )}\n

\n\n {/* Main Content */}\n

\n {error && (\n

\n Error: {error}\n

\n )}\n\n {matches.length === 0 ? (\n

\n ⚽\n

\n {isToday ? 'No matches today' : `No matches on ${formatDate(selectedDate)}`}\n

\n {isToday ? 'Check back later for upcoming games!' : 'Try selecting a different date.'}\n

\n ) : (\n

\n {Object.entries(groupedMatches).map(([competition, competitionMatches]) => (\n

{competition}

\n {competitionMatches.length} match{competitionMatches.length !== 1 ? 'es' : ''}\n

\n {competitionMatches.map((match) => (\n \n ))}\n

\n ))}\n

\n )}\n\n {/* Live matches indicator */}\n {isToday && liveUpdatesEnabled && matches.some(match => match.status === 'live') && (\n

\n ● Live updates active\n

\n )}\n

\n\n {/* Footer */}\n \n

\n );\n}",[],[191,198,205],{"_106":214,"_98":215,"_150":216,"_152":199,"_153":137,"_154":200,"_156":157,"_108":217,"_103":31,"_160":209,"_162":218,"_163":27,"_164":-5,"_165":219,"_101":220},"c98d654a-3ff9-11f0-8501-76b3cceeab13","LoadingSpinner.tsx","c98d663a-3ff9-11f0-8501-76b3cceeab13",["D",1748900250930],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface LoadingSpinnerProps {\n message?: string;\n}\n\nexport default function LoadingSpinner({ message = \"Loading matches...\" }: LoadingSpinnerProps) {\n return (\n

{message}

\n );\n}",[],[191,198,215],{"_106":222,"_98":223,"_150":224,"_152":199,"_153":137,"_154":225,"_156":157,"_108":226,"_103":31,"_160":209,"_162":227,"_163":27,"_164":-5,"_165":228,"_101":229},"d1169552-3ff9-11f0-8c87-76b3cceeab13","MatchCard.tsx","d11695fc-3ff9-11f0-8c87-76b3cceeab13",19,["D",1748900263574],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport type { Match } from \"../../shared/types.ts\";\nimport { getMatchStatus, formatTime } from \"../../shared/utils.ts\";\n\ninterface MatchCardProps {\n match: Match;\n}\n\nexport default function MatchCard({ match }: MatchCardProps) {\n const status = getMatchStatus(match);\n \n return (\n

\n \n {status.displayText}\n \n {status.isLive && (\n ● LIVE\n )}\n

\n {match.venue && (\n {match.venue}\n )}\n

\n \n

\n {match.homeTeam}\n \n {match.homeScore !== null ? match.homeScore : '-'}\n \n

\n {match.awayTeam}\n \n {match.awayScore !== null ? match.awayScore : '-'}\n \n

\n \n

\n {match.competition}\n {match.status === 'scheduled' && (\n Kickoff: {formatTime(match.startTime)}\n )}\n {match.status === 'live' && match.minute && (\n {match.minute}' minute\n )}\n {match.status === 'finished' && (\n Final\n )}\n

\n );\n}",[],[191,198,223],[191,198],{"_106":232,"_98":169,"_150":233,"_152":192,"_153":137,"_154":234,"_156":157,"_108":235,"_103":31,"_160":173,"_162":236,"_163":27,"_164":-5,"_165":237,"_101":238},"f08be9be-3ff9-11f0-b7fb-76b3cceeab13","f08bea7c-3ff9-11f0-b7fb-76b3cceeab13",23,["D",1748900316353],"# Frontend\n\nReact-based frontend for the Football Live Scores app.\n\n## Components\n\n### App.tsx\n- Main application component\n- Handles state management for matches\n- Auto-refresh functionality for live matches\n- Server-side data injection support\n\n### MatchCard.tsx\n- Individual match display component\n- Shows team names, scores, status, and venue\n- Different styling for live, scheduled, and finished matches\n\n### LoadingSpinner.tsx\n- Reusable loading component\n- Used during initial load and refresh operations\n\n## Features\n\n- **Real-time Updates**: Auto-refreshes every 30 seconds when live matches are present\n- **Responsive Design**: Works on desktop and mobile devices\n- **Server-side Data**: Initial data is injected server-side for faster loading\n- **Live Indicators**: Visual indicators for live matches with pulsing animations\n- **Competition Grouping**: Matches are grouped by league/competition\n- **Manual Refresh**: Users can manually refresh match data\n\n## Styling\n\n- TailwindCSS for utility-first styling\n- Custom CSS for animations and transitions\n- Responsive design with mobile-first approach\n- Live match indicators with pulse animations\n\n## State Management\n\n- React hooks (useState, useEffect)\n- Auto-refresh logic for live matches\n- Error handling and loading states\n- Server-side data injection for initial load",[],[191,169],{"_106":240,"_98":241,"_150":242,"_152":192,"_153":137,"_154":193,"_156":157,"_108":243,"_103":31,"_160":173,"_162":244,"_163":27,"_164":-5,"_165":245,"_101":246},"c14a93a8-3ff9-11f0-9be1-76b3cceeab13","index.html","c14a9448-3ff9-11f0-9be1-76b3cceeab13",["D",1748900237071],"\n\n\n \n \n Football Live Scores\n \n \n \n ⚽\">\n\n\n

\n \n\n",[],[191,241],{"_106":248,"_98":249,"_150":250,"_152":192,"_153":137,"_154":251,"_156":157,"_108":252,"_103":31,"_160":209,"_162":253,"_163":27,"_164":-5,"_165":254,"_101":255},"e5964e78-3ff9-11f0-bca5-76b3cceeab13","index.tsx","e5964f22-3ff9-11f0-bca5-76b3cceeab13",21,["D",1748900297951],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[191,249],{"_106":257,"_98":258,"_150":259,"_152":192,"_153":137,"_154":260,"_156":157,"_108":261,"_103":31,"_160":173,"_162":262,"_163":27,"_164":-5,"_165":263,"_101":264},"c695fb72-3ff9-11f0-9be1-76b3cceeab13","style.css","c695fc3a-3ff9-11f0-9be1-76b3cceeab13",17,["D",1748900245955],"/* Custom styles for the football app */\n\n.match-card {\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n}\n\n.match-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\n}\n\n.live-indicator {\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.7;\n }\n}\n\n.score-display {\n font-family: 'Courier New', monospace;\n font-weight: bold;\n}\n\n.competition-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.loading-spinner {\n border: 3px solid #f3f3f3;\n border-top: 3px solid #3498db;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n margin: 20px auto;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n.refresh-button {\n transition: all 0.3s ease;\n}\n\n.refresh-button:hover {\n transform: rotate(180deg);\n}\n\n/* Responsive design */\n@media (max-width: 768px) {\n .match-card {\n margin: 0.5rem;\n }\n \n .score-display {\n font-size: 1.25rem;\n }\n}",[],[191,258],[191],{"_106":267,"_98":268,"_150":269,"_152":-5,"_153":137,"_154":270,"_156":157,"_108":271,"_103":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":272,"_101":290},"abbbd1e6-3ff9-11f0-a8bc-76b3cceeab13","shared","7516cfea-3b05-4132-83f7-ae954d3dc065",13,["D",1748900200902],[273,281],{"_106":274,"_98":275,"_150":276,"_152":269,"_153":137,"_154":270,"_156":157,"_108":277,"_103":31,"_160":209,"_162":278,"_163":27,"_164":-5,"_165":279,"_101":280},"abbbc782-3ff9-11f0-a8bc-76b3cceeab13","types.ts","abbbc85e-3ff9-11f0-a8bc-76b3cceeab13",["D",1748900200902],"// Shared types for the football app\n\nexport interface Match {\n id: string;\n homeTeam: string;\n awayTeam: string;\n homeScore: number | null;\n awayScore: number | null;\n status: 'scheduled' | 'live' | 'finished';\n startTime: string;\n competition: string;\n minute?: number;\n venue?: string;\n}\n\nexport interface Competition {\n id: string;\n name: string;\n country?: string;\n logo?: string;\n}\n\nexport interface ApiResponse {\n matches: Match[];\n lastUpdated: string;\n}\n\nexport interface MatchStatus {\n isLive: boolean;\n displayText: string;\n className: string;\n}",[],[268,275],{"_106":282,"_98":283,"_150":284,"_152":269,"_153":137,"_154":285,"_156":157,"_108":286,"_103":31,"_160":209,"_162":287,"_163":27,"_164":-5,"_165":288,"_101":289},"b0d95676-3ff9-11f0-99d3-76b3cceeab13","utils.ts","b0d95720-3ff9-11f0-99d3-76b3cceeab13",14,["D",1748900209485],"import type { Match, MatchStatus } from './types.ts';\n\nexport function formatTime(dateString: string): string {\n const date = new Date(dateString);\n return date.toLocaleTimeString('en-US', { \n hour: '2-digit', \n minute: '2-digit',\n hour12: false \n });\n}\n\nexport function formatDate(dateString: string): string {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', { \n weekday: 'long',\n year: 'numeric', \n month: 'long', \n day: 'numeric' \n });\n}\n\nexport function getMatchStatus(match: Match): MatchStatus {\n switch (match.status) {\n case 'live':\n return {\n isLive: true,\n displayText: match.minute ? `${match.minute}'` : 'LIVE',\n className: 'bg-red-500 text-white animate-pulse'\n };\n case 'finished':\n return {\n isLive: false,\n displayText: 'FT',\n className: 'bg-gray-500 text-white'\n };\n case 'scheduled':\n return {\n isLive: false,\n displayText: formatTime(match.startTime),\n className: 'bg-blue-500 text-white'\n };\n default:\n return {\n isLive: false,\n displayText: 'Unknown',\n className: 'bg-gray-400 text-white'\n };\n }\n}\n\nexport function groupMatchesByCompetition(matches: Match[]): Record {\n return matches.reduce((groups, match) => {\n const competition = match.competition || 'Other';\n if (!groups[competition]) {\n groups[competition] = [];\n }\n groups[competition].push(match);\n return groups;\n }, {} as Record);\n}\n\nexport function getTodayDateString(): string {\n const today = new Date();\n return today.toISOString().split('T')[0];\n}",[],[268,283],[268],{"_106":292,"_98":169,"_150":293,"_152":-5,"_153":137,"_154":136,"_156":157,"_108":294,"_103":295,"_160":173,"_162":296,"_163":27,"_164":-5,"_165":297,"_101":298},"e8aa9fa0-3fff-11f0-857c-76b3cceeab13","a8beb9b8-3ff9-11f0-ae70-76b3cceeab13",["D",1748902880110],2,"# Football Live Scores App\n\nA web application that displays live football (soccer) games with real-time scores and match information from multiple data sources.\n\n## Features\n\n- **Real-time live scores** from multiple APIs\n- **Date navigation** to view matches from different days\n- **Live updates** via Server-Sent Events for ongoing matches\n- **Multiple data sources** for comprehensive coverage\n- **Auto-refresh** functionality\n- **Responsive design** with TailwindCSS\n- **Competition grouping** for organized viewing\n- **Match status indicators** (Live, Finished, Scheduled)\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono server with live data integration\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main React component with live updates\n│ │ ├── MatchCard.tsx # Individual match display\n│ │ └── LoadingSpinner.tsx\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Custom styles\n├── shared/\n│ ├── types.ts # Shared TypeScript types\n│ └── utils.ts # Shared utility functions\n└── README.md\n```\n\n## Data Sources\n\nThe app integrates with multiple free football APIs for comprehensive coverage:\n\n### Primary Sources\n- **football-data.org** - Free tier provides access to major European leagues\n- **TheSportsDB** - Free API with global football coverage\n- **OpenLigaDB** - German football leagues (Bundesliga)\n\n### API Endpoints\n- `GET /api/matches` - Today's matches from all sources\n- `GET /api/matches/:date` - Matches for specific date (YYYY-MM-DD)\n- `GET /api/live` - Server-Sent Events for live score updates\n\n## Features in Detail\n\n### Live Updates\n- Real-time score updates via Server-Sent Events\n- Automatic refresh every 30 seconds for live matches\n- Toggle to enable/disable live updates\n- Visual indicator when live updates are active\n\n### Date Navigation\n- Date picker to view matches from any date\n- Automatic detection of today's matches\n- Historical match data access\n\n### Data Aggregation\n- Combines data from multiple sources\n- Removes duplicate matches\n- Fallback to mock data if APIs are unavailable\n- Error handling for API failures\n\n## Environment Variables\n\nOptional API keys for enhanced data access:\n\n```\nFOOTBALL_DATA_API_KEY=your_football_data_org_api_key\n```\n\n## Usage\n\n1. **View Today's Matches**: App loads today's matches automatically\n2. **Live Updates**: Live matches update automatically every 30 seconds\n3. **Date Selection**: Use the date picker to view matches from other dates\n4. **Manual Refresh**: Click refresh button to update match data\n5. **Live Toggle**: Enable/disable real-time updates for live matches\n\n## Tech Stack\n\n- **Backend**: Hono (TypeScript) with multiple API integrations\n- **Frontend**: React with TypeScript and Server-Sent Events\n- **Styling**: TailwindCSS for responsive design\n- **Data**: Multiple free football APIs with fallback support\n- **Real-time**: Server-Sent Events for live score updates\n\n## API Integration Notes\n\n- Uses free tiers of multiple APIs for maximum coverage\n- Implements fallback mechanisms for reliability\n- Handles rate limiting and API errors gracefully\n- Combines data from different sources intelligently",[],[169],{"_106":300,"_98":301,"_150":302,"_152":-5,"_153":137,"_154":159,"_156":157,"_108":303,"_103":31,"_160":209,"_162":71,"_163":27,"_164":-5,"_165":304,"_101":305},"96bad608-3ff8-11f0-a3c3-76b3cceeab13","main.tsx","96bad6bc-3ff8-11f0-a3c3-76b3cceeab13",["D",1748899736169],[],[301],{"_106":307,"_98":308,"_150":309,"_152":-5,"_153":137,"_154":310,"_156":157,"_108":311,"_103":31,"_160":209,"_162":71,"_163":27,"_164":-5,"_165":312,"_101":313},"0dbfe73e-3ff9-11f0-87ba-76b3cceeab13","new-file-4551.tsx","0dbfe810-3ff9-11f0-87ba-76b3cceeab13",11,["D",1748899935851],[],[308],{"_106":315,"_98":316,"_150":317,"_152":-5,"_153":137,"_154":318,"_156":157,"_108":319,"_103":295,"_160":184,"_162":320,"_163":27,"_164":-5,"_165":321,"_101":322},"fbdd6244-3ff8-11f0-8aea-76b3cceeab13","new-file-9206.tsx","f666f7bc-3ff8-11f0-aba9-76b3cceeab13",10,["D",1748899905840],"export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",[],[316],"files",[147,167,177,189,196,203,213,221,231,239,247,256,266,273,281,291,299,306,314],"counts",{"_327":31,"_328":159,"_329":31,"_330":31},"pulls","branches","forks","envVars","contents",[],{"_106":222,"_98":223,"_150":224,"_152":199,"_153":137,"_154":225,"_156":157,"_108":334,"_103":31,"_160":209,"_162":227,"_163":27,"_164":-5,"_101":335},["D",1748900263574],[191,198,223],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_96":97,"_98":99,"_100":42,"_103":-7,"_101":102,"_104":342,"_145":346,"_323":404,"_173":405,"_331":407,"_408":-5,"_409":27,"_410":-5,"_411":-5,"_412":-5,"_413":414},{"_106":107,"_98":99,"_108":343,"_110":-5,"_111":27,"_112":113,"_114":-5,"_115":-5,"_12":116,"_117":-5,"_118":27,"_119":-5,"_120":31,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_130":27,"_21":344,"_134":345},["D",1748899736159],{"_96":97,"_132":133},{"_103":136,"_98":42,"_106":137,"_138":107,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":99,"_144":97},[347,356,383,392,395,398,401],{"_106":148,"_98":149,"_150":151,"_152":-5,"_153":137,"_154":155,"_156":157,"_108":158,"_103":159,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":348,"_101":355},[349,352],{"_106":168,"_98":169,"_150":170,"_152":151,"_153":137,"_154":171,"_156":157,"_108":172,"_103":31,"_160":173,"_162":174,"_163":27,"_164":-5,"_165":350,"_101":351},[],[149,169],{"_106":178,"_98":179,"_150":180,"_152":151,"_153":137,"_154":181,"_156":157,"_108":182,"_103":183,"_160":184,"_162":185,"_163":27,"_164":-5,"_165":353,"_101":354},[],[149,179],[149],{"_106":190,"_98":191,"_150":192,"_152":-5,"_153":137,"_154":193,"_156":157,"_108":194,"_103":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":357,"_101":382},[358,370,373,376,379],{"_106":197,"_98":198,"_150":199,"_152":192,"_153":137,"_154":200,"_156":157,"_108":201,"_103":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":359,"_101":369},[360,363,366],{"_106":204,"_98":205,"_150":206,"_152":199,"_153":137,"_154":207,"_156":157,"_108":208,"_103":159,"_160":209,"_162":210,"_163":27,"_164":-5,"_165":361,"_101":362},[],[191,198,205],{"_106":214,"_98":215,"_150":216,"_152":199,"_153":137,"_154":200,"_156":157,"_108":217,"_103":31,"_160":209,"_162":218,"_163":27,"_164":-5,"_165":364,"_101":365},[],[191,198,215],{"_106":222,"_98":223,"_150":224,"_152":199,"_153":137,"_154":225,"_156":157,"_108":226,"_103":31,"_160":209,"_162":227,"_163":27,"_164":-5,"_165":367,"_101":368},[],[191,198,223],[191,198],{"_106":232,"_98":169,"_150":233,"_152":192,"_153":137,"_154":234,"_156":157,"_108":235,"_103":31,"_160":173,"_162":236,"_163":27,"_164":-5,"_165":371,"_101":372},[],[191,169],{"_106":240,"_98":241,"_150":242,"_152":192,"_153":137,"_154":193,"_156":157,"_108":243,"_103":31,"_160":173,"_162":244,"_163":27,"_164":-5,"_165":374,"_101":375},[],[191,241],{"_106":248,"_98":249,"_150":250,"_152":192,"_153":137,"_154":251,"_156":157,"_108":252,"_103":31,"_160":209,"_162":253,"_163":27,"_164":-5,"_165":377,"_101":378},[],[191,249],{"_106":257,"_98":258,"_150":259,"_152":192,"_153":137,"_154":260,"_156":157,"_108":261,"_103":31,"_160":173,"_162":262,"_163":27,"_164":-5,"_165":380,"_101":381},[],[191,258],[191],{"_106":267,"_98":268,"_150":269,"_152":-5,"_153":137,"_154":270,"_156":157,"_108":271,"_103":31,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":384,"_101":391},[385,388],{"_106":274,"_98":275,"_150":276,"_152":269,"_153":137,"_154":270,"_156":157,"_108":277,"_103":31,"_160":209,"_162":278,"_163":27,"_164":-5,"_165":386,"_101":387},[],[268,275],{"_106":282,"_98":283,"_150":284,"_152":269,"_153":137,"_154":285,"_156":157,"_108":286,"_103":31,"_160":209,"_162":287,"_163":27,"_164":-5,"_165":389,"_101":390},[],[268,283],[268],{"_106":292,"_98":169,"_150":293,"_152":-5,"_153":137,"_154":136,"_156":157,"_108":294,"_103":295,"_160":173,"_162":296,"_163":27,"_164":-5,"_165":393,"_101":394},[],[169],{"_106":300,"_98":301,"_150":302,"_152":-5,"_153":137,"_154":159,"_156":157,"_108":303,"_103":31,"_160":209,"_162":71,"_163":27,"_164":-5,"_165":396,"_101":397},[],[301],{"_106":307,"_98":308,"_150":309,"_152":-5,"_153":137,"_154":310,"_156":157,"_108":311,"_103":31,"_160":209,"_162":71,"_163":27,"_164":-5,"_165":399,"_101":400},[],[308],{"_106":315,"_98":316,"_150":317,"_152":-5,"_153":137,"_154":318,"_156":157,"_108":319,"_103":295,"_160":184,"_162":320,"_163":27,"_164":-5,"_165":402,"_101":403},[],[316],[347,349,352,356,358,360,363,366,370,373,376,379,383,385,388,392,395,398,401],{"_106":222,"_98":223,"_150":224,"_152":199,"_153":137,"_154":225,"_156":157,"_108":334,"_103":31,"_160":209,"_162":227,"_163":27,"_164":-5,"_101":406},[191,198,223],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"routes/_app","actionData","errors"]