AN INDUSTRIAL TRAINING REPORT

ON

FULL STACK WEB DEVELOPMENT USING MERN

Submitted in the Partial Fulfillment of the Requirement for the Award of

Bachelor of Technology
IN

Computer Science & Engineering

Submitted By

Vishal Sharma
2004850100130

Under the Guidance of

Saif Zaheer
Assistant Professor
SR Institute Of Management And Technology
BKT, Lucknow

Submitted to
Department of Computer Science & Engineering

SR INSTITUTE OF MANAGEMENT & TECHNOLOGY, LUCKNOW, UP

(Recognized by AICTE, Govt. of India & Affiliated to Dr. A.P.J. Abdul Kalam Technical University, Lucknow, UP)

AKTU College Code – 485

JULY (2023-24)

1
 TRAINING OUTCOME

CO1: In a specialization domain of choice, students will be able to choose an appropriate

topic for study and will be able to clearly formulate & state a research problem and analyze
and understand the real-life problems and apply their knowledge to get programming
Solution.

CO2: For a selected Project topic, students will be able to compile the relevant literature and
frame hypotheses for project as applicable and engage in the creative design process through
the integration and application of diverse technical knowledge and expertise to meet
customer need and address socials issues.

CO3: For a selected topic, student manager will be able to plan a research design including
the sampling, observational, statistical and operational designs if any and, Use the various
tools and techniques, coding practices for developing real life solution to the problems.

CO4: For a selected topic, student manager will be able to compile relevant data, interpret &
analyze it and test the hypotheses wherever applicable and Find out the error in software
solution and establishing the process to design maintainable software solution.

CO5: Based on the analysis and interpretation of the data collected, students will be able to
arrive at logical conclusions and propose suitable recommendations on the research problem.
Student manager will be able to create a logically coherent project report and will be able to
defend work in front of a panel of examiners and, Write the report about what they are doing
in project and learning the team skills.

2
 CONTENT
S. No. Topics Page No.
1 Cover Page i
3 Training Outcome ii
4 Certificate (Training) iii
5 Content (Index) iv
6 Chapter 1 : Survey of Technology 5- 18
1.1 Brief Introduction 5
1.2 Technology Used (Front End, Backend, Database) 6-15
1.3 Scope of Technology 16
1.4 IDE, API, Various Tools 18
7 Chapter 2 : Requirement and Analysis 19 - 24
2.1 Problem Definition 19
2.2 Planning & Scheduling (Flow Chart & Gantt Chart) 20-21
2.3 Software / Hardware Requirements 22-23
2.4 SDLC Model 24
8 Chapter 3 : System Design 25 - 26
3.1 DFD (0–Level, 1–Level, 2–Level, 3-Level*) 25
3.2 ER - Diagram 25
3.3 Data Structure (Tables of Database) 26
9 Chapter 4 : Project Work 27 - 40
10 Chapter 5 : References & Bibliography 41 - 42
5.1 References 41
5.2 Bibliography 42

3
 List of Abbreviations
 DOM Document Object Model

 W3C World Wide Web Consortium.

 ISO International Organization for Standardization

 NPM Node Package Manager

 API Application Program Interface

 HTML Hypertext Markup Language

 HTTP Hypertext Transfer Protocol

 URL Uniform Resource Locator

 JSON JavaScript Object Notation

 JS JavaScript

 JSX JavaScript XML

4
 Chapter 1 : Survey of Technology
1.1 Introduction
It is true that technology has become an essential tool for online marketing nowadays.
However, there are numerous small shops and grocery stores with mostly offline business
model in Vietnam recently. With this commerce model, it will bring a lot of bad experiences
for both buyers and sellers. For instance, the seller has the product want to offer but the buyer
may not know it, or the buyer may urgently need to purchase something, but the store is out
of stock. Moreover, online shopping helps customers to choose a wide range of products,
prices and they can compare them to each other easily.

Encountering the inadequacies and the weaknesses of the offline business model, making a
website application for searching and buying things for each shop is very necessary right
now.

Recently, there have been many e-commerce sites exported such as Amazon, Flipkart, e-bay
or the stores that can sell products via social media channels like Facebook. However,
customers still find it difficult to choose the products they want because of the large variety
of products on these sites and not focus on specific things. Moreover, the sellers have to
spend a high amount of money on marketing or paying for fees.

From there disadvantages, implement an online e-commerce web application for small
grocery stores helps retailers can manage products on their own systems and not depend on
the 3rd party website. For the customers, they can quickly search the products if it is
available and come to store to pick it up and they can contact directly to the shop owner to
learn more about the products that they are looking for.

In order to make a website that can acquire the needs of both customers and retailers, MERN
(MongoDB, Express.js framework, ReactJS library, NodeJS platform) is one of the powerful
stacks that can help us to develop an e-commerce web application.

5
1.2 Technology Used (Front End, Backend, Database)
1.2.1 E-commerce
 Definition

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).

 Types

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.

 Advantages

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

6
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 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.

 Challenges

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

7
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.

1.2.2 MERN Stack

 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.

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

8
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.

 NodeJS

Node.js is an open source, a system application and furthermore is an environment for

servers. Nodejs is an independent development platform built on Chrome's JavaScript
Runtime that we can build network applications quickly and easily.

Google V8 JavaScript engine is used by Node.js to execute code. Moreover, a huge

proportion of essential modules are written in JavaScript

Node.js accommodate a built-in library which allows applications to serve as a Webserver

left out demanding software like Apache HTTP Server, Nginx or IIS.

An event-driven, non-blocking I / O mechanisms (Input / Output) are implemented by

Node.js. It optimizes application throughout and is extremely high extensible.

Node.js use asynchronous in it functions. Therefore, Node.js processes and executes all tasks
in the background (background processing).

products that have a lot of traffic are applying Node.js. Nonetheless, Node.js handle the
application that need to spread expeditiously, develop innovation, or build Startup projects as
rapidly as possible.

Applications using NodeJS:

 WebSocket server

9
  Notification system

 Applications that need to upload files on the client.

 Other real-time data applications

NodeJS Pros:

 Node.js is the exclusive application that with only a single thread, it can obtain and
handle numerous connections. Building new threads for each query is not needed,
therefore the structure expends the least amount of RAM and run rapidly. Secondly,
Node.js produces the most of server property without generate latency with the
JavaScript’s non-blocking I/O.

 JSON APIs. JSON Web services can take advantages of that because of the event-
driven, non-blocking I/O structures and JavaScript-enabled model.

 Single page application. NodeJS is very suitable with an application on a single page.
Node.js has the capability to handle different requests concurrent and quick return.
Node JS should be used in an application that does not have to reload the page,
including users who makes a vast number of requests and need a quick procedure to
show professionalism.

 Shelling tools Unix. Node.js usually uses Unix to work. They can handle multiple
processes and return them for best performance. Programmers often use Node.js to
build real Web applications like chat, feeds, etc.

 Streaming Data. Typical websites send HTTP requests and also receive responses.
Node.js can handle many questions and feedback, so they are suitable if the developer
wants to create an application on the page. In addition, Node.js also builds proxies to
stream the data, this is to ensure maximum operation for other data streams.

 Real-time Web Application. Node.js is sufficient to develop real-time innovations

like chat apps, social networking services like Facebook, Twitter because of the
opening of mobile application.

NodeJS Cons:

10
  Resource-intensive applications. Node.js is written in C ++ & JavaScript, so when
programmers need to handle applications that use a lot of file conversion, video
encoding, decoding, etc., they should not be used Node.js. Programmers need to use it
more carefully in this case.

 The final purpose of NodeJS is like other programming languages such as Ruby, PHP,
.NET, Python, that is developing web application. Therefore, do not expect NodeJS to
outperform other language for now. But with NodeJS the application can be developed
successfully as expected.

NodeJS should not be used when:

 Build resource-intensive applications: Do not use Node.js when creating a video

converter application. Node.js often comes down to bottlenecks when working with
large files.

 An all-CRUD-only application: Node.js is not faster than PHP when doing heavy I/O
tasks. In addition, with the long-term stability of other webserver scripts, its CRUD
tasks have been optimized.

 Node.js will come up with odd APIs and never be used.

 Stability in the application: Within 11 years of development (2009-2020), the current

version of Node.js is already v14.2.0. Every API can be changed – in a way that is not
backwards compatible.

 Lack of knowledge about Node.js: Node.js is extremely dangerous in this case, you
will fall into a world full of difficulties. With most non-blocking/async APIs, not
understanding the problem will cause an error that you do not even know where it
came from. Moreover, when the Node.js community is not strong enough, and there
will be less support from the community.

NodeJS should be used when:

11
  Building RESTful API (JSON). You can use Node.js in building RESTful API
(JSON). They handle JSON very easily, even more than JavaScript.

 API servers when using Node.js usually do not have to perform heavy processing, but
the number of concurrent requests is high.

 Applications that demand alternative connection protocols, not just http. With TCP
protocol backing, any custom protocol can be built easily

 Real-time applications.

 Stateful websites. Every request on the invariable procedure is handled by Node.js,

therefore building caching is simpler: store it to a comprehensive variable then all
requests can approach the cache.

 The status of one client can be saved and shared with other clients and do not have to
go through external memory.

 Express.js

Express.js is a framework built on top of Nodejs. It provides powerful features for web or
mobile development.

Express.js supports HTTP and middleware methods, making the API extremely powerful and
easy to use

Express implements extra features to developer which help them get a better programming
environment, not scaling down the speed of NodeJS.

 MongoDB

12
MongoDB 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, MongoDB 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, MongoDB is a cross-platform database, performing on Collection and

Document approach, it produces sharp production, huge availability, and effortless
scalability.

Commonly used terms in MongoDB:

 _id: Almost every document required this field. The _id field illustrates a exceptional
value in the MongoDB document. The _id field can also be interpreted as the primary
key in the document. If you add a new document, MongoDB will automatically
generate a _id representing that document and be unique in the MongoDB database.

 Collection: A group of many documents in MongoDB. 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
MongoDB owners may contain various databases.
13
  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, MongoDB will have to scan all the documents of the set to choose the
documents that pair the query. This scan is ineffective and requires MongoDB to
progress a vast amount of data.

MongoDB Atlas is MongoDB's 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).

 ReactJS

 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
14
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 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.

15
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 re-renders one component
and all its children. This is great, because you don't have to worry about writing event
handlers like any other language.

16
 1.3 SCOPE OF TECHNOLOGY

The amalgamation of frontend, backend, and database technologies played a pivotal role
in shaping the landscape of web applications. This section explores the vast scope of
technology in each of these domains.

FRONTEND TECHNOLOGY:

Frontend Development is the user-facing aspect of web applications, encompassing the

visual design and interactive elements that users interact with. The scope of frontend
technology extends to: UI design, Responsive design, Web accessibility, interactive
features, Cross-Browser compatibility.

BACKEND TECHNOLOGY:

Backend Development manages the server-side logic, databases, and the communication
between the frontend and database. The scope of backend technology includes: Security,
Web servers, Api development, Scalability.

DATABASE TECHNOLOGY:

A solid DBMS is essential for data storage, retrieval, and management. The scope of
database technology encompasses: Data Modeling, Querying and data manipulation,
Database optimization, Data Security, Scalability.

INTEGRATION AND COLLABORATION:

One of the most significant aspects of technology's scope is its integration across
frontend, backend, and database layers. These technologies work collaboratively to create
seamless and responsive web applications that meet user needs and business objectives.

The scope of technology in this context involves:

1) Enabling real-time data updates and synchronization between the frontend and
database.

2) Facilitating communication and data exchange between frontend and backend systems.

17
 1.4 IDE, API, VARIOUS TOOLS

INTEGRATED DEVELOPMENT ENVIRONMENT(IDE):

An IDE is the primary workspace for developers, offering a range of tools to facilitate
coding, debugging, and project management. During my training, I had the opportunity to
work with Visual Studio Code, which provided a powerful and streamlined development
environment.

Key features of the IDE :

Code Editor: A feature-rich code editor with syntax highlighting and auto-completion
capabilities.

Version Control: Integration with version control systems such as Git for efficient code
collaboration and management.

Debugging Tools: Robust debugging tools to identify and resolve issues in the codebase.

Project Management: Project organization and management features to keep track of

tasks, dependencies, and milestones.

Built-in Server: A built-in web server for local development and testing.

APPLICATION PROGRAMMING INTERFACES(APIs):

Authentication and Security APIs: Authentication and security APIs provide essential
security layers, such as OAuth and JWT, to safeguard user data and transactions.

Social Media APIs: Social media APIs enable e-commerce businesses to connect with
social platforms, share products, and facilitate user engagement and marketing efforts.

Product Catalog APIs: Product catalog APIs allow e-commerce websites to access and
display product information, including images, descriptions, and pricing, from a
centralized database or third-party sources.

18
Shipping APIs: Shipping APIs integrate e-commerce platforms with shipping carriers
and logistics services to provide real-time shipping rates, tracking, and label generation.
Prominent options include Twilio etc.

19
DEVELOPMENT TOOLS:
Developers in the e-commerce industry rely on a variety of specialized tools to enhance

and streamline the development process. These tools include:

Content Management Systems(CMS):

CMS platforms like WordPress, Shopify, and Magento provide a foundation for creating and

managing e-commerce websites, offering templates, plugins, and customization options.

Analytics and Reporting Tools:

Analytics tools like Google Analytics and e-commerce-specific reporting solutions offer insights

into user behavior, sales performance, and marketing effectiveness.

Testing and Quality Assurance Tools:

Testing tools such as Selenium and JUnit ensure the functionality and reliability of e-

websites, including user experience testing, load testing, and security testing.

Search Engine Optimization(SEO) Tools:

SEO tools like Moz and SEMrush aid in optimizing e-commerce websites for search engines,

improving visibility and driving organic traffic.

Email Marketing and Customer Relationship Management (CRM) Tools:

20
These will help in e-commerce businesses manage customer relationships, send targeted

campaigns, and analyze customer data.

Chapter 2 : Requirement and Analysis

2.1 PROBLEM DEFINITION

MARKET SATURATION:
One of the primary challenges in the e-commerce landscape is market saturation. With an
abundance of online stores, competition is fierce. Identifying niche markets and
differentiating products or services becomes increasingly difficult. The problem can be
summarized as follows:

Problem Statement: "How can e-commerce businesses effectively differentiate

themselves and target specific niche markets in a saturated online marketplace?"

CART ABANDONMENT:
Cart abandonment is a pervasive issue in e-commerce. Many users browse products, add
items to their shopping carts, but ultimately abandon the purchase before completing it.
This poses a substantial revenue loss for e-commerce businesses. The problem can be
summarized as follows:

Problem Statement: "How can e-commerce businesses reduce cart abandonment rates
and encourage users to complete their purchases?"

USER EXPERIENCE AND CONVERSION OPTIMIZATION:

User experience (UX) is paramount in e-commerce. A cumbersome or confusing website
interface can deter users from making purchases. Additionally, optimizing the conversion
funnel to turn website visitors into paying customers is a persistent challenge. The
problem can be summarized as follows:
21
Problem Statement: "How can e-commerce businesses enhance the user experience and
optimize conversion rate stomaximize sales?

22
 2.2 PLANNING AND SCHEDULING

E-commerce operations involve numerous complex tasks, from product sourcing and
inventory management to website development and digital marketing. The ability to
coordinate and manage these tasks efficiently is paramount. Effective planning and
scheduling offer several benefits, including:

Resource Allocation: Allocating human and financial resources optimally.

Timeline Management: Ensuring tasks are completed within specified

timeframes. Risk Mitigation: Identifying and addressing potential

bottlenecks and challenges. Quality Assurance: Maintaining high

standards of product/service quality.

Stakeholder Communication: Enhancing communication with stakeholders.

FLOW CHART:

23
GANTT CHART:
Gantt charts are timeline-based project management tools used to schedule, track, and
manage tasks in e-commerce projects. They offer a visual representation of task
durations, dependencies, and milestones.

Throughout my training, Gantt charts were instrumental in:

Project Planning: Outlining the entire project's timeline, including major milestones.

Task Allocation: Assigning specific tasks to team members.

Progress Tracking: Monitoring task completion and identifying delays.

Resource Management: Allocating resources effectively based on project needs.

24
25
 2.3 SOFTWARE / HARDWARE REQUIREMENTS

SOFTWARE REQUIREMENTS:

E-commerce Platform:

E-commerce platforms like Shopify, WooCommerce, Magento, and custom-built

solutions serve as the foundation for online stores. These platforms provide essential
features for product listings, shopping carts, checkout processes, and payment
integration.

Content Management System(CMS):

A robust CMS, such as WordPress, Drupal, or Joomla, is often integrated with e-

commerce platforms to manage product catalogs, website content, and blog posts. It
facilitates content updates and SEO optimization.

Payment Gateway Integration:

Payment gateway software, including PayPal, Stripe, and Square, is essential for secure
online transactions. Integration ensures that customers can make purchases using various
payment methods, enhancing convenience and trust.

Security Software:

E-commerce sites must employ security software and protocols to protect customer data
and financial transactions. This includes SSL certificates, firewalls, and vulnerability
scanners.

Analytics and Reporting Tools:

Tools like Google Analytics provide insights into website traffic, user behavior, and sales
performance. This data is crucial for informed decision-making and optimization efforts.

26
HARDWARE REQUIREMENTS:

Servers and Hosting:

E-commerce websites require robust server infrastructure to handle website traffic,

especially during peak shopping seasons. Cloud hosting services like AWS, Azure, or
dedicated servers are common choices.

Content Delivery Network(CDN):

CDNs like Cloudflare or Akamai enhance website performance by distributing

content across multiple servers worldwide, reducing latency and improving load
times.

Point-of-Sale (POS) Systems:

Physical retail stores or businesses with both online and offline presence may require
POS hardware and software for in-store sales integration.

Security Devices:

Physical security devices, such as surveillance cameras and alarm systems, are
essential for protecting inventory and facilities in e-commerce warehouses and stores.

Mobile Devices:

Mobile devices such as smartphones and tablets are critical for on-the-go access to e-
commerce websites and applications. Ensuring mobile responsiveness is essential.

Barcode Scanners and Label Printers:

For efficient inventory management and order processing, barcode scanners and label
printers may be necessary in warehouses and fulfillment centers.

xxvii
 2.4 SDLC MODEL

Various SDLC models can be adapted to suit the specific needs of e-commerce
projects.Common SDLC models applied in e-commerce development include:

Waterfall Model:

The Waterfall model is a linear and sequential approach. It suits e-commerce projects
with well- defined requirements and stable, unchanging business goals. Each phase,
including requirements, design, implementation, testing, and maintenance, follows in
a strict sequence.

Agile Model:

Agile methodologies, such as Scrum and Kanban, are highly adaptable and iterative.
Agile suits e- commerce projects with evolving requirements or those requiring
frequent updates and enhancements. It focuses on delivering small, incremental
changes in short cycles, promoting flexibility and client collaboration.

Iterative Model:

The Iterative model involves multiple cycles of development, each refining and
improving the product. It is suitable for complex e-commerce projects where
feedback and continuous improvement are essential. Each iteration enhances the
system based on user feedback.

SDLC PHASES:
Regardless of the chosen model, the SDLC in e-commerce typically consists of the
following phases:

1) Planning

2) Analysis

xxviii
 Chapter 3 : System Design
3.1 DFD (DATA FLOW DIAGRAM)

3.2 ER-DIAGRAM (ENTITY RELATIONSHIP DIAGRAM)

xxix
3.3 Data Structure (Tables of Database)

xxx
 Chapter 4 : Project Work

E-Shop E-commerce Web Application

E-Shop is an E-commerce Web Application using MERN stack that can help a cloth
retailer bring their products to the customers. Main function:

 Sign up and log in: Requires Users to register using their phone number or email.

 Shopping cart: this feature helps users buy and check goods directly on the
application.

 Search: Users can search directly by typing in the search box for the product they
want to see.

 Buy and pay: Customers who buy through the app can pay through many different
payment gateways.

xxxi
Home Page

Main Home page

On the figure 4 can see 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.

xxxii
The New Arrivals section list all the products those are recently added to the database in
MongoDB. As it can be seen at figure 5, there are Best Sellers section beside the New
Arrivals.

React Hook is taking a big advantage in displaying these sorted products. The figure 6
below show how to use hook with our database.

At first, the products By Sell and products By Arrival are empty arrays, then the load
Products By Sell and load Products By Arrival functions get the correct data from the
database and change the state of those arrays.

xxxiii
The getProducts fetch the API and take data from backend by each keyword. If data have
any error, it will return the err, or it will return the list of products.

The Search Bar used for the searching products by name and can be filtered out by
categories. Here is the main method for it in Figure 7.

If there is no error it will return a list of products that is searched before.

xxxiv
Login System

The login system of the app will ask the user to provide the username and password
either they are customer or admin.

xxxv
Sign Up

Users login into the website need to sign in otherwise they have to register a new
account. In figure 8, the sign-up screen only has 4 fields that require users to fill in is
Name, Mobile, Email and Password.

xxxvi
Dashboard
Admin Dashboard

Admin Dashboard Login Screen

Admin Dashboard Screen

In figure 13, the 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 MongoDB database.

xxxvii
User Dashboard

Beside creating the dashboard for admin, user dashboard is important also. In figure 17,
customer can view their cart, purchase history and also update their profile.

In the purchase history of customer, user can see their product name, price and purchased
date of their goods which they have bought before by a list of items.

Moreover, in Update profile section, user can make changes of their profile like name,
password. It could affect their data in our database.

xxxviii
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 19.

In each product, user can see it short description and their available status. Therefore,
customer can consider about buying it or not.

xxxix
Cart Page

Customers select all of the products they want to buy and add to the cart. All of these
products will move to Cart. In Figure 23, there is a number 2 on the Cart Button on the
navigation bar which means there are 2 items in Cart that have not paid yet.

On the left side there is list of products that customer added to cart. On the right is the
delivery address field that required user to fill in. The total price of the products.

Below that is the payment gateway. The payment gateway has 2 selections for customers
which are Card or Paypal or Razorpay or Paytm or Phonepay or Gpay or COD.

In each product listed in Cart, user can remove them from the cart also if they do not
want to buy it anymore.

xl
Cart CRUD

When the user clicks Add to Cart button, the product must be saved to the local storage.
Based on that, total products in cart can be calculated.

When user clicked on the product twice or more than that, this function only updates the
quantity of the product instead of actually duplicating the product.

The Array from method to create a new array that will make sure that there is no
duplicate.

Build an Array from new Set and turn it back into array using Array from so that later we
can re-map it.

The get Cart method will give the user all the items from the cart. This method can be
exported to be used in menu.

xli
In Figure 26 is the update Item method. All of the items are already in the local storage
with the name of “cart” would be put in the cart variable. After that each of them will be
map through and try to match with the product Id.

The remove Item function is implemented to remove the product from the cart. This
method is similar to update item.

The splice method is used to take one out from the index. This method takes two
argument.

The first Is where to splice, the second is how many to splice.

xlii
Payment Gateway

The most important feature of any e-commerce application is payment gateway.

Braintree is one of the best payment processing option available in the market.
\Therefore, the application integrates both credit card and PayPal system. Braintree is
used by some of the biggest name in the world such as Google, Dropbox, GitHub.

After the token has sent to frontend. Customers can login to their PayPal account and pay
for the order they have made before. In Figure 30, the sandbox account can be created to
test the PayPal function.

After paying for the order by PayPal or credit cards, users just finished their shopping
and go back to the Home page.

xliii
Summary

The achievement of the thesis is researching the basic components of MERN stack
technology: MongoDB, ExpressJS framework, ReactJS library and NodeJS platform.
Using MERN stack technology in conjunction with Braintree to build an e-commerce
web application with payment gateway.

The advantages are performing the basic functions of a product search website for
customers, making it easy for customers to find categories that have the products they are
looking for.

Gives small stores a platform to store information and promote their products. Password
data of accounts when logging in to the system is stored in a secure database. The
management interface, statistics of the user and admin are easy to use for everyone.

The disadvantages are online chat functions between shop owners and customers are not
yet supported as well as between shop owners and administrators.

The current product search algorithm locates by the user location that is not really
optimal, needs to be improved to speed up the search even more.

Since the purpose of the thesis is the e-commerce application, the understanding about
MERN technologies and applying it to this app is the most important.

Overcome current shortcomings, listen to customers’ comments and making

improvements, helping users have a great experience in the future.

xliv
 Chapter 5 : References & Bibliography
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]. Thebalancesmb.com 2019 [cited 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. MongoDB [Internet]. Mongodb.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

11.Props and State [Internet]. Flaviocopes.com. Available from:

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

12.Pros and Cons of ReactJS [Internet]. Javatpoint.com. Available from:

https://www.javatpoint.com/pros-and-cons-of-react

13.Stack technology [Internet]. Stackshare.io. Available from: https://stackshare.io/stacks

14. MERN stack concept [Internet]. Mongodb.com. Available from:

https://www.mongodb.com/mern-stack
xlv
BIBLIOGRAPHY

These references played a significant role in supporting research, decision-making,

andthe development of e-commerce strategies.

1. www.javatpoint.com/java

2. www.google.co.in

3. www.w3cschools.com

4. www.siliconindia.com

5. www.flipkart.com

6. www.scribd.com

7. https://www.shopify.com/resources/e-commerce-best-practices

8. https://www.ftc.gov/e-commerce-security-guide

9. https://europa.eu/e-commerce-regulations

xlvi