Implementation of Freelancing Web Based Platform Using the Mern stack technologies.

DEPARTMENT OF COMPUTER SCIENCE, AITR, INDORE

"A Comprehensive Study on the Implementation of a Freelancing

Platform Using MERN Stack Technologies”
Department of Computer Science and Engineering, Acropolis Institute of Technology and Research, Indore
Gautam Dhodi, Harshit Bhorgade, Ena Luhadia Jain, Gautam Chouhan
(0827CS221095), (0827CS221104), (0827CS221089), (0827CS221094)

Writer’s/ Researcher’s Info ABSTRACT

The surge in demand for digitally deliverable services has led to the growth
Name:
Gautam Dhodi
of freelancing as a significant professional domain. This paper explores the
Harshit Bhorgade implementation of a MERN stack (MongoDB, Express.js, React.js, Node.js)
Ena Luhadia Jain
Gautam Chouhan to develop an optimized freelancing platform called "Developer's Hub." It
presents the project's architecture, design decisions, challenges, and solutions,
demonstrating how the MERN stack can address the multifaceted
Guided By: requirements of modern freelancing platforms. The proposed solution offers
Prof. Urvashi Sharma
(Department of CSE, AITR) functionalities for freelancers and businesses to interact seamlessly,
underpinned by a robust recommendation system for project matchmaking.
The platform facilitates secure project management, real-time
communication, and efficient payments, ensuring a user-friendly and scalable
solution for both freelancers and clients. This study discusses the design,
features, and development process of the system, highlighting its impact on
the freelancing industry.

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 botfreelancers and business can find

CSE Department AITR, Indore

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.

CSE Department AITR, Indore

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 users
stores all data components of the application that needs
to directly add useful packages to their applications by
to have a function.
writing a single line of code. It is free and mostly used
2) View: React serves as a ‘View’ of the MVC pattern
by large organizations to run real-time server
at the client-side module. The module will be written
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:

CSE Department AITR, Indore

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 or
databases.
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 out
⚫ React virtual DOM is not much precise. to a single project owner. Such turbulence is bidding
⚫ Complicated asynchronous programming is processes, with irrelevant tests and costly courses to be
required to interact with the server. completed before entering some communities. This
⚫ HTML templates are neither complete nor application will showcase suitable freelancers for
powerful. every job posted based on the skill requirements of
⚫ Long list of react.js can lead to poor performance business owners. To develop this recommendation
on low-specs laptop and mobile devices. system, the application consists of a content-based
recommendation system that works on a real-time
C. Node
basis. The intended user of the applications is
1) Rules: Node.js doesn’t provide any standard rules or
freelancers, Businesses, or any recruiters and an admin
guidelines describing how the code should be written.
who can manage data at MongoDB databases.
That’s why beginners find it difficult to understand and learn
Following are the user stories explaining how the
since each application requires its own unique approach
application works for Freelancers and Businesses.
to writing the code.

CSE Department AITR, Indore

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 Developer’s
application by pasting a link into the config folder of
hub is also divided into sections i.e., client- side and server-
the project. This connection allows live updates and
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

CSE Department AITR, Indore

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

Figure 6. index.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
Figure 5. Server.js
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
activity of the application, an authentication process is
carried out in the web application. For security
purposes Json web token authentication is the standard

CSE Department AITR, Indore

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 command
⚫ Business.js: Implements post method while
line interface. Whenever a user enters login details, this
businesses register themselves on the application.
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.

CSE Department AITR, Indore

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

CSE Department AITR, Indore

 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”, iJRASAT journal for
⚫ Learned React.js for creating the multipage research in applied science and engineering
dynamic front end. technology, 2022.
⚫ Learned React Redux for State Management [3]. Study of different existing platforms like Upwork,
throughout the app Naukri.com, Linkedin etc.
⚫ Managed large pieces of code together to connect [4]. Joeran Beel, Bela Gipp, Stefan Langer, Corinna
frontend with the backend Breitinger, “Recommender system, a literature
⚫ Learned Node.js and Express.js for creating and survey”, International journal on digital libraries.
maintaining backend server and API endpoints [5]. Subramanian, Vasan, “Pro MERN Stack”, Apress,
⚫ Learned MongoDB database to use it as an 2017.
alternative to traditional databases with more [6]. Mehra, Monika, Manish Kumar, Anjali Maurya, and
scalability, security, and accessibility Charu Sharma “MERN stack Web
⚫ Learned React-Bootstrap and Material UI for Development”, Annals of the Romanian Society
developing the application’s eye-catching user for Cell Biology.
interface. [7]. P. Thung, C. Ng, S. Thung and S. Sulaiman,
⚫ Followed modern security measures and “Improving a Web Application Using Design
middleware to make the application more secure Patterns, A Case Study”, International Symposium
and safe for the users in Information Technology, 2010.
VII. CONCLUSION

Even after the availability of multiple popular

freelancing websites, either the requirements of
newbie freelancers are not accomplished, or it is very

CSE Department AITR, Indore

CSE Department AITR, Indore