1

E-COMMERCE GARNMENTS SYSTEM

A Project Report Submitted to the Government Arts College (Autonomous),
Coimbatore

In Fulfillment of the requirements

For the Award of Degree of

MASTER OF COMPUTER APPLICATIONS

Submitted by

AATHITHYA S

REG. NO :22MCA507

Under the Guidance of

Dr. R.A. ROSELINE M.Sc., M.Phil., Ph.D.,.

Associate Professor & Head

POST GRADUATE AND RESEARCH DEPARTMENT OF COMPUTER APPLICATIONS

GOVERNMENT ARTS COLLEGE (AUTONOMOUS), COIMBATORE-641 018

Re-accredited wit "B++" Grade by NACC. Affiliated to Bharathiar University.

 II

DECLARATION

I here declare that this project, entitled with "E-COMMERCE GARNMENT

SYSTEM" Submitted to the Government Arts College (Autonomous),
Coimbatore in fulfillment of the requirements for the award of the Degree of
Master of Computer Applications is a bonafide record of the original project
work done by under the Supervision and guidance of Dr. R.A. Roseline,
M.Sc. ,M.Phil., Ph .d., Associate Professor, Post Graduate and Research
Department of Computer Applications , Government Arts College
(Autonomous), Coimbatore-641 018.

PLACE : Coimbatore Signature of the Candidate

DATE : (AATHITHYA S)

22MCA507
 III

CERTIFICATE

This is to certify that the project entitled "E-COMMERCE GARNMENT SYSTEM" is

a record of an original project work done by AATHITHYA S (22MCA507)
Submitted to Bharathiyar University in a fulfillment of the requirement for the
award of the Degree of MASTER OF COMPUTER APPLICATIONS.

Head of the Department Signature of the

Guide

Submitted for the project viva-voice examination held on

Internal Examiner External

Examiner
 IV

ACKNOWLEDGEMENT

I hereby this opportunity to acknowledge my deep sense of gratitude and

heartfelt thanks to our beloved Principal Dr. R. ULAGI M.Sc., M.Phil., Ph.D.,.
Government Arts College (Autonomous), Coimbatore, who has given permission
to carry out the project by providing necessary facilities and permitting me with
all facilities to complete it successfully.

I also express my sincere and profound thanks to the Head of the

Department, Dr. R. A. ROSELINE M.Sc., M. Phil., Ph .D., Associate Professor and
Head, Post Graduate and Research Department of Computer Applications,
Government Arts College (Autonomous), Coimbatore, for her valuable support
and suggestions in my project work.

I would also express my sincere gratitude to my internal guide, Dr. R. A.

ROSELINE M.Sc., M.Phil., Ph. D., Associate Professor and Head, Post Graduate and
Research Department of Computer Applications, Government Arts College
(Autonomous), Coimbatore, for who wrought shaped my project into better one
with her valuable guidance for completion of this project.

Finally, I also express my sincere gratitude to all of my parents and friends

who helped for my career without whose sustained support, I could not have
made my debut in Computer Applications.
 V

ABSTRACT

The proposed E-commerce Garments System aims to streamline the online

shopping experience for clothing enthusiasts. This system integrates user-friendly
interfaces, secure payment gateways, and a robust inventory management
system. Through personalized user profiles, customers can browse a diverse
catalogue, receive tailored recommendations, and make seamless transactions.
Additionally, the system incorporates efficient order processing, real-time stock
updates, and reliable delivery tracking, ensuring a convenient and satisfying
shopping journey. With a focus on usability and security, this E-commerce
Garments System endeavours to enhance the digital retail experience for clothing
consumers.
Furthermore, the system emphasizes scalability to accommodate a growing
product range and customer base. It incorporates advanced search
functionalities, allowing users to filter products based on preferences, Price,
Category, Fabric and Make. The integration of responsive design ensures a
consistent and optimized experience across various devices, enhancing
accessibility for a broader audience.
Security measures such as encrypted transactions, secure sockets layer (SSL)
protocols, and multi-factor authentication contribute to a safe online
environment. Regular updates and monitoring mechanisms are implemented to
protect against emerging cyber threats and ensure data privacy.
In conclusion, the E-commerce Garments System not only simplifies the buying
process but also creates a dynamic and secure platform that adapts to evolving
market trends. By embracing user-centric design, this system aims to elevate the
online shopping experience for garment enthusiasts while fostering growth for
the e-commerce business.
 VI

TABLE OF CONTENT
TITLE PAGE NO.
DECLARATION II
ACKNOWLEDGEMENT IV
ABSTRACT V
CHAPTER-1: INTRODUCTION
1.1 Overview of the project 1
1.2 Objective of the project 2
CHAPTER-2: SYSTEM STUDY
2.1 Existing System 4
2.2 Proposed System 4
CHAPTER-3: SYSTEM REQUIREMENTS
3.1 System Requirement Specification 6
3.2 Functional Requirements 7
3.3 Non-Functional Requirements 7
CHAPTER-4: SYSTEM ANALYSIS
4.1 Data Flow Diagrams 9
4.2 UML Diagrams 12
4.3 Sequences Diagram 15
4.4 Class Diagrams 17
4.5 E-R Diagram 18
CHAPTER-5: SOFTWARE DEVELOPMENT
5.1 Benefits 19
 VII

5.2 Software Requirements 20

CHAPTER-6: SYSTEM TESTING AND IMPLEMENTATION 22
CHAPTER-7: CONCLUSION
6.1 Conclusion 23
APPENDIX-A:
1.Source Code 24
2.Sample Screen Shots 33
APPENDIX-B:
BIBLIOGRAPHY 39
VIII
1
 1

CHAPTER-1
INTRODUCTION
1.1 Overview of the project
Traditional garment shopping often involves physical visits to stores,
limited availability, and the hassle of trying on numerous items. However, with
the advent of e-commerce, consumers now have the convenience of browsing
and purchasing clothing from the comfort of their homes. This project recognizes
the immense potential of online garment retailing and endeavours to enhance it
further through advanced technology and intuitive design.
But E-commerce Garments System is a comprehensive online platform designed
to revolutionize the way users shop for clothing. By user-centric design principles,
the system aims to provide a seamless and secure shopping experience for
garment enthusiasts.
The E-commerce Garments System is a revolutionary digital platform tailored
specifically for the fashion industry. With the exponential growth of online
shopping, the garment sector stands at the forefront of e-commerce evolution.
This project seeks to capitalize on this trend by creating an innovative and user-
centric online shopping experience for clothing enthusiasts worldwide.

1.1.1 Key Features

 User Authentication and Profile Management: Secure registration and
login processes with user profile creation for personalized experiences.

 Product Catalogue Management: Centralized database for garments with

categorization, tagging, and efficient search functionality.

 Shopping Cart and Checkout: Seamless addition/removal of items to/from

the cart with smooth checkout process and multiple payment options.
 2

 Inventory Management: Real-time tracking of stock levels with automated

alerts for low stock or out-of-stock items.

 Order Processing and Fulfilment: Efficient order confirmation, processing,

and integration with logistics for timely order fulfilment.

 Responsive Design and Cross-Platform Compatibility: Consistent user

experience across devices with responsive design for optimal viewing.

 Security Features: Encryption for secure transactions, SSL protocols, and

multi-factor authentication for data privacy.

 Reporting and Analytics: Generation of reports on sales, user behaviour,

and inventory status for data-driven decision-making.

 System Scalability: Designing the system to handle a growing product

range and user base with future enhancements and integrations in mind

1.2 Objective of the project

The primary objective of the E-commerce Garments System is to
redefine the way people shop for clothing online. By combining cutting-edge
features, personalized recommendations, and robust security measures, the
system aims to provide a seamless, enjoyable, and secure shopping
experience. Additionally, the project seeks to empower garment retailers by
offering them a scalable and adaptable platform to showcase their products
and engage with customers effectively.

 To streamline the online shopping process for clothing by integrating user-

friendly interfaces and robust backend functionalities.
 To offer a diverse catalogue of garments with detailed product information
and efficient search capabilities.
 3

 To personalize the shopping experience through user profiles,

recommendations, and loyalty programs.
 To ensure secure transactions and data privacy through advanced security
measures.
 To optimize the system for scalability, accommodating a growing product
range and user base.
 Develop a sophisticated inventory management system to monitor stock
levels in real-time, minimizing instances of out-of-stock items and
preventing overselling.
 Design the platform with responsive layouts and adaptable interfaces to
ensure compatibility across various devices and screen sizes, providing a
consistent user experience.
 4

CHAPTER-2
SYSTEM STUDY

2.1 Existing System

In this step, we provide a detailed description about the existing system and the
problems faced in the existing system. The current system may suffer from a
complex or confusing user interface, leading to frustration and abandonment
among users. Difficulties in navigation, slow loading times, or lack of
responsiveness across devices can all contribute to a poor UX.
The system may have a limited selection of garments, restricting users
choices and potentially causing them to seek alternative platforms with a broader
range of options.

2.2 Proposed System

The proposed E-commerce Garments System offers several advantages over the
existing system, including:
1. Enhanced User Experience: With an intuitive and user-friendly interface,
streamlined navigation, and responsive design, the proposed system
provides a superior shopping experience, reducing friction and increasing
user satisfaction.
2. Expanded Product Offering: By curating a diverse catalogue of garments,
accessories, and related items, the proposed system offers users a wider
selection of choices, catering to various styles, sizes, and preferences.
3. Personalized Recommendations: Leveraging advanced algorithms, the
proposed system delivers personalized product recommendations based on
user behaviour and preferences, increasing engagement and driving
conversion rates.
4. Improved Inventory Management: With a robust inventory management
system, the proposed system ensures accurate stock tracking, timely
 5

updates, and proactive notifications, minimizing out-of-stock incidents and

optimizing operational efficiency.
5. Enhanced Security Measures: Implementing secure payment gateways,
encryption protocols, and stringent security measures, the proposed
system safeguards user data and financial information, instilling trust and
confidence among users.

Overall, the proposed E-commerce Garments System offers a comprehensive and

innovative solution that addresses the shortcomings of the existing system,
delivering superior user experiences, operational efficiency, and business growth
opportunities.
 6

CHAPTER-3
SYSTEM REQUIREMENTS
3.1 System Requirement Specification
3.1.1 Software Requirements:
 Operating System: Windows 10 or Linux-based operating system (e.g.,
Ubuntu Server) for hosting backend services, offering stability and security.
 Database Management System: MongoDB for storing product data, user
information, and session management.
 Backend Framework: Node.js with Express.js for building RESTful APIs and
handling server-side logic.
 Frontend Framework: React.js for building interactive and responsive user
interfaces.
 Package Manager: npm (Node Package Manager) for managing project
dependencies and packages.
 Other Tools: Git for version control, Docker for containerization, and PM2
for process management.
3.1.2 Hardware Requirements
 Servers: Adequate servers or cloud instances to host the backend and
frontend components of the system.
 Storage: Sufficient storage space for storing application code, media files
(images of garments), user data, and backups.
 Networking: Reliable network infrastructure with high-speed internet
connectivity to ensure smooth communication between servers, databases,
and client devices.
 7

3.2 Functional Requirements

 User Authentication: Implement user authentication functionalities such as
registration, login, logout, password reset, and session management.
 Product Management: Develop CRUD (Create, Read, Update, Delete)
operations for managing products, categories, and attributes.
 Shopping Cart: Implement functionalities for adding/removing items
to/from the cart, updating quantities, and calculating total prices.
 Order Management: Create APIs for handling order creation, processing,
status updates, and email notifications to users.
 Inventory Management: Develop logic to track inventory levels, update
stock quantities, and send notifications for low stock items.
 Search and Filtering: Implement search functionality and filtering options to
help users find products based on keywords, categories, Fabric, Price, etc.
 User Profiles: Develop APIs to manage user profiles, including viewing order
history, updating personal information
 Payment Integration: Integrate with payment gateways (Stripe) to facilitate
secure online transactions.
 Responsive Design: Design user interfaces to be responsive and mobile-
friendly, ensuring optimal viewing experience across various devices and
screen sizes.

3.3 Non-Functional Requirements:

 Performance: Optimize application performance by minimizing response
times, caching frequently accessed data, and optimizing database queries.
 Security: Implement security measures such as data encryption, input
validation, authentication, authorization, and protection against common
web vulnerabilities.
 Usability: Design intuitive user interfaces with clear navigation, informative
feedback, and accessibility features to enhance user experience.
 8

 Reliability: Ensure high availability, fault tolerance, and data integrity by

deploying the application on reliable hosting platforms and implementing
backup and recovery mechanisms.

These system requirements provide a comprehensive foundation for the

development and deployment of the E-commerce Garments System, ensuring
that it meets the needs of users, administrators, and stakeholders while adhering
to industry standards and best practices.
 9

CHAPTER-4
SYSTEM ANALYSIS
4.1 Data Flow Diagrams
Registration Login
Login Add Products
Profile View Products
View data E-COMMERCE View Orders
Search GARMENTS Update Orders
User Admin
Search result SYSTEM Update Products
Order Request Remove Products
Order Response Inventory
Logout Log out

Figure 4.1 DFD Level 0

Read
Register User DB

Write
Register Response
Login
Logout Login
Logout
Login
Search
Search
666 Search
Read & write Order DB
Response

View
Request Order
User Admin
View Update
Create
View
Payment
Request

Payment DB Read & write Create

Response View

Product

Read & write Product DB

Figure 4.2 DFD Level 1

 10

Detailed Level DFD

In detailed level DFDs the main process is divided into sub processes and we
try to find out the flow from one process to another process. We find the
interaction among External entities, processes, sub processes and database.
Use Case Diagrams
A use case diagrams describes a sequence of actions that provide something of
measurable value to an actor and is drawn as a horizontal ellipse an actor is a
person, organization, or external system that plays a role in one or more
interactions with your system.

Home
User Validator

Login

Payment

Order
Admin

Search
Registered Unregistered

Figure 4.3 Overall use case

 11

Un Registered Use Case

Home page

Search

Filters

Cart
Unregistered

Figure 4.4 Un Registered Use Case

Registered Use Case
Register

Login

Home

Profile

Create Order Payment

Registered

Search

Logout

Figure 4.5 Un Registered Use Case

Administrator Use Case
 12

Home

Login

Create User

Profile

View Order Payment

Administrator

Search

Logout

Figure 4.6 Administrator Use Case

4.2 UML ACTIVITY DIAGRAM

Providing
Credentials

No
Validation

Yes
Figure 4.7 Administrator Use Case
Services
Registration Process
 13

Login

No
Validator

Yes

Home Search Order

Payment

View

Logout

Figure 4.8 Registration Process

Administrator Process
 14

Login

Validator

Home Search User Product

Payment

Create/Update &
delete
View

Permissions

Logout

Figure 4.8 Administrator Process

4.2 SEQUENCE DIAGRAM

Admin Login Permission User Home Search Order Payment

 15

Validate
Request Create
Create
Response Response

View

View

Manage orders
Response
Manage Payment
Response

Figure 4.10 Sequence Diagrams

Registration Sequence

User Register Login Home Search Order Payment

 16

Submit

Confirmation

Login Request
Response

View

Response
Search
Response

View View
Response Response

Job
Type: String
Figure 4.11 Registration Sequence
Name: String
4.3 CLASS Date: Number DIAGRAM
Location: String
Review: String
Create ()
Update ()
Delete ()
View ()
 17

Report
Description:
String
Stripe: create ()

Admin
Register Username:
String
Password:
String
User Create ()
New () Update ()
View () View ()
Delete () Search ()
Register User
Search ()

Id: String Unregister user

Username: String
Password: String
Email: String
Type: String
createUser()

Login
Email: String
Password: String
View ()
Close ()
 18

Figure 4.12 Class Diagram

4.5 E-R DIAGRAM

Figure 4.13 E-R Diagram

19
 20

CHAPTER-5
SOFTWARE DEVELOPMENT
5.1 Benefits
The E-commerce Garments System offers a range of benefits for both users and
administrators:
 Convenience: Users can browse and shop for garments from the comfort of
their homes or on the go, eliminating the need to visit physical stores.
 Wide Selection: The platform offers a diverse range of garments, including
clothing items, accessories, and footwear, catering to various styles, sizes,
and preferences.
 Personalization: Through personalized recommendations and user profiles,
the system can suggest relevant products based on individual preferences,
enhancing the shopping experience.
 Efficient Ordering: Users can easily add items to their shopping carts,
review their selections, and complete transactions with secure payment
options, streamlining the ordering process.
 Real-time Inventory: The system provides real-time updates on stock
availability, minimizing instances of out-of-stock items and ensuring
accurate order fulfilment.
 Analytics Insights: Administrators can gather valuable insights into user
behaviour, sales performance, and product popularity through analytics
tools, informing strategic decision-making and marketing efforts.
 Data Security: Strong security measures are implemented to protect user
data and financial information, ensuring a safe and secure online shopping
environment.
 Business Growth: By providing an attractive and user-friendly platform, the
system can attract new customers, retain existing ones, and drive sales
growth for garment retailers.
 21

5.2 Software Requirements

1. Development Tools:
 Integrated Development Environment (IDE): Visual Studio Code for
writing and debugging code.
 Git: Version control system for tracking changes in codebase,
collaboration, and managing source code.
 Node.js: JavaScript runtime environment for executing server-side
code.
 npm (Node Package Manager): Package manager for installing and
managing project dependencies.
 MongoDB Compass: GUI tool for interacting with MongoDB
databases during development.
2. Backend Requirements:
 Node.js: JavaScript runtime environment for building the backend
server.
 Express.js: Web application framework for Node.js to create RESTful
APIs and handle HTTP requests.
 MongoDB: NoSQL database for storing product data, user
information, and session management.
 Mongoose: MongoDB object modeling tool for Node.js to interact
with MongoDB databases.
3. Frontend Requirements:
 React.js: JavaScript library for building user interfaces and frontend
components.
 React Router: Library for handling client-side routing in React
applications.
 22

 Axios: HTTP client for making API requests from the frontend to the
backend server.
 Redux (optional): State management library for managing application
state in large-scale React applications.
4. Authentication and Authorization:
 JSON Web Tokens (JWT): Secure token-based authentication
mechanism for verifying user identity and authorizing access to
protected resources.
5. Payment Integration:
 Stripe.js: JavaScript library for integrating Stripe payment gateway
into the application for processing online payments securely.
6. Deployment Tools:
 AWS: Cloud hosting platforms for deploying and scaling the
application in production environments.
7. Testing and Quality Assurance:
 React Testing Library or Enzyme: Libraries for testing React
components and user interfaces.
8. Other Tools and Libraries:
 dotenv: Library for loading environment variables from .env files into
Node.js applications.
 bcrypt: Library for hashing passwords securely before storing them in
the database.
 nodemon: Utility for automatically restarting the Node.js server
when changes are detected in the codebase during development.
These software requirements provide the necessary tools and libraries for
developing the E-commerce Garments System, covering both backend and
frontend development, authentication, payment integration, deployment, testing,
and quality assurance.
 23

CHAPTER-6
SYSTEM TESTING AND IMPLEMENTATION
SYSTEM TESTING
1. Requirements Verification: Ensure that all functional and non-functional
requirements specified for the system are met.
2. Unit Testing: Test individual components of the system, including backend
APIs, frontend components, and database interactions, using tools like Jest,
Mocha, or React Testing Library.
3. Integration Testing: Test the integration between different modules and
components of the system to ensure they work together as expected.
4. End-to-End Testing: Perform end-to-end tests to simulate real user
scenarios and verify that all system components function correctly
together. Tools like Cypress or Selenium can be used for automated end-to-
end testing.
SYSTEM IMPLEMENTATION
 Deployment Planning: Plan the deployment strategy, including server
setup, database configuration, and environment variables.
 Environment Setup: Set up production and staging environments for
deploying and testing the system.
 Database Migration: Migrate the database schema and seed initial data if
necessary.
 Backend Deployment: Deploy backend services, including Node.js server
and Express.js APIs, on the selected hosting platform (AWS) using Docker
containers or traditional server setup.
 Frontend Deployment: Build the frontend React.js application and deploy
static files to a web server or CDN (Content Delivery Network) for serving to
users.
 Configuration: Configure environment variables, API endpoints, and other
settings for the deployed environments.
 24

CHAPTER-6
CONCLUSION
In conclusion, the development of the E-commerce Garments System presents a
promising opportunity to create a comprehensive and user-centric platform for
purchasing garments online. By leveraging the MERN stack (MongoDB, Express.js,
React.js, Node.js) and integrating essential features such as product management,
user authentication, shopping cart functionality, and payment integration, this
project aims to deliver a seamless and enjoyable shopping experience for users
while providing valuable insights and growth opportunities for administrators and
businesses.
Through the implementation of modern technologies, best practices in software
development, and adherence to industry standards and security protocols, the E-
commerce Garments System is poised to address the evolving needs of online
shoppers and garment retailers alike. By focusing on usability, performance,
security, and scalability, the project aims to deliver a robust and reliable solution
that meets the demands of today's competitive e-commerce landscape.
In summary, the E-commerce Garments System represents more than just an
online shopping platform—it's a testament to innovation, collaboration, and the
relentless pursuit of excellence in software development. With a focus on user
experience, technical excellence, and business value, this project aims to make a
significant impact in the world of e-commerce and contribute to the success and
growth of garment retailers in the digital age.
 25

APPENDIX-A
1.Source Code
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import {Link, useLocation, useNavigate} from 'react-router-dom'
import Metadata from './Metadata'
import { Fragment, useEffect, useState } from 'react';
import {login} from '../actions/userAction'
import {useDispatch, useSelector} from 'react-redux'
import {ToastContainer,toast} from 'react-toastify'

function Login () {
const [email, setEmail]=useState("")
const [password,setPassword]=useState('')
const dispatch=useDispatch()
const navigate=useNavigate()
const {loading,error,isAuthenticateUser} =useSelector(state=>state.userState)
const location=useLocation()
const redirect=location.search?'/'+location.search.split('=')[1]:'/';
const submitHandler=(e)=>{
e.preventDefault();
dispatch(login(email,password))
}
useEffect(()=>{
if(isAuthenticateUser){
navigate(redirect)
}
if(error){
toast.error(error)
return
}
 26

},[dispatch,error,isAuthenticateUser,navigate])
return (
<div className='home-panel bg-light'>
<Metadata title={'Login Page'}/>
<Fragment>
<div className='Login-panel bg-light'>
<form onSubmit={submitHandler}>
<i className='bi bi-person-circle fs-1' id='profile'></i>
<hr></hr>
<Form.Group as={Row} className="mb-3"
controlId="formPlaintextEmail">
<Form.Label column sm="2" className='pt-4 '>
Email
</Form.Label>
<Col sm="10">
<Form.Control type="text" placeholder="Enter Email"
value={email} onChange={e=>setEmail(e.target.value)} />
</Col>
</Form.Group>
<Form.Group as={Row} className="mb-3"
controlId="formPlaintextPassword">
<Form.Label column sm="2" className='pt-4 px-2 '>
Password
</Form.Label>
<Col sm="10">
<Form.Control type="password" placeholder="Enter
Password" value={password} onChange={e=>setPassword(e.target.value)}/>
</Col>
</Form.Group>
< button disabled={loading}>Login</button>
<Link to='/Register' className='nav-link'>
<p className='reg-text text-danger'>New User?</p>
</Link>
</form>
<ToastContainer />
 27

</div>
</Fragment>
</div>
);
}
export default Login;

Product Page
import { Fragment, useEffect, useState } from 'react';
import { getProduct } from '../actions/productAction';
import { useDispatch, useSelector } from 'react-redux';
import { useParams,Link } from 'react-router-dom';
import Loader from './Loader';
import Metadata from './Metadata'
import Carousel from 'react-bootstrap/Carousel'
import { addCart } from '../actions/cartActions';
import { ToastContainer, toast } from 'react-toastify';

function Detail(){
const [Quantity,setQuantity]=useState(2)
const increaseQty=()=>{
const count=document.querySelector('.qty')
if(product.stock===0||count.valueAsNumber>=product.stock)return;
const qty=count.valueAsNumber+1;
setQuantity(qty)
}
const deccreaseQty=()=>{
const count=document.querySelector('.qty')
if(count.valueAsNumber===1)return;
const qty=count.valueAsNumber+1;
setQuantity(qty)
}
const {loading,product}=useSelector((state)=>state.productState);
const dispatch=useDispatch();
 28

const {id}=useParams();

useEffect(()=>{
dispatch(getProduct(id))
},[dispatch,id])
return(
<>
<Metadata title={'Product'}/>
{loading ? <Loader/> :
<div className="home-panel">
<h2 className='home-heading fs-5 pt-3'>{product.name}</h2>
<div className="product-click-panel container">
<div className='images-panel'>
<Carousel className='image '>
{product.images && product.images.map(image =>
<Carousel.Item key={image._id}>
<li> <img className='image-panel' src={image.image}
alt='OfferList'/></li>
</Carousel.Item>
)}
</Carousel>
<div>
<Link to='/address' className='nav-link'>
<button id='buy' className='bg-danger text-light fw-bolder'><i
className='bi-bag nav-elements text-light fw-bold px-2'></i>Buy</button>
</Link>
<button id='buy' disabled={product.stock===0?true:false}
onClick={()=>dispatch(addCart(product._id,Quantity))}
className='bg-primary text-light fw-bolder'><i className='bi bi-cart text-light
fw-bold px-2 nav-elements'></i>Add to cart</button>
</div>
</div>
<div className='detail-panel'>
<h5>Product Details</h5>
 29

<div className='product-detail bg-light container px-4 d-flex mb-3

mt-3'>
<div className='w-5 '>
<p className='text-success fs-5'>{product.name}</p>
<div className='d-flex pb-2'>
<h3 className='text-secondary pb-1 fs-5'><span>Rs.<i
className='bi bi-currency-rupee'></i></span>{product.price}</h3>
<h3 disabled id='off' className='text-secondary fw-bold pt-1 px-2
fs-6 '><span >Rs.<i className='bi
bi-currency-rupee'></i></span>{product.offer}</h3>
</div>
<h3 classNmae='fs-6 pt-2'><span className='bg-success rounded-4
text-light px-1'>{product.ratings}<i className='bi bi-star fs-6 pb-1'></i></span>
Ratings</h3>
<h3 className='d-flex pt-2 fs-6'>Delivery :{product.price >
400 ?<p>Free Delivery</p> :<p>Rs.<i className='bi
bi-currency-rupee'>40</i></p>} </h3>

<h3 className='d-flex pt-2'>Stock :{product.stock > 0 ?<p

className='fw-bolder text-success'>In stock</p> :<p className='text-
danger'>Out of Stock</p>} </h3>
</div>
{/* <div className='d-flex' ><h3 className='h-1'
>Quantity</h3><input type='number' defaultValue={1} className='qty
mx-3'/></div> */}
</div>
<ToastContainer/>
<h5>Product Description</h5>
<div className='product-detail-panel bg-light mt-3 mb-3'>
<p>Name : CHECKS SHIRT FOR MEN
<br></br>
Fabric : {product.Fabric}
<br></br>
Sleeve Length : Long Sleeves
<br></br>
 30

Pattern : Checked
<br></br>
Sizes :
<br></br>
M (Chest Size : 40 in)<br></br>
L (Chest Size : 42 in)<br></br>
XL (Chest Size : 44 in)<br></br>
CHECKS SHIRT FOR MEN<br></br>
Country of Origin : India
</p>
</div>
<h5>Seller Detail</h5>
<div className='seller-detail bg-light mt-3 mb-3'>
<h3>sold by</h3>
<h3 className='text-success mx-5'>{product.seller}</h3>
</div>
</div>
</div>
</div>
}
</>
);
}
export default Detail;
Order Confirmation Page
import { useEffect } from "react"
import Table from 'react-bootstrap/Table';
import { validateShip } from "./Address"
import { useNavigate } from "react-router-dom"
import { useSelector } from "react-redux"
import { ToastContainer, toast } from "react-toastify"
import Steps from './Steps';
function Confirm(){
const navigate=useNavigate()
 31

const {shippingInfo,items}=useSelector(state=>state.cartState)
const {user}=useSelector(state=>state.userState)
const itemCount=items.reduce((acc,item)=>(acc+item.quantity),0)
const itemPrice=items.reduce((acc,item)=>(acc+item.quantity *item.price),0)
const shippingPrice=itemPrice<=200?50:0
const totalPrice=itemPrice+shippingPrice
const proceedPyment=()=>{
const data={
itemPrice,
shippingPrice,
totalPrice
}
sessionStorage.setItem('orderInfo',JSON.stringify(data))
navigate('/payment')
}
useEffect(()=>{
validateShip(shippingInfo,navigate)

},[])
return(
<div className="home-panel">
<Steps shipping confirm/>
<div className="confirm-panel d-flex">
<div className="con-pan">
<div className="ship-panel">
<h5>Shipping Information</h5>
<p className='text-success fw-bold'>Name :{user.name}</p>
<p className='d-flex text-secondary fw-bold'>Address :<address
>{shippingInfo.address},{shippingInfo.village},{shippingInfo.district},
{shippingInfo.state},{shippingInfo.pin}</address></p>
<p className='text-secondary fw-bold '>Phone No :
{shippingInfo.phone}</p>
</div>
<hr></hr>
 32

<div className="confirm-order-panel">
<h5>Product Information</h5>
<Table striped bordered hover size="sm" className=''>
<thead>
<tr>
<th className="text-success">Product Image</th>

<th className="text-success">Product Name</th>

<th className="text-success">Product Price</th>
<th className="text-success">Quantity</th>
</tr>
</thead>
<tbody>
{items.map(item=>(
<tr >
<td><img className='remove-image ' src={item.image}
alt='shirt'/></td>

<td className='pt-5 text-secondary'>{item.name}</td>

<td className='pt-5 text-success'><span>Rs.<i className='bi bi-
currency-rupee'></i>{item.price}</span></td>
<td className='pt-5'>{item.quantity}</td>
</tr>
))}
</tbody>
</Table>
</div>
</div>
<div className="price-pan">
<div className='confirm-cart-price-panel'>
<h2 className="result">Order Price</h2>
<table className='summary-inner-panel'>
<tr>
 33

<td className='table-width'><h5>Sub Total</h5></td> <td

className='table-width'><h5><span>:<span>Rs.<i className='bi bi-currency-
rupee'></i></span>{itemCount}</span></h5></td>
</tr>
<tr>
<td className='table-width'><h5>Total Product Price </h5></td>
<td className='table-width'><h5><span>:<span>Rs.<i className='bi bi-currency-
rupee'></i></span>{itemPrice}</span></h5></td>
</tr>
<tr>
<td className='table-width'><h5>Shipping Price </h5></td> <td
className='table-width'><h5><span>:<span>Rs.<i className='bi bi-currency-
rupee'></i></span>{shippingPrice}</span></h5></td>
</tr>
<tr>
<td className='table-width'><h5>Total Price </h5></td> <td
className='table-width'><h5><span>:<span>Rs.<i className='bi bi-currency-
rupee'></i></span>{totalPrice}</span></h5></td>
</tr>
<tr ><td className='table-width' colSpan={2}> <button
onClick={proceedPyment} className="place-order bg-primary text-light fw-
bolder">Place Order</button></td></tr>
</table>
</div>
</div>
</div>
</div>
)
}
export default Confirm;
 34

2.Sample Screen Shots

Home page
 35

Cart Page
 36

Product Detail Page

 37

Login Page

Register Page
 38

Address Page

Order Confirmation Page

 39

Payment Page
 40

Add Product Page

41
 42

Admin Product Listing Page

 43

APPENDIX-B
1.BIBLIOGRAPHY
1.https://www.w3schools.com/nodejs/
2. https://www.javatpoint.com/nodejs-tutorial
3. https://www.w3schools.com/REACT/DEFAULT.ASP
4. https://www.geeksforgeeks.org/react-tutorial/
5. https://www.javatpoint.com/reactjs-tutorial
44