Symphoni Social frontend coding interview challenge 2 - REST Countries API with color theme switcher solution

This is a solution to the Multi-step form challenge of Symphoni Social.

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

• Below are screenshots showing light and dark mode view of home page

• Below is a screenshot sowing a search result of cameroon

• Below is a screenshot showing details of the country cameroon in both light and dark mode

Links

• GitHub Solution URL: https://github.com/nguHelon/symphoni_frontend_2
• Live Site URL: https://rest-countries-solution-2.netlify.app/

My process

Built with

• React Router Dom - For seamless Navigation
• Tailwind CSS - CSS Utility library
• Zustand - State management library
• TypeScript - To add Type Safety features
• Axios - For Data fetching
• React - JS library

What I learned

1. Axios:

• I learned how to efficiently fetch data using Axios. Its simplicity in handling API requests, along with robust error management, greatly enhances application functionality and user experience.

Continued development

I plan to continue learning and Increasing my skillset in the world of development.

Useful resources

• React documentation - Official documentation for React.
• Axios documentation - Axios documentation.

Author

• Ngu Helon