An App that displays a list of countries, including information about their population and cities. Built using React, Redux, Tailwind CSS, Jest, Countries API, Openweather API

• Site
• Sample code

Go Live

• React
• Redux
• Tailwind CSS
• Jest for testing
• Tools used - Git(version control), WebHint(linting tool), Stylelint(style linting), ESLint(Javascript linting)

• React
• Redux
• Git
• Node

if (queryRegion !== 'all') {
    countries = countries.filter((country) => {
      const countryRegion = country.un_geoscheme.region;
      return countryRegion === queryRegion;
    });
    countriesLength = countries.length;
  }

  const regionPop = countries.reduce(
    (partialSum, country) => partialSum + parseInt(country.population.total, 10), 0,
  );

  if (queryName.trim()) {
    countries = countries.filter((country) => {
      const name = country.name.toUpperCase();
      return name.includes(queryName.trim().toUpperCase());
    });
    countriesLength = countries.length;
  }

  const changePageNumber = (value) => {
    if (value < 0 && pageNumber === 1) return;
    if (value > 0 && pageNumber * 6 > countriesLength) {
      return;
    }
    setPageNumber((prev) => prev + value);
  };

 { Math.abs(population) > 999 ? `${((Math.abs(population) / 1000).toFixed(1))}k` : Math.abs(population)}

Go to your terminal, navigate to your working directory and run

git clone https://github.com/RayhanTabase/countries-worldwide.git

After that navigate to the newly created folder

cd countries-worldwide

You now have access to the files. To install necessary dependencies run

npm install

Start a local server running the command

npm start

You should now have the project running locally on a dev server.

👤 Salim Abdulai

• GitHub: @RayhanTabase
• Twitter: @RayhanTabase
• LinkedIn: Salim-Abdulai
• Email: [email protected]

Original design idea by Nelson Sakwa on Behance.

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Give a ⭐️ if you like this project!

This project is MIT licensed.