Getting Soccer Data with Api-Football in JavaScript/

...

/

Demo Application

Demo Application

Look at how the Api-Football endpoints and widgets can be integrated into a React application.

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.