DEV Community

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

Posted on โ€ข Edited on

40 8

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 ๐Ÿ˜‰

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

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! ^_^

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay