“E-Bharat: Ultimate E-commerce Hub”

A Project Report submitted in partial fulfillment of the requirement

for the award of degree of

Bachelor of Computer Applications2021-2024

Supervised By Submitted By
Mr. Deepak Kaushik Nawal Kumar
Assistant Professor BCA-CTIS VI Sem
Department of Computer Applications 210187018

Department of Computer Applications

PANIPAT INSTITUTE OF ENGINEERING & TECHNOLOGY

KUKRUKSHETRA UNIVERSITY, KURUKSHETRA

2021-2024
 Acknowledgement

A successful completion of this project is attributed to the great and indispensable help
received from different people.

I will always be grateful and thankful to Head of Department Dr. Dinesh Verma and
Project Mentor Mr. Deepak Kaushik for giving me the opportunity to learn the different
aspects of designing and implementing this system. It would never be possible for me to
design this system without your continuous assistance and guidance.

I would like to thanks to all faculty members of Computer Applications Department

who are always encourage me during progress of this project.

Nawal Kumar

1
 Declaration

I, Nawal Kumar, a student of Bachelor of Computer Applications, in the Department of

Computer Application, Panipat Institute of Engineering and Technology, Panipat, under
class Roll No. 21831 and University Roll No. 210187018 for the Session 2018-2020,
hereby, declare that the project report BCA_CTIS entitled “E-Bharat: Ultimate E-
commerce Hub” has been completed by me in 6th semester during the six-month project
training. I hereby declare that the matter embodied in this project is my original work and
has not been submitted earlier for award of any degree or diploma in any college or
university.

Date: Nawal Kumar

2
 Department of Computer Applications

Panipat Institute of Engineering and Technology, Samalkha

Certificate
It is certified that Ms. Nawal Kumar, a student of Bachelor of Computer Applications,
under class Roll No. 21831 and University Roll No. 210187018 for the Session 2021-2024,
has completed the project entitled “E-Bharat: Ultimate E-commerce Hub” under my
supervision.

The project report is the authenticate work of the candidate as per her declaration and is
found to be fit for the award of degree of Bachelor of Computer Applications in accordance
with the rules and regulations of Kurukshetra University, Kurukshetra as per my opinion.

I wish her all the success in her all endeavors.

Deepak Kaushik

Assistant Professor

Department of Computer Applications, PIET

Counter-signed by

HOD-Computer Applications

3
 List of figures

Fig Number. Caption Page

No.

4.2 Entity-Relationship Diagram 26

4.3 Activity Diagram 27

4.4 DFD-0 28

4.4.1 DFD-1 28

4.4.2 DFD-2 29

6.1 Home Page 41

6.2 Database Management (Firebase) 41

6.3 Admin Dashboard 42

6.4 Testimonials 42

6.5 Check out Page 43

4
6.6 Add product 43

5
 Table of Content
Acknowledgement
Declaration 2
Certificate from the Department 3
List of Figures 4
Chapter 1 Project Description 9
1.1 Project Title 10
1.2 Overview 10
1.3 Need and Purpose 11
1.3.1 Need 11
1.3.2 Purpose 11
1.3.3 Benefits 12
1.4 Hardware Requirements 12
1.5 Software Requirements 13
1.6 Application Architecture 13
1.7 Features 14
Chapter 2 Feasibility Study 16
2.1 Overview 17
2.2 Technical Feasibility 17
2.3 Economic Feasibility 18
2.4 Legal Feasibility 18
2.5 Operational Feasibility 19
2.6 Scheduling Feasibility 19
Chapter 3 Requirement Analysis 20
3.1 Overview 21
3.2 System Analysis 21
3.3 Requirement study/analysis 22
3.3.1 Present System & Identification of Needs 22
3.4 Software Requirement Analysis 24
Chapter 4 System Design 25

6
 4.1 Overview 26
4.2 Entity-Relationship Diagram 27
4.3 Activity Diagram 28
4.4 Data Flow Diagrams 29
4.4.1 0-Level DFD 29
4.4.2 2-Level DFD 30

Chapter 5 Implementation 31
5.1 Software Used 32
5.2 Hardware Specification 32
5.3 Platform 32
5.4 Works/Contribution by me in this e-commerce
website named “E-Bharat” 32
5.5 My Code Snippets
5.5.1Firebase Configuration 33
5.5.2 [Link] 34
5.5.3 [Link] 36
5.5.4 [Link] 38

Chapter 6 Modules Snapshots 41

6.1 Home page
6.2 Database Management (Firebase)
6.3 Admin Dashboard
6.4 Testimonial
6.5 Check out Page
6.6 Add product (By Admin only)

Chapter 7 Future Scope and Conclusion 45

7.1 Conclusion 46
7.2 Future Scope 47

7
 Chapter 1
Project Description

8
 Chapter 2 Project Description

1.1 Project Title

E-Bharat: Ultimate E-commerce Hub

1.2 Overview

E-Bharat: Ultimate E-Commerce Hub" revolutionizes the online shopping experience by

offering a comprehensive platform for buyers and sellers alike. In a rapidly evolving digital
landscape, this e-commerce website stands out as a dynamic marketplace where convenience meets
quality.

With a user-friendly interface, E-Bharat caters to a diverse audience, providing a seamless

shopping journey for customers while empowering sellers to showcase their products effectively.
Whether it's electronics, fashion, home essentials, or groceries, E-Bharat offers a vast array of
products to meet every need and desire.

The core actors accessing the system are:

Admin: The backbone of the platform, the admin oversees all operations, ensuring smooth
functioning and optimal performance. They have full control over the system, managing accounts,
product listings, transactions, and resolving any issues promptly.

Buyer: The heart of E-Bharat, buyers enjoy a personalized shopping experience with access to a
diverse range of products, competitive prices, and secure payment options. They can explore
categories, read reviews, compare products, and make purchases hassle-free.
E-Bharat's key features include:

Advanced Search: A powerful search functionality enables users to find products quickly based
on keywords, categories, brands, and more, enhancing the overall shopping experience.

Secure Transactions: 1With robust security measures in place, E-Bharat ensures that all
transactions are encrypted and protected, giving users peace of mind while making purchases
online.
9
Interactive Communication: Seamless communication channels facilitate interaction between
buyers and sellers, fostering trust and transparency in transactions. Users can ask questions, seek
assistance, and provide feedback effortlessly.

Customized Recommendations: Through data-driven algorithms, E-Bharat delivers personalized

product recommendations to users, enhancing their shopping journey and increasing engagement
on the platform.

E-Bharat is not just a marketplace; it's a vibrant community where commerce thrives, innovations
flourish, and connections are made. Join us on E-Bharat and experience the ultimate e-commerce
hub where possibilities are limitless, and satisfaction is guaranteed.

1.3 Need and Purpose

1.3.1 Need:

Traditional Commerce Challenges:

Inefficiency in physical retail: Traditional brick-and-mortar stores face limitations in terms of
geographical reach and operating hours, hindering their ability to reach a wider customer base.
Limited product visibility: Small retailers struggle to showcase their products to a broader
audience due to limited physical space and high overhead costs.
Lack of personalized shopping experiences: Traditional stores often struggle to provide
personalized recommendations and tailored shopping experiences to customers, leading to lower
customer satisfaction and retention rates.
Manual inventory management: Managing inventory manually is time-consuming and prone to
errors, leading to stockouts or overstocking issues.

1.3.2 Purpose to Develop "E-Bharat: Ultimate E-Commerce Hub"

Addressing Traditional Commerce Challenges:

Expanding Market Reach: E-Bharat aims to overcome the geographical limitations of traditional
commerce by providing a digital platform accessible to customers nationwide. This enables sellers
to reach a wider audience and tap into new markets, driving business growth.
10
Enhanced Product Visibility: Through E-Bharat, sellers can showcase their products to a global
audience, breaking free from the constraints of physical space. The platform offers comprehensive
product listings with detailed descriptions, images, and customer reviews, improving product
visibility and attracting more customers.
Personalized Shopping Experiences: E-Bharat leverages advanced algorithms and customer data
to deliver personalized product recommendations and tailored shopping experiences. By analyzing
user behavior and preferences, the platform provides relevant product suggestions, increasing
customer engagement and satisfaction.
Efficient Inventory Management: E-Bharat streamlines inventory management processes by
providing sellers with tools and analytics to track and manage their inventory effectively. Automated
alerts and inventory optimization features help prevent stockouts and minimize excess inventory,
improving overall operational efficiency.

1.3.3 Benefits:

Minimal Paperwork: E-Bharat eliminates the need for extensive paperwork traditionally
associated with retail operations, reducing administrative burdens for sellers and streamlining
processes.
Time-Saving: By providing a centralized platform for buying and selling, E-Bharat saves time for
both sellers and buyers, allowing them to focus on core business activities and making purchases
without the constraints of physical shopping.
User-Friendly Interface: E-Bharat offers a user-friendly interface designed to enhance the
shopping experience, making it easy for users to navigate, search for products, and make purchases
with confidence.
Cost-Effective: Operating on a digital platform significantly reduces overhead costs associated
with maintaining physical stores, allowing sellers to offer competitive prices to customers while
maximizing profitability.

1.4 Hardware Requirements

▪ Processor type : x64 or x86 compatible processors
▪ RAM : 1GB minimum
▪ Processor Speed : 1.4GHz; recommended 2GHz or faster

11
1.5 Software Requirements
▪ Compatible Browsers : Chrome, Firefox, Opera
▪ Languages : HTML, CSS, JavaScript, ReactJs
,Redux
▪ Database : Firebase
▪ IDE : Visual Studio code
▪ Designing Tools : TailwindCSS, Material UI

1.6 Application Architecture

The architecture of our e-commerce platform, leveraging modern technologies such as HTML,
CSS, JavaScript, Tailwind CSS, [Link], Firebase, Redux, Material UI, and Razorpay, follows a
Three-Tier Architecture model to ensure efficiency, scalability, and seamless user experience.
Presentation Tier:
• The Presentation tier serves as the front-end of the platform, providing an interactive and
visually appealing interface for users.
• Developed using HTML, CSS, and JavaScript, along with Tailwind CSS for streamlined
styling and [Link] for dynamic and responsive user interfaces.
• Material UI components enhance the presentation layer with pre-designed, customizable UI
elements for consistency and usability.
• Tailwind CSS facilitates rapid development and customization of user interface
components, ensuring a modern and intuitive browsing experience.
• [Link] enables the creation of interactive, single-page applications (SPAs), enhancing
performance and reducing page load times by dynamically updating content without full
page refreshes.
• Users interact with the Presentation tier to browse products, add items to their carts, initiate
checkout processes, and manage their accounts.
Application Tier:
• The Application tier, also known as the middle-tier or logic-tier, contains the core business
logic and functionalities of the platform.
• It is responsible for processing user requests, handling business logic, and managing
application state using Redux for state management.
12
 • Firebase serves as the backend-as-a-service (BaaS) platform, providing authentication, real-
time database capabilities, and cloud functions for serverless computing.
• Redux facilitates predictable state management, enabling efficient data flow and centralized
state management across the application.
• Application tier components interact with the Presentation tier to receive user input, execute
business logic, update application state, and provide responses to user actions.
• Razorpay integration enables secure and seamless payment processing, allowing users to
complete transactions using various payment methods securely.
Data Tier:
• The Data tier, powered by Firebase Realtime Database, handles data storage and retrieval
operations.
• Firebase Realtime Database provides a scalable, NoSQL cloud database solution for storing
product information, user profiles, order details, and other application data.
• It offers real-time synchronization and offline support, ensuring data consistency and
availability across devices and network conditions.
• Data tier components interact with the Application tier to fetch and update data, synchronize
changes in real-time, and maintain data integrity throughout the application.

1.7 Features

The features of this application (Online Attendance System) are:

Features Description

Registration Users can register on the platform by providing necessary information

such as name, email address, and password during the sign-up process..

13
Create Registered users can create their accounts by providing basic
Account
information like name, username, and password. This account
information is used for login purposes.

Cart and Users can add products to their cart for future purchase and proceed
Checkout
to checkout to complete the transaction securely.

User
Authentication Secure user authentication and authorization mechanisms are
and implemented to ensure the confidentiality and integrity of user
Authorization
Module accounts and data.

Payment
Gateway Integration with payment gateways such as Razorpay ensures seamless
Integration and secure payment processing for user transactions.

Admin Panel Admins have access to a comprehensive dashboard for managing

various aspects of the e-commerce platform, including user
accounts, product listings, orders, and analytics.

Import Data Admins can import data, such as product information and user details,
from local files to the platform's database. This feature streamlines the
process of transferring data to the e-commerce platform.

Home page The home page or menu provides users with easy navigation to
and Menu browse products, access product categories, apply filters, view
testimonials, and explore other features of the platform

NightScape Users can switch between dark and light interface themes based on
Module
their preferences for enhanced readability and visual comfort.

Headless UI Utilization of headless UI components and icons enhances the user

and Icons
interface and improves the overall user experience on the platform.

Table 2.1 Features of proposed system

14
 Chapter 2
Feasibility Study

15
 Chapter 2 Feasibility Study

2.1 Overview
Feasibility analysis stands as the cornerstone in determining the viability of a project, ensuring it
meets performance requirements. For E-Bharat: Ecommerce Hub, this study delves into whether
the project is feasible, serving as the initial design phase. It encompasses understanding all project
aspects, concept development, scoping, market valuation, cost-benefit analysis, and compatibility
with existing systems. This formal documentation provides a succinct overview of the project's
scope and objectives.

The feasibility study for E-Bharat includes:

• Scope assessment
• Market trend analysis
• Comprehensive risk assessment
• Cost analysis
• Assessment and recommendations
Similar to the TELOS framework, technical, economic, legal, operational, and scheduling
dimensions are evaluated. These dimensions serve as the foundation for adding new modules and
debugging existing systems

2.2 Technical Feasibility

Technical feasibility revolves around evaluating the existing system's capabilities and the
requirements of the proposed system. It assesses the resources needed for the development and
implementation of the proposed system. For instance, if the system currently runs on a local
server, the availability of necessary software and hardware becomes crucial.

For E-Bharat, ensuring technical feasibility involves assessing factors such as:

• Practicability of the proposed system

• Availability of resources
• Existence of necessary technology
16
 • Capability for future upgradation
• Adequacy of existing technologies
If the system can effectively answer these questions positively, it is deemed technically feasible.

2.3 Economic Feasibility

Economic feasibility entails a comprehensive cost analysis and evaluation of cost-benefit.
It determines the investment required for the system and the anticipated future benefits.
Assessing the cost-effectiveness of the proposed system is paramount.
Key considerations include:

• Estimated cost of software and hardware

• Cost of system development
• Total expected benefits
• Savings resulting from the proposed system
Economic feasibility ensures that the system is financially viable and offers a positive
return on investment.

2.4 Legal Feasibility

Legal feasibility ensures that the proposed system complies with all legal and ethical
requirements. It assesses potential violations of laws and ethical standards. Addressing ethical
and social issues is integral to this study. The primary objectives include:

• Ensuring legal compliance

• Facilitating risk mitigation

17
 2.5 Operational Feasibility

Operational feasibility determines if the proposed system can be effectively integrated

into the organization's operations. It assesses the system's ability to meet user requirements
and solve problems efficiently. Operational feasibility questions include:

• Effectiveness in problem-solving

• Support from management

• Satisfaction of technical requirements

2.6 Scheduling Feasibility

Scheduling feasibility evaluates whether the proposed system can be completed within the
scheduled time frame. It establishes deadlines for project completion and ensures adherence to
them. Meeting prescribed deadlines indicates the system's acceptability.

Feasibility analysis is not only about gathering information and determining requirements but also
about ensuring that the project is completed within the allocated time frame. Scheduling feasibility
plays a crucial role in determining project success.

18
 Chapter 3
Requirement Analysis

19
 Chapter 3 Requirement Analysis

3.1 Overview
This chapter delves into the critical analysis undertaken by developers during the
development of the E-Bharat ecommerce platform. It encapsulates the pivotal
observations and requirements necessary for the timely and successful completion of the
project. Before commencing any project, it is imperative to analyze various factors,
ensuring a robust foundation for development. The requirement analysis and specification
phase is initiated post-feasibility study, marking the project's economic and technical
feasibility. The primary objective of this phase is to comprehend customer requirements
thoroughly, essential for developing a system that aligns with their needs. The
culmination of this phase results in the Requirement Analysis Documentation (RAD), a
vital resource for developers to grasp the desired outcomes from the proposed system.
The System Requirement Specification (SRS) plays a pivotal role in project development,
detailing both functional and non-functional requirements

3.2 System Analysis

System analysis is the process of gathering factual data to understand the functioning and
expected outputs of the proposed E-Bharat platform. It involves studying business
processes, gathering functional and non-functional data, and comprehending the system's
flow. The main objectives of this phase include identifying customer requirements,
understanding their expectations, analyzing data flow, and delineating the processes
involved.

20
3.3 Requirement Analysis/Study

Requirement analysis is a crucial phase aimed at understanding user expectations for the
E-Bharat ecommerce platform. Gathering comprehensive information ensures that the
system meets user satisfaction, thus enhancing its usability and acceptance. This phase
requires frequent communication with customers/users to adapt to evolving requirements.
It is a collaborative effort, incorporating hardware, software, and customer-facing
expertise. Various fact-finding techniques are employed to gather system requirements
effectively.

3.3.1 Present System & Identification of Needs

The present system entails significant manual work for maintaining attendance records,
resulting in time inefficiencies and difficulty in accessing records promptly. To overcome
these challenges, the proposed E-Bharat platform aims to streamline operations, offering
real-time access to attendance records and facilitating efficient tracking and management.

21
Why we need this application?

The need for E-Bharat arises from the challenges inherent in traditional shopping methods and the
evolving demands of modern consumers. Here's why our ecommerce platform is indispensable:

Convenience: Traditional shopping often entails time-consuming trips to physical stores,

navigating through crowds, and waiting in queues. E-Bharat eliminates these hassles by
providing a seamless online shopping experience accessible anytime, anywhere.

Time Efficiency: With E-Bharat, browsing through a diverse range of products and making
purchases is just a few clicks away. Say goodbye to lengthy shopping trips and hello to
efficient, time-saving shopping experiences.

Accessibility: Accessibility is key, especially for individuals with mobility issues or those
residing in remote areas. E-Bharat bridges this gap by bringing the entire shopping experience
to your fingertips, ensuring accessibility for all.

Comprehensive Product Range: E-Bharat offers an extensive array of products across

various categories, ranging from electronics and fashion to home essentials and more.
Whatever you're looking for, you'll find it conveniently available on our platform.

Personalized Recommendations: Our platform employs advanced algorithms to provide

personalized product recommendations tailored to your preferences and browsing history,
enhancing your shopping experience.

24/7 Availability: Unlike physical stores with fixed operating hours, E-Bharat is available
24/7, allowing you to shop at your convenience, whether it's early morning or late at night.

Effortless Tracking and Management: Tracking orders, managing purchases, and accessing
past transaction history is simplified with E-Bharat's intuitive interface, saving you time and
effort.
Cost Savings: By eliminating the need for physical store infrastructure and overhead costs, E-
Bharat offers competitive pricing and exclusive deals, ensuring value for your money.
22
3.4 Software Requirement Analysis

Software Requirement Specification (SRS) serves as the cornerstone of software development,

providing a comprehensive description of the system behaviour. The SRS document outlines all
necessary requirements for the development of the E-Bharat ecommerce platform, derived from
detailed communication with project teams and stakeholders. A robust SRS minimizes
development time, effort, and costs, ensuring clarity in system interactions and functionality.

The overarching goal of the E-Bharat ecommerce platform is to design a recommender system
tailored to the music domain. It will comprise server-side components managing database
operations and recommendation algorithms, alongside client-side interfaces seamlessly integrated
into larger systems.

23
 Chapter 4
System Design

24
 Chapter 4 System Design

4.1 Overview

This chapter encompasses the various design aspects related to our e-commerce project, E-
Commerce Hub. It includes Data Flow Diagrams (DFDs), Entity-Relationship Diagrams, the
structure of the database, Class Diagrams, and Activity Diagrams. Design serves as the
foundational step to understand the flow of data, input interfaces, and the appearance of output
screens.

Key points highlighting the importance of system design for E-Commerce Hub:

Understanding Data Flow: Design elucidates the flow of data within the system, facilitating a
clear comprehension of information exchange.
Visualizing Customer Expectations: Design aids in visualizing and aligning with customer
expectations, ensuring a user-centric approach.
Enhancing Productivity: Well-defined designs contribute to better productivity, streamlining
development processes.
Understanding System Activities: Design allows us to comprehend the activities performed
within the system, guiding the development process effectively.
Determining Entity Relationships: Design helps in determining the relationships between entities
within the system, ensuring accurate data management.
Facilitating Module Relationships: It aids in understanding the relationships between different
modules of the system, fostering seamless integration.
Leveraging Previous Phase Results: Designs build upon the results obtained from previous
phases, ensuring continuity and coherence in the development process.
Creating a Comprehensive System View: Design provides a holistic view of the system, enabling
stakeholders to grasp its intricacies and functionalities.
Identifying Design Issues: It reveals design issues and flaws early in the development cycle,
allowing for timely mitigation.
Visualizing Object Interaction: Designs facilitate the visualization of interactions between
objects within the system, guiding implementation strategies.
Guiding Code Implementation: Design serves as a blueprint for code implementation, providing
25
a roadmap for developers to follow.
In essence, system design is paramount for E-Commerce Hub as it lays the groundwork for a
seamless, user-friendly shopping experience, aligning with industry standards and customer
expectations
4.2 Entity-Relationship Diagram

The diagram shows entities and their relationship for a E-BHARAT. We have a user
of a system who can have their name, phone, Account details etc. It can be used to
store any information about product and also add to Cart.

26
4.3 ACTIVITY DIAGRAM

Figure: ACTIVITY DIAGRAM

Initially, the system is in idle mode. The received command is identified

whether it is logged in or not. After login user will be redirected to their
account and save anything for future.

27
4.4 Data Flow Diagram
DFD Level 0 (Context Level Diagram)

• 4.4.1DFD Level 1

28
• 4.4.2 2nd Level – Admin side DFD

29
 Chapter 5
Implementation

30
 Chapter 5 Implementation

5.1 Software Used

▪ Compatible Browsers : Firefox, Safari, Opera, Chrome, Edge

▪ Database : Firebase

▪ Database Tool : Cloud Firestore

▪ IDE Tools : Visual Studio Code

▪ Languages : HTML, CSS, JavaScript,ReactJs,

Redux
▪ Designing Tool : TailwindCSS , Material UI

5.2 Hardware Specification

▪ Microprocessor - 1.4 GHz; recommended 2 GHz or faster.

▪ RAM - 1 GB

5.3 Platform

▪ Operating System - Window 7 and Above

5.4Works /Contribution by me in this e -commerce website named “E-BHARAT”

[Link] and Checkout Development:

• Designed and implemented the cart and checkout system, ensuring a seamless user
experience for adding products to the cart, reviewing items, and completing purchases.
• Integrated payment gateways and managed order processing workflows to ensure secure and
efficient transactions.
[Link] Information Management:
• Developed functionalities for adding and updating product information, allowing
administrators to easily manage product listings.
• Implemented features for uploading product images, descriptions, prices, and inventory
details to keep the product catalog up to date.
31
[Link] Panel Development:
• Created an overall dashboard for management, providing a centralized interface for
administrators to monitor and manage various aspects of the e-commerce platform.
• Included features such as sales analytics, user activity tracking, inventory management,
and order management.

[Link] Management:
• Managed the integration with Firebase for database storage and real-time data
synchronization.
• Designed and optimized database schemas to support efficient data retrieval and storage
operations.

[Link]-Based Access Control (RBAC):

• Implemented a role-based access control system to ensure that different user roles (e.g.,
admin, vendor, customer) have appropriate permissions and access levels.
• Enhanced security and user management by defining and enforcing role-specific access
• rules.
6. Testinomials:
• Developed a dynamic testimonial section for the homepage, allowing customers to submit
feedback.
• Incorporated features to manage and display testimonials, enhancing the credibility and
user experience of the site.

5.5 My Code Snippets

5.5.1 Firebase Configuration :
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import {getFirestore} from 'firebase/firestore';
import {getAuth} from 'firebase/auth';

// Your web app's Firebase configuration

32
const firebaseConfig = {
apiKey: "AIzaSyCuOxvoJT1kaLU1rpSu8vae5FPWcFQmV48",
authDomain: "[Link]",
projectId: "e-bharat-17cf2",
storageBucket: "[Link]",
messagingSenderId: "489176408065",
appId: "1:489176408065:web:332c62838e16d76e65e000"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

const fireDB = getFirestore(app);

const auth = getAuth(app);

export {fireDB, auth}

5.5.2 [Link]
import React from 'react'
import {
BrowserRouter as Router,
Route,
Routes,
Navigate,
} from "react-router-dom";

import Home from './pages/home/Home';

import Order from './pages/order/Order';
import Cart from './pages/cart/Cart';
import Dashboard from './pages/admin/dashboard/Dashboard';
import NoPage from './pages/nopage/NoPage';
import MyState from './context/data/myState';
import Login from './pages/registration/Login';
import Signup from './pages/registration/Signup';
import ProductInfo from './pages/productInfo/ProductInfo';
import AddProduct from './pages/admin/page/AddProduct';
import UpdateProduct from './pages/admin/page/UpdateProduct';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/[Link]';
import Allproducts from './pages/allproducts/Allproducts';
33
function App() {
return (
<MyState>
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/allproducts" element={<Allproducts />} />
<Route path="/order" element={
<ProtectedRoute>
<Order />
</ProtectedRoute>
} />
<Route path="/cart" element={<Cart />} />
<Route path="/dashboard" element={
<ProtectedRouteForAdmin>
<Dashboard />
</ProtectedRouteForAdmin>
} />
<Route path='/login' element={<Login/>} />
<Route path='/signup' element={<Signup/>} />
<Route path='/productinfo/:id' element={<ProductInfo/>} />
<Route path='/addproduct' element={
<ProtectedRouteForAdmin>
<AddProduct/>
</ProtectedRouteForAdmin>
} />
<Route path='/updateproduct' element={
<ProtectedRouteForAdmin>
<UpdateProduct/>
</ProtectedRouteForAdmin>
} />
<Route path="/*" element={<NoPage />} />
</Routes>
<ToastContainer/>
</Router>
</MyState>

)
}

export default App

// user

export const ProtectedRoute = ({children}) => {

const user = [Link]('user')
if(user){
return children
}else{
34
 return <Navigate to={'/login'}/>
}
}

// admin

const ProtectedRouteForAdmin = ({children})=> {

const admin = [Link]([Link]('user'))

if([Link] === 'nawalydv50@[Link]'){

return children
}
else{
return <Navigate to={'/login'}/>
}

5.5.3 [Link]

import React, { useContext, useEffect } from 'react'

import myContext from '../../context/data/myContext'
import { useDispatch, useSelector } from 'react-redux'
import { addToCart } from '../../redux/cartSlice'
import { toast } from 'react-toastify'

function ProductCard() {
const context = useContext(myContext)
const { mode, product ,searchkey, setSearchkey,filterType,setFilterType,
filterPrice,setFilterPrice} = context

const dispatch = useDispatch()

const cartItems = useSelector((state)=> [Link]);
[Link](cartItems)

const addCart = (product)=> {

dispatch(addToCart(product));
[Link]('add to cart');

useEffect(() => {
35
 [Link]('cart', [Link](cartItems));
}, [cartItems])
return (
<section className="text-gray-600 body-font">
<div className="container px-5 py-8 md:py-16 mx-auto">
<div class="lg:w-1/2 w-full mb-6 lg:mb-10">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-
900" style={{ color: mode === 'dark' ? 'white' : '' }}>Our Latest Collection</h1>
<div class="h-1 w-20 bg-pink-600 rounded"></div>
</div>

<div className="flex flex-wrap -m-4">

{[Link]((obj)=> [Link]().includes(searchkey))
.filter((obj) => [Link]().includes(filterType))
.filter((obj) => [Link](filterPrice)).slice(0,8).map((item,
index) => {
const { title, price, description, imageUrl,id } = item;
return (
<div key={index} className="p-4 md:w-1/4 drop-shadow-lg "
>
<div className="h-full border-2 hover:shadow-gray-100
hover:shadow-2xl transition-shadow duration-300 ease-in-out border-gray-200
border-opacity-60 rounded-2xl overflow-hidden" style={{ backgroundColor: mode
=== 'dark' ? 'rgb(46 49 55)' : '', color: mode === 'dark' ? 'white' : '', }} >
<div onClick={()=> [Link] =
`/productinfo/${id}`} className="flex justify-center cursor-pointer" >
<img className=" rounded-2xl w-full h-80 p-2
hover:scale-110 transition-scale-110 duration-300 ease-in-out" src={imageUrl}
alt="blog" />
</div>
<div className="p-5 border-t-2">
<h2 className="tracking-widest text-xs title-font font-
medium text-gray-400 mb-1" style={{ color: mode === 'dark' ? 'white' : '', }}>E-
Bharat</h2>
<h1 className="title-font text-lg font-medium text-gray-
900 mb-3" style={{ color: mode === 'dark' ? 'white' : '', }}>{title}</h1>
{/* <p className="leading-relaxed mb-
3">{[Link].}</p> */}
<p className="leading-relaxed mb-3" style={{ color:
mode === 'dark' ? 'white' : '' }}>₹{price}</p>
<div className=" flex justify-center">
<button type="button"
36
 onClick={()=> addCart(item)}
className="focus:outline-none text-white bg-pink-600
hover:bg-pink-700 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-
sm w-full py-2">Add To Cart</button>

</div>
</div>

</div>
</div>
)
})}

</div>

</div>
</section >

)
}

export default ProductCard

5.5.4 [Link]

import React, { useContext } from 'react'

import {FaUserTie } from 'react-icons/fa';
import myContext from '../../../context/data/myContext';
import Layout from '../../../components/layout/Layout';
import DashboardTab from './DashboardTab';

function Dashboard() {
const context = useContext(myContext)
const { mode} = context

37
 return (
<Layout>
<section className="text-gray-600 body-font mt-10 mb-10">
<div className="container px-5 mx-auto mb-10">
<div className="flex flex-wrap -m-4 text-center">
<div className="p-4 md:w-1/4 sm:w-1/2 w-full">
<div className=" border-2 hover:shadow-purple-600 shadow-
[inset_0_0_10px_rgba(0,0,0,0.6)] bg-gray-100 border-gray-300 px-4 py-3 rounded-xl" style={{
backgroundColor: mode === 'dark' ? 'rgb(46 49 55)' : '', color: mode === 'dark' ? 'white' : '', }} >
<div className="text-purple-500 w-12 h-12 mb-3 inline-block" viewBox="0 0 24
24">
<FaUserTie size={50} />
</div>
<h2 className="title-font font-medium text-3xl text-black fonts1" style={{ color:
mode === 'dark' ? 'white' : ''}}>10</h2>
<p className=" text-purple-500 font-bold" style={{ color: mode === 'dark' ?
'white' : ''}}>Total Products</p>
</div>
</div>
<div className="p-4 md:w-1/4 sm:w-1/2 w-full">
<div className=" border-2 hover:shadow-purple-600 shadow-
[inset_0_0_10px_rgba(0,0,0,0.6)] bg-gray-100 border-gray-300 px-4 py-3 rounded-xl" style={{
backgroundColor: mode === 'dark' ? 'rgb(46 49 55)' : '', color: mode === 'dark' ? 'white' : '', }}>
<div className="text-purple-500 w-12 h-12 mb-3 inline-block" viewBox="0 0 24
24"> <FaUserTie size={50} />
</div>
<h2 className="title-font font-medium text-3xl text-black fonts1" style={{ color:
mode === 'dark' ? 'white' : ''}}>10</h2>
<p className=" text-purple-500 font-bold" style={{ color: mode === 'dark' ?
'white' : ''}}>Total Orders</p>
</div>
</div>
<div className="p-4 md:w-1/4 sm:w-1/2 w-full">
38
 <div className=" border-2 hover:shadow-purple-600 shadow-
[inset_0_0_10px_rgba(0,0,0,0.6)] bg-gray-100 border-gray-300 px-4 py-3 rounded-xl" style={{
backgroundColor: mode === 'dark' ? 'rgb(46 49 55)' : '', color: mode === 'dark' ? 'white' : '', }} >
<div className="text-purple-500 w-12 h-12 mb-3 inline-block" viewBox="0 0 24
24"> <FaUserTie size={50} />
</div>
<h2 className="title-font font-medium text-3xl text-black fonts1" style={{ color:
mode === 'dark' ? 'white' : ''}}>20</h2>
<p className=" text-purple-500 font-bold" style={{ color: mode === 'dark' ?
'white' : ''}}>Total Users</p>
</div>
</div>
<div className="p-4 md:w-1/4 sm:w-1/2 w-full">
<div className=" border-2 hover:shadow-purple-600 shadow-
[inset_0_0_10px_rgba(0,0,0,0.6)] bg-gray-100 border-gray-300 px-4 py-3 rounded-xl" style={{
backgroundColor: mode === 'dark' ? 'rgb(46 49 55)' : '', color: mode === 'dark' ? 'white' : '', }}>
<div className="text-purple-500 w-12 h-12 mb-3 inline-block" viewBox="0 0 24
24">
<FaUserTie size={50} />
</div>
<h2 className="title-font font-medium text-3xl text-black fonts1" style={{ color:
mode === 'dark' ? 'white' : ''}}>20</h2>
<p className=" text-purple-500 font-bold" style={{ color: mode === 'dark' ?
'white' : ''}}>Total Products</p>
</div>
</div>
</div>
</div>
<DashboardTab/>
</section>
</Layout>
)
}export default Dashboard
39
 Chapter 6
Snapshots

40
Chapter 6 Snapshots

6.1 Home Page

Fig 6.1 Home page

6.2 Database Management (Firebase)

Fig 6.2 Database Management(Firebase)

41
6.3 Admin Dashboard

Fig 6.3 Admin Dashboard

6.4 Testimonial

Fig 6.4 Testimonial

42
6.5 Check out Page

Fig 6.5 Check out Page

6.6 Add product (By Admin only)

Fig 6.6 Add Product

43
Chapter 7
Future Scope
and Conclusion

44
 Chapter 7 Future Scope and Conclusion

7.1 Conclusion

In the rapidly evolving digital landscape, where technological advancements have become integral
to daily operations, the implementation of digital solutions has become paramount across various
sectors. Our e-commerce platform, E-Bharat, stands as a testament to this digital transformation,
offering a seamless online shopping experience to users.

Transitioning from traditional brick-and-mortar stores to an online platform brings forth numerous
benefits, addressing key challenges and enhancing efficiency in several ways. E-Bharat not only
streamlines the shopping process but also offers a plethora of features designed to cater to the
evolving needs of modern consumers.

By leveraging digital platforms like E-Bharat, we can effectively reduce paper usage and manual
labor associated with traditional retail practices. Additionally, the system's capability to handle
operations such as data filtration and report generation simplifies administrative tasks, allowing for
more efficient management of resources.

In today's fast-paced world, where time is of the essence, E-Bharat provides a user-friendly
environment that enables users to access products and services conveniently from anywhere with
an internet connection. The system's ability to import data seamlessly from external sources further
enhances its usability, saving time and effort for both users and administrators

45
 7.2 Future Scope

Looking ahead, the future of E-Bharat holds immense potential for further innovation and growth.
As digitalization continues to permeate every aspect of our lives, the e-commerce sector is poised
for significant expansion and evolution.

In the coming years, we envision E-Bharat becoming an integral part of the digital ecosystem,
aligning seamlessly with emerging trends and technologies in the e-commerce industry. Some
potential avenues for future development include:

Integration of AI-powered virtual try-on technology: By incorporating artificial intelligence

(AI) algorithms, E-Bharat can offer users the ability to virtually try on clothes and accessories,
enhancing the online shopping experience and reducing the need for physical trials.
Implementation of chatbots for query resolution: Chatbots can be integrated into the platform to
provide real-time assistance and support to users, addressing their queries and concerns promptly
and efficiently.
Enhanced personalization and recommendation engines: By leveraging AI and machine
learning algorithms, E-Bharat can further personalize the shopping experience for users, offering
tailored product recommendations based on their preferences, browsing history, and purchase
behavior.
Expansion into new markets and product categories: E-Bharat can explore opportunities for
expansion into new geographic markets and product categories, catering to a broader audience and
diversifying its offerings to meet evolving consumer demands.
In essence, the future of E-Bharat is bright and full of possibilities, driven by a commitment to
innovation, customer satisfaction, and continuous improvement. As we embrace digital
transformation and embrace new technologies, E-Bharat is poised to redefine the e-commerce
landscape and shape the future of online shopping.

46
 Bibliography

• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]

47