Build a Live Scores App with React

Building a live scores app is one of the most common use cases for sports data APIs. In this tutorial, you will create a React dashboard that displays live football match scores and updates them automatically.

Project Setup

Start with a new React project using Vite. You will need just two dependencies: React and a fetch library. The SportsDataAPI fixtures endpoint with the “live=all” parameter returns every match currently in play.

npm create vite@latest live-scores -- --template react
cd live-scores
npm install

Create an environment variable file for your API key. Never hardcode your key in the source code.

VITE_API_KEY=your_api_key_here

Fetching Live Data

Create a custom hook that fetches live fixtures every 60 seconds. This pattern uses the useEffect and useState hooks from the React documentation. The fixtures endpoint returns match data including teams, scores, elapsed time, and match events.

function useLiveFixtures() {
  const [fixtures, setFixtures] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch(
        "https://v3.football.sportsdataapi.com/fixtures?live=all",
        { headers: { "x-apisports-key": import.meta.env.VITE_API_KEY } }
      );
      const data = await res.json();
      setFixtures(data.response);
    };

    fetchData();
    const interval = setInterval(fetchData, 60000);
    return () => clearInterval(interval);
  }, []);

  return fixtures;
}

Displaying Match Cards

Each fixture in the response includes the home and away teams, their logos, the current score, and the match status. Map over the fixtures array to render a card for each live match.

The response includes a “status” object with “elapsed” (minutes played) and “short” (status code like “1H”, “2H”, “HT”, “FT”). Use these to show the match progress.

Grouping by League

Live fixtures come from multiple leagues simultaneously. Group them by “league.name” to create organized sections. Sort leagues alphabetically or by priority (major leagues first).

Adding Real-Time Updates

Poll the endpoint every 60 seconds to stay within rate limits on the free plan. For production apps on paid plans, you can reduce the interval to 15-30 seconds for near-real-time updates.

Show a subtle loading indicator during refreshes so users know the data is updating without disrupting the display.

Error Handling

Always handle network failures gracefully. Show the last known data with a “Last updated” timestamp when a request fails. Retry with exponential backoff for transient errors.

Check the “errors” array in every response. Common errors include invalid API keys, exhausted rate limits, and invalid parameters.

Deployment

Deploy your app to any static hosting service. Remember to set your API key as an environment variable in your hosting platform, not in the code. Consider adding a simple backend proxy to keep your API key server-side in production.