REST Countries API with color theme switcher

---

Live | Solution | Challenge

Solution to the REST Countries API with color theme switcher challenge on Frontend Mentor.

About This Project

---

This challenge provided an excellent opportunity to hone my front-end development and API integration skills. I utilized React, a powerful JavaScript library, to build the necessary components for this project. Additionally, I employed several key technologies, such as React Router Dom for seamless navigation and the Axios library for efficiently fetching data from the REST Countries API. This project allowed me to refine my abilities in creating dynamic, user-friendly interfaces and handling asynchronous data.

Now users are able to:

1. See all countries from the API on the homepage
2. Search for a country using an input field
3. Filter countries by region
4. Click on a country to see more detailed information on a separate page
5. Click through to the border countries on the detail page
6. Toggle the color scheme between light and dark mode

Stretch Goals

In addition to the main challenge requirements, I added some extra features to enhance the user experience:

7. Currency Conversion: Displays the current exchange rate for the country’s currency against the US Dollar.
8. Weather Information: Shows the current weather conditions for the country's capital city.
9. Local Time: Displays the local time in the country's capital city.

These stretch goals provide additional useful information to users, making the application more comprehensive and interactive.

Built with

• React - JS library
• Tailwind CSS - Utility-first CSS framework
• JavaScript - Programming language
• React Router Dom - Routing library for React
• React Icons - Icons library for React
• Axios Library - Promise based HTTP client for the browser and Node.js
• Rest Countries API - API providing country data
• Open Weather Map API
• IP Geolocation API - API for geolocation information

What I learned

Another fun project to practice React along with API. This one was a bit challenging because API requests had to adapt depending on the user input as well. I used two filtering functions, for inputs and by regions, to make that possible. I used a function to sanitize the inputs to prevent users from exploiting any vulnerability. Routing was achieved with the React Router Dom library, and some hooks it provides (useNavigate, etc.). Another challenge was building the app without the Figma files, which makes the site not pixel perfect.

These features required integrating multiple APIs and handling asynchronous data fetching efficiently. They also helped me improve my skills in handling user input and providing a seamless user experience.

Author

• Website - Nathan Katshi
• Twitter - @katshidev
• LinkedIn - @iam-inath

Acknowledgments

Huge thank you to anyone providing feedback to the solution. It definitely helps.