Skip to content
Submitted 4 months ago

REST Countries API with colour theme switcher using NextJS

Mirror83•170
@Mirror83
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...REST Countries API with color theme switcher
  • HTML
  • CSS
  • JS
  • API
4advanced

Design comparison

SolutionDesign

Solution retrospective

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

I am most proud of the theme switcher, but that is also the thing that I would do differently.

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

The initial approach I used to change the theme worked, but since the server does not know the theme saved at the client's computer, there was a jarring theme change on initial page load. I fixed this by making the children of the root layout to be client components. However, (to me) this was more of an acceptable compromise than a solution to the challenge as it also brings its own issues...

After the server payload reaches the client, an empty white page is displayed as the theme is loaded and any server functions are run before the full page is loaded with the correct theme.

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

I would like to know of better ways of handling theme changes in Next.js using TailwindCSS.

Community feedback

  • Teodor Jenkler•3,820
    @TedJenklerPosted 4 months ago

    Hi Mirror83,

    Your project is looking fantastic! I can see you've put a lot of effort into it, and it's shaping up really well.

    Regarding handling theme changes in Next.js with TailwindCSS, I can't share specific best practices since I primarily use React and Redux. However, one small tip that could make your project stand out is to create a custom select component. It can significantly enhance the user experience and give your project a unique touch.

    I'm making a remake of this project myself and still haven't decided whether to use the first card scale until it fits two columns or make it like yours and have it in the middle. Your result is actually looking really smooth and works well on both large screens and 320px, so you definitely have an eye for details.

    Keep up the great work!

    Best, Ted

    1
    Mirror83•170
    @Mirror83Posted 4 months ago

    @TedJenkler Thanks for the comment. Regarding the custom <select>, it is one of the things on my to-do list for this project. I am still deciding on whether I should do it right, with all the semantics and accessibility of the HTML <select> element or to just do a bare minimum version. But since I had already come so far with the project, I decided to post the solution without the custom <select> and work on it later.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord