Skip to content
Submitted over 2 years ago

A fully functional and responsive job listings page | React

Ollie•580
@ohermans1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Job listings with filtering
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hi front-end mentor crew!

This is another project created using React. I found it a really enjoyable one to make.

Everything should work pretty smoothly, so take a look if you have a chance.

People may have noticed I include my dev time at the bottom of my comments. When I very first start my projects, I estimate a time by looking at the design files. I then set up a Wakatime and don't look at it or time myself until I upload it here. I feel being able to estimate how long a project will take you is a pretty handy skill!

Ollie

Est time: 5 hours | Actual time: 5 hours 12 minutes | Wakatime

Community feedback

  • Francisldn•250
    @francisldnPosted over 2 years ago

    Hi @ohermans1 nice job! Everything works smoothly and it is fully responsive. Well done! The only comment I have is regarding the search bar. I personally think that it's not aesthetically pleasing to display the search bar if it's empty, so for my build, I chose to hide it if it's blank. But this is purely down to personal preference. You can take a look at mine here: https://www.frontendmentor.io/solutions/job-listing-search-with-nextjs-tailwind-and-typescript-BJci7g6I5 Feel free to comment on my solution too.

    Marked as helpful
    1
    Ollie•580
    @ohermans1Posted over 2 years ago

    Hi @francisldn - thanks so much for your feedback.

    I have taken it on board, and have added an opacity toggle to the search bar once it is no longer empty (I went with opacity so that the listings didn't jump around when the search bar appears - this would be my feedback for yours (everything else looks great).)

    I also added some additional filter functionality. If you click one of the already selected filters on a listing. It should remove the target filter.

    I would love if you could take another look and my preview site and let me know what you think.

    Ollie

    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