Countries app is a React JS app that pulls country information from the REST Countries API and displays it in an orderly and understandable way.

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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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)

• Solution URL: Frontend mentor solution
• Live Site URL: Live site

• Init project with create-react-app
• Build countries component
• Build header component
• Build filter component
• Add router and routes feature
• Add SASS
• Add environment variable
• Add React Query
• Add Dark/Light Switcher
• Add loading spinner
• Sort countries alphabetically
• Tooltip for theme switcher
• migrate create-react-app to Vite
• Add tests

• Semantic HTML5 markup
• CSS Grid/Flex
• [SASS] (https://sass-lang.com/) - For styles
• Font Awesome - For icons
• Mobile-first workflow
• React - JS library
• React Router - For routing
• React Query - For fetching data

• How to effectively minimize the number of API requests made with React Query.
• Using React Query's caching feature has been a game-changer for managing the state of my app - it's much simpler and more efficient now.
• How to use React Context API and use persisted state to manage the state of the theme switcher.

Consider the following flow:

1. User visits the home page
2. User clicks on a country to view its details
3. User clicks on back button to return to home page
4. User clicks on a different country to view its details
5. User clicks on back button to return to home page
6. User clicks on a different country to view its details

Screenshot of API requests before using React Query:

Screenshot of API requests after using React Query:

As you can see, the number of API requests is incremental before using React Query. Without React Query a new API request is made every time the user visits the home or the country details page. After using React Query, the number of API requests has been reduced to 1. This is because React Query caches the data from the first API request, and uses it for the subsequent requests.

• Add loader to the app, and add tests.
• Implement react error boundaries to handle errors.
• Migrate create-react-app to Vite.

• How to build an app with React Query - This helped me for understanding how to use React Query in order to fecth data and manage states.
• Global Cached State in React using Hooks, Context, and Local Storage - I found this article to be incredibly helpful in finally understanding how to use the Context API and Local Storage to manage global state in React.

• Frontend Mentor - @eddivalen
• Twitter - @eddivalen

Midudev has been a great inspiration to me, his videos are packed with valuable information and he always motivates people by saying the phrase "A mover las manitas" which means "Let's get to work and make things happen!". I highly recommend you to check out his channel.