Rest countries MPA with React + Astro

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

I'm proud of making the country API work with Astro. This allowed me to fetch the data during build and could be updated as often as I seem fit (in real world). I have also learned how to track state in the url for better user experience.

Next time I would use React Router and have SPA instead. I found some issues with page transition in dark mode which I had to work around. I would also avoid fetching countryData twice (both for homepage and detail pages) which could save some failed build trouble.

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

1. I couldn't make environment variables work in github pages so I work around that by first build and publish the API and then reference the live url api in the app - not cleanest solution. But I believe this is not a common problem in real world where the API could be separated (we had the data in json file).
2. I wanted to have a nice transition between dark and light theme but I had to omit it because it was transitioning between pages and looking akward. This would not be a problem if I used a SPA approach instead.