/country-finder

Primary LanguageJavaScript

Frontend Mentor - REST Countries API with color theme switcher solution

Warning: The API the project uses has been shut down by its maintainer because of a lack of funding. The project will not run correctly either locally or in Netlify.

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

This project is split into two branches: master (the first implementation I did while I was still learning React, highly buggy and inefficient) and the experimental one (It uses Function components instead of classes and adds React Router for dynamic routing, unfortunately, I was not able to finish it because the API was shut down while I was refactoring it).

Table of contents

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)

Screenshot

Website main page seen on dark mode

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • React - JS library

What I learned

This project helped me reinforce my knowledge on React topics like passing down methods as props and changing the state. It also helped me to make shorter CSS by using the min() and max() function, in fact, this project was only made using one breakpoint.

div {
  width: min(10vw, 50px); /* Picks the smallest value */
  margin: max(2rem, 20vh); /* Picks the maximum value */
}
render() {
  return <MyComponent method={this.myMethod} />
}

Continued development

  • clamp() function in CSS: I understand its basic functionality but I'm not as fluent on it as I'm with min() and max().
  • React Function Components: Usually I work with classes but I will probably start using functions as soon as I get comfortable with them.

Useful resources

  • Kevin Powell CSS videos - This helped me a lot to make faster and more effective responsive designs. I will keep using this strategy in the future.
  • CSS Tricks - Every time I have some doubt with CSS, I always look up for this page!

Author