Football Live Scores App

A real-time football scores application that displays ongoing games for each day.

Features

  • View today's football matches
  • Live score updates
  • Match status (live, finished, scheduled)
  • Clean, responsive interface
  • Multiple leagues and competitions

Project Structure

├── backend/
│   ├── index.ts             # Main Hono server
│   └── README.md
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main React component
│   │   ├── MatchCard.tsx    # Individual match display
│   │   └── DateSelector.tsx # Date navigation
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # Frontend entry point
│   ├── style.css            # Custom styles
│   └── README.md
├── shared/
│   ├── types.ts             # Shared TypeScript types
│   └── README.md
└── README.md

API

Currently uses mock data for demonstration. In production, this would integrate with:

  • football-data.org (free tier available)
  • API-Football (RapidAPI)
  • Other football data providers

Usage

  1. The app loads with today's matches by default
  2. Use the date selector to view matches from other days
  3. Live matches update automatically every 30 seconds
  4. Matches are grouped by status: Live, Finished, and Upcoming
  5. Live matches show current minute and pulse animation
  6. Responsive design works on mobile and desktop

Features

  • ⚽ Real-time match updates
  • 📅 Date navigation (yesterday, today, tomorrow, and custom dates)
  • 🔴 Live match indicators with pulsing animation
  • 📱 Responsive design
  • 🎨 Clean, modern interface with TailwindCSS
  • ⚡ Fast loading with server-side data injection
  • 🔄 Auto-refresh for live matches

Tech Stack

  • Backend: Hono (TypeScript)
  • Frontend: React 18.2.0 + TailwindCSS
  • Data: Free football API
  • Platform: Val Town