DEV Community

Build an amazing Job Search App using React

Yogesh Chavan on July 03, 2020

In this article, you will build a beautiful Job search app using Github Jobs API By building this App, you will learn: How to lazy load images i...

Read full post

Mike Talbot ⭐ • Jul 3 '20

A huge effort went into that, for a new dev the step-by-step you've made is going to be very helpful.

Yogesh Chavan • Jul 3 '20

Thank you! It really means a lot...

mugdhasonawane88 • Jul 4 '20

Nice article Yogesh !

Yogesh Chavan • Jul 4 '20

Thank you!

Boa Matule • Jul 5 '20

Another great tutorial Yogesh! Thanks for sharing your knowledge with all of us.

Cheers

Yogesh Chavan • Jul 6 '20

Thank you so much!

Boa Matule • Jul 6 '20 • Edited

Mate, my server is not working! Trying debugging it but it seems i can't more forward! So localhost:5000 is giving me: Cannot GET /. Or from the Console: GET localhost:5000/ 404 (Not Found)

Help :)

Yogesh Chavan • Jul 6 '20 • Edited

The jobs are not available on localhost:5000/ instead they are available on localhost:5000/jobs

which you can verify in server/server.js, line number 13

app.get('/jobs', async (req, res) => {

Let me know if it works

Boa Matule • Jul 6 '20

Thanks loads mate!
I did actually managed to visualise them at localhost:5000/jobs but i thought i was doing something wrong because i am not able to display the results in the client server. Basically some errors in the /src/actions/jobs.js... Working on it. Thanks again for amazing work.

Yogesh Chavan • Jul 6 '20

Okay. Great! If you read the article step by step then you will not get any error. You can always clone the final repository code from github.com/myogeshchavan97/github-... and compare your code with mine, in case you get any error.

Boa Matule • Jul 6 '20

Stranger! Can't display the jobs cranky-haibt-9c4f4b.netlify.app/! Will check out what it's wrong.... !

Yogesh Chavan • Jul 7 '20 • Edited

Netlify does not support Node.js apps directly. If you want to get your Node.js app deployed on Netlify, you need to deploy the App as a lambda function which I have explained in detail in this article.

Alternatively, you can clone my this repository where I have already done the configuration changes for Netlify.

You can check out my commits HERE to understand what changes I have done specific to Netlify

If you don't want to do such configuration, you can use Heroku to deploy the App because Heroku supports both React and Nodejs App directly.

Yogesh Chavan • Jul 7 '20

I have just published an article showing how to deploy this application to Heroku. Check it out HERE

Tamirat • Nov 21 '23

good job

Yogesh Chavan • Nov 22 '23

Thank you🙏

webdev-rahul • Aug 3 '21

{
"error": "GitHub Jobs is deprecated! New jobs will not be posted from May 19, 2021. It will shut down entirely on August 19, 2021. Read more in: github.blog/changelog/2021-04-19-d..."
}

Yogesh Chavan • Aug 4 '21

Yes, the API will no longer work as its deprecated. But You can use the static data from the API which you can find here in the code repository.

You just need to return this JSON data from the backend API

webdev-rahul • Aug 4 '21

Really Appreciate your quick reply, also learned a lot from your Blogs and Courses. Great work

Yogesh Chavan • Aug 5 '21

Thank you! I'm glad you found the blog and my courses useful.

Paul Caruana • Oct 27 '20

Great tutorial. When I click on the job I am not taken to the description and not sure why. Any thoughts?

Yogesh Chavan • Oct 27 '20

Thanks. Have you added the onClick Handler inside the components/JobItem.js file for the div like this?

<div className="job-item" index={index + 1} onClick={() => onItemClick(id)}>

You also need to add the handleItemClick function inside the HomePage.js file like this

const handleItemClick = (jobId) => {
    setPage('details');
    setJobId(jobId);
  };

All About Sarkari Result Exam • Jun 15 '22

First of all, I warmly welcome you. He has given very good information. For computer, internet, technology information, you can visit our website. You keep on giving similar information in future also. Which helps a lot to all of us.

Dermal Fillers • Feb 10 '22

We provides call center jobs in Rawalpindi and Islamabad. If you are looking for jobs, then visit us now. We are also providing part-time jobs for students and all at All-Star BPO.

Bharat Saraswat • Aug 22 '20

Hi, I am getting cors error while hitting the github api, did you face that issue?

Yogesh Chavan • Aug 22 '20 • Edited

I think you're making API call from client side app. GitHub jobs API does not allow accessing jobs from client side apps. You need to make API call from server side only. That's why I have used Node.js for making API call

Bharat Saraswat • Aug 22 '20

Understood, thanks for the explanation.

Yogesh Chavan • Aug 23 '20

it's my pleasure

owenm33 • Jul 9 '21 • Edited

EDIT: seems like the cause of this issue is that Github Jobs API is now deprecated (see here: github.blog/changelog/2021-04-19-d...)

Could somebody please elaborate on the fix for this? I ended up cloning the source repo and trying to access localhost:5000/jobs after yarn start from top-level and server folders (as instructed in readme) but I'm getting no UI in Firefox and console is reporting "Content Security Policy: The page’s settings blocked the loading of a resource at localhost:5000/favicon.ico (“default-src”)."

I've tried to follow the suggestions here: csplite.com/csp212/ but I'm just curious as to why I'm still getting this error even after copying the repo exactly.

Thanks heaps for the tutorial btw, it was super helpful

Josiah-williams • Sep 20 '20

I don't if the api still works but it gives me an error on the console when i click the search button

GET localhost:5000/jobs?description=&l... net::ERR_CONNECTION_RESET

Yogesh Chavan • Sep 20 '20

You need to be connected to the internet to access the jobs. Looks like your internet connection was down when you clicked the search button.

Josiah-williams • Sep 20 '20

I have tried changing internet connectivity its still the same thing

Yogesh Chavan • Sep 20 '20 • Edited

Have your started your server by running yarn start command from server folder?

Kenechukwu Nwobodo • Sep 12 '20 • Edited

Hi great article. While using running the program in localhost, the list of jobs wasn't displaying in the UI for me. I checked console, was getting errors.

Yogesh Chavan • Sep 12 '20

Can you post the error that you're getting? You can also check the live demo for working app here

Kenechukwu Nwobodo • Sep 16 '20

In the console this.
GET localhost:6000/jobs?description=Fr... net::ERR_UNSAFE_PORT

Happens anytime I click on search button in the UI

Yogesh Chavan • Sep 17 '20 • Edited

Google chrome considers 6000 as an unsafe port. HERE is a list of unsafe ports which are not allowed by browser. Use any other port or 5000 as I have used in the project. Make sure to use the same port in src/utils/constants.js and server/server.js file also. You can anytime clone my repository from HERE to compare your code with mine and check if you missed anything.

All About Sarkari Result Exam • Feb 6 '22

Thanks for sharing your knowledge with all of us.

ExamMedia.in Gives Information For Sarkari Naukri, Sarkari Exam, Sarkari Result, Sarkariexam, Latest Govt. Jobs Notifications.

Find all jobs - Exammedia.in

Agnessa Filary • Feb 12 '23

Hey there! I was always looking for a lot of various ways about how to find a good job. As for me, I checked a lot of possible solutions and remote jobs seems to be a really updated solution. There you can easily find a lot of possible job options and the way in order how to apply for a good job. It is playing a really important role for me.

Dinah Halpert • Nov 3 '23

I found your article simply amazing. It's a fantastic resource for anyone diving into React development. Building a job search app using Github's API provides hands-on experience with essential React concepts, like lazy loading images, context sharing, and even addressing HTML rendering challenges. It's an informative guide for both beginners and those looking to expand their React skill set. Kudos to the author! For career-oriented folks, this learning journey may even lead to seeking Chicago resume writing services to land that dream job.

carlos fabian venegas • Mar 17 '21

dangerouslySetInnerHTML did not work for me? so i used
npm i html-react-parser. That solved my html problem.

Yogesh Chavan • Mar 17 '21

It should work with dangerouslySetInnerHTML. Are you sure you have used double underscores like this: __html?

carlos fabian venegas • Mar 18 '21

I did check, even copied from you repo. After I completed your project, I went back tried it again and now it works? I am new so I wish I understood why it didn't work the first time, but at least I found a alternative working solution.
thank you

Yogesh Chavan • Mar 18 '21

That's strange. Glad to hear that it's working now