Search⌘ K
AI Features
Home
Courses
Getting Soccer Data with Api-Football in JavaScript

Demo Application

Explore building a React application that retrieves and displays soccer data using Api-Football endpoints and widgets. Learn to implement components for fixtures, league standings, top scorers, top assists, and team search, enhancing your skills in API integration with React.

We'll cover the following...

Let's look at a React app that uses some of the Api-Football endpoints and widgets to retrieve the requested data. We'll use the Games and Standings widgets in the application. We'll also use five endpoints that are as follows:

  • Teams information

  • Standings

  • Players

  • Top Scorers

  • Top Assists

Application workflow

Let's look at the application workflow from the user's point of view:

  • When the application starts, we are presented with the homepage. This page displays the fixtures list, standings for EPL, and a navbar.

  • Using the search field in the navbar, we can search for any team.

  • By clicking any of the league logos displayed in the navbar, we're redirected to a page that shows the standings, a list of top scorers, and a list of top assist providers of that league.

Demo application

The widget below contains the code for our application. Click the "Run" button to see the app in action.

Note: We are limited to 10 requests per minute with the free account. In the event that we go above this limit, we will receive an error in response.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->

    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Football App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
Football App

Code explanation

For our React application, the file index.js renders the App component (App.js) as the root component.

Note: We've created and used a custom hook, useFetch, to fetch the data from any API endpoint.

Let's look at the components of our application:

  • Home: This component renders the homepage of the application. It does so by using the Games and the Standings widgets.

  • League: This component uses the Standings, topScorers, and topAssisters components to display standings, a list of top scorers, and a list of top assist providers of the selected league.

  • Standings: This component displays the standings of the selected league by using the Standings endpoint.

  • topScorers: This component displays a list of top scorers of the selected league. The data is populated using by calling the Top Scorers endpoint.

  • topAssisters: This component displays a list of top assist providers of the selected league. We get the top assist providers using the Top Assists endpoint.

  • searchedTeam: This component displays the list of teams that match our search criteria. The data is fetched using Api-Football by calling the Teams information endpoint with the search query parameter.

  • Team: This component renders the information of the selected team. This component uses the Squads endpoint to get the required data from the API.

  • Player: This component renders the information of the selected player. It uses the Players endpoint to populate this information.