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.
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)
- Desktop Home Light
- Desktop Home Dark
- Desktop Detail Light
- Desktop Detail Dark
- Mobile Home Light
- Mobile Home Dark
- Mobile Detail Light
- Mobile Detail Dark
- Desktop Home Light
- Desktop Home Dark
- Desktop Detail Light
- Desktop Detail Dark
- Mobile Home Light
- Mobile Home Dark
- Mobile Detail Light
- Mobile Detail Dark
- CSS custom properties
- CSS Grid
- Flexbox
- Mobile-first workflow
- Semantic HTML5 markup
- redaxios
- Heroicons
- Vite - a build tool that aims to provide a faster and leaner development experience for modern web projects
- Radix UI
- React Router
- Tanstack Query
- React - JS library
- usehooks-ts
- 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
- Debouncing with React Hooks
- React Query Data Transformations
- Configure Vitest, MSW and Playwright in a React project with Vite and TS
- Website - www.richardcyrus.com
- Frontend Mentor - @richardcyrus