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
To integrate with the REST Countries API to pull country data and display it like in the reference designs.
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)
Screenshot
Project Screenshots
- Desktop Home Light
- Desktop Home Dark
- Desktop Detail Light
- Desktop Detail Dark
- Mobile Home Light
- Mobile Home Dark
- Mobile Detail Light
- Mobile Detail Dark
Reference images
- Desktop Home Light
- Desktop Home Dark
- Desktop Detail Light
- Desktop Detail Dark
- Mobile Home Light
- Mobile Home Dark
- Mobile Detail Light
- Mobile Detail Dark
Links
My process
Built with
- CSS custom properties
- CSS Grid
- Flexbox
- Mobile-first workflow
- Semantic HTML5 markup
- Axios
- cypress
- Heroicons
- Vite.js - a build tool that aims to provide a faster and leaner development experience for modern web projects
- Reach UI
- React Router
- React Query
- React - JS library
Useful resources
- A Modern CSS Reset
- A Complete Guide to Flexbox
- A Complete Guide to Grid
- Set up Light and Dark Theme in React
- A Dark Mode Toggle with React and ThemeProvider
- Guide to Advanced CSS Selectors - Part One
- Test Your Web App in Dark Mode
- Debouncing with React Hooks
- React Query Data Transformations
- Hints for Adding Data-cy Attributes for Cypress Testing
- Dynamically Importing Components with React.lazy
- Example setup for using msw with vitejs
Author
- Website - www.richardcyrus.com
- Frontend Mentor - @richardcyrus