Performance Optimization using MERN stack

on Web Application
Tanvi Gupta

Abstract—In todays expeditiously moving business world, its and selling. Accumulating and using demographic information
extremely crucial to be able to understand client demand in through web application contacts and social media platforms.
the most efficacious and ahead of time. If our customers could Marketing to the potential customer and entrenched customers
have our business online and have that at their fingertips to
our products or services, it would have a greater impact on by e-mail. Formulating in retail for instigating the latest
their day-to-day life, which would also create an ecosystem of services and products. As reported by an Associated Chambers
doing business online and serving customers on a large scale. of Commerce and Industry of India study, the online retail
Shopping online or doing business online has become a lifestyle market in India may expand to Rs.70 billion by 2015 from
for the younger generation per se. e-commerce web application, Rs.20 billion in 2011 as internet admittance improves. India
which retails n number of products has given people access
to the basic necessity to luxury products. This project allows has always been a land of tremendous potential. The socioe-
viewing various products on a web user interface and enables conomic situation in the country has enhanced many folds
registered users to get hold of desired products instantly using after independence and India is now evolving as one of the
desired payment options. This project dispenses an approachable foremost countries in the world. Moreover, with a population
way for business owners to view orders placed. In contemplation of over 100 crores and a growth rate of above 6 percent, it
to establish an e-commerce web application, several technologies
have been studied and acknowledged. Technologies that have been can be said to be a marketing giant. Hence it can be well
included are, React.js, MongoDB, Node.js, Express.js. This is a established that why online business and shopping in India
project to ease the accessing of various products and establish a is rising at an expeditious rate over the years. As technology
web application where a customer is delivered with an exhaustive is spreading to the remotest villages of India and many job
web application and also to understand the technologies used to opportunities are presenting themselves to the youth more
demonstrate such an application. This paper will discuss each
of the fundamental technologies to create and implement an e- and more people are obtaining awareness and the money to
commerce web application. purchase the expensive and luxurious product over any web
Index Terms—ReactJS, NodeJS, MongoDB, ExpressJS, Opti- application which provides retail products and services. E-
mization using MERN STACK commerce web applications support the interaction between
different parties participating in a commerce trade as well as
I. INTRODUCTION the management of the data involved in the process via the
Electronic commerce is doing business in products or ser- internet on social media platforms. Electronic commerce is
vices using the Internet. Electronic commerce uses technolo- gaining progress on a start-up company and the momentum it
gies such as mobile commerce, electronic funds transfer, inter- gains as the business grows as an acknowledged and used busi-
net marketing, supply chain management, online transaction ness model. More corporate companies are implementing web
processing, inventory management systems, automated data application providing functionality for performing commercial
collection systems, and electronic data interchange (EDI). E- trade over the internet to better reach clients as it is correct
commerce customarily has been using the World Wide Web to say that the process of shopping on the web application is
for at a minimum one segment of the transactions life cycle, becoming common these days. An online store is a virtual
whilst it might as well utilize other technology such as email, marketplace on the Internet where clients can browse the
etc. E-commerce businesses may employ Online e-commerce catalog of various products and services and select products
web applications for retail sales uninterrupted to consumers. of interest. The picked products or services may be collected
Providing or engaging in online marketplaces, which process in the cart. At the moment, check out the items in the cart that
third-party B2C or C2C sales. Business-to-Business buying will be produced to the clients as an order. At the checkout
screen, all the information regarding client details to complete
the transaction will be required. conventionally, clients will be
asked to fill or select a shipping address for the delivery of the semantics to the web), content personalization, intelligent
product, a shipping option according to selected options by the search, and computers ability for creating various content.
client, a billing address of the client, and payment details. E- Ontologies are used for meaning representation and reasoning.
commerce has changed the practice of trading on a large scale, Besides ontologies, technologies that are also used within a
timing, and technology of b2c and b2b markets environment, third web generation are Resource Description Framework
changing everything from transportation to client behavior. (RDF), Web Ontology Language (OWL), and others. For the
The Environmental Impacts of E-Commerce are, Reduced 4th generation, people might be able to call Internet 4.0 the
Carbon Footprint. Less Need for Product Presentation. A New active web. In the current web 3.0, the use of search engines is
Lease on Life for Used Goods. still crucial, and that gives us knowledge, in its largest content
web applications, which we can use as per our needs. Web 4.0
will be different from this. When fully established, it will not
have several of the steps which are needed when using web
3.0, this way its use can be more direct and invisible.

Fig. 1. Disintermediation/Reintermediation

II. RELATED WORK

A. DEVELOPMENT OF WEB PAGES
Fig. 2. Web Generations
Todays commercial internet foundations started in 1990. At
the end of 1990, Tim Berners-Lee created basic concepts of B. DESIGNING STAGES OF WEB PAGES
the World Wide Web and many tools for efficient web usage.
Design is the universal language in the visual world, and
Those tools encompass HyperText Transfer Protocol (HTTP),
web design refers to the user interface of the web page. The
HyperText Markup Language (HTML), the first web browser
main purpose and goal of the design are to put content into
and code editor, first web server, and first web page which
focus, so users easily reach and use web content [5]. Because
described new term, world wide web and method of develop-
of various technological changes and trends, web design has
ing own web page [1]. From 1990, the internet was evolving
changed a lot, from first web generation web page which
fast, and the progress of its development can be described
showed contents using a simple textual web page, through a
through four generations (Fig. 2) [3]. The first web generation
second-generation web page with lots of graphics, vivid colors
web pages were static, and not frequently updated, and users
to achieve memorable web pages, and finally towards today’s
could only read web content. The main motto was read the
simple and intuitive web design. Web page design should
only web. All web pages were written with HTML and the
always be modern and have updated content.
main communication protocol was HTTP [3]. The second
generation starts 2004, and terms that make it are various III. METHODOLOGY
social networks, blogs, the possibility of the user creating web To establish the web application MERN stack was used. The
page contents, and enhancement of user experience browsing web application was developed using the MERN stack using
web interface. During that period, famous social networks have Mongoose and MongoDB database. Chrome developer tools
appeared, like Facebook, Twitter, LinkedIn, and others. Those were utilized while testing using redux tools for simulation.
social networks enabled global user connection. Also at that The following section discusses MERN stack components and
time, new technologies appeared, like JavaScript, Document their implementation.
Object Model (DOM), Ajax, Cascading Style Sheets (CSS),
eXtensible HTML (XHTML), eXtensible Markup Language A. NodeJS
(XML), eXtensible Stylesheet Language (XSL), and Flash that Node.js is authored in C ++ language, which is a JS
enable the web services presentation and delivery, without operating environment. Node.js is a JS runtime environment.
web distribution problems. The third web generation starts Node.js uses the Google Chrome V8 engine for good perfor-
in 2010, and it is marked with the semantic web (adding mance. Node.js uses event-driven, asynchronous programming
 Fig. 4. NodeJS Request Flow

Express made it simpler and easier to write the back-end code

and implement it in a structured format. Express helped us
in designing our web applications and APIs required in our
Fig. 3. Increase in total websites project as it supports many middlewares which makes the
code shorter and easier to write. Asynchronous programming
and Single-threaded architecture are the biggest advantages of
callback functions, and designed using single-thread architec- using Express in our application. For our application robust
ture. Node.js design uses the event-driven as the fundamental API Created a new folder to start our express project and the
core concept for its environment, which gave us the various steps for it are, we had to add a command in the command
number of APIs that are event-based and asynchronous in prompt to initialize the package.json file. After that, we had
nature which has helped us in building the website using to accept the default settings and continue. npm init is the
node.js for our back-end development. As we used Node.js, command to start.
it used the corresponding callback function according to our
web application’s business logic. These callback functions are
executed asynchronously, which means that although these
functions appear to be registered sequentially in the logic, they
do not depend on the code written in which they appear, but
rather wait for the execution of the corresponding event to
fire. The main advantage of Event-driven and asynchronous
programming is that it uses single-threaded architecture. The
execution of the call back function code is done without wait-
ing for a certain code to complete, and the limited resources
were used for other tasks that were to be executed as our
web applications business logic. This design was suitable for
our back-end development, which was also the goal of our
system. In server development, handling synchronous requests
was a major task, and blocking had the lead, to not fully Fig. 5. ExpressJS Request Flow
use the resources or wasting it. Through single thread ar-
chitecture, asynchronous callback functions, we improved the
C. ReactJS
utilization of resources and optimized our website performance
which also gave us the desired results while testing. From React.JS is the front-end library of the JavaScript program-
the supported module provided by Node.js, we can see that ming language. We used React.JS for building our user inter-
many of the functions, including file operations, are executed face for the web application, as it is used for the development
asynchronously, which is different from other languages. To of a single-page application because it can render dynamically
ease the development of the server, Node.js uses especially changing data at a high speed. React allows developers to
large network modules, Including HTTP, DNS, NET, UDP, code in JS and create User Interface components. We studied
HTTPS, TLS, etc., developers can establish a Web server using virtual DOM objects in React.JS, which we implemented
these network modules. in our project. Any changes we made in our e-commerce
web application caused the entire User-Interface to re-render
B. ExpressJS the virtual DOM. This allows us to compare the potential
We used Express as it is a Node.js framework. while difference between the DOM Object and Virtual DOM. We
building the application we studied that instead of creating used JSX, It made our code easier and simpler to write in React
loads of node modules and writing the code with NodeJS, application.[4] React.JS uses Components. Components are
the building blocks of User-Interface wherein each component
had a logic related to our e-commerce application and it con-
tributed to the overall User-Interface of our web application.
Components can be reused, and it helped our code for web
application easier to be understood by other developers and
overall web application better at performance.
We started our react application by first installing create-
react-app using npm or yarn. npm install create-react-app
global OR yarn global adds create-react-app are the two
commands for using npm or yarn respectively. After that, we
created a new react app by using. create-react-app ourappname
Then navigate into the our app name folder and type yarn start
or npm start to start your application.

D. MongoDB Fig. 6. MERN Stack Architecture

We used Document-Oriented Database i.e. MongoDB for
our project MongoDB is a database where every record is a
document format. Behind the scenes on the server, MongoDB Studied that e-commerce websites are not simple software
converts our JSON data into a binary version of it which is artifacts. Mastering the necessary technologies/stack for estab-
basically stored and queried more efficiently. MongoDB uses lishing any web application is needed. Focusing on other chal-
BSON to query database. MongoDB stores BSON format both lenges that come up throughout the development process, like
internally, and over the network, but that does mean we can’t performing website evaluation, conducting market research,
think of MongoDB as a JSON database. we can represent and choosing the right business model for our e-commerce
any data in JSON format which can be natively stored in web application was done. These are the first and most crucial
MongoDB, and retrieved just as easily in JSON format. As steps that will ensure that the final E-commerce application,
we studied and implemented MongoDB we can say that it is will be developed according to the needs of the market and
flexible and allows its users to create schema, databases, tables, will be customized to the needs of its client. Further research
etc. After installing MongoDB we had an option, of using and more focus were given on software tools for testing. All
Mongo shell as it gives us a JavaScript interface through which the necessary decisions were made on how the website will
the users can interact and carry out any operations relating to be built depending on the results of the problem investigation
querying. MongoDB is a document-oriented database, so it is stage since they played a major role in describing the specific
easy to index documents. and that is the reason it handles client requirements for the web application.
response at a faster pace. MongoDB is Scalable In the V. CONCLUSION AND FUTURE WORK
MongoDB database, we handled large data by dividing it into
a nested documented structure. MongoDB is a database server As of now, the current web application on e-commerce busi-
that allows us to run multiple database on it. ness aims to provide a critical review of the relevant literature
Simple commands such as ’use’ command is used in the e-Business field and also to describe key aspects of
to create a database. done using a use command: use the methodology that we have been applied throughout the
databasename; use databasename; Creatingatable : If thecol- project. More study and understanding of new technologies
lectiontabledoesn0 texist thenanewcollectiontablewillbecre- and new frameworks and testing tools will help the web
ated : db.createCollection(collectionname); Insertingrecordsin- application to grow and perform better. In the coming future,
tothecollection : db.collectionname.insert ( id : 1, Name web development using different technologies can be useful
: Knight, Department : Tech, ); Queryingadocument : to many businesses in India as well as around the world, as
db.collectionname.find(Name : Knight).forEach(printjson); it creates an ecosystem of digitization and provides ease of
business to every individual in the world.
E. Mongoose
ACKNOWLEDGMENT
NodeJS ORM for MongoDB
I owe my deep gratitude to my family and friends for their
IV. RESULTS AND DISCUSSION support. Without everyone’s contribution, this project would
The current work for the e-commerce web application not have been possible.
development project is done using MERN stack technologies.
This project aims to provide a critical review of the relevant REFERENCES
literature in the e-Business field and also to describe key [1] Office for National Statistics, Internet users in the UK: 2016. Retrieved
aspects of the methodology that we have applied throughout September 26, 2017, from https:// www.ons.gov.uk/ businessindus-
tryandtrade/itandinternetindustry/bulletins/internetus ers/ 2016.
the project. This project managed to understand various issues [2] Liang, L., Zhu, L., Shang, W., Feng, D., Xiao, Z. (2017). Express
that arise while building an e-commerce web application. We supervision system based on NodeJS and MongoDB.
 [3] M. R. Solanki, A. Dongaonkar, A Journey of human comfort: web1.0
to web 4.0, International Journal of Research and Scientific Innovation
(IJRSI), Volume III, Issue IX, pp. 75-78, 2016
[4] Javeed, A. (2019). Performance Optimization Techniques for ReactJS.
2019
[5] J. M. Spool, Content and design are inseparable work partners, 2014.
Retrieved September 29, 2017, fromhttps://articles.uie.com/ content and
design
[6] Bozikovic, H., Stula, M. (2018). Web design Past, present and future.
2018 41st International Convention on Information and Communication
Technology, Electronics and Microelectronics (MIPRO).
[7] Carter, B. (2014). HTML Architecture, a Novel Development System
(HANDS): An Approach for Web Development. 2014
[8] Sterling, A. (2019). NodeJS and Angular Tools for JSON-LD. 2019
IEEE 13th
[9] Laksono, D. (2018). Testing Spatial Data Deliverance in SQL and
NoSQL Database Using NodeJS Fullstack Web App. 2018
[10] Patil, M. M., Hanni, A., Tejeshwar, C. H., Patil, P. (2017). A qualitative
analysis of the performance of MongoDB vs MySQL database based
on insertion and retriewal operations using a web/android application to
explore load balancing Sharding in MongoDB and its advantages
[11] A. Hertzmann, C. E. Jacobs, N. Oliver, B. Curless, and D. H. Salesin,
Image analogies, in Proc. 28th Annu. Conf. Comput. Graph. Interact.
Tech., 2001, pp. 327-340.
[12] ”Tags used in HTML”. World Wide Web Consortium. November 3,
1992. Retrieved November 16, 2008.
[13] R. Irony, D. Cohen-Or, and D. Lischinski, Colorization by example, in
Proc. Eurograph. Symp. Rendering, vol. 2. 2005, pp. 201-210.
[14] First mention of HTML Tags on the www-talk mailing list”. World Wide
Web Consortium. October 29, 1991. Retrieved April 8, 2007.
[15] JavaScript specification. Retrieved from http://www.w3.org/standards/
webdesign/script, November 1, 2014.