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
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

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)

Screenshots

Links

• Solution URL
• Live Site URL

My process

Built with

• Mobile-first workflow
• React - JS library
• react-router - router used to navigate in app
• react-redux - React with redux state system
• axios - library used to make api calls
• lodash - helps with math
• FontAwesome - icons
• SCSS - better css
• Flexbox(actually a lot of flexbox)

What I learned

I practiced my React skills, I know this app doesn't require Redux to be here, but I really need to practice using it. I learned a lot about how hooks really works, eg.

useEffect(() => {
  function toMakeApiCall(){

  }  
}, [])

it makes only one call to api, something like componentDidMount() in class based components. I also struggled with 'endless' scrolling, it's not really piece of cake as I thought earlier. Apart from React & Redux skills I feel like a lot more confident with my CSS & layout building skills. I'm trying to make as little as possible breakpoints with media-queries, so I really need to use newest CSS features. I like how

someSelector{
  --spacing: customSpacing;
  display: flex;
  flex-wrap: wrap
  gap: var(--spacing);
}

does a thing in this site, making it so easy to build. I really enjoyed whole creating process, it made me think about a lot of things, eg. I didn't really know how to use redux before.

Continued development

I need to practice my React and also Redux building a bit larger applications, where using Redux isn't overkill.😁

Useful resources

• StackOverflow - Every developer uses it
• Google - Same as above
• React documentation

Author

• Website - Haxikowy
• Frontend Mentor - @haxikowy