Skip to content
Submitted over 1 year ago

Nextjs page using Tailwind css (with storing search and filter!)

Mehmet Akif AKKUŞ•170
@mehmetakifakkus
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

Hey, I would be glad if I hear your comments.

Besides completing all the items in the challenge, I have added storing the latest search value and filter value when you visit the country detail and go back to the main page. It uses URL search params. For details, please visit my github:

Here are the tech stack:

  • React: A JavaScript library for building user interfaces.
  • Nextjs: A javascript framework works top on the React and uses all the benefits of React. It helps for SSG, SSR and routing.
  • Tailwind CSS: A utility-first CSS framework that enables rapid UI development with pre-defined styles and components. Flexbox and CSS Grid have been used for the css layout.
  • Typescript: Type safe version of Javascript.

Community feedback

  • Gideon Obiasor•80
    @DrPlainPosted over 1 year ago

    All the expected functionalities are working but on mobile view there is no placeholder for the search field and filter field and the texts do no appear when typing, they are blank.

    Also the design specification requires some specifications like the filter field should be under the search field in mobile view. Finally, in light mode, the text is white but I guess it should be black. All thse observations are from mobile view.

    Marked as helpful
    0

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