Organize Your Job Search With React JS
React is a very common tool used during many project developments in the tech industry today. It’s useful for testing and solving problems before projects can get deployed to the public and users. The benefit is that engineers can find bugs and issues that occur during the development phase and quickly solve them without having to reload an HTML page consistently. For this project, react was the backbone that held and connected everything so that users to get help during the job search process.
Dashboard is created entirely by using React JS and aims to tackle the common problem for many college graduates, developers, and job seekers. Finding a job is more difficult than what many people believe it to be because of the numerous job sites, getting noticed in a pool of applications, or just preparing for that next interview. It’s challenging to get everything organized and find those jobs that can suit the person. To help assist during this stressful process, Dashboard helps organize your schedule while also searching for jobs related to your field in software or web development.
Dashboard is built with a calendar, clock, and agenda to help users keep organized with upcoming events or plans. Jobs and news are received by using the data with the API of GitHubJobs and HackerNews. Users can also view local events curiosity of MeetUp API and can check the weather of a location via OpenWeather.com. Users can set their agenda for the weeks ahead and reminders for themselves about any tasks they need to accomplish.
This application is built with Mongo database since there aren’t many relationships between users, login and registering are created using passport, and styling is Material-UI with Particle JS.
The code above shows how each route is set with the corresponding icons and files that should be rendered once clicked.
Once an icon is clicked, then a request is sent to the API of the icon information and the response is stored in a state variable until it is used later to render the information on the page for the user.
The handleClickOpen function checks if the icon was clicked and then sends the API request. After the response is stored, the information is rendered and mounted to the page using componentDidMount() function. The handleClose function is executed whenever the user clicks on another icon leaving the current page.
After the information is grabbed from the API we use Material UI components Card to organize them and map creates one for each job. Each card includes the title and a link to the job that with the onClick goes to another tab.
React.JS is a powerful tool to master for many developers so that projects can be deployed faster and errors can be addressed sooner. My perspective for this project is that I’m glad to work in a group to create a useful application for many users and developing with react had its own challenges but we worked together to figure out the solutions and have a great working project at the end. Our biggest challenge was understanding react and how it worked, because of the number of files in one source folder caused some confusion about connecting each one to have a fully functioning site. Because of the sensitivity of changes that could occur and cause multiple errors, our group performed pair programming multiple times and consistently checked the console and code to address errors that occur in other files while we were changing one. But in the end, this project turned out great and is useful for many users while they are searching to start their careers and journey to the future.
Github Link
