All solutions

It was fun trying out Tailwind!

IMO this was quite an easy one, but I really liked doing the 'mobile design first' approach: First trying to design the mobile layout and afterwards the desktop layout. The Tailwind media queries made this so nice to do! It was interesting to see the use of the orders in flex.

Only concerns I have with tailwind is that all looks a bit cluttered and there seems to be a lot of code duplication, which is also mentioned in the docs as not being necessarily something bad? Dont know how I feel about that

Getting the 'shaded' circles behind the correct answer, was really difficult for me: Playing around with the z-indices was quite a hassle. In the end, I managed to get it done by changing the z-index of both buttons based on whomever is the winner. I'm really wondering if there are easier ways of adding these circles.

Another challenge was trying to get everything to look good on the iPhone XR, I am using custom divs as the connector bars. These all have an absolute position, which worked OK on desktop, but apparently for safari, the parent needs to be a relative element, which took some time for me to figure out, but now it works!

I used quite a hacky way of changing the dark-to-light mode, by changing the css root variables from inside the Header component (which can apparently be done, quite cool!).

It was non-trivial how to persist which mode a user enabled between the home page and the detail page, so I used localStorage to persist this between the pages. This does not seem as the best solution though, how would you do this?

Additionally, I was wondering whether there was a smarter way of getting the border country names from the codes on a CountryPage than doing an additional API request. I imagine I could pass the full countryList prop to the CountryPage component and then filter in there, but then users which would directly go to the CountryPage, would not be able to see the bordering countries.

I suppose the best would be giving the CountryList as props to the CountryPage, but then that the CountryPage checks whether it has the list before rendering and if not, that it then does an additional request to get the bordering countries by the code API call.

More meta question: To what extent should we prefer trying to persist data in our applications rather than making API requests?