REST Countries API with color theme switcher

Welcome! 👋

This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor.

Table of contents

• REST Countries API with color theme switcher
  • Welcome! 👋
  • Table of contents
  • Overview
    • The challenge
    • Links
  • My process
    • Built with
    • What I learned
      • Redux toolkit
      • throttling and debounce func to avoid instantaneous api calls
    • Useful resources
  • Author
• Frontend Mentor - REST Countries API with color theme switcher
  • Deployment
  • Thank you very much for checking out my project 🙌🙌
    • Please, if you have or know of any opening for software developer position, contact me through

Overview

The challenge

The challenge is to integrate with the REST Countries V2 API to pull country data and build out the project to the designs inside the /design folder.

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)

Links

• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-responsive workflow
• React Router
• React - JS library
• Styled Components - For styles

What I learned

Some of my major learnings while working through this project.

Redux toolkit

• Async thunk
• RTQ query

throttling and debounce func to avoid instantaneous api calls

useEffect(() => {
  const timeoutId = setTimeout(() => {
    if (searchQuery) dispatch(filterCountry(searchQuery));
  }, 700);

  //clean up - runs on every rerender
  return () => {
    clearTimeout(timeoutId);
  };
}, [searchQuery]);

Useful resources

• Writing markdown, I'd recommend checking out The Markdown Guide to learn more.

Author

• Email - [email protected]
• Twitter - @ceonyema_
• LinkedIN - @emmanuel-c-onyema
• Frontend Mentor - @cemmanuelonyema

Frontend Mentor - REST Countries API with color theme switcher

There is also a style-guide.md file containing the information you'll need, such as color palette and fonts.

Deployment

• Netlify was used for deployment - Netlify

Thank you very much for checking out my project 🙌🙌

Please, if you have or know of any opening for software developer position, contact me through

• Email - [email protected]
• Twitter - @ceonyema_
• LinkedIN - @emmanuel-c-onyema

🚀