/countries-api

This is my solution to the Frontend Mentor REST countries API challenge

Primary LanguageJavaScript

Frontend Mentor REST Countries API with color theme switcher solution

This is my solution to the Frontend Mentor countries API challenge

Table ofContents

Overview

The Challenge

Your challenge is integrating with the REST Countries API to pull country data and display it to the user.

You can use any JavaScript framework/library on the front-end, such as React or Vue. You also have complete control over which packages you use to make HTTP requests or style your project.

Your users should be able to:

  • See all countries from the API on the homepage
  • Search for a country using an input field
  • 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 (optional)

Screenshots

Live Site

The site is deployed using github pages here

My Process

Tools used 🔧

  • React
  • CSS flexbox
  • CSS grid
  • Axios
  • React Router

This app uses the React library. I used funtional components with hooks. I used the context api for state management. It uses React Router to render the different pages. It uses Axios to fetch data from the REST countries api.

Challenges

  1. Using React Router for rendering different pages came with a problem I am yet to fix. Refreshing the country details page breaks the app.

  2. Some countries come with insufficient data that it breaks the app. For instance trying to see the details of Macau broke the App at first. I fixed it by making the code more imperative. For instance, when getting the native name, I used this at first,which didn't work on countries without a native name.

    const nativeName = getNativeName(name.nativeName);

    By using a more imperative approach, I managed to fix the bug.

    const nativeName = () => {
  if (name.nativeName !== undefined) {
    return getNativeName(name.nativeName);
  } else {
    return "";
  }
};

Useful Resources

  • Stack Overflow - Whenever I got stuck, I would check stack overflow for some insight.
  • MDN web docs - In case I forgot some syntax, I would always refer to the docs.
  • Scrimba - This is the best place to learn frontend development in my opinion.

Run on your machine

In order for you to run this app on your localhost, you must have node installed on your system. You can get Node here. If you already have node installed, clone the development branch of this repo.

git clone -b development --single-branch https://github.com/kiprop-dave/countries-api.git

Then run

npm install

to install dependencies. Finally run

npm run dev

and open the link on your browser.

Author