Demo Application

See how the REST Countries API can be used in an actual application.

We'll cover the following

Let’s look at a React app that uses some of the endpoints we’ve discussed. This application will offer the following functionalities:

  • Search country by country name
  • Search country by currency name
  • Search country by language
  • Search country by the capital city
  • Search country by region name
  • Search country by subregion name

Application workflow

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

  1. When the application starts, we’re presented with the home page. This page displays a top bar that shows welcome text and a form to enter our input.
  2. We select an option from the drop-down menu to specify which parameter we want to use for our search.
  3. After selecting the search parameter, we enter the search query in the search bar.
  4. Click the “Search” button to get a list of countries matching our search query according to our input.
  5. The result list shows the following information about a country:
  • Country’s common name with the flag emoji
  • Country’s region
  • Country’s capital city
  • Country’s borders
  • Country’s Google Map link
  • Country’s flag
  • Country’s official name

If no country matches our query, the application displays “No Country Found.”

Demo application

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

import React from "react";
import logo from "../logos/logo.png";

function NavBar() {
  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <img
        src={logo}
        alt="Logo Image"
        style={{ height: "60px", marginTop: "10px" }}
      ></img>
      <div>
        <p
          style={{
            fontWeight: "300",
            fontSize: "38px",
            margin: "0px 0px 0px 0px",
            marginTop: "15px",
            lineHeight: "120%",
            fontFamily: "'Open sans', sans-serif",
          }}
        >
          Welcome to countries API
        </p>
      </div>
    </div>
  );
}

export default NavBar;
React application using REST Countries API

Code explanation

For our React application, the file index.js renders the App component (App.js) as the root component.
Let’s look at the components of our application:

  • SearchSelector: This component renders the form in which we specify our query inputs.
  • CountriesList: This component displays the list of countries. This component will create a URL according to the form input. When we click the “Search” button, it will call the URL and pass the data to a map function to create the output on the page. This function uses an if statement to identify whether the response is the list of countries or 404.