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

Overview

The challenge

Your challenge is to integrate with the REST Countries API to pull country data and display it like in the designs.

You can use any JavaScript framework/library on the front-end such as React or Vue. You also have complete control over which packages you use to do things like make HTTP requests or style your project.

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)

Screenshot

Links

• Solution URL: Solution
• Live Site URL: Live Site

My process

Built with

• Semantic HTML5 markup
• SASS
• Flexbox
• Mobile-first workflow
• React - JS library

What I learned

I was able to practice 7-1 pattern using SASS. It was also my first time tackling Routes, Switches, Params, and other React features. I was also able to practice some conditional rendering.

@import "abstract/variables";

@import "components/country";
@import "components/button";

@import "base/reset";
@import "base/typography";

@import "layout/header";
@import "layout/countries";
@import "layout/countryDetails";

@import "themes/dark";

className={isFilterToggled ? "regions openRegions" : "regions"}

<Router>
  <div className={isToggled ? "dark" : null}>
    {/* pass handleToggle func as prop */}
    <Header handleToggle={handleToggle} />
    <Switch>
      <Route exact path="/">
        <Countries />
      </Route>
      <Route path="/:name">
        <CountryDetails />
      </Route>
    </Switch>
  </div>
</Router>

Continued development

To practice more frontend projects using React. I would also like to familiarize myself more on other React features like Switches and Routes.

Useful resources

• Routers - The Net Ninja helped me understand the basic concept of Routers, Switch, and Params.
• SASS 7-1 Pattern - Helped me organize my SASS files using partials.
• Box-Shadow Examples - Helped me organize my SASS files using partials.
• Florin Pop Solution - Sankara Solution Part 1 - Sankara Solution Part 2 - The first link is from Florin Pop. Then, the second and third are from Sankara. These solution gave me ideas on how I'll be able to implement this challenge.
• Avoid Memory Leaks - This helped me remove the warning of "avoiding memory leaks".

Author

• Website - Fidel Lim
• Frontend Mentor - @fidellim
• Github - @fidellim

Acknowledgments

I would like to thank Florin Pop for giving me ideas for this project. If you are interested in learning from him, have a look at his Youtube Channel. I would also like to thank the Frontend Mentor community for answering any inquries I have.