What inspired you to create this project?

As soon-to-be graduates, we found searching for jobs can be difficult and the application process can be tedious. A majority of the time you’re repeatedly filling out the same information for hundreds of applications. On top of that, you have to upload your resume, transcript and sometimes even create an account to apply. All of this is very time consuming and we felt that it can be improved. We used the simple swiping feature of Tinder to make it easier for users to apply to jobs.

What it does

Employers and Applicants are separated into two groups. Employers provide details of their company and required skills for their job listing while Applicants provide their job interests and skillsets. We then match them based off of their job interests and skillsets. Applicants can swipe to quickly apply to the job listing. The employer can see who is interested in their job listing and review the profiles of applicants to find candidates.

How I built it

Why Figma?

This tool allows multiple users to interact simultaneously on the design of the website. Figma allows us to collaborate in real time and gives us a general approach on the result of our app. We were able to work on different designs and form discussions on prototyping our product.

Why React?

React is a fast and scalable JavaScript library that allows us to render and update each change in data. This library uses reusable and composable components and a well-defined lifecycle which provides simplicity and organization.

Why Tailwind CSS?

Tailwind CSS gives us more flexibility in our design compared to bootstrap. This framework is simple and easy to implement into our website to create customized, responsive designs.

Why Firebase?

Since Firebase is a NoSQL database, it offers flexibility for data ingestion of unstructured data. Firebase provides an authentication system that allows users to sign in from different platforms. In addition, Firebase offers scalability for its users and has tools for data analytics which can be used in the future to improve matching.

Challenges I ran into

Josh Improgo

Some issues that I ran into as a front-end developer was navigating through the website using React. With some advice from Kelvin, I used Router, Link, and Route from the react-router-dom library to provide navigation. I also ran into the problem with Tailwind’s dependence on PostCSS 8 and its compatibility issues with React version 17.0.1. To solve this, I had to simply uninstall PostCSS 8 and install the earlier version, PostCSS 7 to be compatible with React version 17 and up.

Jonas Improgo

The problems I had with working with Tailwind was initially the setup of Tailwind CSS. When wanting to modify or add some of the properties shown in the documentation, I was unable to use the config file for the customization of the CSS properties and substituted it with another CSS file with important tags to override the tailwind.css file.

Jeffrey Zhao

When working on this hack I ran into problems with understanding how to query and post data to Firebase. I had to do a lot of research and reading on Firebase’s functions and how to correctly implement them. In addition, having to decide between using Firebase’s Firestore or real time database.

Kelvin Wu

While working on the database calls, I had to write the asynchronous calls in Javascript to make sure they returned the data correctly before. I had to look at the query functions provided by Firebase to know how to filter the data appropriately.

Accomplishments that I'm proud of

Josh Improgo

I’m proud of being able to learn React and use it in a small time frame. I was able to use the React library and implement other dependencies that helped in building the application.

Jonas Improgo

I have had experience working with the Bootstrap framework and I’m proud of having learned a newer framework with better flexibility to apply in the design of the project.

Jeffrey Zhao

I’m most proud of being able to get the Firebase database up and running. I’m also proud of getting the matching between applicants and employers working.

Kelvin Wu

I was proud in making sure the functions that called data from the database worked properly and were able to filter the results.

What I learned

Josh Improgo

As someone who is inexperienced in React, I learned very quickly on how to use functional components and various React hooks. I learned how to use the useForm hook to help make the forms for the Applicant and Employer. I also learned how to navigate through the application using Router, Link, and Route.

Jonas Improgo

I had experience working with the Bootstrap framework and decided to try learning a Tailwind CSS

Jeffrey Zhao

I haven’t had much experience beforehand working with databases and managing one. By using Firebase for this hack it helped me learn and understand how a NoSQL database functioned and the benefits of using one. In addition, Firebase introduced me to how cloud functions worked even though we couldn’t implement it.

Kelvin Wu

I learned how Firebase works as a database. I provided advice to my teammates on Javascript Promises and libraries to use for React.

What's next for Jober

  • Be able to bookmark the listings and view them on a different screen
  • Add more labels and a search function
  • Allow users to add resumes and customized cover letters
  • Add images to easily identify company logos
  • To monetize the app, limit the number of job postings an applicant can see or limit the number of times they can apply
  • Expand the type of jobs from Computer Science to other industries
  • Have multi-page forms for best practices
  • Create a stacked-card design
  • Implement the swiping feature where swiping left is “not interested”, up is “bookmark”, and right is “apply”
  • Be able to view applied listings on a different screen
  • Create a landing page to market the product with a call-to-action
  • Create a navigation bar that is responsive to web and mobile applications
  • Deploy website on Firebase

Built With

Share this project: