Frontend Mentor - REST Countries API with color theme switcher solution

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

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Credits

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
• Click through to the border countries on the detail page
• Toggle the color scheme between light and dark mode

Screenshot

Links

• Live Site URL: rcountries.tk
• Live Site URL (If first link does not work): country-rest.netlify.app

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• React - JS library
• Styled Components - For styles

What I learned

I have learnt so many things after doing this project. This took time but helped me a lot. I learned to use React hooks properly. I learned to implement Pagination, Dark Mode, Grid Layouts, etc. properly. Previously I just had knowledge about it but not proper practice as I did not find suitable project for me but now I learnt so many things doing this project. Including adding filters in website, search feature, routes using react-router, using context api of react js and much more.

Continued development

If I want to continue in this project in future then I would like to implement so many things in this website. First of all I would like to include much more informations in country details page. I will include more informations below flag section. There I want to see more information of countries. I would also like to make back button of Country details page truly back. Suppose you search for country as "China" then China appears, then if you click China and click that button then it redirects you to home page but I want to make it such that it goes to search result page where user was previously. Though I can implement all these things right now but I am unable to do right now. I am hoping to continue it in future.

Author

Hi, my name is Binamra Lamsal. I created this project with React JS after learning it as a practice. I know my project solution may not be ideal solution but I tried my best to make it best as I can. Feel free to provide me suggestions.

• Frontend Mentor - @binamracode
• Twitter - @binamralamsal

Credits

• Checkbox for Dark Mode - Florin Pop
• @babit-pandey - Babit Pandey
  • Thanks to Babit Pandey for upgrading API to use v3.1 as old version was not working.