Countries API With Color Theme Switcher

screenshot of Countries API With Color Theme Switcher

Countries API With Color Theme Switcher

Одностраничное приложение, написанное на React с использованием библиотеки Redux Toolkit


The Frontend Mentor - REST Countries API with color theme switcher is a single-page application that allows users to view a list of countries and search for specific countries based on various criteria. The application also includes a color theme switcher, offering both light and dark themes. When a specific country is selected, users can view detailed information about the country, including neighboring countries, and navigate to the details page of each country. The application is built using React and is responsive for both desktop and mobile devices. It utilizes Redux Toolkit for state management, Axios for API interaction, React Icons for icons, and SASS for styling.


  • Single-page application with a list of countries
  • Search functionality based on country name, region, capital, and continent
  • Theme switcher offering light and dark themes
  • Detailed country information page with neighboring countries and navigation to each country's details page


To install the Frontend Mentor - REST Countries API with color theme switcher, follow these steps:

  1. Clone the repository:
git clone [repository URL]
  1. Navigate to the project directory:
cd [project directory]
  1. Install the dependencies:
npm install
  1. Start the application:
npm start
  1. Open the application in your browser at http://localhost:3000.


The Frontend Mentor - REST Countries API with color theme switcher is a feature-rich single-page application that provides users with the ability to view and search for countries. The application offers a theme switcher for customizing the appearance and provides detailed information about each country, including neighboring countries. Built with React, Redux Toolkit, Axios, React Icons, and SASS, the application is responsive and easy to use.


React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components


SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.

GitHub Pages

Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading