A PROJECT REPORT

ON
E-COMMERCE WEB APPLICATION

For the partial fulfillment for the award of the degree of

BACHELOR OF TECHNOLOGY
In
COMPUTER SCIENCE AND ENGINEERING

Submitted By
Bhoopesh Bhardwaj (1819210086)
Devang Saxena (1819210097)
Divyanshu Pandey (1819210106)

Under the Supervision of

Mr. Rahul Swami

G.L. BAJAJ INSTITUTE OF TECHNOLOGY &

MANAGEMENT, GREATER NOIDA
Affiliated to

DR. APJ ABDUL KALAM TECHNICAL UNIVERSITY,

LUCKNOW
2021-22
 Declaration

We hereby declare that the project work presented in this report entitled “E-Commerce Web Application
(Apna-Store)”, in partial fulfillment of the requirement for the award of the degree of Bachelor of
Technology in Computer Science & Engineering, submitted to A.P.J. Abdul Kalam Technical University,
Lucknow, is based on my own work carried out at Department of Computer Science & Engineering, G.L.
Bajaj Institute of Technology & Management, Greater Noida. The work contained in the report is original
and project work reported in this report has not been submitted by me/us for award of any other degree or
diploma.

Signature:
Name: Bhoopesh Bhardwaj
Roll No: 1819210086

Signature:
Name: Devang Saxena
Roll No: 1819210097

Signature:
Name: Divyanshu Pandey
Roll No: 1819210106

Date:
Place: Greater Noida
 Certificate

This is to certify that the Project report entitled “E-Commerce Web Application (Apna-Store)” done by
Bhoopesh Bhardwaj (1819210086), Devang Saxena (1819210097) and Divyanshu Pandey
(1819210106) is an original work carried out by them in Department of Computer Science & Engineering,
G.L. Bajaj Institute of Technology & Management, Greater Noida under my guidance. The matter
embodied in this project work has not been submitted earlier for the award of any degree or diploma to the
best of my knowledge and belief.

Date:

Mr. Rahul Swami Dr. Sansar Singh Chauhan

Signature of the Supervisor Head of the Department
 Acknowledgement

The merciful guidance bestowed to us by the almighty made us stick out this project to a successful end.
We humbly pray with sincere heart for his guidance to continue forever.

We pay thanks to our project guide Mr. Rahul Swami who has given guidance and light to us during this
project. His versatile knowledge has helped us in the critical times during the span of this project.

We pay special thanks to our Head of Department Dr. Sansar Singh Chauhan who has been always
present as a support and help us in all possible way during this project.

We also take this opportunity to express our gratitude to all those people who have been directly and
indirectly with us during the completion of the project.

We want to thanks our friends who have always encouraged us during this project.

At the last but not least thanks to all the faculty of CSE department who provided valuable suggestions
during the period of project.
 Abstract

The “E-commerce Web Application” is developed to override the problem prevailing in the practicing
manual system. It should be intended to give functionalities like web based booking of items in which a
client should have the option to add an item to a cart, eliminate it from a cart and put in the request by
finishing the continuous installment.

The payment page should have a field for shipping address and a payment gateway.It also shows the
payment timeline. Also, there must be a page which shows previously done orders. There should be a
home page and categories section for different types of products. Apart from this, each product should
have a detail page.

When the users logs in, he\she should land on the home page. After it, they can navigate to the product
page, cart, order page, etc as per the requirement. If the login credentials are not correct, the user is
notified of the same by a pop-up message, and is refrained from doing login.

The goal of this application is that to lessen the client's exertion in searching for item subtleties like variety
accessibility, item accessibility, markdown on an item, money down accessibility, and so forth. This issue
can be addressed by carrying out a user guide chat box inside it, which assists the client with getting the
item subtleties by just posing the inquiries regarding the items the client or client needs to purchase.

This project includes functionalities like Home page/Landing Page, Customer Login, Home Page when
Logged in, Product Page, Shopping Cart, Payment Page, Payment Confirmation Page, Order Page and
Order Details Page, etc.

Apart from these functionalities this project also includes some additional features which are A User Guide
Chat Box, a Google Assistant Feature which is accessible on smart devices, and a Telephony Feature where
you can get the details of the product by calling a number without any internet connection or when weak
internet signal is there.
 TABLE OF CONTENT

Declaration……………………………………………………………………………….. (ii)
Certificate………………………………………………………………………………… (iii)
Acknowledgement.…………………………………………………………………………… (iv)
Abstract…………………………………………………………………………………… (v)
Table of Content………………………………………………………………………….. (vi)
List of Figures…………………………………………………………………………… (viii)
List of Tables …………………………………………………………………………… (ix)

Chapter 1. Introduction ………………………………………………………….. Pg. No

1.1 Definition of E-Commerce…………………………………………….. 1-1

1.2 History of E-Commerce……………………………………………….. 1-2

1.3 Scope and Purpose of the project……………………………………… 2-2
1.4 Project Specification………………………………………………….. 2-3
Chapter 2. Literature Survey ……………………………………………………. Pg.No

2.1 Introduction …………………………………………………………… 4-4

2.2 Existing System……………………………………………………….. 4-6
2.3 E-Commerce in India………………………………………………….. 6-10

Chapter 3. Problem Formulation ……………………………………………….. Pg.No

3.1 Problem Statement…………………………………………………….. 11-11

3.2 Approach………………………………………………………………. 11-11
3.3 Technologies Used…………………………………………………….. 11-23

Chapter 4. System Analysis & Design ………………………………………….. Pg.No

4.1 System Feasibility…………………………………………………….. 24-26

4.2 ER Diagram…………………………………………………………… 26-27
4.3 Activity Diagram……………………………………………………… 27-30

Chapter 5. Implementation ……………………………………………………… Pg.No

5.1 Designing the Apna Store Prototype Layout using Figma……………… 31-31
5.2 Building the Header Component……………………………………….. 32-32
5.3 Implementing the Fake Store API……………………………………….. 32-33
5.4 Building the Product Feed Component and Product Page………………. 33-33
5.5 Implementing the Authentication using Google Oath…………………... 34-34
5.6 Connecting the Firebase Database………………………………………. 34-34
5.7 Implementing the Checkout Functionality……………………………… 35-35
5.8 Implementing the Stripe Payment Gateway…………………………….. 35-36
5.9 Integrating the Stripe Command Line Interface and Creating Webhook.. 36-37
5.10 Building the Order History Page………………………………………… 37-37
5.11 Integrating the DialogFlow Chatbot (Shopy)…………………………… 38-38
5.12 Integrating the Telephony Gateway and Google Assistant……………… 38-38

Chapter 6. Result & Discussion ……………………………………………………

Pg.No
6.1 Working…………………………………………………………………. 39-51

6.2 Additional Features……………………………………………………… 51-57

Chapter 7. Conclusion, Limitation & Future Scope……………………………… Pg.No

7.1 Conclusion………………………………………………………………. 58-58
7.2 Limitation……………………………………………………………….. 59-59
7.3 Future Scope…………………………………………………………….. 60-60
References ………………………………………………………………………….. 61

Plagiarism Report …………………………………………………………………….

 LIST OF FIGURES

Figure No. Figure Name Page No.

Figure 3.1 React JS Interface 16

Figure 3.2 Next JS Interface 17
Figure 4.1 Activity Diagram 28
Figure 4.2 Product Cart Page 29
Figure 4.3 Payment Gateway Page 29

Figure 4.4 Confirmed Order Page 30

Figure 5.1 UI Design of Site Using Figma 31
Figure 5.2 Header Component Function 32

Figure 5.3 Fake Store API 33

Figure 5.4 Product Feed Function 33

Figure 5.5 Authentication Using Google OAuth 34

Figure 5.6 Connecting the Firebase 34

Figure 5.7 Checkout Function 35

Figure 5.8 Order Function 36

Figure 5.9 Stripe Command Line Interface(CLI) and Webhook 37
Figure 5.10 Confirmed Order Page Function 37
Figure 5.11 Dialogflow Chatbot Implementation 38

Figure 6.1 Home Page Before Login 39

Figure 6.2 Login Page 40
Figure 6.3 Home Page After Login 41

Figure 6.4 Product Feed 42

Figure 6.5 Product Detail Page (T-shirt) 43

Figure 6.6 Product Detail Page (White Gold Ring) 44

Figure 6.7 Cart Page 45
Figure 6.8 Payment Gateway Before Payment 46
Figure 6.9 Payment Gateway After Payment 46
Figure 6.10 Order Confirmed Page 47
Figure 6.11 Order History Page 48
Figure 6.12 Payment Details Page 49
Figure 6.13 Stripe Order Page 50
Figure 6.14 Order Database 51

Figure 6.15 Google Assistant Demo-1 52

Figure 6.16 Google Assistant Demo-2 52
Figure 6.17 Google Assistant Demo-3 52
Figure 6.18 Google Assistant Demo-4 53
Figure 6.19 Google Assistant Demo-5 53
Figure 6.20 Google Assistant Demo-6 53
Figure 6.21 Chatbot Demo-1 54
Figure 6.22 Chatbot Demo-2 54

Figure 6.23 Chatbot Demo-3 55

Figure 6.24 Chatbot Demo-4 55

Figure 6.25 Chatbot Demo-5 56

Figure 6.26 Chatbot Demo-6 56
 LIST OF TABLES

Table No. Table Name Page No.

Table 4.1 ER Diagram (Users) 27

Table 4.2 ER Diagram (Orders) 27

 Chapter 1
Introduction

1.1 Definition of Electronic Commerce (E-commerce)

The term electronic commerce (e-commerce) refers to the system of action that permits organizations and
people to trade goods and services over the Web. E-commerce business works in four significant market
sections and can be directed over PCs, tablets, cell phones, and other smart gadgets. Virtually every
possible item and services is accessible through e-commerce business exchanges, including books, music,
boarding passes, and monetary administrations like stock contributing and internet banking. In that
capacity, it is viewed as an exceptionally problematic innovation.

Online business has helped organizations (particularly those with a restricted arrive at like independent
ventures) get to and lay out a more extensive market presence by giving less expensive and more effective
dissemination channels for their items or services. Target (TGT) enhanced its physical presence with a
web-based store that permits clients to buy everything from garments and coffeemakers to toothpaste and
activity figures right from their homes.

E-commerce operations in four major market segments. These are as follows

 Business to business (B2B), which involve direct sales of goods and services between businesses.
 Business to consumer (B2C), which is the sales between businesses and their customers.
 Consumer to consumer, which permits people to offer to each other, normally through an third-party
site like eBay.
 Consumer to business, which allows people to offer to organizations, for example, a craftsman selling
or authorizing their work of art for use by a company.

1.1.1 What is an E-commerce website?

An e-commerce website is any web page that permits you to sell items and services on the web.
Organizations like Amazon and Alibaba are instances of online business sites.

1.2 History of E-commerce

The majority of us have shopped online for something sooner or later, and that implies we've partaken in
web based business. So it's implied that web based business is all over the place. However, not many
individuals might know that web based business has a set of experiences that returns before the web
started.
E-commerce business really returns to the 1960s when organizations utilized an electronic framework
called the Electronic Information Exchange to work with the exchange of records. In any case, it was only
after 1994 that the absolute first exchange. occurred. This elaborate the offer of an Album between
companions through an internet based retail site called NetMarket.
The business has gone through such endless changes from there on out, achieving a ton of advancement.
Conventional physical retailers had to embrace new innovation to remain above water as organizations like
Alibaba, Amazon, filpkart eBay, and Etsy became commonly recognized names. These organizations made
a virtual commercial center for labor and products that buyers can undoubtedly get to.

New innovation keeps on making it simpler for individuals to do their web based shopping. Individuals can
associate with organizations through cell phones and different gadgets and by downloading applications to
make buys. The presentation of free delivery, which diminishes costs for purchasers, has likewise helped
increment the ubiquity of the internet business industry.

1.3 Scope and Purpose of the Project

The unstable development of e-Business over the last two decades, has captured the attention of many
analysts and academics from a variety of logical disciplines. Recognizing the diversity of the e-Business
concept, which follows a different Web concept, this report tries to look at the theme through a variety of
review points. As pointed out by Laudon and Traver (2007, p.38), e-Business follows the same design as
any previous invention by the revolution. "Development promotes first and later the new methods used in
the industry. When the dual business interaction of these developments is broader, a larger collection of
issues affecting the community, society and policy emerges..

The purpose of this project is to create E-commerce web Application which should be standalone in nature.
It should be designed to provide functionalities like online booking of products in which user should be
able to add the product into the cart, remove it from the cart and place the order by completing the payment.
And also the main aim is to provide additional features like dialogflow chat box which help the user to
solve their doubts regarding products, google assistant for getting the details of the product on the smart
devices and calling function can be used when there is a weak internet signal signal or no internet signal to
get the details of the available products.

1.4 Project Specifications

1.4.1 Hardware Specifications
1. Intel i3 7th Generation.
2. Processor - four-core, 64-bit, 2.5 GHz minimum per core
3. RAM - 8GB
4. Hard Disk - 1TB
1.4.2 Software Specifications
1. Operating System - Windows 8/ Windows 10/ Windows 11.
2. Platform - Visual Studio Code
3. Front end part - HTML & CSS, JavaScript, Tailwind CSS, React.js, Next.js.
4. Back end part - Firebase, Stripe payment gateway.
 Chapter 2
Literature Survey

2.1 Introduction
E-commerce is evolving as an accepted and used business paradigm. Many businesses use websites that
provide their services doing commercial activities on the web. It makes sense to say that shopping on the
web has become quite common in recent times.

The purpose is to develop an E-commerce store with a common purpose where any product like a cloth,
bag or any other items can be purchased in a comfortable home environment online. A dialogflow chatbot
has been facilitated to resolve the user queries regarding the products.

An online store is a web-based store where customers can browse the catalog and choose their favorite
products. Selected items can be collected in the shopping cart. Upon exit, cart items will be presented as an
order. Customer can add and remove products to the shopping cart according to their need. At that point,
more information will be needed to complete the process. Generally, the customer will be asked to fill in or
choose a payment address, shipping address, shipping option, and payment information such as a credit
card number..

For the functionalities like placing the order, the user must be signed in. If the user is not logged in while
placing the order, the system redirects the user to the login page. A user can choose to login using single
Google o Auth.

The payment process is managed using the Stripe Payment Gateway which is easy to integrate and use in
the system. It uses a virtual payment processor to process the payment. The user can also connect to ‘Shopy’
using voice call with no requirement of internet. Shopy an assistant dedicated to help the users with their
queries.

2.2 Existing System

Electronic Commerce (e-commerce) applications support interoperability. Various groups participate in
network trading, as well as data management.

The growing importance of e-commerce is evident in the research of GVU researchers (Images, Views, and
Uses) at the Georgia Institute of Technology. In their summary of the results from the eighth survey, the
researchers reported that "e-commerce starts with both the number of users who buy and the total number
of people who spend online shopping".

According to a survey report at the Georgia Institute of Technology, more than three quarters of 10,000
respondents reported buying things online. The most cited reason to use the web for personal purchases
was simple (65%), followed by seller information (60%), no sales staff form (55%) and savings time
(53%).

While the issue of security remains a major reason why many people do not buy things online, the GVA
survey also shows that faith in e-commerce security is growing. As more and more people rely on current
encryption technology, more and more users can be expected to purchase items online.

An e-commerce system is considered good if it has the following functionalities:

● Effective organization of products along categories.
● Easy and effective navigation.
● Notifications for actions such as adding item to cart and placing order.
● Proper description of products along with images and videos.
● Customer ratings and reviews.
● Good cancellation and return policy.
● Quick links and buttons.
● Good security policy.
● Secure payment gateway.

Feedback is another important factor in building an e-commerce site. The interaction cycle between the
user and the site is incomplete until the site responds to the user command. According to Norman, "the
answer - to give the user information about what action was actually performed, what effect was achieved -
is a well-known concept in controlling science and theoretical knowledge. Imagine trying to talk to
someone when you can't even talk." hearing your voice, or trying to paint a picture has a response ".

Response to a website usually includes a change in visual or oral information presented to the user. Simple
examples include highlighting user preferences or completing a field form based on user preferences in the
drop-down list. Another example is using a noisy cash register to ensure that the product is added to the
electronic shopping cart.

Completed orders should be seen immediately. This can be done on the consent or compliance page. The
amount of time it takes to produce and download this page, however, is a source of annoyance to many
e-commerce users. Users are quick to verify the meaning of events. A blank page, or what the user sees as
"long" to get authorization, can be interpreted as "there must be something wrong with the order.

Lastly, the response should not disturb the user. The actions and responses of the website should be
purposeful. Feedback should not draw the user's attention away from the important tasks of collecting
information, selecting products, and placing orders.

2.3 E-commerce in India

E-commerce in India was not in the trend category at first, since 1999 by K.Vaitheeswaran. The company
name was fabmart.com. Payment gateway, transportation and order was a major problem.
The Indian government has introduced an online payment method to the IRCTC. This process has made
customers understand how to pay online but there have been a few technical challenges. As time goes on to
take these technical challenges as opportunities, big players like Flipkart, Amazon, Snapdeal, and Myntra
come up with reliable payment gateways like PayPal and PayYou. These payment gateways are very safe
and secure, gradually gaining customer trust. And then everything is history, now e-Commerce has become
a shopping mall for all the cities and part of the rural customers as discussed.

2.3.1 Sales
In India, online shopping will work closely with (B2C) Business at Customer Sales. Best-selling products
on India's e-commerce websites Fashion, Electricity, Beauty, Kitchens, Furniture, Food, Books, Jewelry,
Handmade Products, and Medical and Health Supplements. Also the top product and services that sell
commercial websites are AmazonIndia.com, Flipkart.com, and Myntra. They have a large retail market in
India, especially those working from Business (B2B) to Commercial Market and (B2C) and Commerce in
the customer market as reported.

In India, other online banking systems have made online shopping easier, such as Google Pay, Phone Pay,
Paytm, BHIM, and Amazon pay. These payment methods play an important role in the development of
website marketing. They have special features for plane tickets, buses, trains and bills payable etc. These
apps were launched from 2014 to 2017, and throughout history these apps have helped to increase sales of
many ecommerce websites. Additional features such as coupons, donations, discounts on products and
services delight customers to visit the website and make regular purchases as it concludes.

The marketing strategy for any event or festival is changed, depending on the flash marketing lines. In the
flash market, from time to time, products or services are deprecated and offered for certain things such as
one purchase you get for free to use to attract customer attention and they quickly buy products so they do
not miss out. Offers. This 3-hour flash sale has the best purchase rates, the sales rate goes up. Dividing
strategy used to create bulk sales products. For example, if product A sells well it means it is combined
with product B (less sold) at a lower price. Compatible products are packaged together. For example, if you
are selling toothpaste, apply a toothbrush, a tongue lock, and a mouth wash, which leads to the sale of
many products, and the customer is satisfied. Next up is the shipping process, an important part of the
business. Reducing shipping costs, access to higher destinations and services on COD lines (money on
delivery) are key aspects of the transport strategy as reported.

End-of-year sales are a great opportunity to open an inventory. Offers and deals make the list go faster the
rating leading to the addition of new products and encouraging loyal customers. The next big aspect of
marketing is doing it right. Related tag lines or advertising means that famous actors who combine help the
organization. Creating interest in the social media and attracting younger customers is a well-intentioned
market.

2.3.2 Customer engagement

In addition to the epidemic by 2020, e-commerce platforms have experienced a significant increase in sales
in India, with customer support, communication and marketing of their loyal customers. The five
categories of customer engagement, Discover, Buy, Buy, Own, and Advocate, have contributed to
increased sales and marketing on e-commerce websites, with the growth of the new product line. Digital
marketing is a new key to an important part of multi-customer interaction.

Myntra is India's leading fashion store in India by maintaining its leading position, having a good
relationship with the customer. By winning its competition with Amazon (the world's largest e-commerce
site), with features such as myntra studio, try and buy, detailed filters, various fashion sales for example
end-of-life sales, weekend sales, or birthday sales, festival donations , Special Discounts and Inner Mythra
Membership Party for promoters and fashion style and offers top tips and pieces recipients of prizes and
gifts. Myntra makes it an easy way for its customer to shop online; A great step towards collaborating with
Microsoft to accelerate digital transformation, focusing on innovation and high-performance visibility
technologies for greater benefits and better customer engagement. Myntra was successful in its
development. Advances and advanced technologies that make high profits. Myntra has only branded
clothing, accessories and beauty products, gadgets, household products and myntra mall, which ensures
quality assurance to its customers as discussed.

As well as following online trends demanded by customers, social media marketing is aimed at enticing
people to buy their products. Combined clarity about the special features of Myntra studio- this actively
demonstrates that fashion celebrities showcase their fashion advice and recommend the audience’s outfits,
and myntra offers the same outfits that one presents as a post. Myntra Insider (loyalty program) -
unconditional membership agreement for user funds and points of reward, benefits and rights in all
purchases. The program will work with partners in the federation who wish to promote, strengthen their
business or product, and work with myntra to receive special discounts and various discounts from within
or participants, this demonstrates superior customer engagement to loyal users and gives them access,
through VIP line for all sales events. Testing on myntra with myntra move means users are rewarded with
an active lifestyle with user eligibility that is converted to purchases / coupons, playing simple games and
earning reusable rewards while shopping. All of these factors reflect myntra's exaggerated efforts to satisfy
customers and complete success as discussed.

Allowing a customer to provide feedback and updates - indicates this after each use of the product or
services by the customer should be reviewed and feedback taken to understand customer satisfaction.
Reaching out to unhappy customers- dissatisfied people should be contacted by the company's customer
service managers.
Achieving loyalty programs- this helps to increase the guarantee of a loyal customer in the company.
Bringing the best e-commerce user information- the technology used by the website should be easily
accessible to users and notable.
Better use of a social media platform - a social media platform that reflects customer needs and reflects
the company's product and services, as people use more. Social media is also listed as a market place now.

2.3.3 Market trends

Market estimates are based on predicting short-term interest rates or whether short-term interest rates will
be based on current long-term interest rates; The Ecommerce Business market should reach a growth rate
of 55% from $ 4.5 trillion by 2020 to $ 7.8 trillion over the next three years. With the market, the expected
e-commerce will create new records at retail prices as reported.

The Indian e-commerce market can be divided into various types of online services such as online
marketing, online financial services, online travel, online shopping, etc. based on product categories, the
online travel services of 2019 have the highest market share. because they have improved communication
between airplanes and trains between people due to the rapidly growing number of internet users.

Many e-commerce companies have developed various types of online services such as online marketing,
online financial services, internet browsing, online shopping, etc. based on product categories, the online
travel services of 2019 have a very high market share because they have improved communication.
between airways and trains between people due to the rapidly growing number of internet users.

Many e-commerce companies have developed new features and technologies such as artificial intelligence,
machine learning, fiction, fiction, voice recognition, etc. to draw closer and attract customers to compete
with other similar companies in the market. For example, Amazon has deployed a voice assistant [Alexa]
to assist its customers, simplify their work, and improve customer satisfaction with many new, useful, and
design ideas that help a company find success in the market.

2.3.4 Quality assurance

Quality assurance is very important for every e-commerce website to keep a quality check on product or
service terms for the purpose of ensuring customer safety, security, and reliability. This clearly shows that
a good effort to ensure quality leads to further identification and verification of products. For example,
Snapdeal has lost the sale of counterfeit products at cheaper prices, with the aim of attracting customers to
its cheaper deals, but there has been a failure in that regard, which is one reason why many customers
prefer quality over pricing. Regular product testing, which provides time to evaluate performance or quality
improvement, high quality assurance and close communication with customers to understand their needs
and achieve the goal of satisfaction. It is a process of improving the performance of high performance, the
usability of a particular system. With regard to website retention statistics under quality assurance, errors or
omissions lead to the display of incorrect information leading to misconduct, low sales, and poor website
reviews leading to low customer engagement and losses. Technical aspects should also be considered, as
technology is an important factor as discussed.

2.3.5 Results and Discussion

The concept of e-commerce has completely changed in India, India is on its way to digital development.
New value-added innovation in e-Commerce is important, the emergence of technological trends is leading
to digital advancement. Advanced Items Planning, delivery methods have made things easier for
eCommerce. Payment gateway is a smooth customer process, easy return and trading has attracted many
customers to online trading. Customer service has been at the forefront of online commerce, adding
services such as 24/7 chat support that closes attention and solves major customer-related issues. Larger
companies use artificial intelligence to share better customer engagement. Companies like Flipkart, myntra,
amazon are building their own software to run the system with the right flow. Advanced mobile settings
greatly help the system to run faster. Social media has also greatly helped eCommerce. Social networking
sites can be used as an effective marketing tool for developing e-commerce products. Regional updates
about you have had a huge impact. Government rights in MSME also help many companies to enter the
e-Commerce market. Small and medium-sized E-commerce companies can benefit from larger players by
keeping customer care at the forefront. That, together with the government's cooperation, will take
Ecommerce to its next level in India.

2.3.6 Conclusion
The role of e-Commerce in customer engagement is linked to many aspects, technology and the internet
play an important role. tech Tool automation in e-Commerce is an important support for customer
engagement. User interaction on e-commerce sites has a huge impact on customer engagement.
E-commerce sites focused on building trust and quality assurance are the most important things. In addition
to the throat competition of the biggest players in the market, it can still accommodate new players in the
market. The future of e-Commerce has a huge impact on the Indian economy. In the next five to 7 years,
e-Commerce will be the future of shopping. Customer engagement will be a selling point.
The Indian government is making a bold effort to help E-commerce in India. After all, there are miles you
have to cover before E-commerce can successfully launch offline businesses in the coming days.
 Chapter 3
Problem Formulation

3.1 Problem Statement

The motivation behind making this E-commerce web application “Apna Store” is that to reduce the
customer effort in navigation in looking for product details like colour availability, product availability,
discount on product, cash on delivery availability etc. These problem can be solved by implementing a user
guide chat box within it which help the user to get the product details by simply asking the questions
regarding the products whichever the customer or user wants to buy.

3.2 Approach
Now, for solving the above problem we make an e-commerce web application “Apna Store” which
provides additional features like Dialog Flow Chatbot, google assistant, and a calling function. Apart from
these additional features this application also provides some common features like other websites. For
instance, customers can able to buy products, see product details, add products to a cart, able login via a
google account, able to see the ordered history page, and also customer can able to do real-time payments,
etc.

Now their are many functionalities which are as follows -

1. Home Page/ Landing Page
2. Product Feed
3. Customer Authentication
4. Shopping Cart
5. Order History Page
6. Product Page
7. Payment Confirmation
8. Dialogflow Chatbot
9. Payment Gateway
10. Linked with Google Assistant
11. Calling Function.

Now to implement above functionalities we require different types of technologies. So, We use the
following technology to implement those functionalities.
3.3 Technologies Used
3.3.1 HTML - HTML stands for Markup Hypertext Language, and is the most widely used language for
writing web pages. Hypertext is related to how Web pages (HTML reports) are linked together. With these
lines, the link accessible to the web page is called Hypertext. As its name suggests, HTML is a Markup
language which means you use HTML to "enhance" a text record with tags that advise how the Web
system is organized to display.
Initially, HTML was created in anticipation of revealing the structure of records such as titles, categories,
lists, etc. in order to work with meaningful data sharing between analysts. Currently, HTML is widely used
to organize site pages with the help of various tags accessible in HTML language.

3.3.1.1 Basic HTML Document:

<!DOCTYPE html>
<html>
<head>
<title>This is a report of e-commerce web application</title>
</head>
<body>
<h1>Welcome to the apna-store</h1>
<p>This online store contain all product which you want</p>
</body>
</html>

HTML is a simple language and uses different labels to organize content. These tags are embedded within
the base of the point <Marker Name>. With the exception of a few tags, most tags have a closing closing
tag. For example, <html> has the last tag </html> and the <body> tag has its last tag </body> and so on.

 The <!DOCTYPE html> presentation characterizes that this archive is a HTML5 document.
 The <html> component is the root component of a HTML page.
 The <head> component contains meta data about the HTML page.
 The <title> component determines a title for the HTML page (which is displayed in the program's title
bar or in the page's tab).
 The <body> component characterizes the report's body, and is a holder for every one of the noticeable
substance, like headings, sections, pictures, hyperlinks, tables, records, and so on.
 The <h1> component characterizes a large heading.
 The <p> component characterizes a paragraph.
3.3.2 CSS (Cascading Styles Sheets)
Cascading Style Sheets, also called as CSS, is an essentially planned language expected to improve on the
most common way of making pages respectable. CSS licenses you to apply styles to pages. All the more
significantly, CSS empowers you to do this free of the HTML that makes up each site page.

Advantages of CSS
1. Make Stunning webpage - Become a Web Specialist - If you are interested in starting a professional
website, HTML and CSS editing is a complete requirement of exp CSS to handle the look and feel of a
particular part of a web page. Using CSS, you have some control over the text shade, text style styles,
dividing between verses, how parts are scaled and distributed, what basic images or tones are used, format
designs, variations of different display types. gadgets and screen sizes and a variety of different effects.
2. Turn into a website specialist - If you have any desire to begin a career as an expert website specialist,
HTML and CSS planning is an absolute necessity for expertise.
3. Control web - CSS is not difficult to read or see but it does provide a solid command over the
presentation of the HTML record. Typically, CSS is associated with markup HTML or XHTML characters.
4. Control web - CSS is not difficult to read or see but it does provide a solid command over the
presentation of the HTML record. Typically, CSS is associated with markup HTML or XHTML characters.

Application of CSS
CSS is one of the most generally utilized style languages over the web. I will list not many of them here:

1. Saves Time- You can create CSS and afterwards and use the same sheet on different HTML pages. You
can customize the style of the entire HTML object and apply it to as many Web pages as you need.
2. Instant Loading Pages - If you are using CSS, you do not need to write HTML label credits without fail.
Just think of one CSS tag rule and apply it to all events of that tag. So small code refers to instant download
times.
3. Easy Support - Introducing global development, changing style, and all parts of all web pages will be
automatically updated.
4. Better Styles Than HTML - CSS has a lot more extensive layout than HTML, so you can give a higher
focus to your HTML page compared to HTML credits.
5. Multiple Device Compatibility - Style sheets allow content to be enhanced on more than one gadget.
Using the same HTML report, a variety of site customization can be established on mobile gadgets, for
example, PDAs and mobile phones, or in print.
3.3.3 JavaScript
JavaScript is a simple, clear programming language. Designed to run network-driven applications. It's free
and integrated with Java. JavaScript is very easy to complete considering the way HTML is structured. It is
open and crosses the stage.

Benefits of using JavaScript

1. JavaScript is the world's most widely known programming language and it solves the amazing decision
of a software developer. When you learn JavaScript, it helps you to create unique and back-end products
that use different JavaScript-based formats like jQuery, Node.JS, and so on.
2. JavaScript is ubiquitous, it comes with every advanced internet browser to learn JavaScript you don't
really need to worry about any unusual weather settings. For example Chrome, Mozilla Firefox, Safari, and
every other program you know that starts today supports JavaScript.
3. The use of JavaScript has now reached mobile application development, local application development,
and game changer events. This opens many doors that may open for you as a Javascript Editor.
4. Because of appeal, there is huge loads of occupation development and significant salary for the
individuals who know JavaScript. You can explore over to various places of work to see what having
JavaScript abilities resembles in the gig market.
5. The extraordinary thing about JavaScript is that you will observe huge loads of structures and Libraries
previously created which can be utilized straightforwardly in your product advancement to diminish your
opportunity to advertise.

Application of JavaScript Programming

1. Client side approval - This is truly vital to confirm any client input prior to submitting it to the server
and JavaScript assumes a significant part in validating those contributions at front-end itself.
2. Controlling HTML Pages - JavaScript helps in controlling HTML page on the fly. This aides in adding
and erasing any HTML tag effectively utilizing JavaScript and adjust your HTML to change its look and
feel in light of various gadgets and prerequisites.
3. Back-end Data Loading - JavaScript gives Ajax library which helps in stacking back-end information
while you are doing another handling. This truly gives an astounding encounter to your site guests.
4. Server Applications - Node JS is based on Chrome's JavaScript runtime for building quick and
versatile organization applications. This is an occasion-based library that helps in growing extremely
complex server applications including Web Servers.
5. Client Notifications - You can utilize JavaScript to raise dynamic pop-ups on the site pages to give
various sorts of notices to your site guests.
3.3.4 Tailwind CSS
Tailwind CSS can be utilized to make sites in the quickest and least demanding way. Tailwind CSS is
essentially a utility-first CSS system for quickly constructing custom UI. It is a profoundly adjustable,
low-level CSS structure that gives you all of the structure blocks you really want to fabricate
custom-tailored plans with no irritating obstinate styles you need to battle to supersede.
The magnificence of this thing called tailwind is it doesn't force plan determination or how your site ought
to resemble, you just unite minuscule parts to build a UI that is special. What Tailwind essentially does is
take a 'crude' CSS document, process this CSS record over a setup record, and create a result.

Benefits of Tailwind CSS

1. Quicker UI building process
2. It is a utility-first CSS system which implies we can utilize utility classes to fabricate specially crafts
without composing CSS as in customary methodology.
3. No more senseless names for CSS classes and Ids.
4. Least lines of Code in CSS record.
5. We can redo the plans to make the parts.
6. Makes the site responsive.
7. Rolls out the improvements in the ideal way.
8. CSS is worldwide in nature and in the event that makes changes in the record the property is changed in
all the HTML documents connected to it. Be that as it may, with the assistance of Tailwind CSS we can
utilize utility classes and roll out nearby improvements.
9. Exceptionally Customizable.
10. Empowers building complex responsive design.
11. Responsive and improvement is simple.
12. Parts creation is simple.

Drawback of Tailwind CSS

1. There are missing headers, route parts.
2. It take more time to figure out how to carry out inbuilt classes.

3.3.5 React JS
ReactJS is an explanatory, proficient, and adaptable JavaScript library for building reusable UI parts. It is
an open-source, part-based front-end library careful just of the view layer of the application. It was made
by Jordan Walke, who was a programmer at Facebook. It was at first evolved and kept up with by
Facebook and was subsequently utilized in its items like WhatsApp and Instagram. Facebook created
ReactJS in 2011 in its news feed segment, however, it was delivered to general society in the period of
May 2013. Today, the vast majority of the sites are constructed utilizing MVC (model view regulator)
design. In MVC design, React is the 'V' which represents a view, while the engineering is given by the
Redux or Flux.
By library, we mean React gives accommodating capacities to construct UI, however surrenders it to the
engineer where to involve those capacities in their application. Part of React's prosperity is that it is
generally unopinionated about different parts of building applications. This has brought about a prospering
environment of outsider instruments and arrangements. It likewise implies, nonetheless, that building a
total React application starting from the earliest stage requires some work. Engineers need to invest energy
designing devices and reexamining answers for normal application prerequisites.

Figure 3.1 React JS Interface

A ReactJS application is comprised of different parts, every part answerable for yielding a little, reusable
piece of HTML code. The parts are the core of all React applications. These Components can be settled
with various parts to allow complex applications to be chipped away at fundamental construction blocks.
ReactJS utilizes a virtual DOM-based instrument to fill information in HTML DOM. The virtual DOM
works quickly as it just changes individual DOM components as opposed to reloading the total DOM like
clockwork.
To make React application, we compose React parts that relate to different components. We put together
these parts inside more significant level parts that characterize the application structure. For instance, we
take a structure that comprises numerous components like information fields, names, or fastens. We can
compose every component of the structure as React parts, and afterward, we consolidate it into a more
significant level part, i.e., the structure part itself. The structure parts would indicate the construction of the
structure alongside components within it.
3.3.6 Node.js
Node.js is an open source and JavaScript workspace with various categories. It is a well-known tool for any
kind of work. Node.js uses the V8 JavaScript engine, the Google Chrome focus area, without the program.
This allows Node.js to run more efficiently. The Node.js application works in an independent cycle,
without having to create another unit of characters per request. Node.js provides a large number of
non-compliant native I / O libraries that prevent the JavaScript code from being a hindrance and, generally,
libraries at Node.js are built using appropriate non-blocking models, which in turn prevents the behavior of
release against the standard.

At a time when Node.js is playing an I / O role, such as browsing in an organization, going to a database or
file system, rather than blocking a series, and wasting CPU cycles, Node.js will continue to do so. bonds
when feedback is returned. This allows Node.js to deal with a large amount of simultaneous connection to
a single server without introducing the simultaneous management of the character unit, which can be an
important source of distractions. Node.js enjoys an exciting advantage as a number of advanced developers
who design JavaScript for the program are currently ready to compose a server side code in spite of the
client side code without the need to find out anything else. In Node.js the new ECMAScript guidelines can
be used without problems, as you do not need to trust all your clients to update their programs - you are
responsible for choosing which ECMAScript adaptation you can use for different Node.js modifications,
and you can likewise enable highlights. test using Node.js and flags.

3.3.7 Next JS
Next.js is an adaptable React framework that gives you constructing squares to make quick web
applications. By framework, we mean Next.js handles the tooling and design required for React, and gives
extra construction, elements, and enhancements for your application.

Figure 3.2 Next JS Interface

We can utilize React to construct our UI, then gradually take on Next.js highlights to settle normal
application prerequisites, for example, steering, information getting, incorporations - all while working on
the engineer and end-client experience. Whether we're a singular designer or part of a bigger group, we can
use React and Next.js to fabricate completely intelligent, exceptionally unique, and performant web
applications.
Building Blocks of a Web Application
There are a couple of things we want to think about while building present day applications. For example,
1. User Interface (UI) - how clients will consume and collaborate with your application.
2. Directing - how clients explore between various pieces of your application.
3. Information Fetching - where your information resides and how to get it.
4. Delivering - when and where you render static or dynamic substance.
5. Mixes - what outsider administrations you use (CMS, auth, installments, and so forth) and how you
interface with them.
6. Foundation - where you send, store, and run your application code (Serverless, CDN, Edge, and so
forth).
7. Execution - how to upgrade your application for end-clients.
8. Versatility - how your application adjusts as your group, information, and traffic develop.
9. Designer Experience - your group's experience assembling and keeping up with your application.

For each piece of our application, we should conclude whether we will fabricate an answer ourself or
utilize different instruments like libraries and frameworks.

3.3.8 Firebase
Firebase is the backbone platform for building web applications, Android and IOS. Provides a continuous
data set, different APIs, various types of authentication and a support platform.

Highlights
1. "1.Real-Database - Store and sync data with our NoSQL cloud database. Information is synced to all
customers in real time and is always accessible when your application is disconnected. The Firebase
Realtime website is a cloud-based database.. like JSON and continuously synced to each related
client.When you integrate apps with our Apple, Android, and JavaScript SDK categories, each of your
clients shares a single case of Real-Time Data and as a result received the most up-to-date information.
2. Verification - Many applications need to know the character of the client. Client character recognition
allows the app to securely store client information in the cloud and provides customizable customizations
across all client gadgets. Firebase Verification provides background services, easy-to-use SDKs, and quick
UI libraries to reassure customers to your application. Supports authentication using passwords, phone
numbers, known providers with a united personality like Google, Facebook and Twitter, from which point,
the sky is the limit. Firebase Authentication strongly integrates with other Firebase services, and uses
industry standards such as OAuth 2.0 and OpenID Connect, so it can be successfully integrated with your
custom destination.
3. Helpful - Firebase hosting provides fast and secure hosting to your web application, static and dynamic
object, and minimal services. Firebase Hosting is a platform for creating web content for developers. With
a single order, you can quickly transfer web applications and deliver both static and dynamic content to a
global CDN (content transfer organization). You can also match Firebase Hosting with Cloud Tasks or
Cloud Run to integrate and have microservices in Firebase.
4. Cloud Tasks - Firebase Cloud Tasks is a server-free architecture that naturally allows you to use the
background code due to the times initiated by Firebase highlights and HTTPS requirements. Your
JavaScript code or TypeScript is stored in Google Cloud and works in extreme weather. There is a
compelling reason to manage and evaluate your servers.
5. Safety Rules - Use our flexible, flexible Firebase Safety Rules to get your experience at Cloud
Firestore, Real-time Firebase Web, and Cloud Storage. Firebase Safety Rules are between your information
and harmful clients. You can create basic or complex guidelines that protect your app's data at the level of
granularity required by your application. Firebase Safety Rules influence flexible and flexible regional
languages to indicate what information your clients can access on the Realtime Database, Cloud
Firestore, and Cloud Storage. Firebase Real-Time Website Rules influence JSON in the definitions of rules,
while Cloud Firestore Safe Rules and Firebase Safety Rules for Cloud Storage influence the remarkable
language used to discover complex systems and transparent designs.

Advantages of Firebase
1. It is basic and easy to use. No requirement for muddled design.
2. The information is constant, and that implies that each change will naturally refresh associated clients.
3. Firebase offers basic control dashboard.
4. There are various valuable administrations to pick.

3.3.9 npm (Node Package Manager)

npm is the world's biggest Software Registry. The library contains north of 800,000 code bundles.
Open-source designers use npm to share programming. Numerous associations additionally use npm to
oversee private turn of events. npm is free to utilize.
Command Line Client (CLI)
npm incorporates a CLI (Command Line Client) that can be utilized to download and introduce
programming.
Windows Example-
C:\>npm install <package>
Installing npm
npm is introduced with Node.js. This implies that we need to introduce Node.js to get npm introduced on
our PC.
Software Package Manager
The name npm (Node Package Manager) comes from when npm first was made as a bundle director for
Node.js. All npm bundles are characterized in documents called package.json. The substance of
package.json should be written in JSON. Something like two fields should be available in the definition
record: name and form.
{
“name” : “apna-store”
“version” : “8.1.2”,
“description” : “A package for Apna Store”,
“main” : “apna-store.js”,
“Keyword” : [“apna”, “apna-store”, “store”],
“author” : “Devang”,
“licence” : “ISC”
}

Managing Dependencies
npm can oversee conditions. npm can (in one order line) introduce every one of the conditions of a venture.
Conditions are likewise characterized in package.json.

3.3.10 Stripe Payment Gateway

Stripe is a fintech organization that was established in 2010. Stripe considers themselves a "full-stack
installment processor." In basic terms, this implies that they are an outsider installment processor and
installment passage. They put themselves aside from their rivals by having the option to work with 135
monetary standards. Along these lines, enormous organizations have embraced them to handle installments.
Organizations like Lyft, Blue Apron, and Pinterest all utilization Stripe.

Stripe Payments is an installment handling stage. It permits you to move cash from a client's ledger to your
business' record utilizing a Mastercard or a charge card. Stripe is generally utilized for eCommerce
applications and online exchange.

To deal with a web-based exchange for your business, you want both an installment processor and an
installment passage. As referenced earlier, Stripe is both. The entryway catches the Visa or charge card
data, then, at that point, sends it to the processor to handle the exchange. The processor will take an
exchange expense, then, at that point, the assets will be shipped off the business' ledger. Since Stripe can
give both the door and the processor it is the most helpful web-based installment strategy accessible.

Simple to Integrate
Numerous e-Commerce organizations decide to utilize Stripe since it is not difficult to coordinate into a
current site. Sometimes, the Stripe installment devices are incorporated into the site as of now. They can be
switched now and again as effectively as clicking a couple of buttons.

Stripe makes it simple to make their installment handling administration ready, as well. They give fantastic
client support to entrepreneurs who need help. Utilizing Stripe Checkout implies that you have pre built
fields and resources, as well. Like that, we don't need to battle to sort out them our self.

Denied Businesses According to Stripe

Stripe has the privilege to deny assistance to any business as they are exclusive. Thusly, there are a
rundown of disallowed things and organizations that Stripe won't permit to utilize their foundation. This is
because of legitimate worries, or security worries, by and large.

 Monetary administrations
 IP Infringement, managed, or unlawful items and administrations
 Savage or tricky practices
 Drug gear
 Staggered advertising
 Online entertainment movement

These are movements of every kind that are not permitted to use Stripe's installment handling stage

3.3.11 Dialogflow Chatbot

Dialogflow is a natural language understanding stage that makes it simple to plan and incorporate a
conversational UI into your portable application, web application, gadget, bot, intelligent voice reaction
framework, etc. Utilizing Dialogflow, you can give new and drawing in approaches to clients to
communicate with your item.

Dialogflow can examine numerous sorts of contribution from your clients, including message or sound data
sources (like from a telephone or voice recording). It can likewise answer your clients in a few different
ways, either through text or with engineered discourse.
Reasons for choosing Dialogflow
1. Price - If you simply need to master constructing a Chatbot or you don't have numerous clients, a
Standard Edition is thoroughly free.
2. Multi-station simple reconciliation - Dialogflos gives a single tick incorporations to most famous
informing Apps like Facebook Messenger, Slack, Twitter, Kik, Line, Skype, Telegram, Twilio and Viber.
Indeed, even to some voice collaborators like Google Assistant, Amazon Alexa and Microsoft Cortana
3. Natural Language Processing (NLP) - Contrasted with certain stages which chips away at predefined
questions like Chatfuel, Dialogflow can offer better client experience with NLP. DialogFlow Agents are
very great at NLP.
Working of Chatbot
There are definite advances:
1. A client sends a message/voice message to a gadget or an App
2. The App/Device moves the message to Dialogflow
3. The message is sorted and matched to a comparing purpose (Intents are characterized physically by
designers in Dialogflow)
4. We characterize following activities for every expectation in the satisfaction (Webhook).
5. Whenever a specific purpose is found by Dialogflow, the webhook will utilize outside APIs to observe a
reaction in outer information bases.
6. The outer information bases send back expected data to the webhook.
7. Webhook sends organized reaction to the purpose.
8. Expectation creates noteworthy information according to various channels.
9. The significant information go to yield Apps/Devices.
10. The client gets a text/picture/voice reaction.

3.3.12 Dialogflow Google Assistant

Dialogflow gives a consistent combination Google Assistant. This reconciliation enjoys the accompanying
benefits like -
1. We can utilize a similar Dialogflow specialist to drive Google Assistant and different reconciliations.
2. Dialogflow specialists give Google Cloud endeavor grade security, protection, support, and SLAs.

Convectional Actions (Dialogflow)

Conversational Actions expand the usefulness of the Google Assistant by permitting designers to make
custom encounters, or discussions, for clients on the Assistant. In a discussion, your Conversational Action
handles demands from the Assistant and returns reactions with sound and visual parts. Conversational
Actions can likewise associate with outer administrations for added conversational or business rationale
prior to returning a reaction.
For instance, clients can summon your Conversational Action to get a reaction from your outer satisfaction
administration when they need to look into data, get a customized proposal, or perform exchanges
including computerized installments.

3.3.13 Dialogflow Telephony

The Dialogflow telephone passage highlight gives a phone connection point to our representative. It is
utilized to fabricate conversational IVR (intelligent voice reaction) arrangements that incorporate with the
remainder of our call community organization. Right now, we can choose a phone number facilitated by
Google.
Limitations
1. Language support - This combination just backings utilization of one language for every specialist.
Assuming improved discourse models is empowered for the specialist, this coordination just backings the
accompanying dialects:
English (en)
English - US (en-US)
In the event that improved discourse models is impaired for the specialist, see the Phone segment on the
Language reference page for the rundown of upheld dialects.

2. Phone number support - Just US telephone numbers are upheld, both for approaching calls and for call
moves.
 Chapter 4
System Analysis and Design

4.1 System Feasibility

The system requirements can be divided into three broad categories namely user requirements, software
requirements and hardware requirements.

4.1.1 User Requirements

A user needs the following system requirements to access the product.
● Internet Browser- A browser is an application program which allows the user to access and
interact with all the information available on the web. Some of the most widely used internet
browsers are Google Chrome, Mozilla Firefox, Safari, Internet Explorer & Microsoft Edge.
● Active Internet Connection- Internet is the network which allows a computer (or any computing
device) to communicate with other computers (or computing devices) anywhere in the world.

4.1.2 Hardware Requirements

Hardware utilized for the advancement of the undertaking -
● Intel i3 7th Generation.
● Processor - 64-bit, four-core, 2.5 GHz minimum per core
● RAM - 8GB
● Hard Disk - 1TB

4.1.3 Software Requirements

Software expected for the improvement of the undertaking -
● Operating System: Windows 8/Wndows10/ Windows 11
● Platform: Visual Studio Code.
● Front end: HTML, CSS, Tailwind CSS, JavaScript, React.js and Next.js.
● Back end: Firebase, Stripe.

4.1.3.1 Operating system

Operating System (OS) is a software program that controls computer hardware, software resources, and
provides standard computer programming services.
● Windows 8 is a major release of the Windows NT operating system developed by Microsoft. The
product was released for production on August 1, 2012. Windows 8 has introduced major changes to the
operating system platform and user interaction aimed at improving its user experience on tablets, Windows
now competes with mobile applications, including Android and iOS.

● Windows 10 is a major release of the Microsoft Windows NT operating system. It closely follows
Windows 8.1, which was released about two years earlier. It was released on July 15, 2015, and later went
on sale on July 29, 2015. Windows 10 was made available for download via MSDN and TechNet, as a free
upgrade for commercial copies of Windows 8 and Windows 8.1 users of Windows. Save, even for
Windows 7 users with Windows Update. Windows 10 gets a continuous new build, available at no
additional cost to users, in addition to building additional tests for Windows 10, available in Windows
Insider. Business-enabled devices may receive these updates at a slower pace, or use long-term support
measures that receive only significant updates, such as security episodes, within ten years of their extended
support life.

● Windows 11 is the latest major release of the Microsoft Windows NT operating system, released
October 2021. It is a free upgrade to Windows 10 (2015), available for Windows 10 devices that meets the
requirements of the Windows 11 operating system.
Windows 11 introduces major changes to Windows 10x-influenced Windows 10X shell, which includes
the original redesigned menu, switching "live tiles" with a separate "Widgets" panel in the taskbar, the
ability to create window tile sets can be reduced and restored to the task bar as a group, and new inherited
game technology in the Xbox Series X and Series S as Auto HDR and Direct storage in compatible
hardware. Internet Explorer (IE) has been replaced by Chromium-based Microsoft Edge as the default web
browser as its predecessor, Windows 10, and Microsoft Groups integrated into the Windows shell.
Microsoft has also announced plans to allow more flexibility of software that can be distributed through the
Microsoft Store, as well as support for Android Windows 11 applications (including working with Amazon
to make its app store available for use).

4.1.3.2 Visual Studio code

Visual Studio Code is a source code editor developed by Microsoft Windows, Linux and mac OS. Provides
features such as support debugging, syntax highlighting, smart coding, captions, coding, embedded Git.

4.1.3.3 Front end

HTML - Visual Studio Code is a source code editor developed by Microsoft Windows, Linux and mac OS.
Provides features such as support debugging, syntax highlighting, clever coding, captions, coding,
embedded Git.

CSS - CSS stands for Cascading Style Sheets. CSS defines how HTML elements should be displayed (or
document presentation on the web).
JS - JavaScript is a translated, or timely, version a language with basic functions. It is a popular writing
language for Web pages.

Tailwind CSS - It is a custom-designed, low-quality CSS framework that gives you all the building blocks
you need to create decorated designs without any annoying styles you have to strive to escape.

React JS - React is a JavaScript library. Used to build user interfaces. React JS is used to build applications
one page. It allows us to build Functional Interface Parts.

Next JS - The next JS is the React Framework. Next JS features include server-side rendering and
production of static websites.

4.1.3.4 Back end

Firebase - Firebase is a Backend-as-a-Service application development platform. Provides background
hosting services such as real-time website, cloud storage, authentication, crash reporting, machine learning,
remote stopping, and capturing your stationary files.

Stripe - Stripe is an installment door that permits you to acknowledge charge card installments. This can be
done using an online processor or credit card terminal. It does this by transferring money between your
merchant account and the payment processor.

4.2 ER Diagram
ER Diagram stands for entity relationship diagram. It shows the relationship between the entities stored in
a database. An entity refers to an object.

Entity:
An entity can be a living thing - a person, a car, a house, or an employee - or it can be something that
makes sense - a company, a job, or a university course.

Attribute:
Attributes are factors that define the nature of a entity. For example, Roll_No, Name, DOB, Age, Address,
Mobile_No attributes that describe a Student entity type.
In Apna Store, The ER diagram consists of two entities, the users and the orders.
 Users
Username

Orders
Order id
Table 4.1
Amount

Shipping Amount

Images

Timestamp
Table 4.2

There are two tables in Apna-Store database. The first table is the users table. The users table contains
usernames of the users who are apna-store users. When these users order a product, a unique order id is
generated. This order id is stored against the username.

The second table is the orders table. The orders table contains details about the orders placed by a user.
Every order can be distinguished on the basis of a unique order id. This order id stores information about a
particular order. The order table has attributes:

 Amount: Total price of the ordered product.

 Shipping Amount: Delivery charges, included in total amount.
 Images: Images of the ordered product.
 Timestamp: Date and time when the order was placed.

4.3 Activity Diagram

An activity diagram shows the way of behaving of the framework. It is a behavioral diagram which shows
the various states of the system from start point to the finish point including all the decision paths involved
in the process.
 Figure 4.1 Activity Diagram

● The user will jump on the home page after opening the web application. The home page or the landing
page will facilitate the users to browse through the products. The user can then select the product of
their need and choice. The user needs to click the item to open the detailed view of the product.

● The user can add the product to the cart directly from the product feed or the detailed product view
page.

● After the product is added in the cart, the user lands on the cart page. The cart allows two main
functionalities namely order and edit functionality.
The edit functionality allows the user to manage the products available in the cart while the Order
functionality allows the user to place the order. The user must be logged in to the system to access the
payment gateway for the order functionality.

 If the user is logged in, the system redirects the user to the payment gateway on clicking the order
button. If the user is not logged in, he/she must login first to place the order.
 Figure 4.2 Product Cart Page

● The next page is the payment gateway which needs some user information like shipping address & card
details.

Figure 4.3 Payment Gateway Page

● If the order is placed successfully, notification appears on a new page and an unique order id is
generated to refer to a particular order.
Figure 4.4 Confirmed Order Page
 Chapter 5
Implementation

5.1 Designing the Apna-Store Prototype Layout using Figma

The very first step in building our project was to define the outline of the project about how it will be going
to look once developed. To execute this step we have used an application called “FIGMA”. Figma is an
outline illustrations altering and UI plan application. We can utilize it to do a wide range of visual
computerization work from wire framing sites, planning portable application interfaces, prototyping plans,
creating virtual posts and everything in the middle. The main intuition behind using Figma was that it
allows designs to work directly on the browser unlike other graphic editing tools i.e., we get access to our
project and can start designing from any computer or platform without having to buy multiple licenses or
install software.

Figure 5.1 UI Design of Site Using Figma

5.2 Building the header component
Defining all the option which the user will be able to see at the top navbar, like username, sign In/Sign Out,
Past orders placed details, and shopping cart.

Figure 5.2 Header Component Function

5.3 Implementing the Fake Store API

Next Step was to get/on board the products on the website. To perform this step hustle-free we have “Fake
Store API”. Fake Store API is a free online REST API that can be utlilized at whatever point we want
Pseudo-genuine information for web based shopping website without serving any server-side code.
This Fake Store API includes various types of product like Men Casual Slim Fit T-Shirt, Men Cotton
Jacket, Men Casual Premium Slim Fit T-Shirts, Backpack, etc. as shown in figure 5.3.
 Figure 5.3 Fake Store API

5.4 Building the Product Feed component and Product Pages

Next step was to developing the landing/home page where all the available products will be displayed
along with separate specific product page where all details related to the user selected product will be
displayed.

Figure 5.4 Product Feed Function

5.5 Implementing the Authentication using Google OAuth.
The next step was to validate the user before making the order placed. To perform the Authentication we
used Next.js and Google OAuth strategy. Now, only the signed In user will be able to place their order via
payment gateway.

Figure 5.5 Authentication Using Google OAuth

5.6 Connecting the Firebase Database

The next step was to stone all the information regarding the user and the order placed detail. So, have we
have used Firebase database as it is highly scalable as compared to MYSQL database. In the database, we
store the information such as email of the user, unique order placed ID/Key, and the details of the products
which were brought.

Figure 5.6 Connecting the Firebase

5.7 Implementing the checkout Functionality
Next step was to develop the shopping cart functionality in the project where the user can add/remove the
product of their choice of interest. Here we implement the fucnction CheckoutProduct ({id, title, price,
rating, description, category , image, hasPrime}) as shown in figure 5.7.

Figure 5.7 Checkout Function

5.8 Implementing the Stripe Payment Gateway

The next step was to set up a project portfolio for the project. So, here we are using the Stripe Payment
Gateway. Stripe is an online payment processing platform and business credit card processing platform.
When a customer buys a product online, the funds need to be delivered to the seller. Allows secure and
efficient processing of funds by credit card or bank and transfers such funds to the merchant account.
Stripe allows both a payment processing platform and a credit card payment gateway and both are required
for each successful online payment making it a very efficient and convenient software to choose from
online payments. Here we use the order sequence ({id, amount, amountShipping, items, timestamp,
images}) as shown in Figure 5.8.
 Figure 5.8 Order Function

5.9 Integrating the Stripe Command Line Interface(CLI) and creating webhook
Next step was to transfer the information stored in Stripe Payment Gateway at the time of order placed to
our database. To perform this efficiently we need to make a web hook first. And to test the web hook
integration through event triggering we have used the stripe command line interface.

The Stripe CLI is an engineering device to assist you with building, testing, and dealing with your mix with
Stripe straightforwardly from the order line. It's easy to introduce, chips away at macOS, Windows, and
Linux, and offers a scope of usefulness to upgrade your engineer insight with Stripe. You can utilize the
Stripe CLI to:

 Make, recover, update, or erase any of your Stripe assets in test mode (for instance, make an item)
 Stream constant API solicitations and occasions occurring in your record
 Trigger occasions to test your webhooks joining
 Figure 5.9 Stripe Command Line Interface (CLI) and Webhook

5.10 Building the Order Details Page ( Past History of Order Placed)
In this we develop a page where the user can see what all product he/she have brought in the past along
with date and price.

Figure 5.10 Confirmed Order Page Function

5.11 Integrating the Dialogflow Chatbot (Shopy)
Next step was to integrating a personal assistant on the website, so that the user can get one-stop station for
all queries regarding the apna-store. Dialog flow Chatbot is used to design and integrate a conversational
user interface into mobile apps, web applications, devices, bots, interactive voice response systems and
related uses.

Figure 5.11 Dialogflow Chatbot Implementation

5.12 Integrating the Telephony Gateway and Google Assistant

Next step was make apna store available on a telephony platform where the user can dial a number on their
mobile phones and can get all the information of the product available on the apna-store.
Android users can also use Google Assistant to take to our personal assistant “Shopy” in order to receive
all the information regarding the details of the product available on the apna-store.
 Chapter 6
Result & Discussion

6.1 Working
Step 1 - HOME PAGE or LANDING PAGE The default landing page or the home page of the “Apna
Store” website looks as shown in the Figure 6.1.
This is the view of the landing page when the user is not signed in. The home page contains a search box
for the ease of searching products available on the website. This page contains the quick links for sign in
and sign out functionality.

The home page also contains the product feed and the quick link to the shopping cart. User can click on a
product to view additional details of the product. The cart can be accessed only after signing in.

There is also a quick link to the orders page. To go to the orders page, the user must be signed in. On the
top left corner, lies the logo and branding of “Apna Store”.

Figure 6.1 Home Page (Before Login)

To sign in, the user is required to click on the sign in quick link. This redirects the user to the sign in page
where the users can sign in using their credentials.
Step 2 - LOGIN PAGE Once the user clicks on the sign in link, the sign in page opens. The sign in page is
the ‘Google Authentication Page’ where the user will be asked to sign in using an appropriate google
account.
In figure 6.2, the previously used google accounts can be seen. For instance, we selected the google
account named ‘Devang Saxena’ with the email address [email protected].

If your google account doesn’t show up in the list shown, click on “Use another account” option. Enter a
google account and password to proceed further.

Figure 6.2 Login Page

The google authenticator ensures that only authorized person can sign in. After successful login, the user
can use the functionalities such as managing the products in the basket and create a new order.

Step 3 - HOME PAGE or LANDING PAGE (After Login) The landing page after signing in is similar
to the one without signing in with some minor changes. This can be seen in figure 6.3. The sign in option is
replaced by “Hello, xyz”. Here, xyz refers to the name of the user as mentioned in the google account. In
figure 6.3, it shows “hello, Devang Saxena” Since it is the name of the user as mentioned in the google
account.
 Figure 6.3 Home Page (After Login)

Step 4 - PRODUCT FEED The product feed can be seen on the landing page itself. After signing in, the
user will be able to add the product to the cart and will be able to checkout.

The product feed contains the image of the products followed by some basic details. The products images
are arranged in card like format.

Each card contains the details such as the image of the product, the name of the product, Customer rating,
etc. The top right corner of the product contains the name of the section to which the product belongs, for
example: jewelry, men clothing, women clothing, children clothing, etc as shown in the figure 6.4.

Each product card has two buttons available on it. The first button is the “Add to basket” button which adds
the product in the shopping cart. The customer can go to the shopping cart and proceed to payment to buy
the product. This process involves the filling up of various details such as card details, address, etc by the
user on the payment page.
 Figure 6.4 Product Feed

Step 5 - PRODUCT PAGE DETAIL The second button is the view button. Click on the view button
opens the detailed product view page for the selected product. This page contains additional information
about the product.
The product details page contains more detailed information about the product. This page is divided into
two panes: left and right. This page contains the image of the product in the left pane. The right pane
contains additional information about the product. At the top of the right pane is the name of the product in
bold fonts. This is followed by a horizontal line.

The part after the horizontal line contains a brief summary or description of the product. For instance, in
figure 6.5, the description contains the details about the fabric of the t-shirt, its type, sleeve length, neck
pattern and design, the texture and stretching ability of the fabric, the occasion where the product can be
used and the season in which it can be used.

Figure 6.5 Product Detail Page (T-shirt)

Step 6 - After the brief description lies a bold header “product details”. The information under this header
contains the details in tabular form. For instance, in figure 6.6, the product details section contains style
code, color code, type or category of the product, and the colors available.
This is followed a series of images related to the product. After this, lies the section of Available Offers.
This section contains all offers on the product such as Bank offers, EMI offers, etc. It is followed by the
replacement policy.

In the end, the cost of product is shown inclusive of offers, the actual cost and the available discount is
shown.

Figure 6.6 Product Detail Page (White Gold Ring)

Step 7 - CART PAGE The user can add the product to the cart from the product details page as well. Once
the user adds the product to the basket, the user can navigate to the basket and proceed to payment gateway
for further processes.

The shopping cart id divided into two sections. The left pane contains a banner and the list of items in the
basket. This list contains the image of product, name of the product, customer ratings and cost of product.
Each item has two buttons which support two different functionalities. The first button is the add to basket
button while the second button is the remove from basket button.

The right-side pane contains the total price of all the items in the basket and a “Proceed to checkout
button”.

Figure 6.7 Cart Page

Clicking on “Proceed to Checkout” button redirects to the payment gateway. The stripe payment gateway
has been used. The payment page is also divided into two sections. The section on the left shows the items
in the cart and total amount being paid.
It also shows the name of business, Subtotal, Shipping charges, Total due. The end of this sections contains
the terms and policies of stripe payment gateway and also shows a label mentioning “Powered by Stripe”.

Step 8 - PAYMENT GATEWAY The section on the right contains a form for user. This form is labeled
as “Shipping Information”. It contains fields to enter email, and shipping address. The shipping address
field contains the name of the user, Country, State, Postal code, and address. The address contains the
house number or name of the building followed by the street and area.

There is one more label in the section on the right. It is labeled as Payment details. The payment details
have the fields to enter card details such as card number, expiry date, CVV. This is followed by a checkbox
which has a label “Billing address is same as shipping”.
 Figure 6.8 Payment Gateway (Before Payment)

At the of the Payment information, a Pay button is present. In figure 6.8, it can be seen that form is editable
before clicking the pay button. When the user clicks on the pay button the edit functionality is disabled and
the “Pay” text on the button is replaced by a “tick” mark. This can be seen in figure 6.9.

Figure 6.9 Payment Gateway (After Payment)

Step 9 - THANK YOU PAGE As soon as the payment is processed, an order confirmation page appears.
The order confirmation page has success message “Thank You, Your Order Has Been Confirmed”
followed by a text saying “Thank you for shopping with us. We’ll send a confirmation once your item has
shipped, if you would like to check the status of your order(s) please press the link below.”

The below link contains a “Go to my orders” button. This button redirects the user to the orders page which
shows all previously done orders. Each request has a one of a kind request id.

The Order confirmation page looks as shown in figure 6.10.

Figure 6.10 Order Confirmed Page

Step 10 - ORDER HISTORY PAGE The orders page contains all orders placed. These orders can be
differentiated on the basis of unique order id. For instance, as shown in above use case, a user purchased a
t-shirt and a bag, this t-shirt and bag can be seen in the orders page as shown figure 6.11.

This page shows the number of orders placed till date and details about a specific order. This page shows
the date on which the order was placed, Total amount and the delivery charges. The top right side of the
pages shows the unique order id.

This unique id is generated every time a new order is placed. Below the unique user id, it shows the
number of items in the order.

The images of products which were ordered can also be seen below the details about the order, as shown in
figure 6.11.
 Figure 6.11 Order History Page

Step 11 - STRIPE ORDER PAGE All the payment information is saved in the stripe payments database.
This page contains all the information processed using the stripe payment gateway. It contains details about
all payments, succeeded payments, refunded payments and uncaptured.

The description contains the payment amount, status of payment, description of payment, name of the
customer, and date of payment. This can be seen in figure 6.12.

A unique transaction id is generated for each payment which can be used further for tracking transactions
and referring to invoices. This unique id can be seen under the description field in the stripe payment
database as shown in figure 6.12.

This unique payment id can also be seen in the order database payment section.
 Figure 6.12 Payment Details Page

Clicking on any payment opens the detailed view of the payment description. The payment details page as
seen in figure 6.12 is broadly divided into 5 sections.

● The first section contains the basic details about the order such as the amount, date, customer name,
payment method, and risk evaluation.

● The second section shows the timeline of the payment. It shows the exact time when the payment
started, and when it was processed.

● The third section is the checkout summary section. It contains detailed information about customer and
shipping address. It also contains the details of the products ordered. These details consist of amount,
quantity, name and product image.

● The fourth section contains the Payment details such as the payment provider name, net amount,
delivery and processing fee, total amount, etc.

● The final section is the payment Method section which stored the card details, billing and shipping
address, etc.
Figure 6.13 describe the details about the order which we stored in the stripe payment gateway at the time
of placing the order.

Figure 6.13 Stripe Order Page

Step 12 - ORDER DATABASE The Firebase database is shown in figure 6.14. It stores details about the
order. These details include amount of product, shipping amount, images, and timestamp of the order. It
describes the details about the order which was stored in Firebase at the time of placing the order.
 Figure 6.14 Order Database

6.2 Additional Features

Apart from all these features, we have added three extra functionalities to the ‘Apna Store’ for the ease of
user access and these two features are a great way to interact with the ‘Apna Store’ database and fetch the
result for customers.

6.2.1 Google Assistant

The Google Assistant helps the users by listening their queries, looking into the database and replying the
customer accordingly. This is a must have feature nowadays and is very helpful. The google assistant is
available on several devices. The user needs to ask Google to let them talk to Apna Store. After that, the
users can ask the questions of their choice to google assistant regarding the product.

Working of Google Assistant

Let us suppose a user ‘Max’ wants to buy a bag from ‘Apna Store’. Max needs some information about
bags and doesn’t want to browse through the entire collection. So, Max prefers using google assistant to
know about the bags on ‘Apna Store’. Max opens google assistant just by saying “hey Google” or “Ok
Google”. Then the conversation flows as shown.

Max - Hey google! Talk to ‘Apna Store’

GA - Good day! I am Shopy, I can help you to answer your queries regarding ‘Apna-Store’.
 Figure 6.15 Google Assistant Demo-1

Max - Are there any bag available?

GA - Yes

Figure 6.16 Google Assistant Demo-2

Max - What is the colour of bags available?

GA - Grey

Figure 6.17 Google Assistant Demo-3

Max - Is rain cover present inside the bag?

GA - Yes
 Figure 6.18 Google Assistant Demo-4

Max - What is the cost of the bag?

GA - 109.95

Figure 6.19 Google Assistant Demo-5

Max - Are there any bank offers available for buying bag?
GA - Yes, 10% off on SBI Credit Card, upto Rs.1500, On orders of Rs.5000 and above, T&C

Figure 6.20 Google Assistant Demo-6

6.2.2 Dialogflow Chatbot
The Dialogflow chatbot is another important feature of ‘Apna Store’. This feature is similar to google
assistant but it is available on the website itself. It also allows users to query the details related to the
products to the Apna Store database directly.
Working of Dialogflow Chatbot
The Chatbot responds to whatever the user asks regarding the available products. Let us suppose a user
named ‘Ria’ has to order a T-shirt. She types ‘Hello’ in the chatbot window. The chatbot replies as shown.

Figure 6.21 Chatbot Demo-1

Ria then asks if there is any T-shirt available. The dialogflow chatbot communicates with the database and
responds accordingly. Here, as seen in Figure 6.22, the chatbot replies with ‘Yes’.

Figure 6.22 Chatbot Demo-2

Ria wants to know about the size of the T-shirts available. She asks the chatbot about the same and gets a
reply that it is available in all standard sizes. This conversation can be seen in figure 6.23.

Figure 6.23 Chatbot Demo-3

Ria asks about the price of the t-shirt. The chatbot replies to the query as shown in figure 6.24.

Figure 6.24 Chatbot Demo-4

Ria queries about the colors in which the t-shirt is available and gets a reply from the apna store chatbot.
The chatbot replies ‘Black-white’.
 Figure 6.25 Chatbot Demo-5

At the end of the conversation, Ria asks the chatbot if there is any bank offer available. The chatbot gives
information about the available offers. Figure 6.26 shows this conversation.

Figure 6.26 Chatbot Demo-6

6.2.3 Telphony
Telephony is the third extra feature. Telephony allows the users to ask information about the products even
if there is no internet.
Working of Telephony
Telephony is a phone-call based service. The users can call on a number and interact with Shopy to know
about any information related to products.

For Example:
Let's assume Edwin wants information regarding SSD Disk but his network suddenly stopped. But he will
able to get the details as our E-Commerce Web application to provide phone-call service for getting
product details. Now, Edwin call the Number which is provided by our site and he will talk to Shopy.

Edwin - Is there any SSD available?

Shopy - Yes, there is SSD Silicon Power and SSD Sandisk available.

Edwin - What is the price of SSD Silicon power?

Shopy -The price is ₹109.00 only.

Edwin - What is the storage capacity of Silicon power?

Shopy - Storage is 256 GB.

Edwin - Is there any bank offer available on silicon power?

Shopy - Yes, there is 10% off on SBI Credit Cards.

Edwin - Is COD available on Silicon power?

Shopy - No, there is no cash on delivery.

Edwin - What is the storage capacity of Sandisk?

Shopy - Storage Capacity is 1TB.

Edwin - What is the Price of Sandisk?

Shopy - The price is ₹209.00 only.
 Chapter 7
Conclusion, Limitation & Future Scope

7.1 Conclusion
The blasting of the dotcom bubble has caused a few organizations to capture that carrying on with work on
the Web isn't as simple at it sounds. Without a doubt, the force of the Internet to arrive at any area of the
planet holds fantastic potential for improving worldwide exchange and supporting worldwide economy.
Notwithstanding, similarly as each coin has a flip side; it has been seen that carrying on with work on the
Internet additionally has chances and lawful issues related with it. The fast speed of online business
improvement has commonly left the general set of laws battling to keep up and heaving for breath.
Similarly as organizations doing web based business must develop new business strategies and rules, the
general set of laws is attempting to adjust existing regulations to fit new settings where it is essentially
indistinct the way in which these regulations will apply. Amidst this legitimate unrest, India is one of the
couple of nations across the globe that has authorized an internet business regulation. Be that as it may,
substantially more is expected to successfully direct the tangled web. Viable gamble the board
methodologies combined with sufficient lawful documentation will go quite far in safeguarding internet
business organizations. Albeit the Internet is a goldmine, without sufficient legitimate assurance, it could
turn into a landmine. By and by, with the fast development of web, web based business is set to assume a
vital part in the 21st century, the new amazing open doors that will be opened up, will be available to both
enormous enterprises and little organizations. The job of government ought to be to give a legitimate
structure to web based business so that while homegrown furthermore, global exchange are permitted to
grow their viewpoints, essential freedoms like protection, scholarly property, anticipation of
misrepresentation, purchaser insurance and so forth are completely dealt with.

Fate of online business isn't effectively unsurprising yet according to the current situation web based
business industry is becoming rapidly. There are a few fundamental elements which will add to the blast of
the online business industry in India which incorporates M-Commerce benefits, different installment
choices, substitution ensure, area based administrations, shipment choices and fast administrations ,Terms
and Conditions ought to be clear and item quality ought to be equivalent to showed on the destinations. The
complete number of web clients is supposed to arrive at 1,134.04 million by 2025. For the sake of the
review and specialists sees the eventual fate of online business would be exceptionally brilliant in India
whenever carried out with the every single fundamental variable.
7.2 Limitations
Web based business, despite the amazing open doors it presents additionally has represents specific
difficulties which are now and again an excessive amount to deal with for new companies:

1. E-Infrastructural Issues - Internet is the foundation of web based business. Tragically, in India web
entrance is up to this point grimly low at 47 percent of the populace, infiltration of (PC) as low as 3.5 per
thousand of populace and infiltration of phone just 2.1 percent of populace, online business isn't effectively
reachable remaining parts to the average person.

2. Charge related issues - Tax rate arrangement of Indian market is one more variable for lesser
development pace of E-Commerce in India in contrast with other created nations like USA and UK. In
those nations, charge rate is uniform for all areas while charge design of India differs from one area to
another. This component makes bookkeeping issues for the Indian internet based business organizations.

3. Contact and Feel - Indian clients are more agreeable in purchasing items truly. Organizations
managing items like clothing, handiworks, adornments need to confront difficulties to sell their items as the
purchasers need to see and contact before they purchase these stuffs.

4. Strategies and Supply Chain - Logistics disillusionment in any space can mean negative mischief to a
startup's future and can hurt the brand for the most part. Add to this the requirement for a reliable
merchandise exchange. Getting this right is a test.

5. High Competition - With the presentation of countless players in the all around cutthroat online
business market, the client is spoiled by offering tremendous limits, offers, taking returns, and so on
bringing about less edges.

6. Branding and Marketing - To get individuals to come on an internet business webpage and make a
buy includes weighty expense because of marking and advertising. This cost is huge and can be brought
down to cost per client, assuming the volumes grant to do as such. Specialists say that the normal figure for
this measurement in the current online business biological system is between INR 500 - 1000 client, which
isn't reasonable for even medium estimated organizations, not to mention beginning phase ones.
7.3 Future Scope

1. Web-based Entertainment - Majority of web based purchasing choices are made on Social Media.
Interpersonal organization like Facebook, LinkedIn, Twitter, Google+, Pinterest and so forth have turned
into a mechanism for simple sign in and buy. Besides, the clients can remain refreshed by means of the
posts distributed on this media. Further, the publicizing and advancements on these social destinations has
expanded the odds of coming out on top of producing exchanges to many folds.

2. Drone Delivery - Companies have been working their strategy for getting around to improve the
conveyance cycle to abbreviate human exertion as well as time. The solution to these issues is Delivery by
Drones. DGCA is currently optimizing the method involved with giving rules for the utilization of robots
for common purposes in India. In the event that everything goes according to the arrangement, India could
turn into the primary country on the planet to permit the utilization of robots for common purposes.

3. Application just Approach - Statistics recommend the fate of web lies in mobiles. Specialists express
that in excess of 1,134.04 million individuals in India will utilize the Internet by 2025, and 80-90% of them
will get to the Web on cell phones. This will make all central parts change to application just model.
Around 66% of its internet based traffic of Flipkart comes from clients in little urban areas and towns.
Flipkart's application just methodology expects bigger importance in these spots where the vast majority
don't possess PCs and have restricted admittance to broadband.

4. Google's Buy Now Button - Google is supposedly chipping away at its own "Purchase Now" style
button that would permit e-customers look for items on Google and buy them with a solitary snap, directly
through Google's own indexed lists page. The button will be shown close to supported indexed lists
underneath a "Shop on Google" heading at the highest point of the page. At the point when clients click on
the Google's "Purchase Now" button, they will be re-coordinated to another Google page that will permit
them to pick explicit thing subtleties, like tone and size, and afterward select a delivery course. Google
would then pass on request data including the client's name and transportation address, to the retailer.

5. Artificial Intelligence - As the web based business space gets soaked, financial backers searching for
creative utilization of innovation are focusing on organizations creating Artificial intelligence (AI)
arrangements. Fly Airways is exploring different avenues regarding one such arrangement concocted by
Vizury. It filters through the singular's public substance on the web, as well as the client's past quests and
makes a moment profile. In light of this data, the carrier knows whether to bundle inn bargains, or
absolutely stay with airfare limits. The framework additionally permits them to anticipate how probably is
it for the client to redesign, and how adaptable would the client be to change travel area or date.
 References

[1]. Nisha Chanana and Sangeeta Goele “Fate of E-Commerce in India”. March 2016
International Journal of Emerging Trends & Technology in Computer Science Volume 5(Issue 2): 232-235.

[2]. Sarbapriya Ray “Emerging Trend of E-Commerce in India: Some Crucial Issues, Prospects
and Challenges”.Computer Engineering and Intelligent Systems ISSN 2222-1719 (Paper) ISSN
2222-2863 (Online) Vol 2, No.5, 2011

[3]. Dr Rina Godara “Challenges and future scope of E-commerce in India”.June 2017
DOI:10.9790/487X-1906019195

[4]. https://www.geeksforgeeks.org/introduction-to-tailwind-css/

[5]. https://www.w3schools.com/

[6]. https://en.wikipedia.org/wiki/Visual_Studio_Code

[7]. https://firebase.google.com/

[8]. https://reactjs.org/tutorial/tutorial.html

[9]. https://nextjs.org/docs