SRI KRISHNA COLLEGE OF TECHNOLOGY

An Autonomous Institution | Accredited by NAAC with 'A' Grade

Affiliated to Anna University | Approved by AICTE
KOVAIPUDUR, COIMBATORE 641042

E-COMMERCE

A PROJECT REPORT

Submitted by

NIVEDHITHA J 727821TUCS146

in partial fulfillment for the award of the

degree of

BACHELOR OF

ENGINEERING IN

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

June 2023
 SRI KRISHNA COLLEGE OF TECHNOLOGY
An Autonomous Institution | Accredited by NAAC with 'A' Grade
Affiliated to Anna University | Approved by AICTE
KOVAIPUDUR, COIMBATORE 641042

BONAFIDE CERTIFICATE

Certified that this project report “E_COMMERCE” is the bonafide work of

“NIVEDHITHA J” who carried out the project work under my supervision.

SIGNATURE SIGNATURE
CSE B( Ms.P.Ananadhaprabha &
Ms.G.Shanmugapriya) Dr.R.VIDHYA
SUPERVISOR HEAD OF THE DEPARTMENT
Assistant Professor, Professor,
Department of Computer Science Department of Computer Science
and Engineering and Engineering
Sri Krishna College of Technology, Sri Krishna College of Technology,
Coimbatore-641042. Coimbatore-641042.

Certified that the candidates were examined by us in the Project Work Viva Voce
examination held on at Sri Krishna College of Technology, Kovaipudur,
Coimbatore -641042

INTERNAL EXAMINER EXTERNAL EXAMINER

ACKNOWLEDGEMENT
 ACKNOWLEDGEMENT

First and foremost, we thank the Almighty for being our light and for
showering his gracious blessings throughout the course of this project.

We are grateful to our beloved Principal Dr.M.G. Sumithra M.E.,

Ph.D. for her tireless and relentless support.

We extend our sincere thanks to our Head of the Department

Dr.R.Vidhya for her encouragement and inspiration.

We are greatly indebted to our Industry Mentor Mr.Vignesh & Project

guide Ms.G.Shanmuga Priya Assistant Professor, Department of Computer
Science and Engineering for their valuable guidance and suggestions in all
aspects that aided us to ameliorate our skills.

We are thankful to all those who have directly and indirectly extended
their help to us in completing this project work successfully.
ABSTRACT
 iv

ABSTRACT

Nowadays most people are using online shopping platforms in their day-to-
day life. A person sitting on his/her chair in front of a computer or a smart phone
can access all the facilities of internet to buy products .CRUD refers to an
acronym of four fundamental operators of persistent database applications:
Create, Read, Update and Delete. Simply put, the term CRUD sums up the
functions that users need in order to create and manage data .I have performed
crud operations so that details can be viewed,modified,deleted and added by
admin. The purpose of this user management is to automate its existing manual
system by the help of computerized equipments and full-fledged computer
software,fulfilling their requirements, so that their valuable datas/information can
be stored for a longer period with easy accessing and manipulation of the same.
Basically the project describes how to manage for good performance and
better services for the admin to perform crud operations. So the main objective of
this project is to help admin to manage the database.
TABLE OF CONTENTS
 TABLE OF CONTENT

CHAPTER.NO TITLE PAGE NO

ABSTRACT iv
LIST OF FIGURES vi
LIST OF ABBREVIATIONS vii
1 1.2 OVERVIEW 2

1.3 OBJECTIVE 2

2 LITERATURE SURVEY 3

3 SYSTEM SPECIFICATIONS 5

4 PROPOSED SYSTEM 8

4.1 PROPOSED SYSTEM 8

4.2 ADVANTAGES 9

5 METHODOLOGIES 10

5.1 LOGIN PAGE 11

5.2 SIGN UP PAGE 12

5.3 FORGET PASSWORD 13

5.4 PRODUCT PAGE 13

5.5 CART PAGE 14

6 IMPLEMENTATION AND RESULT 15

7 CONCLUSION AND FUTURE SCOPE 36

7.1 CONCLUSION 36

7.2 FUTURE SCOPE 37

8 REFERENCES 38
LIST OF FIGURES
 vi

LIST OF FIGURES

Figure No TITLE Page No

5.1 Process flow diagram 10
5.2 Login page flowchart 11
5.3 Signup page flowchart 12
5.4 Products page flowchart 13
5.5 Cartpage flowchart 14
6.1 Login page 15
6.2 Signup page 16
6.3 Recovery page 17
6.4 Otp verification 17
6.5 Home page 18
6.6 Product page 19
LIST OF ABBREVIATIONS
 vii

LIST OF ABBREVIATIONS

ACRONYMS
ABBREVIATIONS

CRUD CREATE,READ,UPDATE AND DELETE

HTTP HYPERTEXT TRANSFER PROTOCOL

SQL STRUCTURED QUERY LANGUAGE

INTRODUCTION
 1
CHAPTER 1

INTRODUCTION

User management system provides functionality to manage personal profiles and

users.Personal profiles contain information such as profile identification number, email,
first and last name, etc. Personal profiles are used for personal information such as
names, addresses,etc. In order to access personal profile confirm password is used for
authentication. User information contains user identification number, username,
password and session for authentication.

Within computer programming, the acronym CRUD stands for create, read,
update, and delete. These are the four basic functions of persistent storage. Also, each
letter in the acronym can refer to all functions executed in relational database applications
and mapped to a standard HTTP method, SQL statement.

It can also describe user-interface conventions that allow viewing, searching, and
modifying information through computer-based forms and reports. In essence, entities are
read, created, updated, and deleted. Those same entities can be modified by taking the
data from a service and changing the setting properties before sending the data back to
the service for an update. Plus, CRUD is data-oriented and the standardized use of HTTP
action verbs.

User management system also provides erroe messages while entering invalid
data.No formal knowledge is needed for the user to use this system. Thus by this all it
proves it is user-friendly.So as mentioned above it can lead to error,free,secure,reliable
and fast management system.It can assist the admin to concentrate on their otheractivities
rather to concentrate on the record keeping.Thus leading to better utilization of resource.
 2

1.1 PROBLEM STATEMENT

How can we create a website that allows admin to create and manage databases of
the client’s details and as well as product details based on the needs?.
1.2 OVERVIEW

This report discusses the result of the work done in development for the
ecommerce based on user management system for crud operations. It is a project that
mainly aims in providing the searching facilities based on various factors. Such as
update,delete,view and create details of user.

1.3 OBJECTIVE

The main objective of the Project on Admin is to manage the details of login page,cart
details page and user details page . It manages and create all the information about all details.It
tracks all the details about the User Profile,Update,Delete.
LITERATURE SURVEY
 1
7
CHAPTER 2

LITERATURE SURVEY

2.1 RELATED WORKS

[1]Raven et al. compared India and China's approaches in adoption of e-business.

Based on the literature survey and secondary data, the study analysed various factors
influencing the growth of e-businesses in the two countries.
The factors examined include government policy and focus, existing technology
infrastructure regulatory environment, experience and understanding of business
operations, and culture, among others. The study concludes that China appears to be
ahead of India in the infrastructure, but India is ahead in e-readiness. Further, it states that
both countries are poised for rapidly increasing e-business, however, problems of poverty
and inequality between urban and rural connectivity must be resolved to really take
advantage of e-business in both the countries.A comprehensive overview of the literature
concerning e-commerce customization, discussing its challenges, benefits, trends, and
issues. The authors review the theoretical and empirical evidence that describes the
motivations and usage of customization, the challenges of its implementation, and the
effects of customization on customer satisfaction, loyalty, and profitability.

[2] Study by Tarafdar and Vaidya examined the factors that determine the organizational
inclination to adopt E-Commerce (EC).
The study proposes a framework based on the qualitative data on four financial firms in India
collected through multiple case study design. Face to face interview was used to collect primary
data and existing database, company documents, press reports and websites are used to collect
secondary data. The framework describes two broad factors leadership characteristics and
organizational characteristics to explain of organizational factors on the propensity to employ
EC technologies. The study found that both leadership and organizational characteristic
 1
influence EC adoption. It establishes that leadership characteristics influence adoption of EC8
technologies in centralized organization and

This paper reviews the literature on e-commerce customization, discussing its challenges,
benefits, trends, and issues. The authors analyze the theoretical and empirical evidence
that describes the motivations and usage of customization, the challenges of its
implementation, and the effects of customization on customer satisfaction, loyalty, and
profitability.
SYSTEM SPECIFICATION
 5
CHAPTER 3
SYSTEM
SPECIFICATION

In this chapter, we are gonna see the softwares that we have used to build the
website. This chapter gives you a small description about the softwares used in the
project.

3.1 VS CODE

Visual Studio Code is a source code editor developed by Microsoft for Windows,
Linux, and macOS. It includes support for debugging, embedded Git control, syntax
highlighting, intelligent code completion, snippets, and code refactoring. It is also
customizable, so users can change the editor's theme, keyboard shortcuts, and
preferences.

VS Code is an excellent code editor for React projects. It is lightweight,

customizable, and has a wide range of features that make it ideal for React development.
It has built-in support for JavaScript, JSX, and TypeScript, and enables developers to
quickly move between files and view detailed type definitions. It also has a built-in
terminal for running tasks. Additionally, VS Code has an extensive library of extensions
that allow developers to quickly add features like code snippets, debugging tools, and
linting support to their projects.

3.2.REACT

React is a JavaScript library created by Facebook for building user interfaces. It is

a component-based, declarative, and highly efficient library that is used to develop
interactive UIs (user interfaces) for single page web applications. React uses a virtual
DOM (Document Object Model) that makes it faster and easier to manipulate the DOM
 6

elements. It also provides declarative components that allow developers to write code that
is easy to read and maintain. React also offers an extensive library of tools and
components that make it easier to develop complex user interfaces.

3.3 ROUTERS IN REACT

Routers are important components in React applications. They provide the ability
to navigate between different views or components of the application. React Router is the
most popular library to handle routing in React applications. It provides the ability to
define routes, set up links, and render components based on the current route. It also
provides features like data fetching, code-splitting, and server-side rendering.

3.4 SPRING TOOL SUITE

Spring Boot is an open-source Java-based framework used to spring boot-

microservices. It is used to create stand-alone and production-ready spring
applications. It provides an easier and faster way to set up, configure, and run simple
and complex web-based applications. Spring Tool Suite (STS) is an IDE popularly
known as STS IDE used to create a Spring Boot project.

Spring Tool Suite (STS) is an Integrated Development Environment (IDE) based on

Eclipse and specifically designed for developing Spring Framework-based applications. It
provides a comprehensive set of tools that simplify the development, deployment, and
management of Spring applications. STS includes code completion, integrated
debugging, and visual editing of Spring configuration files. It also supports other
technologies, including Groovy, Gradle, and Maven. STS is widely used by Spring
developers and is available as a free download from the Spring website.
 7

How To Create A Spring Boot Project?

There are four basic ways to create a Spring Boot project:

1. Create a Maven project and add starter dependencies.

2. Using Spring Initializr.
3. Using Spring Tool Suite(STS) IDE.
4. Using Spring Boot command-line interface.
5. One of the easiest and fastest ways to start a spring boot project is using STS
IDE.

STS Feature Overview:

Eclipse STS validates your project and provides quick fixes for your applications. For
example, when working with Spring Data JPA, the IDE may be used to validate query
method names.

STS also provides a graphical view on all bean methods and their mutual relationships. You
may want to have a closer look at the graphical editors that come with STS by looking into
the views that are available under the menus window, show view and then Spring
respectively.
Spring Boot is a framework and tool suite for developing and deploying Spring-based
applications quickly and with very little configuration. It even comes with an embedded
Tomcat Web server for running your applications as a standalone app!

Although Spring Boot is not associated with any particular IDE, being a Java tool set makes
it a perfect candidate for development in Eclipse. As it happens, Spring offers the Spring
Tool Suite (STS) for your favorite coding environment. Now at version 4, Spring Tools
provides top-notch support for developing Spring-based enterprise applications in Eclipse,
Visual Studio Code, and Atom IDE.
 8

PROJECT CONFIGURATION:
 9

PROPOSED SYSTEM
 10

CHAPTER 4

PROPOSED SYSTEM

This chapter gives a small description about the proposed idea behind the
development of our website

4.1 PROPOSED SYSTEM

It may help collecting perfect management in details. In a very short time, the collection will be
obvious, simple and sensible. It will help a person to know the management of passed year
perfectly and vividly. It also helps in current all works relative to User Management System, It
will be also reduced the cost of collecting the management & collection procedure will go on
smoothly.

The purpose of this project is to automate the existing manual system by the help of
computerized equitments and full-fludged computer software,fulfilling their requirements,so that
their valueable data can be stores for a longer period with easy accessing and manipulation of
the same.
 11

4.2 ADVANTAGES

My project aims at Business process automation, ie, we have tried to computerize various
processes of User Management System by making the admin to do crud operations.

 In computer system the person has to fill the various forms & number of copies of the
forms can be easily generated at a time.
 In computer system, it is not necessary to create the manifest but we can directly
 print it, which saves our time. To assist the staff in capturing the effort spent on their
respective working areas.
 To utilize resources in an efficient manner by increasing their productivity through
automation.
 The system generates types of information that can be used for various purposes.
 It satisfy the user requirement Be easy to understand by the user and operator
 Be easy to operate
 Have a good user interface
 Be expandable
 Delivered on schedule within the budget.
METHODOLOGIES
 CHAPTER 5
METHODOLOGIES

This chapter gives a small description about how our system works.

Spring Boot Architecture

Spring Boot is a specialised part of the Spring Framework. It is utilised to create high-
quality, production-grade Spring Based Applications with minimal effort. Spring
Framework code is used to create Spring Boot.

Spring Boot uses a hierarchical architecture in which each layer communicates with
the layer immediately below or above it ( hierarchical structure).

Before getting to the Spring Boot Architecture, we must first understand what each of
those layers and classes means. The four layers in Spring Boot are as follows:

1. Presentation Layer
2. Business Layer
3. Persistence Layer
4. Database Layer
The following information is provided about these layers:

Presentation Layer: A JSON structure is made up of viewpoints. A front layer is what is seen
from the outside and a back layer is where the structure is built from viewpoints. It interprets
JSON and handles authentication and HTTP requests. After authentication, it enters the business
layer for further processing.

Business Layer: As part of business logic, it manages all of the business decisions and performs
the business validation and consent. For example, only admins may modify the customer’s
account.
Persistence Layer: All of the storage logic in this program, including database questions, is
accounted for in this portion of code. It also translates between database rows and company
items.

Database Layer: The structure is constructed in this way: The HTTP request or internet
requests are handled by the Controllers from the demonstration layer, the providers control the
company logic, as well as also the repositories preserve persistence (storage logic). Each
provider, service, and repository may be controlled by a single Controller. There are many
repositories, which may be managed by many repositories, and databases may be managed by
many databases.

Explanations:

1. Validator classes, view classes, and utility classes have been defined.
2. Spring Boot employs the same modules as Spring-like Spring MVC, Spring Data, and so
on, but it has a different architecture. Spring Boot is the same as Spring MVC, but the one
difference is that no DAO and DAOImpl classes are required.
 3. Temporarily blocks an operation in order to create a data access layer and perform CRUD
operations.
4. The client handles the HTTP requests (PUT or GET).
5. The controller receives the request, and it handles it. Then, it passes the request to the
service logic if necessary.
6. All business logic is implemented in the service layer. It performs the logic on the data
that is mapped to JPA using model classes.
7. An error is not reported to the user when a JSP page is returned to the application.

Architecture of Spring Boot

React CRUD example

– Spring Boot exports REST Apis using Spring Web MVC & interacts with Database using
Spring JPA
– React Client sends HTTP Requests and retrieve HTTP Responses using axios, shows data on
the components. We also use React Router for navigating to pages.
– Database could be MySQL or PostgreSQL.
Externalized Configuration
All Spring Boot properties are read from the application properties or application YAML in
Spring Boot applications. However, there may be circumstances where you wish to move your
configuration from one environment to another. This is where you may need to configure these
properties. You must rebuild and retest your application in all environments whenever you
modify these variables. Furthermore, every time a change is made, you must also restart your
application in production.

Spring Boot allows you to externalize your configuration by coding your application code as if it
were used in one environment and then in another environment. You can reuse your application
code in diverse environments by externalizing your configuration. You can externalize your
configuration to use the code you created in one environment as a starting point. You can export
your configuration as follows:

 Properties files
 YAML files
 Environment variables, etc.
You may need to understand what is happening inside an application in order to debug it or log
it. For example, how many times a specific service was contacted, or how often a specific
service failed. The Actuator framework is an easy-to-use framework you can use without
installing another application or tool to inspect your application health-check endpoints.
IMPLEMENTATION AND RESULT
 15

CHAPTER 6
IMPLEMENTATION AND RESULT

This chapter gives a description about the output that we produced by developing
the website of our idea.

6.1 HOME

When Admin enters our website he/she will be shown the following pages
available for crud operations.The login details will be verified with the details given
while the user creates an account.

Fig 6.1 LOGIN PAGE

 16

6.2.2 SIGN UP

If a user doesn’t have an account on the website, User can use a component named
create new account available in the login page. When the user clicks on that he will be
redirected to the signup page. In sign up he should fill up his email id, password and
phone number. These inputs will be validated.

Fg 6.2 SIGNUP PAGE

 17

6.2.3 FORGOT PASSWORD

If an existing user forgets the password he can access a component named forgot
password where he will be directed for a page that’s requesting their email id, after
entering the existing email id the user will be redirected to the email OTP verification,
then the user can change their password.

Fig 6.3 RECOVERY PAGE

Fig 6.4 OTP VERIFICATION

 18

6.2.4 CATEGORIES OF PRODUCTS

The webpage has different categories of products available for sale and users can
redirect to the products description page by selecting the respective products. This page
also contains the main taglines of the whole website idea.

Fig 6.5 HOME PAGE

 19

6.2.5 LIST OF PRODUCTS

This page displays the list of products available for sale. These details have been
displayed from the list of products available in the javascript file named data.js[1]. So
that if we want to add some products to the particular product we can easily do it by
adding the details to the products js file.

Fig 6.6 PRODUCT PAGE

 20

6.2.6 CART PAGE

This page displays the set of products that the user selected by clicking the button
“Add to cart” available on the products page. It also displays the products with their
names and its price with quantity. This also helps you to increase the quantity of the
products you have added using a plus button which is available on the page after every
product's name[1]. You can also remove or reduce the quantity by using the minus
symbol button which is also available below every product's name. If the cart doesn’t
contain any item it will display that the cart is empty.

6.7 CODING

Login:

const Login = () => {

const history = useNavigate();

const [inpval, setInpval] = useState({

email: "",

password: ""

})

const [data, setData] = useState([]);

console.log(inpval);

const getdata = (e) => {

console.log(e.target.value);
 21

const { value, name } = e.target;

console.log(value,name);

setInpval(() => {

return {

...inpval,

[name]: value

})

const addData = (e) => {

e.preventDefault();

const getuserArr = localStorage.getItem("user_Signup");

console.log(getuserArr);

const { email, password } = inpval;

if (email === "") {

toast.error('email field is requred', {

position: "top-center",

});
 22

} else if (!email.includes("@")) {

toast.error('plz enter valid email addres', {

position: "top-center",

});

} else if (password === "") {

toast.error('password field is requred', {

position: "top-center",

});

} else if (password.length < 9) {

toast.error('password length greater 8', {

position: "top-center",

});

else {

if (getuserArr && getuserArr.length) {

const userdata = JSON.parse(getuserArr);

const userlogin = userdata.filter((el, k) => {

return el.email === email && el.password === password

 23

});

if (userlogin.length === 0) {

alert("invalid details")

} else {

console.log("user login succesfulyy");

localStorage.setItem("user_login", JSON.stringify(userlogin))

history('/front')

return (

<>

<div className='mainlogin'>

<div className="container mt-3">

<section className='d-flex justify-content-between'>

<div className="left_data mt-3 p-3" style={{ width: "100%" }}>

<div className='s1'>
 24

<h1 className='text-center col-lg-10'>SIGN IN</h1>

<Form >

<Form.Group className="mb-3 col-lg-6"

controlId="formBasicEmail">

<Form.Control type="email" name='email' onChange={getdata}

placeholder="Enter email"
style={{width:'300px',height:'40px',fontSize:'25px',borderRadius:'30px'}} />

</Form.Group>

<br/>

<Form.Group className="mb-3 col-lg-6"

controlId="formBasicPassword">

<Form.Control type="password" name='password'

onChange={getdata} placeholder="Password"
style={{width:'300px',height:'40px',fontSize:'25px',borderRadius:'30px'}}/>

</Form.Group>

<br/>

<Button variant="primary" className='col-lg-6'

onClick={addData} type="submit"
 25

style={{fontSize:"18px",fontWeight:"bold",background:"red",color:"white",borderRadiu
s:"50px",height:"40px",width:"110px",borderColor:"red"}}>

SUBMIT

</Button>

<br/><br/>

</Form>

<Link to="/recoverpage"style={{color:'aqua',fontSize:'20px'}}>forgot
password?</Link><br/><br/>

<Link to="/signup"style={{color:'aqua',fontSize:'20px'}}>Create
account</Link>

</div>

</div>

</section>

<ToastContainer />

</div>

</div>

</>

)
 26

export default Login;

Sign up:

const Register = () => {

const history = useNavigate();

const [inpval, setInpval] = useState({

name: "",

email: "",

phone_no: "",

password: ""

})

const [data,setData] = useState([]);

console.log(inpval);

const getdata = (e) => {

// console.log(e.target.value);

const { value, name } = e.target;

// console.log(value,name);
 27

setInpval(() => {

return {

...inpval,

[name]: value

})

const addData = (e) => {

e.preventDefault();

const { name, email, phone_no, password } = inpval;

if (name === "") {

toast.error(' name field is requred!',{

position: "top-center",

});

} else if (email === "") {

toast.error('email field is requred',{

position: "top-center",

});
 28

} else if (!email.includes("@")) {

toast.error('plz enter valid email addres',{

position: "top-center",

});

} else if (phone_no === "") {

toast.error('phone number field is requred',{

position: "top-center",

});

}else if (phone_no.length < 10 || phone_no.length>10) {

toast.error('enter a valid phone number',{

position: "top-center",

});

}else if (password === "") {

toast.error('password field is requred',{

position: "top-center",

});

} else if (password.length < 9) {

toast.error('password length greater 8',{

 29

position: "top-center",

});

} else {

console.log("data added succesfully");

history("/login")

localStorage.setItem("user_Signup",JSON.stringify([...data,inpval]));

return (

<>

<div className='mainbox'>

<div className="container mt-3">

<section className='d-flex justify-content-between'>

<div className="left_data mt-3 p-3" style={{ width: "100%" }}>

<div className='s2'></div>

<center>

<h1 className='text-center col-lg-6'>SIGN UP</h1>

<Form >
 30

<Form.Group className="mb-3 col-lg-6" controlId="formBasicEmail">

<Form.Control type="text" name='name' onChange={getdata}

placeholder="Enter Your Name"
style={{width:'300px',height:'40px',fontSize:'25px',borderRadius:'30px'}}/>

</Form.Group>

<br/>

<Form.Group className="mb-3 col-lg-6"

controlId="formBasicEmail">

<Form.Control type="email" name='email' onChange={getdata}

placeholder="Enter email"
style={{width:'300px',height:'40px',fontSize:'25px',borderRadius:'30px'}}/>

</Form.Group>

<br/>

<Form.Group className="mb-3 col-lg-6"

controlId="formBasicEmail">

<Form.Control onChange={getdata} name='phone_no' type="text"

placeholder="phone number"
style={{width:'300px',height:'40px',fontSize:'25px',borderRadius:'30px'}}/>

</Form.Group>
 31

<br/>

<Form.Group className="mb-3 col-lg-6"

controlId="formBasicPassword">

<Form.Control type="password" name='password'

onChange={getdata} placeholder="Password"
style={{width:'300px',height:'40px',fontSize:'25px',borderRadius:'30px'}}/>

</Form.Group>

<br/><Button className='submit' onClick={addData}

type="submit"style={{background:"black",color:"lime",borderRadius:"50px",border:"6p
x solid lime", width:'150px',fontSize:'25px'}} >

SUBMIT

</Button><br/>

<Button className="loginbtn" variant="contained"

style={{background:"black",color:"red",borderRadius:"50px",border:"6px solid red",
width:'150px', fontSize:'25px'}} onClick={()=>{history("/login")}}>BACK</Button>

</Form>

</center>

</div>

</section>
 32

<ToastContainer />

</div>

</div>

</>

export default Register;

Product page:

export default function Product(props) {

const{product,onAdd}=props;

return (

<main>

<div className='productpage'>

<div className='card'>

<div className='images'>
 33

<img className="small" src={product.img} alt={product.name}></img>

</div>

<div className='details'>

<h1>{product.name}</h1><br />

<h1>{product.price} rupees</h1>

<Link to="/cart"><button className='addtocartbutton'

onClick={()=>onAdd(product)}>ADD TO CART</button></Link>

</div>

</div>

</div>

</main>

Cart page:

export default function Cart(props) {

const {cartItems, onAdd,onRemove}=props;

const itemsPrice =cartItems.reduce((a,c)=>a+c.price*c.qty,0);

 34

return (

<div className='cartpage'>

<div className='namesidehalfproductcart'>

<h1>CART</h1>

</div>

<div className='rightsidehalfproductcart'>

{cartItems.length ===0 && <div><h2 className='cartempty'>Cart is

empty</h2></div>}

{cartItems.map((item)=>(

<div key={item.id} className="row">

<div><h2 className='details_name'>{item.name}</h2></div>

<div>

<button onClick={()=>onAdd(item)} className="Add">+</button>

<button onClick={()=>onRemove(item)} className="Remove">-</button>

</div>

<div>

{item.qty} x {item.price.toFixed(2)} rupees

 35

</div>

<div>

{itemsPrice} rupees

</div>

</div>

))}

</div>

</div>

}
CONCLUSION
 CHAPTER 7

CONCLUSION

This chapter tells about the conclusion that anyone can drive from the project and
the learning we learnt by taking over this project.

7.1 CONCLUSION

The conclusion of a user management system project would summarize the key outcomes and
findings related to the development and implementation of the system. Here are some points you
can include in the conclusion of a user management system project:

System Functionality: Discuss the successful development and implementation of the user
management system. Highlight its key functionalities, such as user registration, authentication,
authorization, and user profile management. Emphasize how the system effectively handles user
data and provides a seamless experience for both administrators and users.

Improved Efficiency: Explain how the user management system has enhanced efficiency and
productivity within the organization. Discuss how tasks related to user management, such as user
onboarding, access control, and user information updates, have been streamlined and automated,
reducing manual effort and potential errors.

User Experience: Evaluate the impact of the user management system on the user experience.
Discuss how the system has improved user satisfaction by providing a user-friendly interface,
clear instructions, and self-service options for users to manage their own profiles and settings.

Scalability and Flexibility: Assess the scalability and flexibility of the user management system.
 37

7.2 FUTURE SCOPE

The e-commerce grocery shopping industry has seen significant growth and
innovation in recent years. To stay competitive and meet evolving customer expectations,
here are some potential future scopes for e-commerce grocery shopping:

1. Personalized Shopping Experience: Implement advanced personalization

techniques to enhance the shopping experience. Utilize customer data, such as purchase
history, preferences, and dietary restrictions, to provide tailored product
recommendations, personalized offers, and customized shopping lists.

2. Voice and AI Assistance: Integrate voice assistants and artificial intelligence

(AI) technology to enable voice-activated shopping experiences. Customers can use voice
commands to add items to their cart, ask for recipe suggestions, or get assistance with
product information and recommendations.

3. Augmented Reality (AR) and Virtual Reality (VR): Explore the use of AR and
VR technologies to create immersive shopping experiences. Customers can virtually
browse aisles, visualize products in their homes, and interact with virtual store assistants
to enhance the overall grocery shopping experience.

4. In-Store Fulfillment Options: Offer additional fulfillment options such as click-

and-collect or curbside pickup to provide flexibility and convenience to customers. Allow
them to place orders online and pick up their groceries from a nearby store location
without the need for home delivery.
 38
5. Subscription Services: Introduce subscription-based models for grocery
shopping. Customers can sign up for recurring deliveries of commonly purchased items,
ensuring they never run out of essentials. Offer incentives such as discounts, exclusive
deals, or free delivery for subscription members.

6. Sustainable and Ethical Practices: Promote sustainable and ethical practices in

the e-commerce grocery industry. Highlight eco-friendly packaging options, locally
sourced products, and partnerships with organizations that focus on reducing food waste
and promoting responsible farming practices.

7. Integration with Smart Home Devices: Integrate e-commerce grocery shopping

platforms with smart home devices such as smart refrigerators, pantry inventory trackers,
or voice-controlled home assistants. This integration allows customers to easily manage
their grocery needs, track expiration dates, and replenish items directly from their smart
devices.

8. Social Commerce and User Reviews: Enable social commerce features where
customers can share their shopping experiences, write reviews, and provide ratings for
products. User-generated content can help build trust, encourage engagement, and assist
other customers in making informed purchasing decisions.

9. Gamification and Rewards: Implement gamification elements to incentivize

customer engagement and loyalty. Offer rewards, badges, or loyalty points for activities
such as completing purchases, referring friends, leaving reviews, or participating in
promotional campaigns.

10. Enhanced Delivery Experience: Focus on improving the delivery experience

by providing real-time order tracking, shorter delivery windows, and flexible delivery
options. Consider options such as same-day delivery, delivery to lockers or secure pickup
locations, or partnerships with local delivery services to increase convenience for
customers.
39
REFERENCES
REFERENCES

1. GeeksforGeeks, “springboot”,
https://www.tutorialspoint.com/spring_boot/spring_b
oot_introduction.htm
2. Stackify, “crud operations”, https://stackify.com/what-are-crud-
operations/Smashing Magazine
3. InterviewBit, “Spring boot architecture”,
https://www.interviewbit.com/blog/spring-boot-architecture/