IN-HOUSE JOB PORTAL

AVINASH PATHROL

A project report submitted in conformity with the requirements

for the degree of Master’s of Science in Information Technology

Department of Mathematical and Physical Sciences

Faculty of Graduate Studies
Concordia University of Edmonton

© Copyright 2022 by Avinash Pathrol

 IN-HOUSE JOB PORTAL

AVINASH PATHROL

Approved:

Rossitza Marinova, Ph.D.

Supervisor Date

Committee Member Name, Ph.D.

Committee Member Date

Alison Yacyshyn, Ph.D.

Dean of Graduate Studies Date

 In-house Job Portal Web Application

Avinash Pathrol
Master of Science in Information Technology
Department of Mathematical and Physical Sciences
Concordia University of Edmonton
2022

Abstract

The goal of this portal is to connect to industries and act as an online recruit-
ment to support students to find the right IT job after/during graduation. This
project addresses the gap between the Job Seeker and the Recruiter. This is
done by taking into consideration the details provided by both, the Job Seeker
and the Recruiter, and, by applying a variety of different filters in order to
cater to each and everyone’s individual needs and wishes. The methodology
implemented is an effective model for the sole purpose of a web portal creation.
The messaging system is quite an important feature which will be implemented
in the coming future within the project in order to keep the involved parties
informed about their status in the Job Portal, telling them everything such
as – company to which they have applied, application status, designation, de-
partment. Since, the websites are, nowadays, accessed via a variety of different
devices such as desktops, laptops, tablets, mobile devices, etc., using Bootstrap
enables easy compatibility with all the above mentioned devices with ease.
Keywords: —Knowledge sharing, web portal, job portal, online recruitment.

iv
Contents
1 Introduction 1

2 Literature Review 2
2.1 Job Procurement: Old and New Ways . . . . . . . . . . . . . . . . . 2
2.2 Importance of Job Portals . . . . . . . . . . . . . . . . . . . . . . . . 3
2.3 Features of Job Portals . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3 Technical Frameworks 4
3.1 MERN - FRONTEND . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.1.1 ReactJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.1.2 ReactJS Performance . . . . . . . . . . . . . . . . . . . . . . . 5
3.1.3 Reasoning behind the use of ReactJS . . . . . . . . . . . . . . 5
3.2 MERN - BACKEND . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.2.1 NodeJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.2.2 ExpressJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.2.3 MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.2.4 Working of MongoDB . . . . . . . . . . . . . . . . . . . . . . 7
3.2.5 Application of MongoDB . . . . . . . . . . . . . . . . . . . . . 7

4 Application Work-flow 7

5 Appendix / Code 14
5.1 Login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
5.2 Signup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
5.3 Homepage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

6 Conclusions 44

7 Acknowledgments 45

8 Privacy Policy 45

9 Terms and Conditions 46

v
List of Tables

vi
List of Figures
1 Application Landing Page . . . . . . . . . . . . . . . . . . . . . . . . 8
2 Recruiter Sign-up Module . . . . . . . . . . . . . . . . . . . . . . . . 8
3 Recruiter Login Module . . . . . . . . . . . . . . . . . . . . . . . . . 9
4 Recruiter Profile Module . . . . . . . . . . . . . . . . . . . . . . . . . 9
5 Recruiter Module to Add Jobs . . . . . . . . . . . . . . . . . . . . . . 10
6 Recruiter Module which displays all the jobs posted by the recruiter . 10
7 Recruiter module which enables Decision Making . . . . . . . . . . . 11
8 Applicant Sign-up Module . . . . . . . . . . . . . . . . . . . . . . . . 11
9 Applicant Login Module . . . . . . . . . . . . . . . . . . . . . . . . . 12
10 Applicant’s Profile Section . . . . . . . . . . . . . . . . . . . . . . . . 12
11 Job Listing on the Applicant Home page . . . . . . . . . . . . . . . . 13
12 Applicant Job Application Decisions. . . . . . . . . . . . . . . . . . . 13

vii
Listings
1 React Login Module code . . . . . . . . . . . . . . . . . . . . . . . . 14
2 React Sign-up Module code . . . . . . . . . . . . . . . . . . . . . . . 16
3 React Home Module code . . . . . . . . . . . . . . . . . . . . . . . . 28

viii
1 Introduction
Unemployment is one of the serious social issues faced by both developing and devel-
oped countries. For example, in Europe the rate of unemployment has been increas-
ing rapidly since the 1970’s. Dorn and Naz [1] mentioned that one of the reasons for
this problem is the unfair distribution or lack of information on job opportunities
so people are unable to know the new job vacancies. It means that there are some
jobs available, but jobseekers do not have access to that information. An efficient
search of the internet might help to jobseekers in their job hunt. There are some web
portals that provide an efficient way to search the web for online information on job
vacancies for jobseekers [2]. Today, the internet has changed many aspects of our
life, such as the way we look for jobs [3].
If one person wants to find a new job, they can open a web browser to send the
resume and receive an e-mail. Online recruitment has become the standard method
for employers and jobseekers to meet their respective objectives. The employers
upload the job offerings in to the job portals. Online recruitment has been accepted
not only by most large companies but also the small ones. The organizations send
information or jobs vacancies for posting on the portals and communicate with the
applicants via the Internet and Email. Gangle [4] defined the concept of online
recruitment or e-recruitment as the use of Internet to search for jobs which have
been advertised electronically. Thus, the employers advertise the job opportunities,
save the resume and curriculum vitae (CV) of applicants, contact the jobseekers who
are qualified, online.
Today, the Internet has become one of the key methods for getting information
relating to job vacancies. Large institutions, like universities include information on
career prospects in their websites which are also linked to recruitment sites. The rest
of this research is arranged as follows: First of all, the paper presents a literature
review including the job procurement: old and new ways, importance of job portals
and features of job portals, and then it argues the methodology continues by data
analysis and discussion, the last part brings the conclusion.
Portals have different applications or services to solve various problems. One of the
main purposes of web portals is to allow information sharing over the Internet. This
need can be addressed through a knowledge portal which must contain sufficient data
and information about the requirements of the Job Seekers. Today, The Internet has
changed many aspects of our life, such as the way we look for jobs.
Considering the aforementioned arguments, the information flow in the online labour
market is far from optimal. A large number of online job portals have sprung up,
dividing the online labour market into information islands and making it close to
impossible for a job seeker to get an overview of all relevant open positions. Their
strong market position, as the prime starting point for job seekers, allows job portals
to charge employers high fees for publishing open positions. Due to these costs em-
ployers publish their job postings only on a small number of portals, which prevents

1
the offers from reaching all qualified applicants. Employers often receive a large
number of applications for an open position, due to the strained situation of the
labour market. The costs of manually preselecting potential candidates have risen
and employers are searching for means to automate the preselection of candidates.
The rest of this research is arranged as follows: First of all, the paper presents a
literature review including the job procurement: old and new ways, importance of
job portals and features of job portals, and then it argues the methodology continues
by data analysis and discussion, the last part brings the conclusion.
The aim of this project is to add to a stage for the graduates to have the job ideas
of their related field. Through this application recruiters or additionally universities
can instruct their students, to get the jobs. This web application gives an approach
to take and apply for the available jobs quick and easily.Current students and recent
graduates will discover this application so fascinating that they can easily search for
all the available jobs across the country. This Application is as necessary as well as
important in every aspect. One of the greater difficulties that the general universities
faces is guaranteeing that students get job(s) properly, so that they may build up
their aptitudes. The target of this is to outline a framework that will help students
and applicants in getting new and better job(s).

2 Literature Review
2.1 Job Procurement: Old and New Ways
Job seeking usually involves different ways to look for jobs such as through personal
contacts, direct telephone calls to employers, job agency office, scanning online job
listings, etc. [3]. Before the Internet, became widely used as a method of seeking
jobs, jobseekers spent a lots of time using various methods to look for job openings.
Today, jobseekers use online methods which are very convenient and save a lot of
time. Galanaki [5] lists the following methods to be the traditional (old) ways for
recruitment:
• Employment recruitment agencies;
• Job fairs;
• Advertising in the mass media such as newspapers;
• Advertisement in television and radio;
• Management Consultants;
• Existing employee contacts;
• chools colleges or universities students services department;
• Workers or professional referrals.

2
These old job seeking methods are too slow, stressful, challenging and also lack qual-
ity [6]. In addition, the applicants have to consider the cost and the amount of
time to get the information they need, and other preparations they have to make.
Finding all available job vacancies is a main step at in the job-seeking process. The
Internet is now a powerful tool that jobseekers can use. Today, there are many
sites that advertise job positions to be filled by people with certain skills in various
fields. The Internet plays an important role in the area of human resource plan-
ning and development. Most planning and development organizations are now using
computer technology and the Internet for staff recruitment. It should be noted that
although the Internet has facilitated the process of job-seeking, it has not replaced
the traditional methods, completely.

2.2 Importance of Job Portals

In the age of technology, the Internet has become the main source of information for
jobseekers. Large corporations, institutions, and universities include information on
career prospects on their websites. These websites or portals provide a search engine
to access information on job opportunities [7]. Sulaiman and Burke [8] found that
most employers are keen to use online recruitment methods of getting staff.
He mentioned that online recruitment methods have the ability to identify the best
applicants. That is the reason why more developed countries such as Malaysia have
started to use online job portal as an important way to recruit people to fill job
vacancies. A study done in 2006, found that 21% of internet users in the EU used
the web to search for jobs or to send job applications. In 2007, this had increased to
67% for unemployed people [5].
Most companies publish their job vacancies on their website, or use online jobsites.
These methods result in great cost savings. Mochol and Nixon [9] stated that the use
of semantic web technology gives market transparency, higher speed of procurement
but reduced transaction cost. Today, the Internet is used for a large number of
business transactions. People find the Internet to be an effective communication
tool. In a report in 2005, it was found that 90% of jobseekers in Germany use the
internet to look for jobs. A reason for this high rate is that applicants are young
and highly qualified and use the internet a lot, and many companies publish their
job opportunities online and via their portal. Job portals are the starting point of
jobseekers when searching for jobs.
Thus, some job portals charge employers high fees to publish information on job
vacancies. In spite of this, many employers still continue to advertise or publish
information on job opportunities on job portal, but limit this in order to keep costs
down. Many employers still believe that a jobseeker will visit job portals when
searching for job vacancies [10]. A good job portal can also support knowledge
sharing among the members. The number of online job portals continues to increase.
It is believed that three quarters of who are searching for jobs, use the internet and

3
online portals. Paradamean [4] stated that online recruitment has the following
advantages: employers can identify a large number of eligible job seekers and get
their information easily.
It means that organizations can extend the search domain, hence, they have better
prospect of selecting the most qualified candidates. Internet provides employers a
way to attract a higher number of candidates, especially, those who fulfill the job
requirements. With online recruitment, people have access to the job information
from anywhere in the world, while with the newspaper, information is disseminated
at local level. One key aspect of job portal is the cost. Companies spend less to
publish or advertise job vacancies on the portals or websites, as compared to the use
of other media such as newspaper or job fairs. Furthermore, online recruitment is
very fast, and saves time. Once the employers upload the job vacancy on the portal,
the jobseekers are able to view it and send in their resume. Therefore, cost and time
savings are two significant advantages of job portals.

2.3 Features of Job Portals

One of the ways to improve employment mobility is to provide online job offer ser-
vices. Online job portals can help jobseekers as they contain all required information
about available vacancies in a single point. Such portals enhance efficiency in job
recruitment as applicants can match their qualifications and skills to the require-
ments of employers. Generally, searching for jobs on the internet involves a process
of information collecting because the jobseeker gathers information contained in the
job portals, during the search.
A good job portal shares information and experiences with its members/users. This
saves time and efforts. Job openings requirements can be matched to an applicant’s
qualification and skills. In this way, job portals return not only the precise matches
but also return the most similar match.
Online job portals should have quite similar characteristics that include: an online
searchable database of positions for job searcher; facilities to send CVs to the website;
email alerts of jobs which match the users profile; extra instruction, for example,
about working in foreign countries or career guidance; the capability to manage job
applications; employers must have the ability to publish and manage job positions,
search the CV database; and have online contact with potential jobseekers.

3 Technical Frameworks
Web application development is not the same as before, even if it is a few years
back. Today, there are so many options, and strangers are often confused about
what is best for them. There are many options not only for a wide stack (various
tiers or technology used), but also tools that help improve overall experience of web
or software development.

4
We have used MongoDB, Express, ReactJs and NodeJs which is known as MERN
stack because it is excellent for building a complete web system. The four components
of the MERN stack (MongoDB, Expresses, ReactJs and NodeJs) and how well they
work together, their beauty as a complete stack in web design. We have focused
exclusively on the functions of these four MERN stack technologies and how they
are applied to web development for project such as online job portals.
MERN is a acronym used to describe a specific set of JavaScript-based technologies
used in the web application development process , It is designed with the idea of
making the development process as smooth as possible. All of these factors play
a very important role in the process of web application development. All of this
provides the final framework for the engineers in which they work. Today around
the world are working to improve the user interface of the app and to improve the
developer process of building applications to implement projects and development
requirements within a set deadline. Since MERN is based on JavaScript, developers
only need to know one coding language, making things a million times easier.

3.1 MERN - FRONTEND

3.1.1 ReactJS
ReactJs is a JavaScript enabled library designed to build user web resources. React
Virtual DOM is completely memory and is a web DOM browser. As a result, when
we designed the React section, we do not write directly to the DOM; instead, we
write the tool that the response will turn into a DOM. React is built around objects,
not templates like other frames. The section can be created with the function of the
Class React object, the first place when you access the library.

3.1.2 ReactJS Performance

When looking at the performance of a React or other framework it is important
to remember that in the end, it is all JavaScript scripts the main purpose of these
frameworks is to provide a better framework for UI development than to achieve high
levels of efficiency in any given environment. Any pre-trip request can be reduced to
its base level for high-performance fraud, but the result may be poorly formatted.
Because all JavaScript location points eventually use the same base of the JavaScript
API, the difference in performance boils how much additional code the framework
surrounding those tools .

3.1.3 Reasoning behind the use of ReactJS

Because part of the front-end app is straightforward and does not have a functionality
that is different enough for a single frame to be allowed to run, the selection is
greatly reduced to personal preference. ReactJs has some advantages compared
to other previous frameworks, such as a faster learning curve, support and future

5
development programs from the organization (Facebook), and strong documentation
that has made it an easy-to-read and useful service framework.

3.2 MERN - BACKEND

3.2.1 NodeJS
NodeJS is a software framework that helps create unique network applications and
events. It includes built-in HTTP libraries that allow developers to create their
own web server and additionally create awesome web applications. NodeJs creates
event and event managers for all applications. When I/O performance occurs, the
corresponding handle is lined up to perform and the retrieval function exits the event
after the completion of the I/O function. Certain I/O functions are currently running
outside the server event line. Therefore, NodeJs performs I/O functions humbly
and does not interfere with any documentation, allowing the event loop to respond
to other requests. Node module provides a public API (Application Programming
Interface) that can be used after the module is installed in an existing script. Basic
modules come with Node installation and are synchronized when the Node cycle
begins [4].

3.2.2 ExpressJS
ExpressJs is an open-source server format written entirely in JavaScript, designed
specifically for use with NodeJs. Due to its reliability and widespread use Express
has become a standard Node software. Express in relation to NodeJs can be con-
sidered as similar to what Ruby on Rails is on Ruby. Express is designed to work
and is naturally small, placing only a thin layer over Node web features. Due to its
light weight design and standard adjustment, Express serves as the basis for some
JavaScript components including feathers, KeystoneJS, Kraken and Sails, which are
designed for certain types of applications unlike Express, which only provides pow-
erful performance standard server features such as route navigation, HTTP cache
and template view Power efficiency is one of the most important requirements of
this application, we show battery status performance. Express is a "server-side" or
"back-end" framework. It is not comparable to customer-side organizations such as
React, Angular and Vue. It can be used in conjunction with those frameworks to
build a complete application.

3.2.3 MongoDB
There are many items under the MongoDB umbrella. MongoDB stores data in
flexible scripts, such as JSON. The document model is mapped to objects in your app
code, making data easier to work with. MongoDB is a database that is distributed
in its context, high availability, horizontal scale and distributed locations are built-in
and easy to use. MongoDB directed to text, no database following. MongoDB is
used for its flexibility, Flexible Query Model, Native Aggregation, Schema.

6
Characteristics of MongoDB :
• General Purpose database;
• Flexible schema design;
• Scalability and Load balancing;
• Aggregation Framework;
• Native replication;
• Security features;
• JSON;
• MapReduce.

3.2.4 Working of MongoDB

Documents store data with the help of key-value pairs. Data stored in JSON for-
mat and the backend MongoDB converts the binary data known as BSON. Now,
all of these connections are stored in data. A collection is a group of documents.
These collections are stored in the MongoDB database. This makes fetching of data
extremely efficient than other databases.

3.2.5 Application of MongoDB

• Internet of Things;
• Mobile Application;
• Real-time analysis;
• Personalization;
• Catalog management;
• Content management.
Companies such as Toyota, CISCO, Verizon, and Google easily use MongoDB as
their data management system.

4 Application Work-flow
This is the Landing page of the website which serves as the main page for recruiter
as well as applicants as soon as they sign-up and login into their accounts.

7
Figure 1: Application Landing Page

Figure 2: Recruiter Sign-up Module

8
Figure 3: Recruiter Login Module

Figure 4: Recruiter Profile Module

9
 Figure 5: Recruiter Module to Add Jobs

Figure 6: Recruiter Module which displays all the jobs posted by the recruiter

10
Figure 7: Recruiter module which enables Decision Making

Figure 8: Applicant Sign-up Module

11
 Figure 9: Applicant Login Module

Figure 10: Applicant’s Profile Section

12
Figure 11: Job Listing on the Applicant Home page

Figure 12: Applicant Job Application Decisions.

13
5 Appendix / Code
5.1 Login
This Code shows the Login module which is used on the website which enables the
users and the recruiters to sign into their accounts.
React Login Module code is shown in the Listing 1.
Listing 1: React Login Module code
< !−− Login . j s −−>
<div c l a s s=" l o g i n −wrapper " fxLayout="row" f x L a y o u t A l i g n=" c e n t e r ␣ c e n t e r ">
<mat−card c l a s s=" box ">
<mat−card−header>
<mat−card−t i t l e>Log i n</mat−card−t i t l e>
</mat−card−header>
<form c l a s s=" example−form " [ formGroup ]=" LoginForm ">
<mat−card−content>
<br />
<br />
<br />
<mat−form−f i e l d c l a s s=" form−group ␣ example−f u l l −width ">
<input
matInput
c l a s s=" form−c o n t r o l "
name=" username ␣"
type=" t e x t "
p l a c e h o l d e r=" Email "

formControlName=" username "

formControlName=" e m a i l "
[ e r r o r S t a t e M a t c h e r ]=" matcher "

oni nput=" t h i s . v a l u e ␣=␣ t h i s . v a l u e . toLowerCase ( ) "

/>
<mat−error ∗ n g I f="
␣␣␣␣ LoginForm . g e t ( ’ email ’ ) ? . h a s E r r o r ( ’ email ’ ) ␣ | |
␣␣␣␣ LoginForm . g e t ( ’ email ’ ) ? . h a s E r r o r ( ’ r e q u i r e d ’ )
␣␣">
Please enter va li d email address
</mat−error>
</mat−form−f i e l d>
<br />

14
<br />
<br />
<mat−form−f i e l d c l a s s=" form−group ␣ example−f u l l −width ">
<input
c l a s s=" form−c o n t r o l "
name=" password "
type=" t e x t "
matInput
p l a c e h o l d e r=" Password "
formControlName=" password "
[ e r r o r S t a t e M a t c h e r ]=" matcher "
[ type]=" hidePassword ␣ ? ␣ ’ password ’ ␣ : ␣ ’ t e x t ’ "
/>
<mat−i c o n m a t S u f f i x ( c l i c k )=" hidePassword ␣=
! hidePassword ">{{ hidePassword ?
’ v i s i b i l i t y _ o f f ’ : ’ v i s i b i l i t y ’ } }</mat−i c o n>

<mat−error ∗ n g I f=" LoginForm . g e t ( ’ password ’ ) ? . h a s E r r o r ( ’ r e q u i r e d ’ ) ">

P l e a s e e n t e r a password
</mat−error>
<div c l a s s=" s i g n u p ">

<h4><a href [ r o u t e r L i n k ]=" ’ / f o r g o t p a s s w o r d e m a i l ’ ">

Forgot Password</a></h4>
</ div>
</mat−form−f i e l d>
<br />
<br />
<br />
</mat−card−content>
<button
mat−s t r o k e d −button
( c l i c k )=" onSubmit ( ) "
type=" submit "
value=" Login "
c l a s s=" btn−b l o c k ">
Log i n
</button>
<span c l a s s=" errorOnSubmit " ∗ n g I f=" showError ">
{{ e r r o r M e s s a g e }}
</span>
<br />
<br />
< !−− <div c l a s s=" f o r g o t p a s s w o r d ">

15
<h4><a href [ r o u t e r L i n k ]=" ’ / f o r g o t p a s s w o r d e m a i l ’ ">
F o rg o t password ? </a></h4>
</ div> −−>
<div c l a s s=" s i g n u p ">
<h3> Don ’ t have an account?&nbsp ; &nbsp ;</h3> <br>
<h4><a href [ r o u t e r L i n k ]=" ’ / r e g i s t e r ’ "> Create Account </a></h4>
</ div>
< !−− <div c l a s s=" s i g n u p ">
<h3> Don ’ t have an a c c o u n t?&nbsp ; &nbsp ;</h3> <br>
<h4><a href [ r o u t e r L i n k ]=" ’ / f o r g o t p a s s w o r d e m a i l ’ ">
F o rg o t Password</a></h4>
</ div> −−>
</form>
</mat−card>
< !−− <div c l a s s=" s i g n u p ">
<h3> Don ’ t have an a c c o u n t?&nbsp ; &nbsp ;</h3> <br>
<h4><a href [ r o u t e r L i n k ]=" ’ / r e g i s t e r ’ "> Sign Up </a></h4>
</ div> −−>
</ div>

5.2 Signup
This is the sign-up module of the front-end which is built using ReactJS which inter-
nally works around JSX. This module enables the recruiter as well as the applicant
to sign-up for the portal to access the services. React Sign-up Module code is shown
in the Listing 2.
Listing 2: React Sign-up Module code
\ begin { l s t l i s t i n g }
import { u s e S t a t e , useContext } from " r e a c t " ;
import {
Grid ,
TextField ,
Button ,
Typography ,
makeStyles ,
Paper ,
MenuItem ,
Input ,
} from " @material−u i / c o r e " ;
import a x i o s from " a x i o s " ;
import { R e d i r e c t } from " r e a c t −r o u t e r −dom" ;
import ChipInput from " m a t e r i a l −ui−chip−i n p u t " ;
import D e s c r i p t i o n I c o n from " @material−u i / i c o n s / D e s c r i p t i o n " ;

16
import FaceIcon from " @material−u i / i c o n s / Face " ;
import PhoneInput from " r e a c t −phone−input −2" ;
import " r e a c t −phone−input −2/ l i b / m a t e r i a l . c s s " ;

import PasswordInput from " . . / l i b / PasswordInput " ;

import EmailInput from " . . / l i b / EmailInput " ;
import F i l e U p l o a d I n p u t from " . . / l i b / F i l e U p l o a d I n p u t " ;
import { SetPopupContext } from " . . / App" ;

import a p i L i s t from " . . / l i b / a p i L i s t " ;

import isAuth from " . . / l i b / isAuth " ;

c o n s t u s e S t y l e s = makeStyles ( ( theme ) => ( {

body : {
padding : " 60 px␣ 60 px" ,
},
inputBox : {
width : " 400 px" ,
},
submitButton : {
width : " 400 px" ,
},
}));

c o n s t M u l t i f i e l d I n p u t = ( props ) => {
const c l a s s e s = useStyles ( ) ;
c o n s t { e d u c a t i o n , s e t E d u c a t i o n } = props ;

return (
<>
{ e d u c a t i o n . map ( ( obj , key ) => (
<Grid
item
container
className={ c l a s s e s . inputBox }
key={key }
s t y l e ={{ p a d d i n g L e f t : 0 , paddingRight : 0 }}
>
<Grid item xs ={6}>
<T e x t F i e l d
l a b e l ={‘ I n s t i t u t i o n Name #${ key + 1 } ‘ }
value={e d u c a t i o n [ key ] . i n s t i t u t i o n N a m e }
onChange={(event ) => {
c o n s t newEdu = [ . . . e d u c a t i o n ] ;

17
newEdu [ key ] . i n s t i t u t i o n N a m e = e v e n t . t a r g e t . v a l u e ;
s e t E d u c a t i o n ( newEdu ) ;
}}
v a r i a n t=" o u t l i n e d "
/>
</ Grid>
<Grid item xs ={3}>
<T e x t F i e l d
l a b e l=" S t a r t ␣ Year "
value={o b j . s t a r t Y e a r }
v a r i a n t=" o u t l i n e d "
type="number"
onChange={(event ) => {
c o n s t newEdu = [ . . . e d u c a t i o n ] ;
newEdu [ key ] . s t a r t Y e a r = e v e n t . t a r g e t . v a l u e ;
s e t E d u c a t i o n ( newEdu ) ;
}}
/>
</ Grid>
<Grid item xs ={3}>
<T e x t F i e l d
l a b e l="End␣ Year "
value={o b j . endYear }
v a r i a n t=" o u t l i n e d "
type="number"
onChange={(event ) => {
c o n s t newEdu = [ . . . e d u c a t i o n ] ;
newEdu [ key ] . endYear = e v e n t . t a r g e t . v a l u e ;
s e t E d u c a t i o n ( newEdu ) ;
}}
/>
</ Grid>
</ Grid>
))}
<Grid item>
<Button
v a r i a n t=" c o n t a i n e d "
color=" s e c o n d a r y "
onClick ={() =>
setEducation ( [
. . . education ,
{
i n s t i t u t i o n N a m e : "" ,
s t a r t Y e a r : "" ,

18
endYear : "" ,
},
])
}
className={ c l a s s e s . inputBox }
>
Add a n o t h e r i n s t i t u t i o n d e t a i l s
</Button>
</ Grid>
</>
);
};

c o n s t Login = ( props ) => {

const c l a s s e s = useStyles ( ) ;
c o n s t setPopup = useContext ( SetPopupContext ) ;

c o n s t [ l o g g e d i n , s e t L o g g e d i n ] = u s e S t a t e ( isAuth ( ) ) ;

const [ signupDetails , s e t S i g n u p D e t a i l s ] = useState ({

type : " a p p l i c a n t " ,
e m a i l : "" ,
password : "" ,
name : "" ,
education : [ ] ,
skills : [] ,
resume : "" ,
p r o f i l e : "" ,
b i o : "" ,
contactNumber : "" ,
});

c o n s t [ phone , setPhone ] = u s e S t a t e ( "" ) ;

const [ education , setEducation ] = useState ( [

{
i n s t i t u t i o n N a m e : "" ,
s t a r t Y e a r : "" ,
endYear : "" ,
},
]);

const [ inputErrorHandler , setInputErrorHandler ] = useState ({

email : {

19
untouched : t r u e ,
r e q u i r e d : true ,
error : false ,
message : "" ,
},
password : {
untouched : t r u e ,
r e q u i r e d : true ,
error : false ,
message : "" ,
},
name : {
untouched : t r u e ,
r e q u i r e d : true ,
error : false ,
message : "" ,
},
});

c o n s t h a n d l e I n p u t = ( key , v a l u e ) => {
s e t S i g n u p D e t a i l s ({
. . . signupDetails ,
[ key ] : value ,
});
};

c o n s t h a n d l e I n p u t E r r o r = ( key , s t a t u s , message ) => {

setInputErrorHandler ({
. . . inputErrorHandler ,
[ key ] : {
r e q u i r e d : true ,
untouched : f a l s e ,
error : status ,
message : message ,
},
});
};

c o n s t h a n d l e L o g i n = ( ) => {
c o n s t tmpErrorHandler = { } ;
Object . keys ( i n p u t E r r o r H a n d l e r ) . f o r E a c h ( ( o b j ) => {
i f ( i n p u t E r r o r H a n d l e r [ o b j ] . r e q u i r e d &&
i n p u t E r r o r H a n d l e r [ o b j ] . untouched ) {
tmpErrorHandler [ o b j ] = {

20
r e q u i r e d : true ,
untouched : f a l s e ,
e r r o r : true ,
message : ‘ ${ o b j [ 0 ] . toUpperCase ( ) + o b j . s u b s t r ( 1 ) } i s r e q u i r e d ‘ ,
};
} else {
tmpErrorHandler [ o b j ] = i n p u t E r r o r H a n d l e r [ o b j ] ;
}
});

console . log ( education ) ;

l e t updatedDetails = {
. . . signupDetails ,
education : education
. f i l t e r ( ( o b j ) => o b j . i n s t i t u t i o n N a m e . trim ( ) !== "" )
. map ( ( o b j ) => {
i f ( o b j [ " endYear " ] === "" ) {
d e l e t e o b j [ " endYear " ] ;
}
return obj ;
}) ,
};

setSignupDetails ( updatedDetails ) ;

c o n s t v e r i f i e d = ! Object . keys ( tmpErrorHandler ) . some ( ( o b j ) => {

r e t u r n tmpErrorHandler [ o b j ] . e r r o r ;
});

if ( verified ) {
axios
. p o s t ( a p i L i s t . signup , u p d a t e d D e t a i l s )
. then ( ( r e s p o n s e ) => {
l o c a l S t o r a g e . s e t I t e m ( " token " , r e s p o n s e . data . token ) ;
l o c a l S t o r a g e . s e t I t e m ( " type " , r e s p o n s e . data . type ) ;
s e t L o g g e d i n ( isAuth ( ) ) ;
setPopup ( {
open : t r u e ,
severity : " success " ,
message : " Logged ␣ i n ␣ s u c c e s s f u l l y " ,
});
console . log ( response ) ;
})

21
. c a t c h ( ( e r r ) => {
setPopup ( {
open : t r u e ,
severity : " error " ,
message : e r r . r e s p o n s e . data . message ,
});
console . log ( err . response ) ;
});
} else {
s e t I n p u t E r r o r H a n d l e r ( tmpErrorHandler ) ;
setPopup ( {
open : t r u e ,
severity : " error " ,
message : " I n c o r r e c t ␣ Input " ,
});
}
};

c o n s t h a n d l e L o g i n R e c r u i t e r = ( ) => {
c o n s t tmpErrorHandler = { } ;
Object . keys ( i n p u t E r r o r H a n d l e r ) . f o r E a c h ( ( o b j ) => {
i f ( i n p u t E r r o r H a n d l e r [ o b j ] . r e q u i r e d &&
i n p u t E r r o r H a n d l e r [ o b j ] . untouched ) {
tmpErrorHandler [ o b j ] = {
r e q u i r e d : true ,
untouched : f a l s e ,
e r r o r : true ,
message : ‘ ${ o b j [ 0 ] . toUpperCase ( ) + o b j . s u b s t r ( 1 ) } i s r e q u i r e d ‘ ,
};
} else {
tmpErrorHandler [ o b j ] = i n p u t E r r o r H a n d l e r [ o b j ] ;
}
});

l e t updatedDetails = {
. . . signupDetails ,
};
i f ( phone !== "" ) {
updatedDetails = {
. . . signupDetails ,
contactNumber : ‘+${ phone } ‘ ,
};
} else {
updatedDetails = {

22
. . . signupDetails ,
contactNumber : "" ,
};
}

setSignupDetails ( updatedDetails ) ;

c o n s t v e r i f i e d = ! Object . keys ( tmpErrorHandler ) . some ( ( o b j ) => {

r e t u r n tmpErrorHandler [ o b j ] . e r r o r ;
});

console . log ( updatedDetails ) ;

if ( verified ) {
axios
. p o s t ( a p i L i s t . signup , u p d a t e d D e t a i l s )
. then ( ( r e s p o n s e ) => {
l o c a l S t o r a g e . s e t I t e m ( " token " , r e s p o n s e . data . token ) ;
l o c a l S t o r a g e . s e t I t e m ( " type " , r e s p o n s e . data . type ) ;
s e t L o g g e d i n ( isAuth ( ) ) ;
setPopup ( {
open : t r u e ,
severity : " success " ,
message : " Logged ␣ i n ␣ s u c c e s s f u l l y " ,
});
console . log ( response ) ;
})
. c a t c h ( ( e r r ) => {
setPopup ( {
open : t r u e ,
severity : " error " ,
message : e r r . r e s p o n s e . data . message ,
});
console . log ( err . response ) ;
});
} else {
s e t I n p u t E r r o r H a n d l e r ( tmpErrorHandler ) ;
setPopup ( {
open : t r u e ,
severity : " error " ,
message : " I n c o r r e c t ␣ Input " ,
});
}
};

23
return loggedin ? (
<R e d i r e c t t o="/" />
) : (
<Paper e l e v a t i o n ={3} className={ c l a s s e s . body}>
<Grid c o n t a i n e r d i r e c t i o n=" column " s p a c i n g ={4} a l i g n I t e m s=" c e n t e r ">
<Grid item>
<Typography v a r i a n t="h3" component="h2">
Signup
</ Typography>
</ Grid>
<Grid item>
<T e x t F i e l d
select
l a b e l=" Category "
v a r i a n t=" o u t l i n e d "
className={ c l a s s e s . inputBox }
value={ s i g n u p D e t a i l s . type}
onChange={(event ) => {
h a n d l e I n p u t ( " type " , e v e n t . t a r g e t . v a l u e ) ;
}}
>
<MenuItem value=" a p p l i c a n t ">A p p l i c a n t</MenuItem>
<MenuItem value=" r e c r u i t e r ">R e c r u i t e r</MenuItem>
</ T e x t F i e l d>
</ Grid>
<Grid item>
<T e x t F i e l d
l a b e l="Name"
value={ s i g n u p D e t a i l s . name}
onChange={(event ) => h a n d l e I n p u t ( "name" , e v e n t . t a r g e t . v a l u e ) }
className={ c l a s s e s . inputBox }
e r r o r ={i n p u t E r r o r H a n d l e r . name . e r r o r }
h e l p e r T e x t={i n p u t E r r o r H a n d l e r . name . message }
onBlur ={( e v e n t ) => {
i f ( e v e n t . t a r g e t . v a l u e === "" ) {
h a n d l e I n p u t E r r o r ( "name" , t r u e , "Name␣ i s ␣ r e q u i r e d " ) ;
} else {
h a n d l e I n p u t E r r o r ( "name" , f a l s e , "" ) ;
}
}}
v a r i a n t=" o u t l i n e d "
/>
</ Grid>

24
<Grid item>
<EmailInput
l a b e l=" Email "
value={ s i g n u p D e t a i l s . e m a i l }
onChange={(event ) => h a n d l e I n p u t ( " e m a i l " , e v e n t . t a r g e t . v a l u e ) }
i n p u t E r r o r H a n d l e r={i n p u t E r r o r H a n d l e r }
h a n d l e I n p u t E r r o r={h a n d l e I n p u t E r r o r }
className={ c l a s s e s . inputBox }
r e q u i r e d ={t r u e }
/>
</ Grid>
<Grid item>
<PasswordInput
l a b e l=" Password "
value={ s i g n u p D e t a i l s . password }
onChange={(event ) => h a n d l e I n p u t ( " password " , e v e n t . t a r g e t . v a l u e ) }
className={ c l a s s e s . inputBox }
e r r o r ={i n p u t E r r o r H a n d l e r . password . e r r o r }
h e l p e r T e x t={i n p u t E r r o r H a n d l e r . password . message }
onBlur ={( e v e n t ) => {
i f ( e v e n t . t a r g e t . v a l u e === "" ) {
h a n d l e I n p u t E r r o r ( " password " , t r u e , " Password ␣ i s ␣ r e q u i r e d " ) ;
} else {
h a n d l e I n p u t E r r o r ( " password " , f a l s e , "" ) ;
}
}}
/>
</ Grid>
{ s i g n u p D e t a i l s . type === " a p p l i c a n t " ? (
<>
<M u l t i f i e l d I n p u t
e d u c a t i o n={e d u c a t i o n }
s e t E d u c a t i o n={s e t E d u c a t i o n }
/>
<Grid item>
<ChipInput
className={ c l a s s e s . inputBox }
l a b e l=" S k i l l s "
v a r i a n t=" o u t l i n e d "
h e l p e r T e x t=" P r e s s ␣ e n t e r ␣ t o ␣add␣ s k i l l s "
onChange={( c h i p s ) =>
s e t S i g n u p D e t a i l s ({ . . . signupDetails , s k i l l s : chips })
}
/>

25
</ Grid>
<Grid item>
<F i l e U p l o a d I n p u t
className={ c l a s s e s . inputBox }
l a b e l="Resume␣ ( . pdf ) "
i c o n={<D e s c r i p t i o n I c o n />}
// v a l u e={ f i l e s . resume }
// onChange={( e v e n t ) =>
// s e t F i l e s ({
// .. . files ,
// resume : e v e n t . t a r g e t . f i l e s [ 0 ] ,
// })
// }
uploadTo={ a p i L i s t . uploadResume }
h a n d l e I n p u t={h a n d l e I n p u t }
i d e n t i f i e r ={" resume "}
/>
</ Grid>
<Grid item>
<F i l e U p l o a d I n p u t
className={ c l a s s e s . inputBox }
l a b e l=" P r o f i l e ␣ Photo ␣ ( . j p g / . png ) "
i c o n={<FaceIcon />}
// v a l u e={ f i l e s . p r o f i l e I m a g e }
// onChange={( e v e n t ) =>
// s e t F i l e s ({
// .. . files ,
// p r o f i l e I m a g e : event . t a r g e t . f i l e s [ 0 ] ,
// })
// }
uploadTo={ a p i L i s t . u p l o a d P r o f i l e I m a g e }
h a n d l e I n p u t={h a n d l e I n p u t }
i d e n t i f i e r ={" p r o f i l e "}
/>
</ Grid>
</>
) : (
<>
<Grid item s t y l e ={{ width : "100%" }}>
<T e x t F i e l d
l a b e l=" Bio ␣ ( upto ␣ 250 ␣ words ) "
multiline
rows={8}
s t y l e ={{ width : "100%" }}

26
v a r i a n t=" o u t l i n e d "
value={ s i g n u p D e t a i l s . b i o }
onChange={(event ) => {
if (
e v e n t . t a r g e t . v a l u e . s p l i t ( "␣" ) . f i l t e r ( f u n c t i o n ( n ) {
r e t u r n n != "" ;
} ) . l e n g t h <= 250
) {
h a n d l e I n p u t ( " b i o " , event . t a r g e t . value ) ;
}
}}
/>
</ Grid>
<Grid item>
<PhoneInput
c o u n t r y={" i n "}
value={phone }
onChange={(phone ) => setPhone ( phone ) }
/>
</ Grid>
</>
)}

<Grid item>
<Button
v a r i a n t=" c o n t a i n e d "
color=" primary "
onClick ={() => {
s i g n u p D e t a i l s . type === " a p p l i c a n t "
? handleLogin ( )
: handleLoginRecruiter ( ) ;
}}
className={ c l a s s e s . submitButton }
>
Signup
</Button>
</ Grid>
</ Grid>
</ Paper>
);
};

e x p o r t d e f a u l t Login ;

27
5.3 Homepage
This is the home page of the portal which displays data based on the access and
the user’s personal choices. For applicant this shows the jobs that are available in
the job market whereas when it comes to recruiters, it displays the jobs that they
have pushed live and enables them to modify details based on certain criteria. React
Home Module code is shown in the Listing 3.
Listing 3: React Home Module code
import { u s e S t a t e , u s e E f f e c t , useContext } from " r e a c t " ;
import {
Button ,
Chip ,
Grid ,
IconButton ,
InputAdornment ,
makeStyles ,
Paper ,
TextField ,
Typography ,
Modal ,
Slider ,
FormControlLabel ,
FormGroup ,
MenuItem ,
Checkbox ,
} from " @material−u i / c o r e " ;
import Rating from " @material−u i / l a b / Rating " ;
import P a g i n a t i o n from " @material−u i / l a b / P a g i n a t i o n " ;
import a x i o s from " a x i o s " ;
import S e a r c h I c o n from " @material−u i / i c o n s / Search " ;
import F i l t e r L i s t I c o n from " @material−u i / i c o n s / F i l t e r L i s t " ;
import ArrowUpwardIcon from " @material−u i / i c o n s /ArrowUpward" ;
import ArrowDownwardIcon from " @material−u i / i c o n s /ArrowDownward" ;

import { SetPopupContext } from " . . / App" ;

import a p i L i s t from " . . / l i b / a p i L i s t " ;

import { userType } from " . . / l i b / isAuth " ;

c o n s t u s e S t y l e s = makeStyles ( ( theme ) => ( {

body : {
height : " i n h e r i t " ,
},
button : {

28
width : "100%" ,
h e i g h t : "100%" ,
},
jobTileOuter : {
padding : " 30 px" ,
margin : " 20 px␣0" ,
b o x S i z i n g : " border −box " ,
width : "100%" ,
},
popupDialog : {
h e i g h t : "100%" ,
display : " flex " ,
alignItems : " center " ,
justifyContent : " center " ,
},
}));

const J o b T i l e = ( props ) => {

const classes = useStyles ( ) ;
const { j o b } = props ;
const setPopup = useContext ( SetPopupContext ) ;

c o n s t [ open , setOpen ] = u s e S t a t e ( f a l s e ) ;
c o n s t [ sop , s e t S o p ] = u s e S t a t e ( "" ) ;

c o n s t h a n d l e C l o s e = ( ) => {
setOpen ( f a l s e ) ;
s e t S o p ( "" ) ;
};

c o n s t handleApply = ( ) => {
c o n s o l e . l o g ( j o b . _id ) ;
c o n s o l e . l o g ( sop ) ;
axios
. post (
‘ ${ a p i L i s t . j o b s }/ ${ j o b . _id }/ a p p l i c a t i o n s ‘ ,
{
sop : sop ,
},
{
headers : {
A u t h o r i z a t i o n : ‘ B e a r e r ${ l o c a l S t o r a g e . g e t I t e m ( " token " ) } ‘ ,
},
}

29
)
. then ( ( r e s p o n s e ) => {
setPopup ( {
open : t r u e ,
severity : " success " ,
message : r e s p o n s e . data . message ,
});
handleClose ( ) ;
})
. c a t c h ( ( e r r ) => {
console . log ( err . response ) ;
setPopup ( {
open : t r u e ,
severity : " error " ,
message : e r r . r e s p o n s e . data . message ,
});
handleClose ( ) ;
});
};

c o n s t d e a d l i n e = new Date ( j o b . d e a d l i n e ) . t o L o c a l e D a t e S t r i n g ( ) ;

return (
<Paper className={ c l a s s e s . j o b T i l e O u t e r } e l e v a t i o n ={3}>
<Grid c o n t a i n e r>
<Grid c o n t a i n e r item xs ={9} s p a c i n g ={1} d i r e c t i o n=" column ">
<Grid item>
<Typography v a r i a n t="h5">{ j o b . t i t l e }</ Typography>
</ Grid>
<Grid item>
<Rating value={j o b . r a t i n g !== −1 ? j o b . r a t i n g : n u l l } readOnly />
</ Grid>
<Grid item>Role : { j o b . jobType }</ Grid>
<Grid item>S a l a r y :&#x24 ; { j o b . s a l a r y } p er month</ Grid>
<Grid item>
Duration : { "␣"}
{ j o b . d u r a t i o n !== 0 ? ‘ ${ j o b . d u r a t i o n } month ‘ : ‘ F l e x i b l e ‘ }
</ Grid>
<Grid item>Posted By : { j o b . r e c r u i t e r . name}</ Grid>
<Grid item>A p p l i c a t i o n D e a d l i n e : { d e a d l i n e }</ Grid>

<Grid item>
{ j o b . s k i l l s e t s . map ( ( s k i l l ) => (
<Chip l a b e l={ s k i l l } s t y l e ={{ marginRight : "2px" }} />

30
))}
</ Grid>
</ Grid>
<Grid item xs ={3}>
<Button
v a r i a n t=" c o n t a i n e d "
color=" primary "
className={ c l a s s e s . button}
onClick ={() => {
setOpen ( t r u e ) ;
}}
d i s a b l e d ={userType ( ) === " r e c r u i t e r "}
>
Apply
</Button>
</ Grid>
</ Grid>
<Modal open={open } onClose={h a n d l e C l o s e } className={ c l a s s e s . popupDialog }>
<Paper
s t y l e ={{
padding : " 20 px" ,
o u t l i n e : " none " ,
display : " flex " ,
f l e x D i r e c t i o n : " column " ,
justifyContent : " center " ,
minWidth : "50%" ,
alignItems : " center " ,
}}
>
<T e x t F i e l d
l a b e l=" Write ␣SOP␣ ( upto ␣ 250 ␣ words ) "
multiline
rows={8}
s t y l e ={{ width : "100%" , marginBottom : " 30 px" }}
v a r i a n t=" o u t l i n e d "
value={sop }
onChange={(event ) => {
if (
e v e n t . t a r g e t . v a l u e . s p l i t ( "␣" ) . f i l t e r ( f u n c t i o n ( n ) {
r e t u r n n != "" ;
} ) . l e n g t h <= 250
) {
s e t S o p ( event . t a r g e t . value ) ;
}

31
}}
/>
<Button
v a r i a n t=" c o n t a i n e d "
color=" primary "
s t y l e ={{ padding : " 10 px␣ 50 px" }}
onClick ={() => handleApply ( ) }
>
Submit
</Button>
</ Paper>
</Modal>
</ Paper>
);
};

c o n s t F i l t e r P o p u p = ( props ) => {
const c l a s s e s = useStyles ( ) ;
c o n s t { open , h a n d l e C l o s e , s e a r c h O p t i o n s ,
s e t S e a r c h O p t i o n s , getData } = props ;
return (
<Modal open={open } onClose={h a n d l e C l o s e }
className={ c l a s s e s . popupDialog }>
<Paper
s t y l e ={{
padding : " 50 px" ,
o u t l i n e : " none " ,
minWidth : "50%" ,
}}
>
<Grid c o n t a i n e r d i r e c t i o n=" column " a l i g n I t e m s=" c e n t e r " s p a c i n g ={3}>
<Grid c o n t a i n e r item a l i g n I t e m s=" c e n t e r ">
<Grid item xs ={3}>
Job Type
</ Grid>
<Grid
container
item
xs ={9}
j u s t i f y=" space−around "
// a l i g n I t e m s=" c e n t e r "
>
<Grid item>
<FormControlLabel

32
c o n t r o l ={
<Checkbox
name=" f u l l T i m e "
checked={s e a r c h O p t i o n s . jobType . f u l l T i m e }
onChange={(event ) => {
setSearchOptions ({
. . . searchOptions ,
jobType : {
. . . s e a r c h O p t i o n s . jobType ,
[ e v e n t . t a r g e t . name ] : e v e n t . t a r g e t . checked ,
},
});
}}
/>
}
l a b e l=" F u l l ␣Time"
/>
</ Grid>
<Grid item>
<FormControlLabel
c o n t r o l ={
<Checkbox
name=" partTime "
checked={s e a r c h O p t i o n s . jobType . partTime }
onChange={(event ) => {
setSearchOptions ({
. . . searchOptions ,
jobType : {
. . . s e a r c h O p t i o n s . jobType ,
[ e v e n t . t a r g e t . name ] : e v e n t . t a r g e t . checked ,
},
});
}}
/>
}
l a b e l=" Part ␣Time"
/>
</ Grid>
<Grid item>
<FormControlLabel
c o n t r o l ={
<Checkbox
name=" wfh "
checked={s e a r c h O p t i o n s . jobType . wfh }

33
onChange={(event ) => {
setSearchOptions ({
. . . searchOptions ,
jobType : {
. . . s e a r c h O p t i o n s . jobType ,
[ e v e n t . t a r g e t . name ] : e v e n t . t a r g e t . checked ,
},
});
}}
/>
}
l a b e l="Work␣From␣Home"
/>
</ Grid>
</ Grid>
</ Grid>
<Grid c o n t a i n e r item a l i g n I t e m s=" c e n t e r ">
<Grid item xs ={3}>
Salary
</ Grid>
<Grid item xs ={9}>
<S l i d e r
v a l u e L a b e l D i s p l a y=" auto "
valueLabelFormat ={(value ) => {
r e t u r n v a l u e ∗ (100000 / 1 0 0 ) ;
}}
marks ={[
{ v a l u e : 0 , l a b e l : "0" } ,
{ v a l u e : 1 0 0 , l a b e l : " 100000 " } ,
]}
v a l u e={s e a r c h O p t i o n s . s a l a r y }
onChange={( event , v a l u e ) =>
setSearchOptions ({
. . . searchOptions ,
s a l a r y : value ,
})
}
/>
</ Grid>
</ Grid>
<Grid c o n t a i n e r item a l i g n I t e m s=" c e n t e r ">
<Grid item xs ={3}>
Duration
</ Grid>

34
<Grid item xs ={9}>
<T e x t F i e l d
select
l a b e l=" Duration "
v a r i a n t=" o u t l i n e d "
fullWidth
value={s e a r c h O p t i o n s . d u r a t i o n }
onChange={(event ) =>
setSearchOptions ({
. . . searchOptions ,
d u r a t i o n : e v e n t . t a r g e t . value ,
})
}
>
<MenuItem value="0">A l l</MenuItem>
<MenuItem value="1">1</MenuItem>
<MenuItem value="2">2</MenuItem>
<MenuItem value="3">3</MenuItem>
<MenuItem value="4">4</MenuItem>
<MenuItem value="5">5</MenuItem>
<MenuItem value="6">6</MenuItem>
<MenuItem value="7">7</MenuItem>
</ T e x t F i e l d>
</ Grid>
</ Grid>
<Grid c o n t a i n e r item a l i g n I t e m s=" c e n t e r ">
<Grid item xs ={3}>
Sort
</ Grid>
<Grid item c o n t a i n e r d i r e c t i o n="row" xs ={9}>
<Grid
item
container
xs ={4}
j u s t i f y=" space−around "
a l i g n I t e m s=" c e n t e r "
s t y l e ={{ border : "1px␣ s o l i d ␣#D1D1D1" , b o r d e r R a d i u s : "5px" }}
>
<Grid item>
<Checkbox
name=" s a l a r y "
checked={s e a r c h O p t i o n s . s o r t . s a l a r y . s t a t u s }
onChange={(event ) =>
setSearchOptions ({

35
 . . . searchOptions ,
sort : {
. . . searchOptions . sort ,
salary : {
. . . searchOptions . sort . salary ,
s t a t u s : e v e n t . t a r g e t . checked ,
},
},
})
}
i d=" s a l a r y "
/>
</ Grid>
<Grid item>
<l a b e l for=" s a l a r y ">
<Typography>S a l a r y</ Typography>
</ l a b e l>
</ Grid>
<Grid item>
<IconButton
disabled ={! s e a r c h O p t i o n s . s o r t . s a l a r y . s t a t u s }
onClick ={() => {
setSearchOptions ({
. . . searchOptions ,
sort : {
. . . searchOptions . sort ,
salary : {
. . . searchOptions . sort . salary ,
d e s c : ! s e a r c h O p t i o n s . s o r t . s a l a r y . desc ,
},
},
});
}}
>
{ searchOptions . s o r t . sa lar y . desc ? (
<ArrowDownwardIcon />
) : (
<ArrowUpwardIcon />
)}
</ IconButton>
</ Grid>
</ Grid>
<Grid
item

36
container
xs ={4}
j u s t i f y=" space−around "
a l i g n I t e m s=" c e n t e r "
s t y l e ={{ border : "1px␣ s o l i d ␣#D1D1D1" , b o r d e r R a d i u s : "5px" }}
>
<Grid item>
<Checkbox
name=" d u r a t i o n "
checked={s e a r c h O p t i o n s . s o r t . d u r a t i o n . s t a t u s }
onChange={(event ) =>
setSearchOptions ({
. . . searchOptions ,
sort : {
. . . searchOptions . sort ,
duration : {
. . . searchOptions . s o r t . duration ,
s t a t u s : e v e n t . t a r g e t . checked ,
},
},
})
}
i d=" d u r a t i o n "
/>
</ Grid>
<Grid item>
<l a b e l for=" d u r a t i o n ">
<Typography>Duration</ Typography>
</ l a b e l>
</ Grid>
<Grid item>
<IconButton
disabled ={! s e a r c h O p t i o n s . s o r t . d u r a t i o n . s t a t u s }
onClick ={() => {
setSearchOptions ({
. . . searchOptions ,
sort : {
. . . searchOptions . sort ,
duration : {
. . . searchOptions . s o r t . duration ,
d e s c : ! s e a r c h O p t i o n s . s o r t . d u r a t i o n . desc ,
},
},
});

37
}}
>
{ searchOptions . s or t . duration . desc ? (
<ArrowDownwardIcon />
) : (
<ArrowUpwardIcon />
)}
</ IconButton>
</ Grid>
</ Grid>
<Grid
item
container
xs ={4}
j u s t i f y=" space−around "
a l i g n I t e m s=" c e n t e r "
s t y l e ={{ border : "1px␣ s o l i d ␣#D1D1D1" , b o r d e r R a d i u s : "5px" }}
>
<Grid item>
<Checkbox
name=" r a t i n g "
checked={s e a r c h O p t i o n s . s o r t . r a t i n g . s t a t u s }
onChange={(event ) =>
setSearchOptions ({
. . . searchOptions ,
sort : {
. . . searchOptions . sort ,
rating : {
. . . searchOptions . sort . rating ,
s t a t u s : e v e n t . t a r g e t . checked ,
},
},
})
}
i d=" r a t i n g "
/>
</ Grid>
<Grid item>
<l a b e l for=" r a t i n g ">
<Typography>Rating</ Typography>
</ l a b e l>
</ Grid>
<Grid item>
<IconButton

38
disabled ={! s e a r c h O p t i o n s . s o r t . r a t i n g . s t a t u s }
onClick ={() => {
setSearchOptions ({
. . . searchOptions ,
sort : {
. . . searchOptions . sort ,
rating : {
. . . searchOptions . sort . rating ,
d e s c : ! s e a r c h O p t i o n s . s o r t . r a t i n g . desc ,
},
},
});
}}
>
{ searchOptions . s o r t . rating . desc ? (
<ArrowDownwardIcon />
) : (
<ArrowUpwardIcon />
)}
</ IconButton>
</ Grid>
</ Grid>
</ Grid>
</ Grid>

<Grid item>
<Button
v a r i a n t=" c o n t a i n e d "
color=" primary "
s t y l e ={{ padding : " 10 px␣ 50 px" }}
onClick ={() => getData ( ) }
>
Apply
</Button>
</ Grid>
</ Grid>
</ Paper>
</Modal>
);
};

c o n s t Home = ( props ) => {

const [ jobs , setJobs ] = useState ( [ ] ) ;
const [ filterOpen , setFilterOpen ] = useState ( f a l s e ) ;

39
const [ searchOptions , setSearchOptions ] = useState ({
query : "" ,
jobType : {
fullTime : false ,
partTime : f a l s e ,
wfh : f a l s e ,
},
salary : [0 , 100] ,
d u r a t i o n : "0" ,
sort : {
salary : {
status : false ,
desc : f a l s e ,
},
duration : {
status : false ,
desc : f a l s e ,
},
rating : {
status : false ,
desc : f a l s e ,
},
},
});

c o n s t setPopup = useContext ( SetPopupContext ) ;

u s e E f f e c t ( ( ) => {
getData ( ) ;
}, []);

c o n s t getData = ( ) => {
l e t searchParams = [ ] ;
i f ( s e a r c h O p t i o n s . query !== "" ) {
searchParams = [ . . . searchParams , ‘ q=${ s e a r c h O p t i o n s . query } ‘ ] ;
}
i f ( s e a r c h O p t i o n s . jobType . f u l l T i m e ) {
searchParams = [ . . . searchParams , ‘ jobType=F u l l %20Time ‘ ] ;
}
i f ( s e a r c h O p t i o n s . jobType . partTime ) {
searchParams = [ . . . searchParams , ‘ jobType=Part%20Time ‘ ] ;
}
i f ( s e a r c h O p t i o n s . jobType . wfh ) {
searchParams = [ . . . searchParams , ‘ jobType=Work%20From%20Home ‘ ] ;
}

40
i f ( s e a r c h O p t i o n s . s a l a r y [ 0 ] != 0 ) {
searchParams = [
. . . searchParams ,
‘ s a l a r y M i n=${ s e a r c h O p t i o n s . s a l a r y [ 0 ] ∗ 1 0 0 0 } ‘ ,
];
}
i f ( s e a r c h O p t i o n s . s a l a r y [ 1 ] != 100) {
searchParams = [
. . . searchParams ,
‘ salaryMax=${ s e a r c h O p t i o n s . s a l a r y [ 1 ] ∗ 1 0 0 0 } ‘ ,
];
}
i f ( s e a r c h O p t i o n s . d u r a t i o n != "0" ) {
searchParams = [ . . . searchParams , ‘ d u r a t i o n=${ s e a r c h O p t i o n s . d u r a t i o n } ‘ ] ;
}

l e t asc = [ ] ,
desc = [ ] ;

Object . keys ( s e a r c h O p t i o n s . s o r t ) . f o rE ac h ( ( o b j ) => {

c o n s t item = s e a r c h O p t i o n s . s o r t [ o b j ] ;
i f ( item . s t a t u s ) {
i f ( item . d e s c ) {
d e s c = [ . . . desc , ‘ d e s c=${ o b j } ‘ ] ;
} else {
a s c = [ . . . asc , ‘ a s c=${ o b j } ‘ ] ;
}
}
});
searchParams = [ . . . searchParams , . . . asc , . . . d e s c ] ;
c o n s t q u e r y S t r i n g = searchParams . j o i n ( "&" ) ;
console . log ( queryString ) ;
l e t address = apiList . jobs ;
i f ( q u e r y S t r i n g !== "" ) {
a d d r e s s = ‘ ${ a d d r e s s }? ${ q u e r y S t r i n g } ‘ ;
}

axios
. get ( address , {
headers : {
A u t h o r i z a t i o n : ‘ B e a r e r ${ l o c a l S t o r a g e . g e t I t e m ( " token " ) } ‘ ,
},
})
. then ( ( r e s p o n s e ) => {

41
c o n s o l e . l o g ( r e s p o n s e . data ) ;
setJobs (
r e s p o n s e . data . f i l t e r ( ( o b j ) => {
c o n s t today = new Date ( ) ;
c o n s t d e a d l i n e = new Date ( o b j . d e a d l i n e ) ;
r e t u r n d e a d l i n e > today ;
})
);
})
. c a t c h ( ( e r r ) => {
c o n s o l e . l o g ( e r r . r e s p o n s e . data ) ;
setPopup ( {
open : t r u e ,
severity : " error " ,
message : " E r r o r " ,
});
});
};

return (
<>
<Grid
container
item
d i r e c t i o n=" column "
a l i g n I t e m s=" c e n t e r "
s t y l e ={{ padding : " 30 px" , minHeight : " 93 vh" }}
>
<Grid
item
container
d i r e c t i o n=" column "
j u s t i f y=" c e n t e r "
a l i g n I t e m s=" c e n t e r "
>
<Grid item xs>
<Typography v a r i a n t="h2">Jobs</ Typography>
</ Grid>
<Grid item xs>
<T e x t F i e l d
l a b e l=" Search ␣ Jobs "
value={s e a r c h O p t i o n s . query }
onChange={(event ) =>
setSearchOptions ({

42
 . . . searchOptions ,
query : e v e n t . t a r g e t . value ,
})
}
onKeyPress ={( ev ) => {
i f ( ev . key === " Enter " ) {
getData ( ) ;
}
}}
InputProps={{
endAdornment : (
<InputAdornment>
<IconButton onClick ={() => getData ()} >
<S e a r c h I c o n />
</ IconButton>
</ InputAdornment>
),
}}
s t y l e ={{ width : " 500 px" }}
v a r i a n t=" o u t l i n e d "
/>
</ Grid>
<Grid item>
<IconButton onClick ={() => s e t F i l t e r O p e n ( t r u e )}>
< F i l t e r L i s t I c o n />
</ IconButton>
</ Grid>
</ Grid>

<Grid
container
item
xs
d i r e c t i o n=" column "
a l i g n I t e m s=" s t r e t c h "
j u s t i f y=" c e n t e r "
>
{ jobs . length > 0 ? (
j o b s . map ( ( j o b ) => {
r e t u r n <J o b T i l e j o b={j o b } />;
})
)
:
(

43
<Typography v a r i a n t="h5" s t y l e ={{ t e x t A l i g n : " c e n t e r " }}>
No j o b s found
</ Typography>
)}
</ Grid>
{/∗ <Grid item>
<P a g i n a t i o n count ={10} color=" primary " />
</ Grid> ∗/}
</ Grid>

<F i l t e r P o p u p
open={ f i l t e r O p e n }
s e a r c h O p t i o n s={s e a r c h O p t i o n s }
s e t S e a r c h O p t i o n s={s e t S e a r c h O p t i o n s }
h a n d l e C l o s e ={() => s e t F i l t e r O p e n ( f a l s e ) }
getData ={() => {
getData ( ) ;
setFilterOpen ( f a l s e ) ;
}}
/>
</>
);
};
e x p o r t d e f a u l t Home ;

6 Conclusions
This research has focused on improving the education environment by developing a
knowledge sharing system that acts as a job portal. A job web portal provides an
efficient search for online information on job vacancies for jobseekers. The main goal
of this portal is to attempt to produce the right graduates based on the industry
needs. However, it is important to be aware the job web portals can never fulfill all
the problems of jobless graduates.
It can be concluded that this project of Online Job Portal was a real learning expe-
rience. The principles of software production were well implemented throughout the
system. The project has been made as per as the given specifications. The Online
Job Portal developed by us is purely based on MERN Stack platform.

44
7 Acknowledgments
I would like to extend my gratitude to my supervisor, Dr. Rossitza Marinova, whose
guidance and support made this research possible. I am also very grateful to all my
professors who helped and taught me during my graduate program. A good support
system is important to surviving and staying sane in graduate school. Thanks to my
family, friends, and classmates for sticking with me through this graduate program
and throughout my endeavors.
This work is a part of the Final Year Project of Concordia University of Edmonton,
Alberta, Department of Mathematical and Physical Sciences Faculty of Graduate
Studies.

8 Privacy Policy
We are committed to maintaining the accuracy, confidentiality, and security of your
personally identifiable information ("Personal Information"). As part of this com-
mitment, our privacy policy governs our actions as they relate to the collection, use
and disclosure of Personal Information.
1. Identifying Purposes
We collect, use and disclose Personal Information to provide you with the product
or service you have requested and to offer you additional products and services we
believe you might be interested in. The purposes for which we collect Personal Infor-
mation will be identified before or at the time we collect the information. In certain
circumstances, the purposes for which information is collected may be clear, and
consent may be implied, such as where your name, address and payment information
is provided as part of the order process.
2. Consent
Knowledge and consent are required for the collection, use or disclosure of Personal
Information except where required or permitted by law. Providing us with your
Personal Information is always your choice. However, your decision not to provide
certain information may limit our ability to provide you with our products or services.
We will not require you to consent to the collection, use, or disclosure of information
as a condition to the supply of a product or service, except as required to be able to
supply the product or service.
3. Limiting Collection
The Personal Information collected will be limited to those details necessary for the
purposes identified by us. With your consent, we may collect Personal Informa-
tion from you in person, over the telephone or by corresponding with you via mail,
facsimile, or the Internet.

45
4. Limiting Use, Disclosure and Retention
Personal Information may only be used or disclosed for the purpose for which it was
collected unless you have otherwise consented, or when it is required or permitted
by law. Personal Information will only be retained for the period of time required
to fulfill the purpose for which we collected it or as may be required by law. [If
applicable, include a description of any parties with whom you may share Personal
Information.]
5. Safeguarding Customer Information
Personal Information will be protected by security safeguards that are appropriate to
the sensitivity level of the information. We take all reasonable precautions to protect
your Personal Information from any loss or unauthorized use, access or disclosure.

9 Terms and Conditions

Please read these terms and conditions ("terms and conditions", "terms") carefully
before using In-House Job Portal website.

Conditions of use
By using this website, you certify that you have read and reviewed this Agreement
and that you agree to comply with its terms. If you do not want to be bound by the
terms of this Agreement, you are advised to leave the website accordingly. We only
grants use and access of this website, its products, and its services to those who have
accepted its terms.
1. Privacy policy
Before you continue using our website, we advise you to read our privacy policy
regarding our user data collection. It will help you better understand our
practices.
2. User accounts
As a user of this website, you may be asked to register with us and provide
private information. You are responsible for ensuring the accuracy of this
information, and you are responsible for maintaining the safety and security
of your identifying information. You are also responsible for all activities that
occur under your account or password. If you think there are any possible issues
regarding the security of your account on the website, inform us immediately
so we may address them accordingly.
We reserve all rights to terminate accounts, edit or remove content and cancel
orders at our sole discretion.

46
References
[1] Dorn, Jrgen and Naz, Tabbasum and Pichlmair (2007) Ontology development for
job portal resource management, Markus, Knowledge Management: Innovation,
Technology and Cultures , 109–120.
[2] Mansourvar, M., Yasin, N. B. M. (2014). Development of a job web portal to
improve education quality. International Journal of Computer Theory and Engi-
neering, 6(1), 43.
[3] Pinjari, M., De, N., Kokne, R., Siddiqui, A., Chitre, D. (2019). Online Job Portal.
International Research Journal of Engineering and Technology.
[4] Pardamean, Bens. "Users’ interest assessment on job portal." International Jour-
nal of Web Portals (IJWP) 6, no. 1 (2014): 64-75.
[5] Khan, Muhammad Sabeeh, and Khan, Muhammad Shaff. Online job portal. Diss.
University of Management and Technology Lahore, 2015.
[6] ICAT Job Portal: a generic job submission system built on a scientific data
catalog. Fisher, Stephen M and Phipps, Kevin and Rolfe, Daniel, 2013.
[7] Mehra, M., Kumar, M., Maurya, A., Sharma, C. (2021). MERN stack Web De-
velopment. Annals of the Romanian Society for Cell Biology, 25(6), 11756-11761.
[8] Abubucker Samsudeen Shaffi and Mohaned Al-Obaidy, “Analysis and compar-
ative study of traditional and web information systems development methodol-
ogy (WISDM) towards web development applications,” International Journal of
Emerging Technology and Advanced Engineering, Volume 3, Issue 11, November
2013.
[9] Pooja T. Killewale and Prof. A.R. Mune, “Job Portal – A web application for
distributed clients,” International Journal of Advanced Research in Computer and
Communication Engineering, Vol. 6, Issue 5, May 2017.
[10] Beblavý, M., Kureková, L. M., Haita, C. (2016). The surprisingly exclusive na-
ture of medium-and low-skilled jobs: Evidence from a Slovak job portal. Personnel
Review.
[11] Jason Crawford.
https://www.websitepolicies.com/blog/sample-terms-conditions-template

47