This is my solution to the REST Countries API with color theme switcher challenge.

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

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)

• Live Site URL

• TypeScript - JS with syntax for types
• React - JS library
• Next.js - React framework
• SASS - For styles

With this challenge, it was the first time that I had to set up a theme switcher. So I learned how to develop one using React Contexts and SCSS mixins.

It was also my first time using React Contexts, so I learned how to use them, here for the theme switcher and the country filters.

And finally I also practiced more styling with SCSS, which I had used very little in my projects so far.

• How to Create a Dark Mode in Sass - This helped me for understanding the different ways to create a theme switcher.
• Thème clair et sombre en SCSS et React - I was literally stucked because my themed mixins weren't working in my components stylesheets, so after some days of research, I found that article which explained everything I needed to know to solve that problem. That was very interesting, even if I was understanding the issue before reading it, I wasn't finding a solution for it, and this is where Denis Pasin's solution helped me a lot.