DEV Community

Cover image for Build Job Listing Website in React JS

Posted on • Updated on

Build Job Listing Website in React JS

Hi there,

I wanted to create something interactive in ReactJS. So I tried to build this Job Listing Website which is one of the Challenges on FrontEnd mentor.

Here you can see the DEMO:

I have also created a video on that:

You'll learn lots of things from this like,

  • Getting JSON data from file and displaying it
  • Filter data based on the categories selected
  • A Search component
  • React Hooks
  • Sass styling
  • Advanced Conditional Rendering

You can find Full-Code repository from here.

Please share your valuable review!

All suggestions are welcome!

Thanks For Reading and Supporting.๐Ÿ˜„

Feel free to visit my youtube channel:


You might also like these website templates:

  • A beautiful portfolio template in ReactJS => here
  • NFT collection landing page in ReactJS => here

Follow me on Twitter where I'm sharing lot's of useful resources!

@code.bucks ๐Ÿ˜‰

Top comments (7)

grahamthedev profile image
GrahamTheDev • Edited

Doesn't work on mobile bud, tags appear off to the right.

Also didn't read the challenge but looking at the images I think you missed being able to filter on "featured", "new" etc. so you might need to add that.

From an accessibility perspective you need to use semantic elements as at the moment the whole page is not keyboard accessible. <button> elements for the tags, <ul> and <li> for the list of items etc.

Other than that looks good! Have you submitted your solution?

codebucks profile image

I haven't focused more on mobile UI. I have tried only for 375px width as mentioned in the Design Guidelines. I just wanted to focus more on Logic part.

Well, Based on challenge there is no specific details about new and featured, but i have implemented that left side border which only appears when there is featured tag on job.

Thanks for your review and suggestions I'll try to make it better.๐Ÿ˜„

grahamthedev profile image

Trying on iPhone and on resized browser and not working mobile layout as I said so that is your big fix.

As I said didnโ€™t read brief it was just looking at the screenshots that it had โ€œfeaturedโ€ as a filter option so I could be wrong there.

Looks great though! ๐Ÿ˜

golangch profile image
Stefan Wuthrich

Interesting React Example Project. Tks for that.
A real React Job Board

aalphaindia profile image
Pawan Pawar

Keep sharing!!

atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Thanks, A lot :)

codebucks profile image

You're Welcome! ^_^