Updated: Can't make context last from the redirections due to github not allowing client-side routing, so the theme state and everything will be lost once a sub-directory is hit. This problem would not be on a dedicated host.
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.
Users should be able to:
- See all countries from the API on the homepage
- Search for a country using an
inputfield - 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)
- wouter - For routing
- downshift - For a combobox and selection baseline
- react-window - For performance optimization and virtualization
- framer-motion - For animations and transitions
- react - JS library
- styled-components - For styles
I implemented downshift for the first time and it was a lot of fun. I learned how to implement a very powerful search combobox that is flavored with a cool animation thanks to framer-motion. I had to implement react-window along with it to avoid the tremendous cluttering that so many items can cause, which leverages a powerful performance. All in all, I enjoyed this challenge!