Submitted about 1 year ago

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

Mehmet Akif AKKUŞ• 170

@mehmetakifakkus

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

REST Countries API with color theme switcher

HTML
CSS
JS
API

4advanced

View challenge

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

@DrPlain

Posted about 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

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