Rest Countries App

screenshot of Rest Countries App
react
scss

Rest Countries App

REST Countries API with color theme switcher

Overview

This solution is for the REST Countries API with color theme switcher challenge on Frontend Mentor. The challenge requires users to build a webpage that allows them to view countries from the API, search for countries, filter countries by region, view detailed information about a specific country, and navigate to border countries. Additionally, there is an optional feature to toggle between light and dark mode for the color scheme.

Features

  • See all countries: Users can view a list of all countries from the API on the homepage.
  • Search for a country: Users can search for a specific country using an input field.
  • Filter countries by region: Users can filter countries by selecting a specific region.
  • Detailed country information: Users can click on a country to see more detailed information on a separate page.
  • Navigate to border countries: Users can click on the border countries listed on the detail page to navigate to their respective pages.
  • Color theme switcher: Users have the option to toggle between light and dark mode for the color scheme.

Installation

To install this theme, follow these steps:

  1. Clone the repository: git clone https://github.com/<username>/<repository>.git
  2. Navigate to the project folder: cd <repository>
  3. Install the dependencies: npm install
  4. Start the development server: npm start
  5. Open a web browser and visit: http://localhost:3000

Summary

This solution for the REST Countries API with color theme switcher challenge on Frontend Mentor provides users with the ability to view a list of countries, search for specific countries, filter countries by region, view detailed country information, navigate to border countries, and toggle between light and dark mode for the color scheme. The solution is built with Semantic HTML5 markup, Sass custom properties, Flexbox, and the React JavaScript library. The developer learned how to navigate and send data between pages using React Router's useNavigation and useLocation hooks, as well as how to pass data from a child component to a parent component in React. Useful resources for this project included guides on using React Router, passing data and events between components in React, and working with multiple pages in React.

react
React

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
SCSS

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.

template
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
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