Submitted 29 days ago

Reponsive Job Listings with Filtering

HANICHE Zahir• 260

@ZahirHaniche-dev

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

This is a solution for...

Job listings with filtering

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Thanks to this project, I was able to solidify and apply my knowledge of React, while also discovering Tailwind CSS. React significantly eased the implementation process.

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

What I found challenging was making the design responsive with Tailwind CSS.

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

I don't have any specific needs at the moment, except if someone has an alternative or a different library from Tailwind CSS for better handling responsiveness (excluding Bootstrap).

Community feedback

geomydas• 1,060

@geomydas

Posted 24 days ago

I don't get why it would be hard to make the design responsive using TailwindCSS, you can use :sm, :md, :lg, :xl, :2xl for this. See more

HANICHE Zahir• 260

@ZahirHaniche-dev

Posted 24 days ago

Thank you for your feedback and for taking the time to review my code.

I would have appreciated a bit more politeness, like a greeting or a compliment, to encourage a more positive reception of your comment. Despite that, thank you, and I will work on improving my code.

HANICHE Zahir• 260

@ZahirHaniche-dev

Posted 26 days ago

For this project, I chose Vite and ReactJS, a powerful duo for creating fast and responsive web applications, along with Tailwind CSS for its utility-first approach.

Additionally, I used the latest React features, including Redux and context usage types. For example, to call the API from the data.json file, I used a reducer with a getData function that is called only once, which allows my list to be managed directly through filtering.

As a result, my project is more readable and simplified compared to previous versions of React, where we had to use Axios or API calls to filter and rebuild our list table.

My solution differs slightly from the design because I’m more focused on the technical aspects behind it.

Feel free to follow me on GitHub, and thank you all for reading.

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