Countries API w/ theme switcher - React/SCSS/React-Router/React-Query

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

It was my first time learning how to use loaders from react router and putting that together with react-query took a lot of effort but I'm very happy that I've managed to make it work and I plan on learning even more to see if there are things I missed to make things more efficient.

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

My first big challenge was figuring out how to use AnimatePresence from framer motion with the react router v6. Since react routers setup is different now using createRouteBrowser (in my case), the known method I had for implementing AnimatePresence was gone and had to figure out a new way. After many hours, I learned about creating an outlet wrapper using AnimatePresence and it finally worked.

After that, the only other big challenge was learning how to implement loaders while also using react-query to fetch my data from the countries API. It felt very challenging since I couldn't find much info through googling, but eventually after reading through the documentations for both, I managed to piece together something that, to me, seems to be working.