Skip to content

aroyan/countries-lists

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontend Mentor - REST Countries API with color theme switcher solution

Home page preview

Netlify Status

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

Table of contents

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 (optional)

Screenshot

Detail page preview

Links

My process

Built with

What I learned

In this challenge, I learned a lot. Especially working with forms like search input, select input, and I managed to use localStorage to avoid unnecessary requests to an API

Continued development

In the future, I want to improve this app by:

  • Input state is persisted after going back from the detail page
  • Search countries only in the Region that selected
  • Use localStorage to get to the detail page

Useful resources

  • React Docs - This is my go-to reference for React APIs
  • Chakra UI Docs - This is my go-to reference when styling with Chakra UI
  • MDN Web Docs - This is my go-to reference for HTML, CSS, JavaScript

Author

Acknowledgments

Thanks to these communities that helped me when I get stuck :