Demo Application

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.