DEV Community

Cover image for Build Job Listing Website in React JS
CodeBucks
CodeBucks

Posted on • Edited 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:
https://react-job-listing-website.vercel.app/

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:

@CodeBucks

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)

Collapse
 
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?

Collapse
 
codebucks profile image
CodeBucks

Hey,
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.😄

Collapse
 
grahamthedev profile image
GrahamTheDev

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! 😍

Collapse
 
golangch profile image
Stefan Wuthrich

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

Collapse
 
aalphaindia profile image
Pawan Pawar

Keep sharing!!

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Thanks, A lot :)

Collapse
 
codebucks profile image
CodeBucks

You're Welcome! ^_^