countries

Frontend Mentor - REST Countries API with color theme switcher Solution

This is my solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. I'm super thankful to have found Frontend Mentor as a great way to confidently grow in my coding skills with real-life projects.

Table of contents

• Frontend Mentor - REST Countries API with color theme switcher Solution
  • Table of contents
  • Overview
    • Project Brief
    • Mobile View
    • Desktop View
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

Overview

Project Brief

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.

Your 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)

Want some support on the challenge? Join our Slack community and ask questions in the #help channel.

⚠️ NOTE ⚠️: Sometimes the REST Countries API can go down. We've added a data.json file with all the country data if you prefer to use that instead. However, please be aware that the data in the JSON file might not be up-to-date.

Mobile View

Desktop View

Links

• Solution URL
• Live Site URL

My process

Built with

• React - JS library
• Next.js - React framework
• HTML5
• CSS
• Tailwind CSS - CSS framework
• Mobile-first workflow
• VS Code

What I learned

When I found out that Tailwind had an intuitive way of switching between light and dark CSS themes, I knew I had to give it a go with this social media dashboard project. Really happy with how this turned out! I approached it by first getting the structure down for the whole page on light theme, and once it was in a good place I adjusted the tailwind.config file to discern the dark theme mode by className. It was simple adjusting the colors and feel by using "dark:" as a prefix in the utility classes, and I put those at the end of each className to keep them consistent spot. Since there was also quite a bit of repetitive code I decided to make separate components for the first four "account cards" and then for the bottom eight "detail cards" to make my code simpler and easier to read and manage. I'm proud of this one and definitely want to keep practicing using themes in Tailwind!

Here are a few code samples from this project:

<!-- 'AccountCard' component for the top row of cards -->

/* Importing custom font in my main CSS file */

Continued development

As a starter developer, I want to keep growing in working as a team and learning how to deliver smaller packages of code at a time, such as robust and beautiful pages like this one. I thought this project was a good way to get back into Next.js and begin doing just that!

Useful resources

• CSS Formatter - I found this helpful site when I'm feeling lazy and don't want to format my CSS code, I can have this do it for me, especially putting everything in alphabetical order.
• Tailwind Grid - Handy guide from Tailwind's docs about using grid-cols to structure content

Author

• Website - Garrett Becker
• Frontend Mentor - @gdbecker
• LinkedIn - Garrett Becker

Acknowledgments

Thank you to the Frontend Mentor team for providing all of these fantastic projects to build, and for our getting to help each other grow!