Frontend Mentor - REST Countries API with color theme switcher solution
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
Links
- Solution URL: Frontendmentor Solution
- Live Site URL: Countries List App
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
- Website - Personal
- Frontend Mentor - @aroyan
- Twitter - @aroyanbaktis
Acknowledgments
Thanks to these communities that helped me when I get stuck :