Rest Countries API Project with color theme switcher and geographical map

This project is a React application that provides information about countries worldwide using the REST Countries API. Users can explore various details about each country, including its name, capital, population, languages, and more. Additionally, the project integrates Mapbox GL for visualizing the geographical location of each country on an interactive map.

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help me improve my coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Features
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Installation

Overview

The challenge

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
• See country location on google map. (additional)
• Toggle the color scheme between light and dark mode (optional)

Features

• Display detailed information about countries, such as name, capital, population, languages, and more.
• Interactive map visualization using Mapbox GL to show the location of each country.
• Responsive design to ensure a seamless experience across different devices.

Screenshot

Links

• Live Site URL: https://rest-countries-api-with-color-theme-switcher-azure.vercel.app/

My process

Built with

• HTML
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library
• it is a Progressive Web App

What I learned

I learned how to integrated maps and fontawesome icons in react app To see how you can add code snippets, see below:

onst map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v12',
      center: [location.state.latlng[1], location.state.latlng[0]],
      zoom: 7,
    });
    const marker = new mapboxgl.Marker().setLngLat([location.state.latlng[1], location.state.latlng[0]]).addTo(map)

Useful resources

• https://docs.mapbox.com/mapbox-gl-js/guides/ - This repo helped me how to render map component in the browser using MapBox Maps Gl.
• https://fontawesome.com/v5/docs/web/use-with/react - helped me understand how to integrate fontawesome in react app.

Author

• Frontend Mentor - @mohamedhesham221
• Linkedin - Muhammad Hisham

Installation

• clone the repo git clone https://github.com/mohamedhesham221/REST-countries-API-with-color-theme-switcher.
• install dependencies npm install.
• start project with npm start.
• it can be viewed in the browser at http://localhost:3000.
• build the app for production to the build folder.\ npm run build.