E-Commerce application focus on book bazar 18CS185

CHAPTER 1

COMPANY PROFILE
A Brief History of Elecsis Infotech Solutions Pvt Ltd
Elecsis Infotech, was incorporated with a goal” To provide high quality and optimal Technological
Solutions to business requirements of our clients”. We are one of the leading website design and
development company in Bangalore, thanks to the wonderful applaud from our esteemed clients.
We embarked on a mission to help small, medium and large business owners to develop and grow
an online presence by adding value to their product and/or service offerings. Our vision, mission
statement and core values are as outlined below. We strongly believe in delivering quality services
without compromising on customer delight. Every business is a different and has a unique business
model and so are the technological requirements. They understand this and hence the solutions
provided to these requirements are different as well. They focus on clients’ requirements and
provide them with tailor made technological solutions. They also understand that Reach of their
Product to its targeted market or the automation of the existing process into e-client and simple
process are the key features that our clients desire from Technological Solution they are looking for
and these are the features that we focus on while designing the solutions for their clients.

Elecsis Infotech, strive to be the front runner in creativity and innovation in software development
through their well-researched expertise and establish it as an out of the box software development
company in Bangalore, India. As a software development company, they translate this software
development expertise into value for their customers through their professional solutions. They
believe that Technology when used properly can help any business to scale and achieve new heights
of success. It helps Improve its efficiency, profitability, reliability; to put it in one sentence”
Technology helps you to Delight your customers” and that is what we want to achieve.

They understand that the best desired output can be achieved only by understanding the clients
demand better. Elecsis Infotech, work with their clients and help them to define their exact solution
requirement.
They believe that Technology when used properly can help any business to scale and achieve new
heights of success. They focus on clients’ requirements and provide them with tailor made
technological solutions. They also understand that Reach of their Product to its targeted market or
the automation of the existing process into e-client and simple process are the key features that our
clients desire from Technological Solution they are looking for and these are the features that we
focus on while designing the solutions for their clients.

Dept. of ISE, EPCET 2023-2024 Page 1

 E-Commerce application focus on book bazar 18CS185

1.2 Overall Organization structure

Elecsis Infotech solution is completely dedicated to success of our customers and does not permit
external forces to diminish our focus and commitment. To achieve the highest level of customer
satisfaction, we follow basic principles to deliver solutions with impact.
1.2.2 Vision
Our vision is to provide reliable and valuable solutions in the form of digital online branding and
media solutions to small, medium and large business owners to establish, develop, maintain and
grow an online presence.
1.2.3 Mission
Our mission is to develop clients’ websites as digital representatives of their business that are
available 24 x 7 globally. We are on a mission to help these enterprises to spread awareness about
their products and services through digital media on the internet.
1.2.4 Values
We strongly value customer relations and this is reflected in the way we design and develop our
websites for our clients. We believe in a “customer first” approach which helps us in getting more
customers via references.

Contact Information:

Company Name : Elecsis Infotech

Data Processing Centre : ARE RANGA COMPLEX, NO.

2934E/2935E 3RD FLOOR
VIJAYANAGAR 2ND STAGE
Bengaluru, Karnataka 560079

General Phone No : 086602 96977

Company Email : info@elecsisinfotech

Website : www.elecsisinfotech.com

Contact Person : Mr. Charan P

87479 76931

Dept. of ISE, EPCET 2023-2024 Page 2

 E-Commerce application focus on book bazar 18CS185

CHAPTER 2

ABOUT COMPANY

Elecsis Infotech is a Technology Organization providing solutions for all web design and
development, MYSQL, PYTHON Programming, HTML, CSS, ASP.NET and LINQ. Meeting the
ever-increasing automation requirements, Digital Attain IT Solution specialize in ERP,
Connectivity, SEO Services, Conference Management, effective web promotion and tailor-made
software products, designing solutions best suiting clients’ requirements. The organization where
they have a right mix of professionals as a stake holder to help us serve our clients with best of our
capability and with at par industry standards. They have young, enthusiastic, passionate, and
creative Professionals to develop technological innovations in the field of Mobile technologies,
Web applications as well as Business and Enterprise solution. Motto of our organization is to
“Collaborate with our clients to provide them with best Technological solution hence creating Good
Present and Better Future for our client which will bring a cascading a positive effect in their
business shape as well”. Providing a Complete suite of technical solutions is not just our tag line, it
is Our Vision for Our Clients and for Us, West rive hard to achieve it.

2.1 PRODUCTS OF ELECSIS INFOTECH.

2.1.1 Digital Marketing

Digital marketing, also called online marketing, is the promotion of brands to connect with
potential customer using the internet and other forms of digital communication. This includes not
only email, social media, and web-based advertising, but also text and multimedia messages as a
marketing channel. Digital marketing is the component of marketing that uses
the Internet and online-based digital technologies such as desktop computers, mobile phones, and
other digital media and platforms to promote products and services. [2][3] Its development during the
1990s and 2000s changed the way brands and businesses use technology for marketing. As digital
platforms became increasingly incorporated into marketing plans and everyday life, [4] and as people
increasingly used digital devices instead of visiting physical shops,[5][6] digital marketing campaigns
have become prevalent, employing combinations of search engine optimization (SEO), search
engine marketing (SEM), content marketing, influencer marketing.

Dept. of ISE, EPCET 2023-2024 Page 3

 E-Commerce application focus on book bazar 18CS185

2.1.2 Web Application

It is a client–server computer program in which the client (including the user interface and client
side logic) runs in a web browser. Common web applications include web mail, online retail sales,
online auctions, wikis, instant messaging services and many other functions.
Web applications use web documents written in a standard format such as HTML and JavaScript,
which are supported by a variety of web browsers. Web applications can be considered as a specific
variant of client–server software where the client software is downloaded to the client machine
when visiting the relevant webpage, using standard procedures such as HTTP. The Client web
software updates may happen each time the web page is visited. During the session, the web
browser interprets and displays the pages, and acts as the universal client for any web application.
The use of web application frame works can often reduce the number of errors in a program, both by
making the code simpler, and by allowing one team to concentrate on the framework while another
focuses on a specified use case. In applications which are exposed to constant hacking attempts on
the Internet, security-related problems can be caused by errors in the program.

2.1.3 Web design

It is encompasses many different skills and disciplines in the production and maintenance of
websites. The different areas of web design include web graphic design; interface design; authoring,
including standardized code and proprietary software; user experience design; and search engine
optimization. The term web design is normally used to describe the design process relating to the
front-end (client side) design of a website including writing mark up. Web design partially overlaps
web engineering in the broader scope of web development. Web designers are expected to have an
awareness of usability and if their role involves creating markup then they are also expected to be
up to date with web accessibility guidelines. Web design partially overlaps web engineering in the
broader scope of web development.

2.1.4 Departments and services offered

Elecsis Infotech plays an essential role as an institute, the level of education, development of
student’s skills are based on their trainers. If you do not have a good mentor then you may lag in
many things from others and that is why we at Digital Attain IT solutions gives you the facility of
skilled employees so that you do not feel unsecured about the academics. Personality development
and academic status are some of those things which lie on mentor’s hands. If you are trained well
then you can do well in your future and knowing its importance of Digital Attain IT solutions
always tries to give you the best.
They have a great team of skilled mentors who are always ready to direct their trainees in the best

Dept. of ISE, EPCET 2023-2024 Page 4

 E-Commerce application focus on book bazar 18CS185
possible way they can and to ensure the skills of mentors we held many skill development programs
as well so that each and every mentor can develop their own skills with the demands of the
companies so that they can prepare a complete packaged trainee.

2.1.5 Services provided by Elecsis Infotech.

• Digital Marketing

• Web services and development

• Dot Net Frame work

• Python

• Internet Of Things

• Conference /Event Management Service

• Academic Project Guidance

• Software Training

• Multimedia

• Domain and Hosting

Dept. of ISE, EPCET 2023-2024 Page 5

E-Commerce application focus on book bazar 18CS185

CHAPTER 3

THEORETICAL BACKGROUND

3.1 INTRODUCTION TO E-COMMERCE:

The e-commerce application is constructed based on the MERN stack as the primary full-stack
technology. This chapter will briefly discuss each technology in the MERN stack as well as its third-
party support library Mongoose to develop the project.
E-comm, EC for short (E-commerce) is a concept referring to transactions, purchase and sale of
goods and services by the internet. E-commerce was first known in the 1960s. After years of
development, as mobile devices became popular, social media increasingly affirmed the power and
the boom of the webpage. Launchers promote the rapid development of commerce (E-commerce)
3.1.2 TYPES OF E-COMMERCE:
Currently, there are many forms of e-commerce, including the following basic forms:
 B2B (Business to Business): is a trade between companies, businesses and organizations.
About 80% of e-commerce today falls into this category.
 B2C (Business to Consumer): is an Internet-based business to directly exchange the goods
and services it creates or distributes to consumers.
 C2B (Consumer to Business): is a consumer who sells their products or services to a
business or organization.
 C2C (Consumer to Consumer): is when a consumer sells his goods or services to another
consumer.
There are also G2C, G2B, etc., but used less often than these four basic forms.
3.1.3 ADVANTAGES OF E-COMMERCE:
 Global market: Clearly, when you open a physical store, you will only be able to deliver
your goods and services in a small geographic area. E-commerce will help you solve that
problem. E-commerce helps you reach the market quickly, expanding the market to the
maximum level compared to direct sales, so that products and services are easily
introduced, purchased and sold through retailers. and online market.
 Always open: In e-commerce, running an online business is much easier, it's always open
24h / 7/365. For businesses, it's a great opportunity to increase sales opportunities all the
time.
 Budget savings: Compared with traditional forms of commercial business, all costs when

Dept. of ISE, EPCET 2023-24 Page 6

E-Commerce application focus on book bazar 18CS185

e-commerce business are reduced: the cost of renting booths, salespeople and management
is much more economical. Naturally, when sellers save operating costs, they can offer
more incentives and better discounts for their customers. At this time, the customer is the
next beneficiary. Mutual benefit, isn't it great?
 Inventory management: By using electronic tools to speed up the ordering, delivery, and
payment processes, e-commerce businesses can save billions of operating costs and reduce
amount of inventory.
 Most accurate customer marketing: With access to customer data and the opportunity to
track customers' buying habits, e-commerce businesses can quickly identify and market
products and services. service. Service most suitable for consumers.
 Work anywhere, buy anywhere: Running an e-commerce business allows you to not need
to sit in the office, and buying does not force you to go to the supermarket. Everything the
seller and the buyer needs is an internet-connected device and that's all.
3.1.4 CHALLENGES OF E-COMMERCE:
 Internet access required: When participating in the EC, to be able to buy and sell, you need
a device connected to the internet. Currently, most people have internet access but, in many
areas, it is still very limited.
 Not enough to trust: Products and services that cannot be seen, touched, held or felt
directly, are not allowed to try as a prudent buyer. Doubt in both buyers and sellers leads to
many incomplete transactions, especially when they have dealt with untrusted partners
before.
 Limited payment methods: Currently, the most popular payment method in Vietnam when
buying goods online is to receive and pay. Payment gateway in Vietnam is growing quite
strong, but not reliable enough for users to use as the main payment method. Therefore, it
also contributes to teething.
In addition, e-commerce business also faces many other challenges: technical, competitors,
payment, etc.

3.2 THE MERN STACK:

MERN is one of the notable variants based on the MEAN stack. Basically, the MEAN stack was
initially established in 2013 by a MongoDB engineering team as a JavaScript-based stack in order to
aid in the development. MEAN comprises four open-source components: MongoDB acts as the
database, Express serves as the server framework, Angular as the client framework, and Node works
as the environment for running JavaScript. By substituting the popular framework Angular with
React – a client-side library – and combining them as the MERN stack, React can become
Dept. of ISE, EPCET 2023-24 Page 7
E-Commerce application focus on book bazar 18CS185

a companion to the other technologies for developing JavaScript and JSON-oriented applications.
Figure 1 below illustrates the architecture of the MERN stack technology

Figure 1 The architecture of the MERN stack

As illustrated, the MERN stack is constructed based on the well-known 3-tier architecture, which
confirms that the MERN stack is full-stack application development. The MERN stack consists of
three components: display layer powered by React, application layer with NodeJS and Express, and
database tier provided by MongoDB.

3.2.1 JAVASCRIPT:

JavaScript is a scripting, object-oriented, cross-platform programming language. Objects of host

environment can be connected to JavaScript and arrange ways to operate them.

Standard libraries for objects are contained by JavaScript, for such as Array, Date, Math, and the
essence component of programming languages for instance managers, control framework and
statements.

By adding objects, JavaScript could be protracted for many principles, such as:

 Client-side JavaScript: JavaScript is developed by implementing objects for controlling the

browser and DOM. For instance, an application is granted by client-side extensions to
influence components on an HTML page and answer to user behavior like mouse hovers,
form input and page changeover.

 Server-side JavaScript: JavaScript is developed by implementing the supplementary

objects required to run JavaScript on the server. For instance, an application is granted by
this server-side extension to connect to a database, transfer data frequently from one
request to other section of the application or execute application with another function file
on the server.

Dept. of ISE, EPCET 2023-24 Page 8

E-Commerce application focus on book bazar 18CS185

In 1996, JavaScript was officially named ECMAScript. ECMAScript 2 was released in 1998 and
ECMAScript 3 was released in 1999. It is continuously evolving into today's JavaScript, now works
on all browsers and devices from mobile to desktop. Open standard language can be used by
association to establish their own JavaScript applications. The ECMAScript Standard is one of the
parts of the ECMA-262 specification.

ISO has approved the ECMA-262 standard at ISO-16262. The ECMAScript standard does not
include descriptions for the DOM, it is standardized by the W3C. The DOM specifies how your
scripts display HTML objects. To get a advance anticipate of the distinctive innovations used when
programming with JavaScript, check out the JavaScript technology analysis article.

3.2.1 THE MERN STACK:

MongoDB is a cross-platform, open-source, NoSQL database that is mainly used for scalable large-
volume data applications and tasks that do not function well in a relational database. It utilizes a
document storage format known as BSON (Binary encoded JavaScript Object Notation). It is a
non-relational database management system created by Dwight Merriman, Eliot Horowitz, and
Kevin Ryan and became popular in the mid-2000s. MongoDB’s design is based on collections and
documents, as illustrated in Figure 2 below, which replace the usage of tables and rows in
conventional relational databases.

Figure 2. The architecture design of MongoDB

MongoDB also supports a variety of document operations, including adding, querying, updating,
and deleting. MongoDB is suitable for various use cases due to the diversity of field values and
powerful query languages. In addition, its ability to scale out to accommodate larger data volumes
horizontally has contributed to its increasing success as the world’s most popular NoSQL database.
There are some crucial features of MongoDB:
 Scheme-less Database: This feature allows a single collection to store numerous
documents, each of which contains a varied number of fields, content, and size. Therefore,

Dept. of ISE, EPCET 2023-24 Page 9

E-Commerce application focus on book bazar 18CS185

MongoDB offers tremendous flexibility to databases thanks to this fantastic feature.

 Document Oriented: All the data is kept in fields containing a clear structure with key-
valuepairs rather than rows and columns, which provides more flexibility than RDBMS.

 Indexing: Each field in MongoDB documents is indexed using primary and secondary
indices, making retrieving and searching for data more straightforward and faster. Without
accurate indices, the database must manually search each document for the matching
query, which is time-consuming and inefficient.

 Scalability: The horizontal scalability from MongoDB was offered through sharding,
which refers to the process of distributing data across numerous servers. By utilizing the
shard key, a significant quantity of data is divided into data chunks, and these data chunks
are equally spread among shards that involve multiple physical servers. Moreover, it will
add new machines to an existing database.

 Replication: With the benefit of replication, MongoDB enables high availability and
redundancy by producing several copies of data and storing them on a separate server to
protect the database against hardware failure, ensuring that the data can be recovered from
another if one server fails.

 Aggregation: procedures on the dataset are enabled to provide a single or calculated output
with three distinct aggregating methods, including pipeline aggregation, map-reduce
function, and single-purpose aggregation.

3.2.2 EXPRESS JS:

Representing the letter “E” in the MERN stack, Express is a lightweight and versatile web
application framework built on top of NodeJS. Thanks to the large community of support, it
includes a rich collection of functionalities for developing web and mobile applications. Even
though a large number of support packages along with the functionality for better software creation,
Express does not affect the performance of NodeJS.
Based on the GitHub repository, Express was established on May 22, 2010, by T.J. Holowaychuk.
After that, Strong Loop acquired the project management rights in June 2014 until IBM owned the
company in September 2015. Then, in January 2016, the NodeJS Foundation took over the
Dept. of ISE, EPCET 2023-24 Page 10
E-Commerce application focus on book bazar 18CS185

management of Express, and Express is now the primary function of the NodeJS platform.
Express.js is a routing and middleware framework for managing the many routing options for a
website. It operates between the request and response cycles. Middleware is invoked after the server
receives the request and before the controller actions transmit the response. One or more pieces of
middleware are executed to perform particular tasks, such as authorizing requests or parsing request
content. Express applications are composed of a sequence of middleware function calls. Typically,
the first middleware executed to process the request initiates the task pipeline. The initial
middleware can either complete the request and provide it to the users or call the subsequent
middleware to continue the request. The same approach will be continued until the pipeline's last
middleware takes the result of the preceding middleware as input.
3.2.3 REACT:

React, representing the letter ‘R’ in the MERN stack, focuses on creating the View Layer, which is
well-known for all visible parts of the page of an application. React is a multi-purposed, open-
source JavaScript library used for building user interfaces based on UI components.
Since React was established to cope with sophisticated, large-scale user interfaces combined with
real-time dynamic data and data binding, it has been steadily improving its single-page application
development and frontend utilities for programmers of all levels.
Compared to other popular libraries and frameworks such as jQuery, Angular, and VueJS, React is
considered the most popular framework for web development.
Along with offering reusable component code, which reduces development time and the likelihood
of bugs and errors, reacts introduced many essential characteristics that contribute to its developer
appeal, which are discussed below.
 VIRTUAL-DOM
Virtual-DOM is a JavaScript object, each object contains all the information needed to create a
DOM, when the data changes it will calculate the change between the object and the real tree,
which will help optimize re-render DOM tree. It can be assumed that is a virtual model can handle
client data.
 COMPONENT
React is built around components, not templates like other frameworks. A component can be
created by the create Class function of the React object, the starting point when accessing this
library.
ReactJS creates HTML tags unlike we normally write but uses Component to wrap HTML tags into
stratified objects to render. Among React Components, render function is the most important. It is a

Dept. of ISE, EPCET 2023-24 Page 11

E-Commerce application focus on book bazar 18CS185

function that handles the generation of HTML tags as well as a demonstration of the ability to
process via Virtual-DOM.
Any changes of data at any time will be processed and updated immediately by Virtual-DOM.
 PROPS AND STATE
Props: are not controlled by Component, actually stands for Properties.
The title = “Title” line creates a name attribute with the value "Title". It looks like a function call. It
is true that props are passed to the component in the same way that an argument is passed to a
function. A component may also have a default props, so if the component does not pass any props,
it will still be set.
State: private data is controlled by Component. Like props, sate also holds information about the
component. However, the type of information and how to handle it varies. State works differently
than Props. The state is a component of the component, while props are passed in from the outside
into the component. It should be noted that we should not update the state directly using this. State
but always use set State to update. Update the state of the objects. Use set State to rerenders one
component and all its children. This is great, because you don't have to worry about writing event
handlers like any other language.
 PROS AND CONS OF REACTJS:
Pros of ReactJS:
• Update data changes quickly.
• React is not a framework so it offloads the constraints of libraries together.
• Easy access to who understands JS.
Cons of ReactJS:
• ReactJS only serves the View tier, but the library size is on par with Angular while Angular is a
complete framework.
• Incorporating ReactJS within common MVC frameworks demands reconfiguration.
• Hard to reach for beginners on website developing.
3.2.4 NODE JS:

NodeJS is an open-source, cross-platform JavaScript runtime environment designed for

constructing scalable applications. NodeJS is independently built on top of Google Chrome’s V8
runtime engine, which is well-known for working effectively outside of a browser. By utilizing an
event-driven design and operating on a single-thread event loop, NodeJS allows asynchronous and
non-blocking I/O optimization to enhance web application performance and scalability, as shown in
Figure 5 below. Therefore, it provides an alternative approach for developers to wait and fulfill
requests for developing lightweight and real-time applications.
Dept. of ISE, EPCET 2023-24 Page 12
E-Commerce application focus on book bazar 18CS185

Figure 3. NodeJS event loop

Node package manager (NPM):

Node package manager (NPM) is the NodeJS default package manager for applications, and it is
utilized to maintain all of the NodeJS packages and modules along with the command line client
npm. Therefore, it facilitates time-consuming manual tasks by automating managing third-party
packages, allowing developers to spend more time on the development process.
NPM was first published on January 12, 2010, by Isaac Z. Schlueter. It is installed alongside
NodeJS and is utilized to install the required packages and modules in the NodeJS project. It is
currently the world's largest software registry, with approximately two million packages at the end
of March 2022.
Applications using NodeJS:
 WebSocket server
 Notification system
 Applications that need to upload files on the client.
 Other real-time data applications.

3.2.5 MYSQL
MySQL is an open-source database; it is also the leading NoSQL database currently used by
millions of people. It is written in one of the most popular programming languages today. In
addition, MySQL is cross-platform data that operates on the concepts of Collections and
Documents, providing high performance with high availability and ease of expansion.
NoSQL is a source database format that does not use Transact-SQL to access information, this
database was developed on JavaScript Framework on JSON data type. With its introduction, it has
overcome the disadvantages of RDBMS relational data model to improve operating speed,
functionality, model scalability, cache ...
Furthermore, MySQL is a cross-platform database, performing on Collection and Document
approach, it produces sharp production, huge availability, and effortless scalability.
Dept. of ISE, EPCET 2023-24 Page 13
E-Commerce application focus on book bazar 18CS185

Commonly used terms in MySQL:

 _id: Almost every document required this field. The _id field illustrates a exceptional value in
the MySQL document. The _id field can also be interpreted as the primary key in the
document. If you add a new document, MySQL will automatically generate a _id representing
that document and be unique in the MongoDB database.
 Collection: A group of many documents in MySQL. Collection can be interpreted as a
corresponding table in the RDBMS (Relational Database Management System) database.
Collection resides in a single database. Collections do not have to define columns, rows or
data types first.
 Cursor: This is a pointer to the outcome set of a query. The client can emphasize over a cursor
to get the result.
 Database: The location of the collections, similar to the RDMS database that contains the
tables. Each Database has a separate file stored on physical memory. Some MySQL owners
may contain various databases.
 Document: A transcript belonging to a Collection. Documents, in turn, include name and
value fields.
 Field: A name-value pair in a document. A document may not need all the fields. The fields
are like columns in a relational database.
 JSON: Short for JavaScript Object Notation. Human readability is in the plain text format
representing structured data. JSON currently supports a lot of programming languages.
 Index: Exclusive data structures used to save a small allocation of data sets for simple
scanning. The index puts the value of a individual field or sets of fields, sorted by the value
of these fields. Index effectively supports the analysis of queries. Without an index, MySQL
will have to scan all the documents of the set to choose the documents that pair the query.
This scan is ineffective and requires MySQL to progress a vast amount of data.
MySQL Atlas is MySQL cloud database launched in 2016 on AWS, Microsoft Azure and Google
Cloud Platform. The data in each Cluster in the Atlas is stored by Replication mechanism, with 3
nodes: 1 master (primary) and 2 slaves (secondary).
3.2.6 MERN STACK IN WEBSITE DEVELOPMENT
 Concept of Stack technology
The technical stack is a combination of technologies / frameworks / programming languages, etc. to
create a complete software. With current software, there are usually two parts: client side and server
side, also known as frontend and backend. Therefore, people also split the backend stack, the
frontend stack as well. We often use the first letter to name the technical stack: LAMP (Linux,

Dept. of ISE, EPCET 2023-24 Page 14

E-Commerce application focus on book bazar 18CS185

Apache, MySQL, PHP), MEAN (MySQL, Express, Angular, NodeJS).

 Concept of MERN Stack

The MERN stack is a complete open-source combination, all JavaScript-related technologies are
also the hottest today: MySQL, Express.js, React / React Native, NodeJS. People use the MERN
stack to build Universal React App.

 Highlights in MERN Stack

 Hot Reloading for React Components.
 The code snippets are divided by React Router.
 Multi-language support. • Generate code support.
 Modular structure.
 Docker support.
 Can customize the MERN version for dividual users.

Dept. of ISE, EPCET 2023-24 Page 15

E-Commerce application focus on book bazar 18CS185

CHAPTER 4

INTRODUCTION TO PROJECT WORK

MERN stack is a commonly used combination of technologies for building modern web
applications, comprising MongoDB, Express.js, React, and Node.js. E-commerce websites are
increasingly important due to the rise of online shopping. This literature review discusses the use of
the MERN stack for e-commerce website development, covering its advantages, technical aspects,
security considerations, case studies, best practices, and future developments.
Scalability is a key advantage of using the MERN stack for e-commerce website development. The
modular architecture allows easy scaling of the application, while the use of MongoDB as a NoSQL
database enables flexible data modelling for complex and dynamic data structures. Another
advantage is the stack's performance, which is boosted by its ability to handle both client-side and
server-side components. Furthermore, React allows for the efficient rendering of components, thus
reducing load times.
Developing an e-commerce website using the MERN stack involves creating an API with
Express.js for server-side communication. MongoDB stores and retrieves data while React builds
dynamic and responsive user interfaces. Node.js is used for server-side scripting to enable real-time
communication between client-side and server-side components.
Security is a critical aspect of e-commerce website development, and the MERN stack provides
several features to ensure the security of the application. MongoDB provides authentication and
access control, and SSL/TLS encryption for secure communication. Express.js handles
authentication and authorization and can be used to prevent common security vulnerabilities. React
and Node.js support SSL/TLS encryption and XSS protection.
Several successful e-commerce websites have been built using the MERN stack, such as Grofers in
India and U buy in the Middle East.
Best practices for e-commerce website development using the MERN stack include optimizing
performance, testing thoroughly for reliability and security, deploying to a reliable and scalable
infrastructure, and maintaining the application through regular updates and bug fixes. Additionally,
it is important to adhere to industry standards and regulations such as PCI DSS compliance for
payment processing.
One of the potential drawbacks of using the MERN stack for e-commerce website development is
its learning curve. The technology stack requires expertise in multiple technologies, which can be
challenging for novice developers. Additionally, the modularityof the MERN stack can result in a

Dept. of ISE, EPCET 2023-24 Page 16

E-Commerce application focus on book bazar 18CS185

large number of dependencies, which can increase the complexity of the application and make
maintenance more difficult. Finally, the MERN stack may not be the most appropriate choice for all
e-commerce websites, particularly those with simpler requirements.

4.1 PROBLEM STATEMENT:

Due to the growing popularity of online book sales, the usual brick-and-mortar retailers have
encountered several difficulties. More individuals are now buying their books from online stores
since online book sales have increased significantly recently. The bulk of online book vendors,
however, don't offer the same level of interaction and customer care as traditional brick-and-mortar
bookstores.
The issue is that there isn't an online bookshop that can provide clients the specialized care and in-
person interaction of a brick-and-mortar store while still offering the ease of an online purchase.
Most online book retailers do not provide the elements that customers need, such as the ability to
explore and discover new books, communicate with other readers, and get individualized
suggestions.
Making a book-based e-commerce website that makes use of the MERN stack might solve this
issue. This internet application may offer readers a platform for finding new books, interacting with
one another, and buying online for their preferred books. The MERN stack can provide an e-
commerce website the flexibility, scalability, and user-friendliness needed.
The website has a reader community where users may interact and recommend books, as well as a
straightforward user interface and tailored recommendations. The website may employ a range of
social media and marketing strategies, including email marketing and social media advertising, to
raise its profile and draw in more visitors.
By providing a platform that offers a tailored user experience, book recommendations, and a reader
community while also providing the convenience of online shopping, a book-based e-commerce
website built on the MERN stack aims to bridge the gap between traditional brick-and-mortar
bookstores and online bookstores
4.2 EXISTING SYSTEM:
The present scenario for shopping is to visit the shops and market manually and then from the
available product list one needs to choose the item he or she wants and then pay for the same item
mainly in cash mode is done, as not every society is well educated and aware to use net banking or
card modes or wallets etc.
This system is not much user-friendly as one needs to go to the market physically and then select
items only from the available list. So mostly it is difficult to get the product as per our desire.

Dept. of ISE, EPCET 2023-24 Page 17

E-Commerce application focus on book bazar 18CS185

Description About the products is less available and are mostly verbal only. For this type of
shopping, one needs to have an ample amount of free time

4.3 PROPOSED SYSTEM:

The proposed system for an e-commerce website using the MERN stack will leverage the latest
technologies to provide a user-friendly, secure, and scalable e-commerce platform. The MERN
stack, comprising MongoDB, Express.js, React, and Node.js, will be used to develop a robust and
dynamic e-commerce website that will enable businesses to sell products online.
The proposed system will have a client-server architecture, with the server-side component built
using the MERN stack. MongoDB will be used as the database to store and retrieve data, and
Express.js will handle the server-side communication and routing. Node.js will be used for server-
side scripting, allowing real-time communication between the client-side and server-side
components.
The client-side component will be developed using React, which will enable the creation of
dynamic and responsive user interfaces. React will also provide an efficient rendering of
components, resulting in reduced load times and enhanced user experience. Additionally, the
proposed system will be developed using a modular approach, allowing for easy scaling of the
application.
4.4 IMPLEMENTATION OF PROJECT:
To address the challenges posed by the rise of online book sales and the limitations of traditional
brick-and-mortar retailers, a solution in the form of a book-based e-commerce website utilizing the
MERN stack is proposed. This platform seeks to provide a seamless fusion of the personalized care
and in-person interactions characteristic of brick-and-mortar stores with the convenience and
accessibility of online purchasing. By leveraging the MERN stack, the website can offer a flexible
and scalable infrastructure, ensuring a user-friendly experience for customers. Key features include
a reader community where users can interact, share recommendations, and engage in discussions,
alongside a streamlined user interface and personalized book suggestions. Furthermore, employing
various social media and marketing strategies such as email campaigns and social media advertising
can help boost the platform's visibility and attract more visitors. Ultimately, by offering tailored
user experiences, curated book recommendations, and fostering a vibrant reader community, this
book-based e-commerce website aims to bridge the gap between traditional and online bookstores,
catering to the evolving needs of modern readers.
Planning and Requirements Gathering:
Identify key features and functionalities based on the problem statement, such as user registration,
book browsing, community interaction, personalized recommendations, and online purchasing.
Dept. of ISE, EPCET 2023-24 Page 18
E-Commerce application focus on book bazar 18CS185

Define user stories and wireframes to visualize the website's layout and flow.
Setting Up the Development Environment:
 Install Node.js, MongoDB, and Express.js for backend development.
 Choose a frontend framework like React.js for building the user interface.
 Set up the project structure and configuration files.
Backend Development:
 Create APIs using Express.js to handle user authentication, book management, community
interactions, and purchasing.
 Implement MongoDB to store user data, book information, and community discussions.
 Develop middleware for authentication and authorization.
Frontend Development:
 Build React components for different pages and functionalities, such as user
registration/login, book browsing, community forums, and checkout.
 Utilize libraries like React Router for client-side routing and Axios for making HTTP
requests to the backend APIs.
 Design responsive and user-friendly interfaces using CSS frameworks like Bootstrap or
Material-UI.
Integration and Testing:
 Connect the frontend and backend components to ensure seamless communication.
 Perform unit tests and integration tests to validate the functionality of each feature.
 Conduct user testing and gather feedback for improvements.
Deployment and Hosting:
 Deploy the application to a hosting platform like Heroku or AWS.
 Configure domain settings and SSL certificates for secure communication.
 Monitor performance and scalability of the deployed application.
Community Engagement and Marketing:
 Implement features to encourage user interaction, such as forums, comments, and book
reviews.
 Utilize social media platforms for promoting the website and engaging with the target
audience.
 Launch email marketing campaigns to notify users about new books, community events,
and special offers.
Continuous Improvement:
 Collect analytics data to track user behavior and website performance.
 Iterate on the website based on user feedback and market trends.
Dept. of ISE, EPCET 2023-24 Page 19
E-Commerce application focus on book bazar 18CS185

 Regularly update content and features to keep the website engaging and relevant.
4.5 SOURCE CODE
BACKEND CODE
 Index. JS:
import express from "express";
import mysql from "mysql";
import cors from "cors";

const app = express();

app.use(cors());
app.use(express.json());

const db = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "test",
});

app.get("/", (req, res) => {

res.json("hello");
});

app.get("/books", (req, res) => {

const q = "SELECT * FROM books";
db.query(q, (err, data) => {
if (err) {
console.log(err);
return res.json(err);
}
return res.json(data);
});
});
app.post("/books", (req, res) => {

Dept. of ISE, EPCET 2023-24 Page 20

E-Commerce application focus on book bazar 18CS185

const q = "INSERT INTO books(`title`, `desc`, `cover`) VALUES (?)";

const values = [
req.body.title,
req.body.desc,
req.body.cover,
];

db.query(q, [values], (err, data) => {

if (err) return res.send(err);
return res.json("book created");
});
});

app.delete("/books/:id", (req, res) => {

const bookId = req.params.id;
const q = " DELETE FROM books WHERE id = ? ";

db.query(q, [bookId], (err, data) => {

if (err) return res.send(err);
return res.json(data);
});
});

//http://localhost/phpmyadmin/

app.listen(8800, () => {
console.log("Connected to backend.");
});

 Package Json:
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "index.js",

Dept. of ISE, EPCET 2023-24 Page 21

E-Commerce application focus on book bazar 18CS185

"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.18.2",
"mysql": "^2.18.1",
"nodemon": "^3.0.1"
}
}
Client code
 Index Html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See
https://developers.google.com/web/fundamentals/web-app-manifest/
-->

Dept. of ISE, EPCET 2023-24 Page 22

E-Commerce application focus on book bazar 18CS185

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will

work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.

The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.

To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

 Package Json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {

Dept. of ISE, EPCET 2023-24 Page 23

E-Commerce application focus on book bazar 18CS185

"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.5.0",
"axis": "^1.0.0",
"axois": "^0.0.1-security",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.15.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
Dept. of ISE, EPCET 2023-24 Page 24
E-Commerce application focus on book bazar 18CS185

CHAPTER 5
RESULT/SNAPSHOTS

Fig 5.1: Main Home Page

The home page of the app. It includes the indispensable components of an online store like the
function bar, the search bar and a list of products. Customers who visit the store can search for
the products they want to buy and they can customize the filter on the toolbar to be able to buy the
best products.

Fig 5.2: Admin Dashboard Screen

Dept. of ISE, EPCET 2023-24 Page 25

E-Commerce application focus on book bazar 18CS185

On the Admin Dashboard, the admin can create products, categories and manage them.
These functions are very useful for a store owner.

Fig 5.3: Add a new product screen.

Store owner can add the new products, as they can manage them. Similar with the sign up and sign
in, all the strings are stored into MySQL database.

Fig 5.4: Order details screen.

All of the order details of customers made in history are recorded. In figure 15, admin can see all of
the orders then the show owner can set the shipping status for each order individually.

Dept. of ISE, EPCET 2023-24 Page 26

E-Commerce application focus on book bazar 18CS185

Fig 5.5 Shop Page

The main shop page that customers can select the products that they want to add to cart. User can
scroll down the mouse to browse all the products, or filter by categories or filter by price range like
Figure 5.5 In each product, user can see it short description and their available status. Therefore,
customer can consider about buying it or not.

Dept. of ISE, EPCET 2023-24 Page 27

E-Commerce application focus on book bazar 18CS185

Dept. of ISE, EPCET 2023-24 Page 28

E-Commerce application focus on book bazar 18CS185

CONCLUSION
In conclusion, the shift towards online book sales has presented significant challenges for
traditional brick-and-mortar retailers, who struggle to match the level of interaction and customer
care offered by their online counterparts. While online book vendors provide convenience, they
often lack the personalized experience and community engagement that customers value. To
address this gap, the proposition of a book-based e-commerce website utilizing the MERN stack
emerges as a viable solution. This platform aims to combine the convenience of online shopping
with the personalized care and in-person interactions found in brick-and-mortar stores. By
leveraging the flexibility, scalability, and user-friendliness of the MERN stack, the website can
offer a tailored user experience, including personalized book recommendations and a vibrant reader
community. Additionally, employing social media and marketing strategies can enhance the
platform's visibility and attract more users. Overall, the implementation of a book-based e-
commerce website built on the MERN stack seeks to bridge the gap between traditional and online
bookstores, providing customers with a platform to discover new books, interact with fellow
readers, and make purchases with ease. This solution addresses the evolving needs of modern
readers while preserving the essence of traditional bookstores in an online environment.

Dept. of ISE, EPCET 2023-24 Page 29

 REFERENCES

1. E-commerce Definition – What is E-commerce? [Internet]. Shopify.com. Available from:

https://www.shopify.com/encyclopedia/what-is-ecommerce

2. Advantages of E-commerce [Internet][20 November 2019] Available from:

https://www.thebalancesmb.com/ecommercepros- and-cons-1141609

3. JavaScript [Internet]. Mozilla.org. Available from:

https://developer.mozilla.org/en-US/docs/Web/JavaScript

4. NodeJS Introduction [Internet]. Tutorialspoint.com. Available from:

https://www.tutorialspoint.com/nodejs/nodejs_introduction.htm

5. NodeJS Pros and Cons [Internet]. Mindinventory.com. Available from:

https://www.mindinventory.com/blog/pros-and-cons-of-node-js-web-app-development/

6. NodeJS use cases [Internet]. Credencys.com. Available from:

https://www.credencys.com/blog/node-js-development-use-cases/

7. Express.js Introduction [Internet]. Mozilla.org. Available from:

https://developer. mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction

8. MySQL [Internet]. Mysql.com. Available from:

https://docs.mongodb.com/manual/introduction/

9. Virtual-DOM [Internet]. Reactjs.org. Available from:

https://reactjs.org/docs/faqinternals.Html

10. Component [Internet]. Reactjs.org. Available from:

https://reactjs.org/docs/components-and-props.html