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
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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)

Links

• Solution URL: (https://github.com/Abdul-Rahman-E/Country-Api-React-App)
• Live Site URL: (https://globalflag.netlify.app/)

My process

Built with

• React
• CSS
• tailwindcss
• Flexbox
• CSS Grid
• [React Router] - For routing
• [useFetch] - Custom hook for fetching data
• [ThemeContext] - For managing theme
• [ReactIcons] - For icons

What I learned

Throughout this project, I delved into various aspects of frontend development, honing my skills in React by implementing custom hooks like useFetch for efficient data fetching and managing state. Additionally, I expanded my understanding of higher-order components, which played a crucial role in structuring reusable logic across the application.

In terms of styling, I leveraged Tailwind CSS to streamline the design process and ensure consistency in styling components. Moreover, I focused on adhering to accessibility best practices by implementing ARIA attributes in components such as the search bar and filter box, thus enhancing the user experience for individuals with disabilities.

Continued development

Looking ahead, I'm keen on further optimizing the performance of the application, exploring techniques to minimize bundle size and improve loading times. Additionally, I aim to delve deeper into accessibility considerations, continually refining my approach to ensure inclusivity for all users.

Useful resources

• React Documentation - Official documentation for React
• MDN Web Docs - Comprehensive web development documentation
• Frontend Mentor - Platform for practicing frontend development skills with real-world projects

Author

• Frontend Mentor - @Abdul-Rahman-E

Acknowledgments

I would like to thank Frontend Mentor for providing this challenging project, which helped me improve my skills.