REST Countries API with color theme switcher

The Challenge⚡️

The challenge was to integrate with the REST Countries API to pull country data and display it like in the design. The idea for this project was brought by @frontendmentor.

I quite over-engineered this one, it was an opportunity for me to try to mix technologies that I was interested in, such as React.js, Redux & Typescript.

This will serve as a good boilerplate for your future Redux and Typescript projects.

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
• See the color mode and the country saved in local storage automatically

Project Structure 📁

├───public
├───src/
    ├───api/
    ├───containers/
    ├───hooks/
    ├───state
    │   ├───action-creators/
    │   ├───action-types/
    │   ├───actions/
    │   └───reducers/
    └───styles
        ├───css/
        └───sass/

Built With ✨

• Redux - state management library
• React - JS library
• Scss - CSS Preprocessor
• Typescript

Author

• @achrafdev

Thanks for sharing 🚀