Summer 2021 CS 687 Capstone Project

Progress Report
An Admin Management Dashboard with MERN for
SME E-commerce
Pengfei (Chuck) Liu
Advisor: Sam Chung & Ahreum (Amy) Ju
MS in Computer Science
School of Technology and Computing (STC)
City University of Seattle (CityU)
[email protected], [email protected], [email protected]

Abstract
E-commerce has revolutionized the global retail industry, and E-commerce sales have tripled in the past
seven years. Affected by the pandemic, the number of independent E-commerce companies ushered in
exponential growth. As an invisible battlefield in the E-commerce competition, the admin management
system aims to help E-commerce manage inventory and user data more conveniently and effectively.
It is used to support business, optimize service processes, improve service efficiency, and provide data
analysis functions to provide references for overall business adjustment and optimization. This project
implements the admin management system mainly with MongoDB, Express, React, and NodeJS. By
using MERN stack, it improves the overall performance of the system and reduces maintenance cost.
The frontend is implemented with the single-page application which only renders necessary data to the
page. The back is composed of MongoDB, Express, and NodeJS. The Express MVC helps to reduce the
coupling between each part. The project increases the QPS by 60% by deploying with 2 AWS EC2
instances.

Keywords: Admin Management Dashboard, MERN Stack, Microservices Architecture, E-commerce

1
 constantly iterating with the expansion of
1. INTRODUCTION business, so product architecture and technical
architecture are required to be highly scalable and
Problem Statement change with business and users' requirements.
In order to meet the increasing demand for E- The management system needs to cluster and
commerce platforms, higher requirements are integrate these functions for different purposes,
put forward for the management capabilities of split the E-commerce back-end into multiple
the back-end system. Implement a more efficient components, clarify business boundaries,
admin management system to fit E-commerce minimize the coupling between components, and
platforms’ needs has become a crucial research efficiently support front-end business.
topic. Due to the nature of the E-commerce
business model, the admin management system Approach
must meet features of stability, scalability, and In this project, we investigated the MERN stack
strong security (Yun, 2018). When designing web development and created a single-page
product architecture, developers should fully application E-commerce admin management
consider the needs of business development and system separated of back-end and front-end. In
isolate each module. For example, build a order to design a suitable management system
commodity center for commodity modules, build for E-commerce, we followed the modular design,
a user management center for user modules. component design, and engineering model
Only when there is a modular idea in product development.
design, when business adjustments and new
functions are added, development can be carried Conclusions
out quickly to avoid things that affect the whole
business operation. This project implements a fully featured E-
commerce management system through the
Motivation MERN stack, including user and product
According to the National Retail Federation management. Redux manages the status of
(National Retail Federation) report, the application components to reduce the coupling
consumption rate in the United States increased between components, thereby supporting
by 3.6% year on year to approximately 755 billion business expansion and reducing maintenance
dollars during the Christmas holiday season in costs. Complete data visualization display
2020. Online shopping sales were the main through Echarts.
driving force for total sales growth, increasing by
at least 20% to approximately US$202.0 billion 2. BACKGROUND
(Sherman, 2021). Data proves that traditional
physical stores and emerging E-commerce sales The admin management application is designed
are polarizing, and the pandemic is accelerating for supporting a certain business process. It is
the reshaping of the global retail industry. A also known as the business-end (2B business)
recent report by McKinsey showed that affected product. A good 2B business product can be
by the pandemic, the number of newly opened E- measured from the following two aspects: first,
commerce stores in the United States over the the business need is more crucial than personal
past year is equivalent to the sum of the past 10 needs. Second, 2B business products generally
years (Buck, et al., 2020). Due to the increase of have a strong purpose when used or need to
consumers, E-commerce platforms should reach a certain level of business operations or
promote a full-category and full-scenario need to complete certain process approvals (Bein
development strategy to meet all user needs. et al., 2020). In brief, when they are used, they
With the rapid development of the E-commerce are generally not used for personal emotional
industry, the demand for E-commerce admin reasons. When starting to design a system, the
management systems has also increased first step is to figure out the business needs. Due
dramatically. The success of a website relies on a to the particularity features of E-commerce, it
high-quality UI design, but the admin requires to constantly adjust its products to meet
management system determines the success or the needs of different users. Admin management
failure of E-commerce platforms (Li, 2021). needs to make timely adjustments to products
and user functions at different stages for different
A full-featured E-commerce admin management development strategies. For E-commerce
system does not only help E-commerce platforms companies, there are three core and difficult parts:
to efficiently manage stores, but also improve commodities, orders, and inventory. The business
employee work efficiency and meet user's logic and interaction between the systems are
personal needs. Requirements and functions are extremely complex and the rules are diverse.

2
Developers around the world are working to which caused employees to waste extra time on
improve the quality of user interfaces and the these operations. The training of each newcomer
development process of building applications to means double the investment of an old employee
achieve projects and development requirements and a new employee, especially for a small
within a set deadline (Mehra et al., 2021). The company with limited funds and employees. A
MERN (MongoDB, Express, React, Node.js) well-designed admin management system can
technology stack is one of the early open-source reduce the cost of employee training so that
technology stacks developed with the boom of the employees can start regular work quickly by
SPA and NoSQL. React in the MERN technology simple learning. Souri and Rezaei (2017),
stack is a JavaScript library used to build user believed that to build an admin management
interfaces. MongoDB is a popular data storage system, developers need to focus on the following
NoSQL database. Node.js is a server-side three dimensions: the business process is the
JavaScript runtime environment, and Express is a soul, low coupling of functional modules, security,
web server built on Node.js. The MERN stack and integrity of data transmission.
development ensures the development process is An effective software development approach to
as smooth as possible. Moreover, React is a reduce coupling is to separate the front-end and
component-based development, which completes back-end development. Mardin (2018) explained
the encapsulation of functional modules, the front-end and back-end separation has become
decoupling of functions and business logic, and an industry-standard way for Internet project
the reduction of code. development, decoupling front-end and back-end
development. And the separation of front and
3. RELATED WORK back ends will lay a solid foundation for large-
This project designed a single-page application of scale distributed architecture, microservice
an admin management system (BMS) with a architecture, and multi-terminal services in the
separated front-end and back-end server for future. The core idea of front-end separation is
small to medium E-commerce including front-end that the front-end HTML page calls the back-end
web applications and back-end applications. This API interface through AJAX and interacts through
BMS covered four major features include user JSON data.
management, classification management,
commodity management, authority management Malik and Kim (2017) compared the two most
for organizations to better manage their user and used API architecture styles in their articles about
product information. This project uses the MERN Restful and SOAP. And they summarized few
stack to implement a responsive admin advantages by following the RESTful API
management system to help E-commerce architecture. Arcuri (2019) also said RESTful API
businesses to run more efficiently and improve allows developers to separate the front-end and
user experience. And it will follow the MVC back-end server, also reduce the data
framework to complete a low coupling E- throughput, and move security issues focus on
commerce BMS. the interface. It also provides some solutions to
test the API design include both white-box and
Literature Review black-box tests.
According to Lv (2021), the biggest role of the
admin management system is to support users' Hasija and Kumar (2016) discussed MongoDB as
businesses. If an E-commerce company does not a database suitable for agile development, its
have a place to upload products and no place to data model can be flexibly updated with the
process orders, then the user can do nothing. The development of the application. Stepantsov
second crucial aspect of the E-commerce mentions MongoDB is designed for high
management system is efficiency; this part is performance and high availability database
mainly about the management of content. Lv usage. Using the advantages of in-memory
describes the meaning of the management computing, MongoDB can provide high-
system as to improve the efficiency of internal performance data CRUD operations.
personnel, so the most important feature of
considering the necessity of a management Review Conclusions
system is the cost performance. Torabizadeh, By studying the MERN stack development, it can
Yusof, Ma’aram, and Shaharoun (2020) help build a single-page application responsive
illustrated a high-quality admin management admin management. Through different E-
system can reduce the time consumption of commerce needs of the admin management
employees; however, most third-party system, some functions can still be solved
management software on the market contains too manually or by other methods instead of
many functions beyond the organization's needs, developing the system, especially for teams with

3
a small number of people. So, during the management. These approaches can reduce the
designing process, we will consider the frequency coupling, avoid redundancy and optimize the
of use of this function, how much time can be performance; therefore, management personnel
saved by the staff, and how much system risk this can load resources on demand.
function can reduce. MongoDB increases the
efficiency of using CRUD operation, which helps Implementation
to improve the user experience of based This project followed the MERN stack to
management functions of this project. implement the admin management dashboard for
SME E-commerce. In traditional web applications,
4. APPROACH DOM manipulation is generally a direct update
operation that has been approved as a less
User Requirement efficient approach. To minimize the operation of
The E-commerce admin management system is a the DOM, this project used React for the front-
back-end management system provided to end. React provides a lightweight virtual DOM
relevant business personnel. They can use this instead of direct DOM operations; thereby
admin management system to perform improving the efficiency of the entire project. To
management functions includes user complete the single-page application, this
management/commodity classification application requires tools to manger routers.
management/commodity management/authority React Router is an important part of the React
management. Separate front-end and back-end system, it was used for implementing URL
have become the industry standard for web management, switching components, and
project development which aims to decouple changing state. However, react is just an
front-end and back-end development. The E- abstraction layer of DOM, not a complete solution
commerce admin management system is for web applications. There are two aspects, it
composed of several parts, and with the doesn’t involve: code structure and data transfer
development of the company's business, between components. By using redux, it can
functional modules will continue to expand. Since achieve state sharing between components. Data
each subsystem is not isolated from other parts, interaction between the front and back ends was
the product architecture determines the realized through the Axios and API tests
requirements and design, and the technical implemented via Postman. The back-end
architecture determines the technical framework construction of the project used the combination
and performance (Stallinger et al., 2011). of Node, Express, Mongoose, and MongoDB. The
modularization of this project was implemented
Design by the ES6 and CommonJS. The data visualization
The core idea of separate front-end and back-end was done by D3JS and Echarts-for-react.
is to allow the front-end HTML page to call the
back-end API interface through AJAX, and Technologies Used
interacts through JSON data, thereby reducing The front-end of this project used the React,
the concurrency/load pressure of the back-end bootstrap, axios, webpack and ES6, the backend
server and improving performance and scalability. used nodeJS, express, and mongoDB.

The admin management system should follow 5. DATA COLLECTION

approaches of modularization, componentization,
and engineering model development (Zhang et al., This project used the case analysis approach for
2017). The updated iteration of a product is the data collection. JingDong (JD), as one of the
dependent on the collaboration of multiple teams massive B2C online retailers in China, has ranked
such as product, design, development, and 59th in Fortune Global 500 in 2021 (Fortune,
testing. With the improvement of product 2021). This project used the case analysis
functions, the supporting team behind it is also approach of JD for exploring the formation path
growing. Product design and iteration are driven of the admin management system from the
by componentization can increase team efficiency different stages of B2C E-commerce enterprise
and reduce costs. The traditional design process development. JD was founded in 1998 as an SME
is mostly parallel with attributes and multiple that mainly sells electronic products. It has grown
roles. The workflow from requirements to design, from an SME that sells less than 100 electronic
from design to display will involve different products to today’s commercial giant with annual
requirements. The lack of overlap between the revenue of over 110 billion dollars. While
same role and lack of communication will lead to maintaining rapid development over the years, JD
a lot of repetitive work, which will cause has accumulated hundreds of millions of loyal
redundancy works for each project cycle and users and accumulated massive amounts of real

4
data. JD.com provides the most suitable products
and services for more than 300 million active
users. At present, JD Retail Group’s third-party
platform has signed more than 210,000
merchants, achieving full category coverage.

The usual role of the admin management system

is to create, store, and process inventory and user
information. It manages the normal operation of
the entire E-commerce system. Through case
studies, understanding the basic needs of the
management system includes studying the needs
of user management, inventory management,
and product classification. And as the business
grows, different management modules will be
managed by separate departments. Authority
management should also meet the actual needs
of customers and have the most flexible authority
system. As a case of transforming from a 3C
online retailer to a comprehensive online retailer,
JD’s success helps to understand different
product life cycles and make a reasonable
combination according to the company’s business
and strategic goals, thereby improving the
efficiency of the entire management system.

6. DATA ANALYSIS

JD provides various data information includes

users, merchants, products, including content
information, review information, and user
interaction behaviors of merchants and products Figure 2. JD’s data types.
information. Figure 1 shows a small sample of
JD’s raw data. The raw data can divide into five User analysis bases on the user's gender, age,
major fields: behavior, user, account, product, occupation, location; through the user's basic
and merchant. With combining of these five major attributes and behavioral attributes, they help the
fields, the admin dashboard management system merchants to determine the user portrait of the
analyzed user needs from four aspects: sales, stable user population, so they can launch more
members, products, and customers. new products to attract these users. The data
shows that the number of customers of JD
increased rapidly from 2008 to 2010 because JD
launched a series of new promotion activities
after it went online in 2007. After 2012, the rate
of new user growth has dropped significantly. The
number of users increasing each year has
remained stable. JD maintains a stable growth
rate in sales by targeting specific groups of people.
By dividing the user registration time range, users
registered after 2016 defines as new customers,
users registered during 2010-2015 are mid-term
Figure 1. A Sample of JD’s raw data. users, and users registered before 2010 are old
customers. Figure 3 shows that mid-term
The sales analysis mainly shows the changes in customers are the main force of platform sales.
the number of orders for each behavior category The platform can enhance user stickiness with old
of the user. It includes the changes in the total users by having some promotion activities.
number of orders for the user's purchase of
products on JD and the sales volume of the
product categories purchased by the user.

5
 SEO. Overall, the project reached a higher
performance with a score of 91 out of 100. The
use of React plays a key role in this project. It
allows developers to build complex and powerful
products faster and implement iteration more
efficiently. The JavaScript revolution has
rewritten the rules of web development. It allows
the development of single-page applications
using JS technology to obtain some data through
Figure 3. New Registered Users. JavaScript, and then build a dynamic website.
However, no matter how popular this method
Overall, the electronics, clothing, and beauty seems, DOM manipulation is still relatively slow.
products on the JD platform are the best-selling React.js excels at building dynamic and engaging
categories; among them, users prefer to buy web interfaces, surpassing other JavaScript
mobile phones, notebooks, digital cameras, and frameworks (such as Angular and Ember)
other electronic products on the JD platform. The because of React's virtual DOM. React through
users of the JD are mainly male users. The the introduction of virtual DOM, instead of
membership level of male users is higher than updating the entire components every time
that of female users, and the repurchase rate of during the update process to achieve SSR, The
female users is only 20%, which is only half of React compares the virtual DOM and previous
that of male users. Improving female users’ DOM then only updates the differences to the
experience of page and product experience on JD, DOM, thereby improving the performance of the
optimizing female products and related store entire website. In addition, React’s reusable
brand adjustments, and promoting more components make the code of the project
promotional activities that are conducive to modular and more organized, and they can be
women’s purchases will bring more users to the reused anywhere without any additional settings.
JD. Based on the analysis of JD, it provides And combined with the virtual DOM can ensure
aspects that need to cover for the admin that the UI is updated quickly and efficiently.
management dashboard. Our project uses three Moreover, isomorphic JavaScript can quickly
different patterns including bar chart, pie chart, render web pages. The dashboard is usually built
and line chart, to provide better data visualization as a client-side SPA. In a highly complex or high-
for merchants so they can make a better decision load SPA, it only takes 3-5 seconds to fully load
based on these data. everything from the server. Figure 5 shows the
load test after scaling with the AWS. For 5000
clients, the average response time was only 16ms.
7. FINDING

Figure 5. Load test after scaling with AWS.

However, building a client-side rendered SPA may

have some defects that can cause serious
business problems, as a tradeoff of SPA, SEO
performance is always bad for SPA. SEO stands
for search engine optimization. As a SPA built with
Figure 4. The overall performance of Admin Dashboard
React, a web application running only on the
client-side cannot provide HTML for crawlers; this
Figure 4 shows the measure score of the project
generally leads to poor SEO performance. If
by Google's lighthouse. There are two aspects
company’s business mainly relies on users' traffic
that need to pay attention to: performance and
to expand its revenue, then this will be a serious

6
problem. But as a dashboard application, SEO is
not an important factor. Latha, A. G., Raju, R. N., Satyanarayana, C., &
Srinivas, Y. (2011). Hotel management system
8. CONCLUSION an E-commerce application using resource
description framework (RDF). International
The fundamental role of the management system Journal of Computer Science and Information
is to create, store and process information. It Technologies, 2(5), 2267-2272.
manages the normal operation of the entire
business. The E-commerce management system Linton, J. D., & Solomon, G. T. (2017).
provides the management of merchandise and Technology, innovation, entrepreneurship and
users; and with the increase of business, it the small business—technology and innovation
provides authority management to enable in small business. Journal of small business
managers to perform their duties and improve management, 55(2), 196-199.
efficiency. This project uses the separation of
front and back ends, the front end is built by Lv, X. (2021). Applications of the Small and
React scaffolding, thereby reducing project Medium Enterprise Management System
configuration time and deployment time. The Using the Clustering Algorithm. Mobile
front end also implements a single-page Information Systems, 2021
application (SPA) in order to improve the overall
performance of the application. The backend Mehra, M., Kumar, M., Maurya, A., & Sharma, C.
completes a data-driven service using NodeJS, (2021). MERN Stack Web Development. Annals
Express, and MongoDB. A Restful API is created of the Romanian Society for Cell Biology, 25(6),
to obtain data, which reduces the coupling 11756-11761.
between servers.
Paivarinta, T., & Munkvold, B. E. (2005,
9. FUTURE WORK January). Enterprise content management: an
integrated perspective on information
There are two parts that need to implement for management. In Proceedings of the 38th Annual
this project. First, in order to handle more Hawaii International Conference on System
products in a more efficient way, this project will Sciences (pp. 96-96). IEEE. DOI:
use Redis to cache data. As a cost-effective 10.1109/HICSS.2005.244
method, the Redis will also deploy on the AWS
ElastCache. Secondly, the next iteration of the Stallinger, F., Neumann, R., Schossleitner, R., &
project will include more features such as logistic Kriener, S. (2011, May). Migrating towards
management, order management, and financial evolving software product lines: Challenges of an
management. SME in a core customer-driven industrial systems
engineering context. International Workshop on
Demo Link Product Line Approaches in Software
Engineering (pp. 20-24). DOI:
10. REFERENCE 10.1145/1985484.1985490

Aggarwal, S., & Verma, J. (2018). Comparative Stepantsov, A. (2018). Development of a

analysis of MEAN stack and MERN stack. centralized database backup management
International Journal of Recent Research system with nodeJS and React.
Aspects, 5(1), 127-32.
Yun, Q. (2019, July). Design and
Bein, A. S., Graha, Y. I., & Pangestu, A. P. Implementation of E-commerce Platform based
(2020). Pandawan Website Design Based on Vue. js and MySQL. Computer Engineering,
Content Management System As Media E- Information Science & Application Technology
commerce Transaction. Aptisi Transactions On (ICCIA 2019).
Technopreneurship (ATT), 2(1), 87-97. DOI:
https://doi.org/10.34306/att.v2i1.73 Zhang, N., Cao, Y., & Zhang, S. (2017, May).
Research of web front-end engineering solution
Bhatti, A., Akram, H., Basit, H. M., Khan, A. U., in public cultural service project. Computer and
Raza, S. M., & Naqvi, M. B. (2020). E-commerce Information Science (ICIS) (pp. 623-626). IEEE
trends during COVID-19 Pandemic. International DOI: 10.1109/ICIS.2017.7960067
Journal of Future Generation Communication
and Networking, 13(2), 1449-1452.