DEV Community

loading...
Cover image for Build Job Listing Website in React JS

Build Job Listing Website in React JS

codebucks profile image CodeBucks ・Updated on ・1 min read

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

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

@code.bucks πŸ˜‰

Discussion (6)

pic
Editor guide
Collapse
inhuofficial profile image
InHuOfficial • 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 Author

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
inhuofficial profile image
InHuOfficial

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
aalphaindia profile image
Pawan Pawar

Keep sharing!!

Collapse
atulcodex profile image
Atul Prajapati

Thanks, A lot :)

Collapse
codebucks profile image
CodeBucks Author

You're Welcome! ^_^