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 Figure…………………………………………………………………..(viii)
List of Tables……………………………………………………………………(ix)

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

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

1.3 Scope and Purpose of the project………………………... 2-3

1.4 Project Specification…………………………………….. 3-3

Chapter 2. Literature Survey ……………………………………… Pg.No
2.1 Introduction……………………………………………… 4-4
2.2 Existing System…………………………………………. 5-6
2.3 E-Commerce in India……………………………………. 6-12

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

3.1 Problem Statement………………………………………. 13-13

3.2 Approach………………………………………………… 13-14
3.3 Technologies Used………………………………………. 14-30

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

4.1 System Feasibility……………………………………….. 30-33

4.2 ER Diagram……………………………………………... 33-34
4.3 Activity Diagram………………………………………... 35-37

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

5.1 Designing the Apna Store Prototype Layout using Figma... 38-38
5.2 Building the Header Component………………………….. 39-39
5.3 Implementing the Fake Store API………………………… 39-40
5.4 Building the Product Feed Component and Product Page… 40-40
5.5 Implementing the Authentication using Google Oath…….. 41-41
5.6 Connecting the Firebase Database………………………… 41-41
5.7 Implementing the Checkout Functionality………………... 42-42
5.8 Implementing the Stripe Payment Gateway………………. 42-43
5.9 Integrating the Stripe Command Line Interface…………... 43-44
5.10 Building the Order History Page…………..……………… 43-44
5.11 Integrating the DialogFlow Chatbot (Shopy)……………... 45-45
5.12 Integrating the Telephony Gateway and Google Assistant.. 46-46

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

Pg.No
6.1 Working…………………………………………………… 47-59

6.2 Additional Features……………………………………….. 59-67

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

7.1 Conclusion………………………………………………… 68-69
7.2 Limitation…………………………………………………. 69-70
7.3 Future Scope………………………………………………. 70-72
References …………………………………………………………… 73

Plagiarism Report ………………………………………………………

 LIST OF FIGURES

Figure No. Figure Name Page No.

Figure 3.1 React JS Interface 20

Figure 3.2 Next JS Interface 22

Figure 4.1 Activity Diagram 35

Figure 4.2 Product Cart Page 36
Figure 4.3 Payment Gateway Page 36
Figure 4.4 Confirmed Order Page 37
Figure 5.1 UI Design of Site Using Figma 38
Figure 5.2 Header Component Function 39
Figure 5.3 Fake Store API 40
Figure 5.4 Product Feed Function 40

Figure 5.5 Authentication Using Google OAuth 41

Figure 5.6 Connecting the Firebase 41

Figure 5.7 Checkout Function 42

Figure 5.8 Order Function 43

Figure 5.9 Stripe Command Line Interface(CLI) and 44

Webhook
Figure 5.10 Confirmed Order Page Function 45

Figure 5.11 Dialogflow Chatbot Implementation 45

Figure 6.1 Home Page Before Login 47
Figure 6.2 Login Page 48
Figure 6.3 Home Page After Login 49

Figure 6.4 Product Feed 50

Figure 6.5 Product Detail Page (T-shirt) 51
Figure 6.6 Product Detail Page (White Gold Ring) 52
Figure 6.7 Cart Page 53
Figure 6.8 Payment Gateway Before Payment 54
Figure 6.9 Payment Gateway After Payment 55
Figure 6.10 Order Confirmed Page 55
Figure 6.11 Order History Page 56
Figure 6.12 Payment Details Page 57
Figure 6.13 Stripe Order Page 58
Figure 6.14 Order Database 59
Figure 6.15 Google Assistant Demo-1 60
Figure 6.16 Google Assistant Demo-2 61

Figure 6.17 Google Assistant Demo-3 61

Figure 6.18 Google Assistant Demo-4 62
Figure 6.19 Google Assistant Demo-5 62
Figure 6.20 Google Assistant Demo-6 63
Figure 6.21 Chatbot Demo-1 64

Figure 6.22 Chatbot Demo-2 64

Figure 6.23 Chatbot Demo-3 65

Figure 6.24 Chatbot Demo-4 65

Figure 6.25 Chatbot Demo-5 66

Figure 6.26 Chatbot Demo-6 66

 LIST OF TABLES

Table No. Table Name Page No.

Table 4.1 ER Diagram (Users) 34

Table 4.2 ER Diagram (Orders) 34
 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
[2].

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 [1].

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 [3].

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 [1].

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 [2].

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 [2].

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 [1].

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

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 [1].
 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
re-examining 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. 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

Next step was to set-up a payment portal for the project. So, here we have used
Stripe Payment Gateway. Stripe is an online payment processing and credit card
processing platform for business. When a customer buy a product online, the
funds need to be delivered to the seller. It allows safe and efficient processing of
funds via credit card or bank and transfer those funds to the seller account.
Stripe allows both a payment processing platform as well as credit card payment
gateway and both are required in each successful online transaction making it
most efficient and simple software to choose for online payments. Here we
implement function order ({ 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 three features are a great way to
interact with the ‘Apna Store’ database and fetch the result for customers.

There are three additional features which are as follows:

1. Google Assistant
2. Dialogflow Chatbot
3. Telephony
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 March 2016 International Journal of Emerging Trends &
Technology in Computer Science Volume 5(Issue2):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