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
• My process
  • Built with
  • What I learned
• Author
• Acknowledgments

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)

My process

• I started by creating the basic layout using the mobile-first approach
• I created all the components which might be needed
• I also ensured responsiveness as a designed which was made easy using Tailwind
• After all necessary layout and designs, I started the functionality of each component

Built with

• Mobile-first workflow
• React - JS library
• React Router - React routing library
• TailwindCss - CSS framework
• React Reveal - For Slide animations

What I learned

• I learned about the useParams in the react-roter-dom library and how it helps
• I learned about lazy loading and sharing data globally using the useContext hook
• Learned more about conditional rendering of elements in react

Author

• Website - Olalekan Alabi
• Frontend Mentor - @Lekanjoy
• Twitter - @Olalaykun

Acknowledgments

This note is to acknowledge @Carla reading her code and approach made some aspects easy. Thank you😊