Submitted almost 2 years ago

Countries API | Next, TS, axios, tailwindCss, infinite-scroll, darkMod

#next#react#tailwind-css#typescript#axios

Maksim Baravy• 220

@maximkatut

Preview site View code

This is a solution for...

REST Countries API with color theme switcher

HTML
CSS
JS
API

4advanced

View challenge

Design comparison

SolutionDesign

Solution retrospective

Tried a different approach to my last challenge, Next.js with TS and tailwind css. I struggled with getting the infinite scroll working with query search and card filters. Also has some issue to get dark mode working with NextJS and localStorage, because render happens on server side, there is no window object access, useEffect helps. Also tried a lot of new things, such as Zustand - state management, infiniteScroll component, Nprogress

Community feedback

Kehinde• 660

@jonathan401

Posted almost 2 years ago

Congrats on completing this challenge 🎉. I have one suggestion ☺️ (I'm still a beginner 😄, so you could take this suggestion from a user's perspective ☺️). You could consider making the navigation bar fixed since this app has the infinite scroll functionality. This was because when I checked the app out, after scrolling down for some time, I wanted to toggle the dark mode but I had to scroll back up since the navigation bar was at the very top of the app (it took a while for me to get back to the top of the app 😅). That's just my observation/suggestion by the way. I hope this helps 😁. Congrats once again on completing the challenge 🎉

Maksim Baravy• 220

@maximkatut

Posted almost 2 years ago

@jonathan401 thanks for suggestion, I will think how to achieve that, maybe add some nice transform/transition when scrolling down

Please log in to post a comment

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