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
Users should be able to:
See all countries from the API on the homepage
Search for a country using an
input fieldFilter 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)
Links
Solution URL: url
Live Site URL: url
My process
Built with
Semantic HTML5 markup
CSS custom properties
Flexbox
CSS Grid
CSS Keyframes
Mobile-first workflow
React - JS library
Next.js - React framework
Framer-motion - React Library
What I learned
I mirrored Chakra UI's SimpleGrid component to create the
SimpleGrid Component. I could easily have used a flexbox but I wanted a customizable component.SimpleGrid Component:
<SimpleGrid row={5} column={2} columnGap={10} rowGap={5}>
// Component character data here
</SimpleGrid>
Useful resources
upmostyly - The
useMediaQuery hook is based on this article. I really liked this pattern and will use it going forward.Author
Frontend Mentor - @frank1003A
Twitter - @FrankEzene
