React, TypeScript, Redux, Material UI & Tailwind CSS

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

I'm most proud of how everything came together — from a smooth light/dark theme toggle to responsive layout and efficient data fetching. Managing global state with Redux Toolkit made things scalable and clean, and combining Tailwind with Material UI gave me both flexibility and speed in building the UI.

If I were to do it again, I’d probably focus more on code splitting and lazy loading to further optimize performance. I’d also consider writing more unit tests from the start, especially for the search and filter logic — because even though "it works", future me will definitely appreciate having some safety nets in place 😅

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

One of the trickiest parts was handling edge cases when a user searched for a non-existent country. Initially, navigating back to the homepage after such a search didn’t work properly — especially when the user was stuck on a “no results” page. I fixed it by tweaking my routing logic and making sure the header click always redirects correctly using React Router's useNavigate.

Another challenge was balancing Tailwind with Material UI. Using both in one project can get messy fast, but I stuck to a rule: layout and spacing with Tailwind, components and accessibility with MUI. That combo kept things clean and maintainable.

I also had to wrangle with TypeScript a few times — especially when working with API responses. But once I defined solid types for the country data, everything became much smoother (and my IDE stopped yelling at me).

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

State Management — Am I using Redux Toolkit effectively, or is there a cleaner way to structure my slices/selectors/actions for a project of this scale?

Routing & Navigation UX — I had to manually handle some edge cases when navigating back to the homepage after searching for a non-existent country. Does the current solution make sense, or is there a more idiomatic way to handle this with React Router?

Component Structure — I aimed for reusable and scalable components. Would appreciate a second pair of eyes on whether my structure makes sense, or if I could decouple some logic further.

Styling with MUI + Tailwind — I’m mixing Material UI and Tailwind. Any tips on how to better balance or standardize the use of both, so it doesn’t feel like a tug of war?

Performance — Right now I fetch all countries on initial load. Is that fine for this dataset, or would you recommend a different strategy (pagination, caching, etc.)?