Rest Countries with React, React Query, Tailwind, Router & React-Aria

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

It's been a while since I have taken on challenges considering I've been busy working. One of the drawbacks of working on a singular or similar project is that you don't get to use the latest. So, I made it extra challenging for myself by using everything not used in my regular projects.

1. TypeScript-based React components for type safety.
2. Custom Hooks to fetch each query.
3. Tanstack React Query with Axios for data fetching, caching, and state management.
4. React-Aria for accessible dropdown and search fields.
5. Tailwind CSS and hero icons for flexible utility CSS and easier implementation of dark mode and responsive design.

What would I do differently next time? Try headless UI or Radix for accessibility and "behavioral" UI instead of React-Aria

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

• One of the challenges that I faced was that my deployment on GitHub Pages would not route correctly because of a lack of Client Side Routing. I managed to get the navigation working by setting a basename prop for the URL base. It navigates as expected except for manually navigating by typing the URL in the address bar which always leads to error 404! Any solution will be welcomed.

• Another challenge I faced was that in my quest for not using any useEffect, I still managed to use it once and that was to refetch a query based on any change in URL param. I couldn't find a better way to track changes in URL parameters and fetch accordingly. Any better solution or feedback will be welcomed!

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

1. Deploying on GitHub Pages with React-Router fully functional including manually routing to a specific route.
2. Better use of React-Query and getting rid of useEffect completely.