International Journal of Scientific Research in Computer Science, Engineering and Information Technology

ISSN : 2456-3307 (www.ijsrcseit.com)

doi : https://doi.org/10.32628/CSEIT23902104

Implementation of MERN : A Stack of Technologies to Design

Effective Web Based Freelancing Applications
Karishma Arora, Vaishnavi, Jai Nagpal
Department of Computer Science and Engineering, Delhi Technical Campus, GGSIPU, India

ARTICLEINFO ABSTRACT

In today’s world with the growth of internet, there is a hike in demand for
Article History:
electronically deliverable services. These services can be provided by
Accepted: 15 April 2023 freelancers. Freelancers are the personals who work individually and
Published: 06 May 2023 provide services as per the need of client according to their contract for a
particular job. Every now and then freelancers need a platform where
different businesses can be found and contacted. The idea is to have a
Publication Issue software that provides the functionality of a hub where both freelancers
Volume 9, Issue 3 and business providers can interact with each other. Our work is known
May-June-2023 as ‘Developer’s Hub’, which encapsulates the idea of freelancing with
MERN stack in an optimized way over the web. MERN stack, as the name
Page Number suggests is stack of four different technologies which are MongoDB,
23-32 Express.js, React.js, Node.js. This paper reflects significance of freelancing
and the technologies concerned in MERN stack. It includes the
implementation of MERN for optimizing freelancing over web. The paper
also includes challenges faced by freshers or experienced people in
freelancing market with the growth in demand of freelancing world.
Keywords : MongoDB, Express.js, React.js, Node.js

I. INTRODUCTION of projects out of thousands available on different

freelancing websites. It allows a vast opportunity of
As always, every business tries to decrease their growth and development with strong earning potential
overhead and supplement their existing workforce, for every project chosen. But freelancers face some
here is where electronically deliverable services comes challenges like they need to find new projects to work
into play. Freelancing involves an individual who on, on frequent intervals. To overcome this, there are
works with commitment only to particular project and multiple websites like Upwork, truelancer.com, guru,
no further involvements. The new generation is more freelancing.com which provides both businesses and
involved into the freelancing as it offers work to freelancers multiple options where they can fulfil their
freelancers with their own conditions and flexibility of requirements. One such website is Developer's Hub,
choosing people to work with and along with a choice where both freelancers and business can find

Copyright: © the author(s), publisher and licensee Technoscience Academy. This is an open-access article distributed under 23
the terms of the Creative Commons Attribution Non-Commercial License, which permits unrestricted non-commercial use,
distribution, and reproduction in any medium, provided the original work is properly cited
 Karishma Arora et al Int. J. Sci. Res. Comput. Sci. Eng. Inf. Technol., May-June-2023, 9 (3) : 23-32

freelancers and project opportunities respectively. A MongoDB is referred to as a document database where
well established and optimized recommendation data is stored in groups of documents known as
system is embedded in the project for business category collection. Express.js is solely used to create a web
of users by which they get recommendations of server and it is inherited from Node itself therefore it
freelancers as per their needs on basis of skills. The contains all the features of the node with some
main purpose of developer’s hub is to help students as advancement which makes it more flexible and
current issues faced by students includes difficult to scalable. React is used to create a modern client-side
find projects and grow their network. Developer’s hub application. Each technology has become the core of
provides them all these opportunities on a single web applications in this modern era.
platform, which is free of cost. It permits them to A. MongoDB
practice from scratch to expertise level. MERN stack is MongoDB is the most prominent NoSQL database
a promising platform that works on back-end as well as which provides an alternative to a relational database
front-end. This stack is composed of four marvelous system where all the data is stored in tables in form of
technologies like MongoDB, React.js, Express.js, rows and columns. In this data is stored in documents
Node.js. This is proved to be the best suite to the system and a group of documents is known as collections. In
as MERN is an open-source JavaScript code which can MongoDB, data is stored in form of BSON format
be used to implement complex system in simplest way which is the extension of JSON format due to this
and gets improvised with time. Front end part of the feature its performance level increases making it more
system is developed using React.js, which is open- scalable and reliable. It is more widely used than SQL
source front-end JavaScript framework used to create databases because of its strong query processes, easy
UI because of it “less code more function” abilities. accessibility, customizable schema, and security.
MongoDB is handling the database of the system as
B. Express
MongoDB is NoSQL database program which are quite
Express.js is one of the most valuable NodeJS packages
useful for working with large sets of distributed data.
that can help us in creating server-side web
While Express.js and Node.js is handling the back-end
applications. It helps developers to write lesser lines of
of the website as helps to manage servers and routes.
code thus saving time and reducing the complexity of
code. It allows developers to execute customized,
II. THE ARCHITECTURE of MERN STACK
reliable, and more scalable servers to connect with the
front end. It also helps to set up middleware and
In MERN Stack the four famous technologies
develop API routes for the transmission of data from
MongoDB, Expess.js, Node.js, and React.js merged are
the front end to the back end.
designed to build a robust framework for helping
developers to practice with JavaScript components for
C. React
solving real-life problems and daily development needs.
React.js is a popular and openly available front-end
MERN stack is an abbreviation of four different
JavaScript library for creating Web applications. The
technologies used in the development of dynamic
fact that React is component-based is a major
mobile and web applications, where M is abbreviated
advantage. Since they are independent of each other,
for MongoDB, E is abbreviated for Express, R is
we can easily reuse them on different pages or projects.
abbreviated for React, and N is abbreviated for Node.
This saves us both time and money. It allows the
It’s one of the most popular tech stacks used by
creation of creative interfaces using its built-in
developers nowadays because it makes the
components. It uses JSX to create ad use components
development process easier quicker and smoother.

Volume 9, Issue 3, May-June-2023 | http://ijsrcseit.com 24

 Karishma Arora et al Int. J. Sci. Res. Comput. Sci. Eng. Inf. Technol., May-June-2023, 9 (3) : 23-32

with HTML and thus allows us to directly write HTML

react applications. With JSX we can write expressions
inside curly braces and use its synchronous behaviour
to call functions in a sequential pattern.

D. Node

Node.js is an openly available server environment

that can run on any platform such as Linux, Windows,
and Mac. It provides a run time environment to run
Figure 2. MVC Model
JavaScript outside the browser. It is used to create
MERN Stack breakdown of MVC pattern:
server-side applications because of its asynchronous
1) Model: Mongoose serves as a ‘Model’ of the MVC
nature and event-driven process. It also has its package
pattern at the server-side module. It handles all the
manager popularly known as npm. It can be installed
data-related logic that the user works with. Mongoose
by using the simple command “npm install”. It helps
stores all data components of the application that needs
users to directly add useful packages to their
to have a function.
applications by writing a single line of code. It is free
2) View: React serves as a ‘View’ of the MVC pattern
and mostly used by large organizations to run real-time
at the client-side module. The module will be written
server applications.
in JavaScript, HTML, and CSS, using ReactJS as the
framework. This works as an interface between the
user and the features of the application.
3) Controller: Express and Node serves as the
‘Controller’ of the MVC pattern. Express and node
handle all the functional programming aspects and acts
as an interface between Models and Views. It sends the
React module to the client’s device and receives HTTP
requests from the client and responds according to
them.

Figure 1. Architecture III. CHALLENGES for MERN STACK

The Model-View-Controller (MVC) is coming into

Web development technologies go through exemplary
existence in 1979 by computer scientist Trygve Mikkjel
changes with time. HTML, CSS, and JavaScript have
Heyerdahl Reenskaug. He defined an architectural
become the cornerstone of web development but no
pattern that divides the complexity of web applications
longer fulfil the demands of modern world websites
into three logical components: the model, the view,
like having better user experience, lesser loading time,
and the controller. Laravel, Ruby on Rails, and Angular
and responsiveness to different size devices. Even the
are one of the few popular web frameworks which
MERN stack with the above features is not enough to
follows MVC architectural pattern.
meet the inevitable expectations of users and
developers. Challenges faced by developers while using
MERN Stack are:

Volume 9, Issue 3, May-June-2023 | http://ijsrcseit.com 25

 Karishma Arora et al Int. J. Sci. Res. Comput. Sci. Eng. Inf. Technol., May-June-2023, 9 (3) : 23-32

A. MongoDB 2) Poor documentation: Documentation of any

1) Query: MongoDB is a non-relational database software are roots for a developer to learn a new skill.
system, it doesn’t support join functionality. Join Poor documentation leads to more development time
functionality is the ability to query between different and difficulty in relating the components of the
collections. MongoDB must do separate queries when software. Since the open-source community offers a
there are conditions that can be solved by multiple different method for common practices, it is difficult
collections. The developers are still working to develop for users to implement them as per their needs.
a function that allows them to do so. 3) Scalability: As Node.js uses a single-threaded
2) Mobile Problems: MongoDB doesn’t provide process, scaling is more complicated. Applications that
complete support when it comes to mobile. As a result, require more CPU consumption would require the
developers have to write code separately to code to be more modular.
synchronize data on mobile devices with data on
servers. This problem leads to the requirement of
IV.DEVELOPER’S HUB: A MERN STACK WEB
constant good connectivity in order to meet
APPLICATION
application needs.
3) Scalability: MongoDB limits the ability to use the
Developer’s Hub is a full-stack web application
application by many concurrent users on a single node.
developed using MongoDB, Express.js, React.js, and
Since in MongoDB data is stored at only in memory,
Node.js. The objective of the application is to develop
the loading time is more as compared to relational
an environment that can help freelancers whether he
databases.
or she is an experienced individuals or a student by
4) Locking Mechanism: The transaction that is being
providing them with hundreds of projects on a single
modified gets locked and other sessions which are
platform with just a few tap aways. The main aim of
modifying the transactions are aborted and they are
the project was to provide students an opportunity to
required to retry the transaction. This results in the
start their careers in the freelancing world without any
requests in non-deterministic orders.
mandatory need for a degree or any other certificates.
B. React By evaluating similar applications and articles it can be
⚫ React.js components are difficult to understand easily found that when a freelancer struggles to find a
and implement in complex web applications. job, they must conquer multiple turbulence to reach
⚫ React virtual DOM is not much precise. out to a single project owner. Such turbulence is
⚫ Complicated asynchronous programming is bidding processes, with irrelevant tests and costly
required to interact with the server. courses to be completed before entering some
⚫ HTML templates are neither complete nor communities. This application will showcase suitable
powerful. freelancers for every job posted based on the skill
⚫ Long list of react.js can lead to poor performance requirements of business owners. To develop this
on low-specs laptop and mobile devices. recommendation system, the application consists of a
content-based recommendation system that works on
C. Node
a real-time basis. The intended user of the applications
1) Rules: Node.js doesn’t provide any standard rules or
is freelancers, Businesses, or any recruiters and an
guidelines describing how the code should be written.
admin who can manage data at MongoDB databases.
That’s why beginners find it difficult to understand and
Following are the user stories explaining how the
learn since each application requires its own unique
application works for Freelancers and Businesses.
approach to writing the code.

Volume 9, Issue 3, May-June-2023 | http://ijsrcseit.com 26

 Karishma Arora et al Int. J. Sci. Res. Comput. Sci. Eng. Inf. Technol., May-June-2023, 9 (3) : 23-32

To have all the privileges of the application any implementation is further divided into sections which
freelancer who has skills can register themselves on the are database management, Routes, middleware,
web app and create their profile. The application Models, and server setup and configuration.
allows users to view or save necessary details like
contact numbers, email ids, social links, etc. It also
allows freelancers to mark their interests in any project
posted by businesses. Once a user creates their profile,
it can be seen in the freelancer’s list by other
freelancers and businesses. Businesses can also see the
freelancer’s profile when they mark interest in the jobs
posted by them. An updating feature is also
implemented in the app to add new experiences and
education details. To communicate with the job posters
their email has been provided on their profile.
Businesses can also register themselves and create their
profile. For businesses, the application allows entering
details like contact numbers, email ids, company links,
Figure 3. Package.json
etc. They also have access to create a job posting and
mention the required skills and salary range they
1) Database Management: MongoDB utilizes data by
wanted it to be. After creating these job posts they can
storing them in form of clusters. Clusters handle large
see a list of interested freelancers, recommended
volumes of data and the number of requests. It makes
freelancers, and a list of all freelancers at any time. If
monitoring and automation easy through data
required, they can contact to the freelancer with the
reduction and load balancing. To set up the cluster of
email id provided for them.
this project create a cluster by setting up the cloud
provider and region. MongoDB also provides backup
V. IMPLEMENTATION
and size options for data at very reasonable prices.
After creating the cluster, connect the database and
As with every other MERN Stack application
application by pasting a link into the config folder of
Developer’s hub is also divided into sections i.e., client-
the project. This connection allows live updates and
side and server-side.
modification of data done by the client directly to the
A. Server-side Implementation
database. Atlas admin can also monitor or set
The server side of the application is implemented by
conditions if required to the database. In this
using built-in modules or customized modules of
application, default conditions are perfectly fine with
Node.js.Node.js has more than one million packages to
the requirements.
install various frameworks or development tools used
to develop the project. To install npm packages,
execute “npm install” command in the command line
interface. Such dependencies installed on the
developer’s hub application are jsonwebtokens, react-
icons, mongoose etc. Another part of server-side
implementation is database management which is
executed with MongoDB. That’s why server-side

Volume 9, Issue 3, May-June-2023 | http://ijsrcseit.com 27

 Karishma Arora et al Int. J. Sci. Res. Comput. Sci. Eng. Inf. Technol., May-June-2023, 9 (3) : 23-32

3) Models: Once the database and server are set, to

define the structure of the application start creating
schemas. The mongoose models which define the
application’s instances, and their properties are
Business.js,BusinessProfile.js, FreelancerProfile.js,
Jobs.js, User.js. Every property which has the required
method as “true” is mandatory to carry out operations
while if it is “false” it is optional.

Business.js and user.js models are customized to

register in the application by businessman and
freelancer respectively while BusinessProfile.js and
FreelancerProfile.js is customized to create profiles. In
Figure 4. Connect cluster
job.js, “mongoose.Schema.Types.ObjectID” is
2) Server Setup: Start connecting the server with
implementing a very fine feature of the application. It
express.js, cors, multer, and body-parser with require()
is connecting the jobs with the interested freelancer
in the server.js file to include its external node modules.
defined under the user.js model.
To connect the server on visiting to a particular route
on any browser app.use() is implemented with two
parameters that will download the customized react
components on accessing them.

Figure 6. Business.js
The password property defined in these models is not
stored in form of plain text in the MongoDB database.
It is first hashed using bcrypt which is a very popular
npm module. gensalt() function in bcrypt is used to
implement the hashing of the password. This hashed
password is further encrypted by the hash() function
and send to the mongodb.
If the password is needed in any sign in or sign-up
Figure 5. Server.js activity of the application, an authentication process is
carried out in the web application. For security
purposes Json web token authentication is the standard

Volume 9, Issue 3, May-June-2023 | http://ijsrcseit.com 28

 Karishma Arora et al Int. J. Sci. Res. Comput. Sci. Eng. Inf. Technol., May-June-2023, 9 (3) : 23-32

security level of the application. Whenever a user Four different types of HTTP methods are used in the
register on the website a token is generated using routes are
jwt.sign() and verified each time anyone log in to the
post(): to send data to the server,
website using jwt.verify().
get(): to request data from various resources,
4) Middleware: Middleware in this application is the
delete(): to remove the data from the database,
authentication files that contain objects and functions
put(): to update the data.
which is executed during the request and response
The routes customized while implementing the
cycle of the application. Req is known as the request
applications are:
object, Res is known as the response object and next is
⚫ User.js: Implements post method while freelancers
used for the next middleware function. Middleware
register themselves on the application. In the
works with the JWT authentication system to secure
registration process, a web token is generated, and
the web application. JWT can be installed using the
the entered details are posted on the server.
command “npm install jsonwebtoken” on the
⚫ Business.js: Implements post method while
command line interface. Whenever a user enters login
businesses register themselves on the application.
details, this dependency creates a web token and
In the registration process, a web token is
returns it to the browser. ‘AuthenticationToken’ is
generated, and the entered details are posted on
created as middleware to verify the token. It is sent to
the server.
the authentication header and jet.verify() matches the
⚫ Auth.js: Implements post method when a user
data entered by user to verify and allow user to get
enters username and password for signing into the
the response.
server which then generates jwt token. It also
implements a get method that authenticates the
user by jwt token and sends the user details to the
client side.
⚫ FreelancerProfile.js: It is implemented to get or
delete the details of all freelancers or any specific
freelancer details by using their id from the server.
It is also used as a method of updating experience
and education details.
⚫ BusinessProfile.js: It is implemented to get the
details of all businesses or any specific business
details by using their id from the server. It also
implements a post method which is used to create
and update the profile details of a registered
business.
⚫ Job.js: It is implemented to post or delete jobs by
businesses and freelancers can get all of them or
Figure 7. Authentication.js by any specific id. Freelance can put or delete their
interests in various jobs.
5) Routes: The interface of the web application is ⚫ Recommendation.js: Implements get method by
defined using the routes. It connects the request made showing freelancers which could be suitable for
on the client side to the correct backend resources. jobs on basis of the skills a freelancer has.

Volume 9, Issue 3, May-June-2023 | http://ijsrcseit.com 29

 Karishma Arora et al Int. J. Sci. Res. Comput. Sci. Eng. Inf. Technol., May-June-2023, 9 (3) : 23-32

B. Client-side Implementation
The project's client side is implemented using only
React.js using third-party libraries from npm. React.js
optimized the output by allowing live editing in CSS
and JavaScript in the early phases of the project. The
“npx create-react-app app-name” command is used to
set up the development environment. Here, npx is a
react tool that is used to run packages. The packages
installed throughout the projects are “moment”, “React
redux “, and “React bootstrap”. The moment is used to
format the dates like when a freelancer applied for a
particular job.

1) React Components: React components are the

building blocks of this application. React has built-in
components of independent codes which could be
reused in order to make the whole code data reductant Figure 8. Routes
and easy to update whenever needed. Every page in the
application whether it is the landing page, create a 3) React redux: React redux is an openly sourced
profile page, or the page to find jobs is built on the react JavaScript library that is used in this application for its
components. Every page has its own DOM structure. capability of managing states with a unidirectional
For instance, the Landing page uses <carousel> flow of data models of the MERN Stack applications.
component to create the banner. Under this <carousel> Redux works as a virtual cloud on the client side of the
tag it uses <carousel.caption>, <carousel.item> to add application as it manages multiple states at a time. It
heading and images on the banner. reads and updates data for multiple components for
making the UI interface easy to render. For instance,
2) React-router-dom: In order to gain security only
Jobs posted by some businesses got stored in the redux
authenticated users are allowed to visit any page of the
cloud which is also known as the redux store. This can
application. If any person whether a freelancer or
be executed with help of Axios by writing a code of
businessman, the app forces that person follows a
actions.
particular route to have access to any feature. For this
4) Actions: Actions are objects which contain a blank
purpose, react-router-dom is installed next in the
field for the user to fill the information with some
process. To have access to the routes, all components of
event that happened in the application. Action
a particular react file needs to be rendered using the
implanted in this application are:
<Route> tag between <Routes> which is updated with
⚫ Alert: It is implemented to create a dialogue box
version 6 of react-router-dom.
and alert the users whenever needed.
⚫ Authentication: It is implemented for both
freelancers and businesses to login into their
profiles and allows them to access routes that are
protected. Only a user which is registered before
can access these routes. It is also used in process of

Volume 9, Issue 3, May-June-2023 | http://ijsrcseit.com 30

 Karishma Arora et al Int. J. Sci. Res. Comput. Sci. Eng. Inf. Technol., May-June-2023, 9 (3) : 23-32

logging out and created a void for another user’s difficult to gain success on such websites. The
data to log in. developer’s hub is opening an easy path for them apart
⚫ Profile: It is also implemented for both freelancers from the basic features a freelancing website must have.
and businesses to create or update their profiles. In The application was developed using MERN Stack.
the case of freelancers, they can use defined MERN stacks marvellous characteristics, and its highly
functions to add experience and education while adaptable capabilities make the project possible in such
in the case of businesses they can add jobs and an easy way. The Stack is handling the client data with
other details of their business. mongo DB, the client and application interface is
⚫ Job: It is implemented for business users to create handled by React.js, and a bridge to connect both is
them by adding different details of the job and an developed using express and node.js.
addintrested() method is used by them to view
interested freelancers. VIII. REFERENCES

There are defined reducers for each action created. [1]. Dr. Santosh Kumar Shukla, Shivam Dubey, Tarun
Reducers are methods that take the state of the Rastogi, Nikita Srivastava,“Application using
components and actions taken as their parameter and MERN stack”, International Journal for Modern
return a new state. Trends in Science and Technology,2022.
[2]. Yogesh Baiskar, Priyas Paulzagade, Krutik
VI. CHALLENGES FACED Koradia, Pramod Ingole, Dhiraj
Shirbhate,“MERN: A full stack development”,
⚫ Learned React.js for creating the multipage iJRASAT journal for research in applied science
dynamic front end. and engineering technology, 2022.
⚫ Learned React Redux for State Management [3]. Sourabh Mahadev Malewade, Archana Ekbote,
throughout the app “Performance optimizing using MERN Stack on
⚫ Managed large pieces of code together to connect web application”, International Journal of
frontend with the backend Engineering Research & Technology,2021.
⚫ Learned Node.js and Express.js for creating and [4]. Fathima Thabassum,“A study on freelancing
maintaining backend server and API endpoints remote websites”, Research gate,2021.
⚫ Learned MongoDB database to use it as an [5]. Joeran Beel, Bela Gipp, Stefan Langer, Corinna
alternative to traditional databases with more Breitinger, “Recommender system, a literature
scalability, security, and accessibility survey”, International journal on digital libraries.
⚫ Learned React-Bootstrap and Material UI for [6]. Subramanian, Vasan, “Pro MERN Stack”, Apress,
developing the application’s eye-catching user 2017.
interface. [7]. Mehra, Monika, Manish Kumar, Anjali Maurya,
⚫ Followed modern security measures and and Charu Sharma “MERN stack Web
middleware to make the application more secure Development”, Annals of the Romanian Society
and safe for the users for Cell Biology.

VII. CONCLUSION [8]. P. Thung, C. Ng, S. Thung and S. Sulaiman,

“Improving a Web Application Using Design

Even after the availability of multiple popular Patterns, A Case Study”, International Symposium
freelancing websites, either the requirements of in Information Technology, 2010.

newbie freelancers are not accomplished, or it is very

Volume 9, Issue 3, May-June-2023 | http://ijsrcseit.com 31

 Karishma Arora et al Int. J. Sci. Res. Comput. Sci. Eng. Inf. Technol., May-June-2023, 9 (3) : 23-32

[9]. Sanja Delcev, Drazen Draskovic, “Modern

JavaScript frameworks, A Survey Study”, Zooming
Innovation in Consumer Technologies
Conference (ZINC), 2018.

Cite this article as :

Karishma Arora, Vaishnavi, Jai Nagpal,

"Implementation of MERN : A Stack of Technologies
to Design Effective Web Based Freelancing
Applications", International Journal of Scientific
Research in Computer Science, Engineering and
Information Technology (IJSRCSEIT), ISSN : 2456-
3307, Volume 9, Issue 3, pp.23-32, May-June-2023. doi :
doi : https://doi.org/10.32628/CSEIT23902104

Volume 9, Issue 3, May-June-2023 | http://ijsrcseit.com 32