Solution using NextJS 13 & Tailwind CSS

Community feedback

• Account deleted

  Hey, well done! I believe there are some things that definitely can be improved. I'll just say what I have in my mind and feel free to take any ideas or ignore all of them, I'm just sharing ideas and hopefully you'll find something useful on my feedback!

  First thing I believe you should definitely add a button when user types on search input to click on. If you don't have a button the user might thing that you are doing search as they're typing.

  Another thing that you can do to improve it is to let the user filter both by region and country.

  For example If I put Asia as region and then search for the country Sweden, it shouldn't show Sweden because of course it's not in Asia, but if I remove the Asia and keep the Sweden in the search field, then it should shown. Since the API doesn't provide any endpoints for this kind of filtering you have to manually fetch everything and filter them there.

  The best thing here is actually to just fetch every country and the details you only need by filtering options and reducing the response size and then caching everything. Only 1 initial request and nothing else later.

  Then show skeleton -> get response - cache them - show all countries. After you have everything there you can create some custom logic to filter them by country and region. You can do fuzzy searching and index them maybe ?? I personally would choose also to apply filters as the user is typing into the search field and If you do some expensive logic while filtering(maybe you do fuzzy searching) you can also wrap the input handler functions into a debounce function to decrease the calculations that are happening.

  Also seems like you are not saving the user preferences like the theme the user prefer somewhere? That's also something that can be improved, simply store it in localStorage. Every time you load the page take the value from the local storage if exists and then apply a theme accordingly.

  Another thing you can do is to create some pagination / infinite scrolling (more fan of infinite scrolling since it requires less user action). For infinite scrolling there is this library react-intersection-observer https://www.npmjs.com/package/react-intersection-observer which you can find with a hook very easily if the user has reached the end and then you can load more countries.

  Also when changing theme you seem to have put different transition times on different elements and everything looks unsynchronized.

  Just keep in mind that I didn't look your code so I'm not sure how you did things, everything is based on my experience from the website.

  0