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
  • Continued development
  • Useful resources
• Author

Overview

I wanted to use this challenge to both practice my current skills as well as try some new technologies and patterns. I unfortunately don't have much experience with unit testing, only e2e testing, so I'm also using this project to dive into it a bit more to hopefully implement it on all my future projects as well

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

Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.

Alternatively, you can use a tool like FireShot to take the screenshot. FireShot has a free option, so you don't need to purchase it.

Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.

Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.

Links

• Solution URL: Add solution URL here

My process

Built with

• Semantic markup
• Mobile-first workflow
• TypeScript
• React
• Next.js
• TailwindCSS
• Phosphor Icons
• TanStack Query
• Jest
• Axios
• next-themes

Continued development

I know that NextJS has a lot more useful tidbits and resources I could use to make this project even better, as well as TanStack Query. They're both libraries/frameworks with a lot of powerful utilities and I know I'm not using them to their full potential, so my goal is to keep improving my knowledge in it

I also highly encourage feedbacks or just discussions about my code, so please feel free to open an issue or contact me!

Useful resources

• Dark Mode - This helped me to get a better understanding of how to build the dark/light mode with TailwindCSS and next-themes
• REST Countries API docs - Always important to read the docs of the API to better understand its endpoints and field types

Author

• LinkedIn Laisa Costa
• Frontend Mentor - @Azzyew

Acknowledgments

Just want to thank every developer I've ever worked with because I learned a little with every single one of them and got a better developer because of it! ❤️