Country api with theme switcher using React & Tailwind CSS

What are you most proud of, and what would you do differently next time?

In this project, I utilized React Router DOM to handle multiple routes, including a dynamic route for displaying more information related to country selected. I also used a data.json file to render the project's data on the frontend efficiently. For state management, I implemented React Redux to manage the app's functionality, including setting up a custom hook for handling Dark Mode. Additionally, I integrated Lazy Loading to optimize performance by loading content as the user scrolls down the page.

What challenges did you encounter, and how did you overcome them?

During this challenge, I encountered an issue where LazyLoad was being applied universally, including during searches or when filtering countries by continent, rather than just on the main page. To resolve this, I implemented a boolean state in the parent component that managed the search, filter, and main components. By passing this state as a prop all the components filter and search bar and main component, I was able to conditionally apply LazyLoad only in the main page.

What specific areas of your project would you like help with?

During this challenge, I encountered an issue where LazyLoad was being applied universally, including during searches or when filtering countries by continent, rather than just on the main page. To resolve this, I implemented a boolean state in the parent component that managed the search, filter, and main components. By passing this state as a prop all the components filter and search bar and main component, I was able to conditionally apply LazyLoad only in the main page.