I solved a problem with SSG and localstorage used by Zustand, where the local storage was not accessible during server rendering. But the app was left with a small flash when refreshing or going to the home page and using the dark theme. I would like to know how would you approach this please.
Also I highly appreciate any other kind of feedback, it is very very helpful to me, thank you.
Well done Edgar, the asethetics on the site look good and close to spec. Nice job on the layout on different screen sizes and dark mode.
some points/opinions from me:
the population value would be better with commas seperating the thousands, millions etc.
Accessability - make sure that you are using the correct html tags for accessability. https://uxdesign.cc/semantic-html-the-foundation-of-web-accessibility-e5bbecad7c17
With the flash I'd guess that you are only applying the dark theme on the page after the page loads in light theme originally. Look into how you are applying the dark theme toggle on the app to make sure that it stays consistant on page changes.perhaps looking at where in the lifecycle its applied, or applying it to the dom itself.
Replace <div class="attribution"> with the footer tag and the <div id="wrapper"> with a <section> tag to fix the accessibility issue. click here for more on web-accessibility and semantic html.
Only other minor point is that the original card has a light box-shadow property which helps the card to pop out the page a bit more.
Second frontend mentor project, this one did not take that long to build, but as always I had fun building it, feedback would be greatly appreciated on how I could of done something better. Thank you! :)