Sign in
Log inSign up

Building the clone of Hirist.com website

Sandhya Maram's photo
Sandhya Maram
·Aug 30, 2021·

4 min read

Hello readers, I'm Sandhya Maram and in this blog, I would like to share the project that I and my team members at Masai School have created in the span of 6 days.

At the end of Unit-2 of our curriculum, we were asked to clone a popular website called hirist website.

We have used HTML5, CSS3, JavaScript, DOM manipulation and local storage to build this clone.

First of all, I would like to thank Masai School for giving me this wonderful opportunity.

A glimpse of the project and a simple walkthrough of the website:

Introduction of hirist website:

Hirist.com is an exclusive job portal for technology geeks who sleep and dream PHP, Java, C, C++, Python, Ruby on Rails, etc. They feature some of the best jobs in the technology sphere across categories like Online, Mobile, Web, UI/UX, and Enterprise (SAP/Oracle) and they're shaking up the online recruitment space in India.

Landing Page :-

This is how the landing page looks like when the user visits the website for the first time. We have used hover effects and Javascript functionality across this page to navigate to various types of jobs and also included the search functionality for available jobs and also the option for the user to sign in or sign up to the website.

Building the clone of Lumen5 Website _ by Mangesh Landge _ Medium - Google Chrome 8_30_2021 12_46_43 PM.png

Login Page :-

This is how the login page looks like, the user can sign in to the website if he already has an account and we also provided forgot password option to reset the password. If the user doesn't have an account he can create one using the sign-up option provided by entering his details. We have used Javascript and Local Storage to save, retrieve, and validate the login credentials.

Grid - Google Chrome 8_30_2021 1_00_10 PM.png

Jobs Feed Page :-

This is where the user is redirected after a successful sign-in. Here the user can see all the jobs available. We have included the filter functionality, to filter the jobs by experience and location. The user can apply for the job by clicking on the job.

Grid - Google Chrome 8_30_2021 1_00_22 PM.png

After clicking on the job, the user will be taken to the below page where the user can access all the job details. We have added the apply option to apply for the job.

Grid - Google Chrome 8_30_2021 1_00_39 PM.png

After clicking on apply the user is asked to enter his details education, personal, experience, etc. And the user has to do this only once. We have used Local Storage to store the entered data.

Grid - Google Chrome 8_30_2021 1_00_50 PM.png

After the user successfully enters all the details, he is redirected to the below page. It shows that the user successfully applied for the job.

Grid - Google Chrome 8_30_2021 1_01_02 PM.png

Roles and responsibilities of Team members :-

On Day-1 and Day-2 we worked on the Landing page and sign-in and sign-up pages.

On Day-3 and Day-5 we worked on the jobs feed page and other pages present on the navbar, job apply and info pages and resume filling pages.

On Day-6 we optimized the filter functionalities on jobs and merged all pages and given the final touch-up to our project.

Let me speak about my team members :-

Nikhil Rane is responsible for the sign-in and sign-up page, jobs information pages, and final confirmation page after applying for the job.

Venkataraman Ethirajan is responsible for building the landing page and resume-filling pages.

Sandhya Maram is responsible for landing page hover effects and search functionality, jobs feed page, filter functionalities of jobs feed, and merging the code.

Challenges faced while starting our project :-

In the initial two days, we struggled to choose what functionalities to build and spent most of our time on landing and sign-in pages and we thought we were lagging behind. And then we decided on the functionalities and pages we wanted to build and speeded up the work.

Key Learning points in this journey :-

  1. How to collaborate and work in a team.
  2. Project presentation skills as a team.
  3. How to approach a problem.
  4. Building real-world websites.
  5. Deep understanding of the concepts learned and their real-world applications.
  6. How to manage time efficiently and how to meet deadlines.
  7. Increased self-learning capacity.

Conclusion :-

Overall, it is very awesome to work with new members as a team and I have enjoyed the process. And it helped increase my self-confidence that I can go forward in this masai journey.

You can find all the codes of our project here on Github.

Thanks for stopping by and come this far to the end. Please like, share, and comment your suggestions down below.