REST Countries API

This is a solution to the REST Countries API challenge on Frontend Mentor and Full Stack Open.

Table of contents

• REST Countries API
  • Table of contents
  • Overview
    • Features
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Useful resources
  • Author

Overview

Features

• Display countries from the API on the homepage, sorted by population
• Search for a country by its name or capital
• Filter countries by region
• Click on a country to see more detailed information on a separate page
• Click through to the border countries on the detail page
• Toggle the color scheme between light and dark mode

Screenshot

Links

• View code solution: github.com/minhlong149/rest-countries-api
• Live site preview: minhlong149.github.io/rest-countries-api

My process

Built with

• Semantic HTML5 markup
• CSS Grid & Flexbox
• Mobile-first workflow
• React - JS library
• Tailwind CSS - CSS framework

What I learned

Lazy loading Images:

<img loading="lazy" src="..." />

Search bar with icon inside:

<div class="flex items-center">
  <span class="material-icons">search</span>
  <input
    class="bg-transparent focus:outline-none"
    placeholder="Search" type="text"
  />
</div>

Add floating point to big number for readability.

<p>Population: {country.population.toLocaleString()}</p>

Handle display to array that can either be empty or have multiple value.

<p>Capital: {country.capital?.join(", ") || "None"}</p>

Useful resources

• Search and Filter React Components by Spruce Emmanuel
• Tailwind CSS Official Document
• A Complete Guide to Grid by Chris House

Author

• Github - Long Nguyen