1

B.P.H.E Society’s
Institute Of Management Studies (Career Development & Research)
 2

PROJECT REPORT

ON

“Online Pet Shop”

Submitted to

Savitribai Phule Pune University

In Partial Fulfillment of

Master of Computer Application (MCA)

By

Mr. Shubham Satish Narke

Guided By

Prof . Sapa mam

2023-2024

INDEX
Chapter Page
Details
No No
1 Introduction 4
 3

1.1 Abstract 5
1.2 Scope of the System 6
1.3 Operating Environment 7
Brief Description of Technology & Operating
1.4 8
System Used
2 Proposed System 16
2.1 Study of Similar System 18
2.2 Users of the System 19
3 Analysis and Design 21
System Requirements (Functional and Non-
3.1 22
Functional requirements)
3.2 Entity Relationship Diagram (ERD) 24
3.3 Table Structure 25
3.4 Use Case Diagram 28
3.5 Class Diagram 29
3.6 Activity Diagram 30
3.7 Deployment Diagram 34
Sample Input and Output Screens (Screens must
3.7 have valid data. All reports must have at-least 5 35
valid records.)
4 Coding 38
4.1 Algorithms 41
4.2 Code Snippets 45
 4

5 Testing 55
5.1 Test Strategy 56
5.2 Unit Test Plan 57
5.3 Test Case / Test Snippet 60
5.4 Defect Report / Test Log 64
6 Limitations of Proposed System 67
7 Proposed Enhancements 68
8 Conclusion 69
9 Bibliography 72
User Manual (All screens with proper
10 description/purpose Details about validations 74
related to data to be entered.)
 5

CHAPTER 1

INTRODUCTION
 6

1.1 Abstract

The rapid growth of the e-commerce industry has extended its reach to various
niche markets, and the pet industry is no exception. This project aims to develop a
comprehensive online pet shop platform using the MERN (MongoDB, Express.js,
React, Node.js) stack. The platform will provide a seamless and user-friendly
experience for pet enthusiasts to browse, select, and purchase a wide range of pet
products.
 7

1.2 Scope
The Online Pet Shop boasts a sleek user interface, providing users with an
enhanced visual and navigational experience. The system encompasses a diverse
array of products, complete with up-to-date pricing, discounts, and additional
details, empowering users to select the ideal package that aligns with their
expectations. Primarily designed to facilitate seamless product orders, the platform
offers a range of items such as treats, dresses, toys, and more.

For user convenience, communication channels are readily available, allowing

users to connect either via phone call or email using the provided contact details in
the event of any concerns. The website features a straightforward checkout page,
streamlining the purchasing process for a hassle-free experience.
 8

1.3 Operating Environment

 Hardware Requirement:

1. Developer side Requirement:

Ram: 2GB and more
2. Client Side Requirement:
Ram: 512mb

 Software Requirement:

3. Developer Side Requirement:

Operating System: - Windows 7+

Software: - VS Code, Xampp
Database: - MySQL

4. Client Side Requirement:

Operating System: - Windows 7+, Android, IOS, macOS, Linux
 9

1.4 Brief Description of Technology Used and Operating System

Used

React JS : -

React.js, developed by Facebook, is a powerful and declarative JavaScript library

for building user interfaces. It employs a component-based architecture, allowing
developers to create reusable and modular UI elements. React.js excels in
efficiently updating and rendering components, optimizing performance by
leveraging a virtual DOM that minimizes actual DOM manipulations.

The library's core concept revolves around unidirectional data flow, promoting a
clear and predictable state management system. React's JSX syntax simplifies the
creation of UI components, combining HTML-like code within JavaScript for a
more intuitive and expressive development experience.React.js supports a "learn
once, write anywhere" philosophy, enabling developers to apply their knowledge
across different platforms. It seamlessly integrates with various tools and libraries,
fostering a vibrant ecosystem. React's one-way data binding ensures a single
source of truth for data, enhancing maintainability in complex applications.

The introduction of hooks in React allows functional components to manage state

and side effects, offering a more concise and readable code structure. React Router
facilitates client-side routing, enabling the creation of single-page applications with
smooth navigation.React's popularity is further heightened by its strong community
support, extensive documentation, and active development. The library is used by
numerous tech giants and startups alike for its efficiency and scalability in building
modern, interactive user interfaces. Responsive design is inherent to React,
providing an optimal user experience across various devices. It encourages the
 10

separation of concerns, making codebase organization more manageable and

facilitating collaboration among developers.

React.js embraces a "write less, do more" approach, reducing boilerplate code and
promoting code reusability. It empowers developers to efficiently manage state and
props, leading to more maintainable and scalable applications. In summary,
React.js stands as a versatile and efficient library, transforming the landscape of
front-end development by offering a powerful, component-based approach that
enhances the building and maintenance of complex user interfaces.

Express JS: -

Express.js is a fast, minimalistic, and flexible web application framework for

Node.js. It simplifies the process of building robust and scalable web applications
by providing a set of features and tools for handling routing, middleware, and
HTTP requests. As a backend framework, Express.js is widely used to create APIs,
web servers, and full-stack applications. Key features of Express.js include its
minimalist design, which allows developers the freedom to choose and integrate
additional components based on project needs. Express facilitates the creation of
dynamic web applications by enabling the definition of routes that respond to
specific HTTP requests, such as GET, POST, and DELETE.

Middleware plays a crucial role in Express.js, allowing developers to execute

functions at various stages of the request-response cycle. This promotes modular
and extensible code, making it easy to integrate third-party libraries and enhance
functionality. Express.js supports the use of templates to dynamically generate
 11

HTML, streamlining the process of rendering views. Additionally, it provides a

range of middleware for common tasks like parsing request bodies, handling
cookies, and managing sessions.

Known for its speed and simplicity, Express.js is suitable for both small projects
and large-scale applications. It leverages the asynchronous nature of Node.js,
making it efficient in handling multiple concurrent connections. With a large and
active community, Express.js benefits from a wealth of third-party middleware and
extensions available via npm (Node Package Manager). This ecosystem accelerates
development by providing pre-built solutions for common tasks. In essence,
Express.js serves as a powerful and lightweight framework that empowers
developers to build scalable and maintainable web applications with ease, making
it a popular choice in the Node.js ecosystem.

JavaScript: -

Perform the validation & Request – Response. JavaScript is a dynamic computer

programming language. It is lightweight and most commonly used as a part of web
pages, whose implementations allow client-side script to interact with the user and
 12

make dynamic pages. It is an interpreted programming language with object-

oriented capabilities. JavaScript was first known as Live Script, but Netscape
changed its name to JavaScript, possibly because of the excitement being
generated by Java. JavaScript made its first appearance in Netscape 2.0 in
1995 with the name Live Script. The general purpose core of the language has
been embedded in Netscape, Internet Explorer, and other web browsers.

The ECMA-262 Specification defined a standard version of the core JavaScript

language. JavaScript is a lightweight, interpreted programming language.Designed
for creating network-centric applications. Complementary to and integrated with
Java. Complementary to and integrated with HTML. Open and cross-platform.
Client-side JavaScript is the most common form of the language. The script should
be included in or referenced by an HTML document for the code to be interpreted
by the browser. It means that a web page need not be a static HTML, but can
include programs that interact with the user, control the browser, and dynamically
create HTML content.

The JavaScript client-side mechanism provides many advantages over traditional

CGI server-side scripts. For example, you might use JavaScript to check if the user
has entered a valid e-mail address in a form field. The JavaScript code is executed
when the user submits the form, and only if all the entries are valid, they would be
submitted to the Web Server. JavaScript can be used to trap user-initiated events
such as button clicks, link navigation, and other actions that the user initiates
explicitly or implicitly.

The merits of using JavaScript are –

 13

Less server interaction − you can validate user input before sending the page off to
the server. This saves server traffic, which means less load on your server.
Immediate feedback to the visitors − they don't have to wait for a page reload to
see if they have forgotten to enter something. Increased interactivity − you can
create interfaces that react when the user hovers over them with a mouse or
activates them via the keyboard. Richer interfaces − you can use
JavaScript to include such items as drag-and-drop components and
sliders to give a Rich Interface to your site visitors

Node JS: -

Node.js is an open-source, server-side runtime environment built on the V8

JavaScript engine. It facilitates scalable and high-performance web applications,
utilizing an event-driven, non-blocking I/O model. Asynchronous operations
enable efficient handling of multiple requests simultaneously. Node.js allows
developers to use JavaScript on both client and server sides, promoting code reuse.
Its scalability makes it ideal for applications with numerous concurrent
connections.

Node.js boasts a vast ecosystem of packages managed by npm. With a large and
active community, developers benefit from ongoing support and collaboration. Its
cross-platform compatibility (Windows, macOS, Linux) enhances versatility. The
lightweight architecture contributes to its efficiency. Node.js leverages the V8
engine for speedy execution of JavaScript code. Its non-blocking nature suits real-
time applications, fostering responsiveness. The runtime supports modular
development through its module system. Node.js has become a popular choice for
modern web application development. Developers can deploy Node.js applications
 14

on various hosting platforms. Its unified language and data format streamline the
development process. Node.js continues to evolve with regular updates and
improvements. The community-driven approach contributes to its vibrancy and
innovation.

Mongo DB: -
MongoDB is a popular and open-source NoSQL database management system
designed for efficient and flexible data storage. It falls under the category of
document-oriented databases, utilizing a JSON-like format known as BSON
(Binary JSON) to store data in flexible, schema-less collections. MongoDB is
particularly well-suited for handling large amounts of unstructured or semi-
structured data.

Key features of MongoDB include its ability to scale horizontally by distributing

data across multiple servers, enabling seamless expansion to accommodate
growing data volumes. The database supports automatic sharding, a technique
for partitioning large datasets, enhancing performance and ensuring
efficient data distribution.

One of MongoDB's strengths lies in its dynamic schema, allowing for the storage
of documents with varying structures within the same collection. This flexibility
makes it well-suited for applications where data models evolve over time or vary
across different instances.

MongoDB's powerful querying and indexing capabilities facilitate fast and

efficient data retrieval. It supports a rich set of query operators, including
geospatial queries, making it versatile for a wide range of applications.
 15

The database's replication features contribute to high availability and fault

tolerance. MongoDB can maintain multiple copies of data across different servers,
ensuring that if one server fails, another can seamlessly take over.

Developers often appreciate MongoDB for its ease of use and integration with
various programming languages. It provides official drivers for popular languages
like JavaScript, Python, Java, and others, simplifying the process of building
applications that interact with the database.

Overall, MongoDB is a robust and scalable NoSQL database solution that has
gained wide spread adoption for its flexibility, performance, and ease of
development. It is suitable for a variety of applications, including those
requiring quick iteration, scalability, and support for diverse data types.

Postman: -
Postman is a widely-used API development and testing tool, simplifying
interactions with APIs through a user-friendly interface. It supports various HTTP
 16

request types and enables the creation of collections for organized API testing.
Postman's robust environment allows customization of headers, parameters, and
authentication methods.

The tool includes built-in testing features for creating automated test scripts to
ensure API reliability. It facilitates the import and export of API requests,
promoting collaboration among developers and teams. Postman offers both
desktop and web versions for flexible usage preferences. It is instrumental in
designing, testing, and documenting APIs efficiently.
 17

CHAPTER - 2

PROPOSED SYSTEM
 18

2. Proposed System

The Online Pet Shop project aims to simplify the process of acquiring pets by

establishing a user-friendly online pet shop. It serves as a valuable feature for

potential pet owners while providing a convenient marketplace for sellers. In

today's digital age, where the internet is a primary communication medium, the

website plays a crucial role in facilitating pet adoption.

By harnessing the power of the web, our goal is to offer a seamless and

accessible experience for users seeking their ideal pets. The platform transcends

geographical constraints, presenting a diverse array of pet choices to cater to

individual preferences and lifestyles.

The project focuses on creating a dynamic online space where users can

easily explore various pet categories, access pricing information, and connect with

sellers. Beyond simplifying the pet acquisition process, the platform aims to foster

a community of pet enthusiasts and experts.

In essence, this online pet shop project is driven by a commitment to

modernize and enhance the pet adoption experience, making it more accessible and

enjoyable for users in today's interconnected world.

 19

2.1 Study of Similar System

Supertails and Marshallspetzone exemplify well-designed online pet shop
platforms with visually appealing layouts and intuitive navigation. Both prioritize
user experience by showcasing products with detailed descriptions, pricing, and
customer reviews. The seamless flow from product search to checkout enhances
the overall user journey.
In terms of product catalog and inventory management, both platforms efficiently
categorize products by pet type and breed, ensuring a user-friendly exploration
process.
Customer management features are robust on both sites, offering user accounts
with order tracking, order history, and wish list functionalities. Both platforms
demonstrate a commitment to customer support through accessible FAQs and
contact details.
Supertails stands out with personalized recommendations based on user behavior,
contributing to a tailored shopping experience. Marshallspetzone complements this
with an informative blog section, providing additional value to customers beyond
product offerings.

In conclusion, the combined study of Supertails and Marshallspetzone reveals their

shared dedication to user-centric design, efficient product organization, and
comprehensive customer management features. Each platform contributes unique
strengths, collectively enriching the online pet shopping experience for users.
 20

2.2 Users of the System

User :-

User can do following activities: -

 View Products: - User can view different products.

 Login: - User need to login to view all the functionality of the
Website.
 About us: - User sees the details of the Website.
 Add to Cart: - User can add product to cart.

 Order: - User can order according to their preferences.

 View order details: - In this section, user can view the orders.

Admin :-

Admin can do following activities: -

 Dashboard: - In this section, admin can see all detail in brief like
total number of users, Total no of Categories, Total Products, Total
Orders.
 Manage Account: - In this section, admin can edit his details.
 Manage Products: - In this section, admin can add new products
and update existing products.
 Manage Users: - In this section, admin can edit user details and
delete users.
 21

 Manage Orders: - In this section, admin can view the detail of

orders and have the right to reject and select booking.
 Manage Category: - In this section admin can add new category
and update existing categories.
 22

CHAPTER - 3

ANALYSIS AND DESIGN

 23

3.1 System Requirements (Functional and Non-Functional

Requirements)

Functional Requirements :-

User: -

Register: - System must allow new user to register on the website.

Login: - System must provide a user-friendly login system.

Order: - User can order product

Add to Cart: - User can add products to cart.

Manage Account: - User can edit or make changes in their registered

information that can be saved.

Admin: -

Login: - Here Admin can login with username and password.

Update Products: - Admin can add and update products.

Orders: - Admin can view Orders and can edit or delete them.

Order Details: - Admin can view order details and can edit or delete them.
 24

Non-Functional Requirements: -

Usability: The system should be easy to use for even a non-technical user. User
should quickly perform task in system. A simple but quality user interface should
be developed to make it easy to understand.

Availability: This system should always be available for access at 24 hours, 7

days a week. Also, in the occurrence of any major system malfunctioning, the
system should be available in 1 to 2 working days so that the business process is
not severely affected.

Security: The subsystem should provide a high level of security and integrity of
the data held by the system, only authorized personnel of the company can gain
access to the company's secured page on the system; and only users with valid
password and username can login to view user's page.

Performance: For increasing the traffic on your system, you have to give special
attention to the performance.
 25

3.2 Entity Relationship Diagram (ERD)

 26

3.3 Table Structure

Bill.jsx:

Column_name Data_type Width Null Constraint

id Number 11 No Primary key
item String 100 No

Total amount Number 11 No

Customer name String 100 No

ContactsUs.jsx:

Column_name Data_type Width Null Constraint

Full name String 100 No

Email String 100 No

Massage String 100 No

 27

Product:

Column_name Data_type Width Null Constraint

id Number 11 No Primary key
name String 100 No
description String 300 No
price String 100 No
image String 100 No

Healthcare:

Column_name Data_type Width Null Constraint

id Number 11 No Primary key
name String 100 No
description String 300 No
price String 100 No
image String 100 No
 28

User.jsx:

Column_name Data_type Width Null Constraint

id Number 11 No Primary key
name String 100 No
username String 100 No
password String 100 No

Deliveryaddresess .jsx:

Column_name Data_type Width Null Constraint

id Number 11 No Primary key
Full_name String 100 No
Mobilenumber String 100 No
addressline String 100 No
Area String 100 No
Pincode Number 11 No
State String 100 No
 29

3.4 Use Case Diagram

 30

3.5 Class Diagram

 31

3.6 Activity Diagram

Registration
 32

Login:-
 33

Order: -

Prerequisite: - User has been Registered and login.

 34

Prerequisite: - Admin is already Logged in.

Add Category: - Add Product: -

 35

3.7 : Deployment Diagram:

 36

3.7 Sample Input and Output Screens

Home Page
 37

User Signup Page: -

User Login page:

 38

Dashboard.js
 39

CHAPTER - 4
CODING
 40

App.js
import { BrowserRouter, Routes, Route, Navigate } from
"react-router-dom";
import React, { useState } from "react";
import Login from "./Pages/Login/Login";
import Signup from "./Pages//Signup/Signup";
import Dashboard from "./Pages/Dashboard/Dashboard";
import Home from "./Pages/Home";
import ContactUs from "./Pages/ContactUs";
import VetAppointment from "./Pages/VetAppointment";
import Main from "./Pages/Main";
import Product from "./Pages/Product";
import HealthCare from "./Pages/HealthCare";
import Cart from "./Pages/Cart";
import DeliveryAdd from "./Pages/Proceedtobuy/deliveryadd";
import Payment from "./Pages/Proceedtobuy/payment";
import Bill from "./Pages/Proceedtobuy/bill";
import Ordered from "./Pages/Proceedtobuy/ordered";
import Admin from './Pages/admin pages/admin';
import ProductPage from "./Pages/admin pages/product";
import Medicine from "./Pages/admin pages/med";
import UserPage from "./Pages/admin pages/user"
import AddressPage from "./Pages/admin pages/address";
import ContactPage from "./Pages/admin pages/contact";
import Home1 from "./Pages/admin pages/home";

function App() {
const [selectedProducts, setSelectedProducts] =
useState([]);
const [counter, setCounter] = useState(0);
const handleProductDelete = (productId) => {

const updatedProducts =
selectedProducts.filter((product) => product.id !==
productId);
setSelectedProducts(updatedProducts);
setCounter(counter - 1);
};
 41

const incrementCounter = () => {

setCounter(counter + 1);
};

return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/admin" element={<Admin />} >
<Route path="productPage" element={<ProductPage />}
/>
<Route path="medicine" element={<Medicine />} />
<Route path="user" element={<UserPage />} />
<Route path="address" element={<AddressPage />} />
<Route path="contact" element={<ContactPage />} />
<Route path="hom" element={<Home1 />} />
</Route>
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/dashboard" element={<Dashboard
counter={counter} />}>
<Route path="main" element={<Main />} />
<Route path="contact" element={<ContactUs />} />
<Route path="health" element={
<HealthCare
incrementCounter={incrementCounter}
selectedProducts={selectedProducts}
setSelectedProducts={setSelectedProducts}
/>} />
<Route
path="product"
element={
<Product
incrementCounter={incrementCounter}
selectedProducts={selectedProducts}
setSelectedProducts={setSelectedProducts}
 42

/>
}
/>
<Route
path="cart"
element={
<Cart
selectedProducts={selectedProducts}
onProductDelete={handleProductDelete}
/>
}
/>
<Route path="deliveryadd" element={<DeliveryAdd
/>} />
<Route path="payment" element={<Payment
selectedProducts={selectedProducts}/>} />
<Route path="bill" element={<Bill />} />
<Route path="ordered" element={<Ordered />} />
<Route path="vetappointment" element={<VetAppointment />} />
</Route>
</Routes>
</BrowserRouter>
);
}

export default App;

 43

index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

// If you want to start measuring performance in your app,

pass a function
// to log results (for example:
reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more:
https://bit.ly/CRA-vitals
reportWebVitals();
 44

Admin.js:

import * as React from 'react';

import { styled, useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import MuiDrawer from '@mui/material/Drawer';
import MuiAppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import List from '@mui/material/List';
import CssBaseline from '@mui/material/CssBaseline';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import ChevronLeftIcon from
'@mui/icons-material/ChevronLeft';
import Button from '@mui/material/Button';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { Outlet, useNavigate } from 'react-router-dom';
import ContactMailIcon from
'@mui/icons-material/ContactMail';
import PersonIcon from '@mui/icons-material/Person';
import MedicalServicesIcon from
'@mui/icons-material/MedicalServices';
import HomeWorkIcon from '@mui/icons-material/HomeWork';
import ChevronRightIcon from
'@mui/icons-material/ChevronRight';

const drawerWidth = 240;

const openedMixin = (theme) => ({

width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
 45

duration: theme.transitions.duration.enteringScreen,
}),
overflowX: 'hidden',
});

const closedMixin = (theme) => ({

transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: 'hidden',
width: `calc(${theme.spacing(7)} + 1px)`,
[theme.breakpoints.up('sm')]: {
width: `calc(${theme.spacing(8)} + 1px)`,
},
});

const DrawerHeader = styled('div')(({ theme }) => ({

display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
...theme.mixins.toolbar,
}));

const AppBar = styled(MuiAppBar, {

shouldForwardProp: (prop) => prop !== 'open',
})(({ theme, open }) => ({
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'],
{
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,

}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
 46

transition: theme.transitions.create(['width',
'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}));

const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop)

=> prop !== 'open' })(
({ theme, open }) => ({
width: drawerWidth,
flexShrink: 0,
whiteSpace: 'nowrap',
boxSizing: 'border-box',
...(open && {
...openedMixin(theme),
'& .MuiDrawer-paper': openedMixin(theme),
}),
...(!open && {
...closedMixin(theme),
'& .MuiDrawer-paper': closedMixin(theme),
}),
}),
);

const Admin = () => {

const theme = useTheme();

const navigate = useNavigate();

const [open, setOpen] = React.useState(false);

const handleDrawerOpen = () => {

setOpen(true);
};

const handleDrawerClose = () => {

setOpen(false);
};
 47

const handleLogout = () => {

// Implement your logout logic here
// For example, clearing authentication tokens,
redirecting to login page, etc.
};

return (
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar position="fixed" open={open}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
sx={{
marginRight: 5,
...(open && { display: 'none' }),
}}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap component="div">
Admin Dashboard
</Typography>
<Button color="inherit"
onClick={handleLogout}>Logout</Button>

</Toolbar>
</AppBar>
<Drawer variant="permanent" open={open}>
<DrawerHeader>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon
/> : <ChevronLeftIcon />}
</IconButton>
</DrawerHeader>
 48

<Divider />
<List>
{['Products', 'Contact Us', 'User', 'HealthCare',
'Delivery Address'].map((text, index) => (
<ListItem key={text} disablePadding sx={{
display: 'block' }}>
<ListItemButton
sx={{
minHeight: 48,
justifyContent: open ? 'initial' :
'center',
px: 2.5,
}}
onClick={() => {
if (text === 'Products') {
navigate('/admin/productPage');
} else if (text === 'HealthCare') {
navigate('/admin/medicine');
} else if (text === 'Contact Us') {
navigate('/admin/contact');
} else if (text === 'User') {
navigate('/admin/User');
} else if (text === 'Delivery Address') {
navigate('/admin/address');
}
}}
>
<ListItemIcon
sx={{
minWidth: 0,
mr: open ? 3 : 'auto',
justifyContent: 'center',
}}
>
{index === 0 ? <MedicalServicesIcon /> :
// Products
index === 1 ? <ContactMailIcon /> : //
Contact Us
index === 2 ? <PersonIcon /> : // User
 49

index === 3 ? <MedicalServicesIcon /> :

// HealthCare
index === 4 ? <HomeWorkIcon /> : //
Delivery Address
null
}
</ListItemIcon>
<ListItemText primary={text} sx={{ opacity:
open ? 1 : 0 }} />
</ListItemButton>
</ListItem>
))}
</List>
<Divider />
</Drawer>
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<DrawerHeader />
<Outlet />
</Box>
</Box>
);
};

export default Admin;

 50

User.jsx:

import React, { useState, useEffect } from 'react';

import DeleteIcon from '@mui/icons-material/Delete';

function UserPage() {
const [users, setUsers] = useState([]);

useEffect(() => {
const fetchUsers = async () => {
try {
const response = await
fetch('http://localhost:5000/api/users');
const data = await response.json();
setUsers(data);
} catch (error) {
console.error('Error fetching users:', error);
}
};

fetchUsers();
}, []);

const handleDelete = async (id) => {

try {
const response = await
fetch(`http://localhost:5000/api/users/${id}`, {
method: 'DELETE',
});

if (response.ok) {
setUsers((prevUsers) => prevUsers.filter((user) =>
user._id !== id));
 51

} else {
console.error('Error deleting user:',
response.statusText);
}
} catch (error) {
console.error('Error deleting user:', error);
}
};

return (
<div style={{ textAlign: 'center', overflowX: 'auto' }}>
<h2>User Page</h2>
<table style={{ borderCollapse: 'collapse', margin:
'auto', marginTop: '20px', width: '100%' }}>
<thead>
<tr>
<th style={tableCellStyle}>ID</th>
<th style={tableCellStyle}>Username</th>
<th style={tableCellStyle}>Email</th>
<th style={tableCellStyle}>Actions</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user._id}>
<td style={tableCellStyle}>{user._id}</td>
<td
style={tableCellStyle}>{user.fullname}</td>
<td
style={tableCellStyle}>{user.username}</td>
<td style={tableCellStyle}>
<DeleteIcon style={{ cursor: 'pointer' }}
onClick={() => handleDelete(user._id)} />
</td>
 52

</tr>
))}
</tbody>
</table>
</div>
);
}

const tableCellStyle = {
border: '1px solid #ddd',
padding: '8px',
};

export default UserPage;

 53

Home.js
import React from 'react';
import img from '../Assets/1.PNG';
import { useNavigate } from 'react-router-dom';
import HomeImg from '../Assets/Homepage.jpg';

function Home() {
const centerStyle = {
display: 'flex',
flexDirection: 'column', // Change to column layout for
responsiveness
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
};

const textContainerStyle = {
marginTop: '20px', // Use margin-top instead of
marginLeft for spacing
textAlign: 'center',
};

const buttonStyle = {
margin: '10px',
padding: '10px 20px',
backgroundColor: '#704214',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
};

const textSpacing = {
margin: '0',
padding: '5px 0',
};

const navigate = useNavigate();

 54

const redirectToLoginPage = () => {

navigate('/login');
};

const redirectToSignInPage = () => {

navigate('/signup');
};

style={{
backgroundImage: `url(${HomeImg})`,
backgroundSize: 'cover',
return (
<div
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
}}
>
<div style={centerStyle}>
<img
src={img}
alt="SQUIRREL"
style={{ maxWidth: '100%', maxHeight: '50vh' }}
/>
<div style={textContainerStyle}>
<h4 style={{ fontSize: '40px', fontFamily:
'Harrington', ...textSpacing }}>
PET'S VILLA !!!!
<br />
</h4>
<h4 style={{ fontFamily: 'Papyrus
fantasy', ...textSpacing }}>Make Your Life Happy </h4>
<button style={buttonStyle}
onClick={redirectToLoginPage}>
Login
 55

</button>
<button style={buttonStyle}
onClick={redirectToSignInPage}>
Register
</button>
</div>
</div>
</div>
);
}

export default Home;

 56

CHAPTER - 5
TESTING
 57

5.1 Test Strategy

Test strategy describes the overall approach to testing. The goal of the testing
process is to determine all faults in our project. The program was subjected to a set
of test inputs and many explanations were made and based on these explanations it
will be decided whether the program behaves as expected or not.

Strategies used are:

Functional Testing: This ensures that the functionalities of a web application

are properly functioning or not.

Interface Testing: This testing method ensures that the three main components
of a web application which are web server, web browser and database are running
harmoniously. This testing type checks whether there is any interruption while the
data is being transferred. Upon that, the communication taking place between
various interfaces is also thoroughly checked.

Compatibility Testing: This testing methodology ensures that a particular web

application is compatible with all browsers. Compatibility testing takes place at
three levels which are browser compatibility, operating system compatibility and
device compatibility.
 58

5.2 Unit Test Plan

Unit testing is commenced when a unit has been created and effectively reviewed.
In order to test a single module, we need to provide a complete environment i.e.,
besides the section we would require.

I. The procedures belonging to other units that the unit under test calls.
II. Non local data structures that modules access.
III. A procedure to call the functions of the unit under test with appropriate
parameters.

Types of Unit Testing:

1) White Box Testing:

White box testing is a test case design method that uses the control
structure of the procedural design to derive test cases. Test cases can be
derived that
I. Guarantee that all independent paths within a module have been
exercised at least once.
II. Exercise all logical decisions on their true and false sides,
III. Execute all loops at their boundaries and within their operational
bounds, and Exercise internal data structures to ensure their
validity.
 59

2) Black Box Testing:

Black box testing also called behaviour testing, focuses on the functional
requirement of the software. That is black box testing enables the
software engineers to derive test of input condition. That will fully
exercise all functional requirements for a program. Black box testing is
not an alternative to a white box testing technique. Rather it is a
complementary approach that is likely to in cover a different class of
error’s then white box method. Black Box Testing attempts to find errors
in the following category.
I. Incorrect or Missing function
II. Interface errors
III. Errors in a data structure or external database accesses
IV. Behaviour or performance error’s and
V. Initialization and Termination error’s 51
 60

3) Gray-Box Testing:
It's referred to as semi-transparent testing. It is a combination of
a Black Box and White Box testing. It is the type of testing in
which tester aware with internal functionality of a method or unit but not
in a deeper level like white box testing. In this, the user partially aware
of the internal functionality of a system. Different type of testing covered
under a gray box testing is mentioned as following: -
I. Matrix testing.
II. Pattern Testing.
III. Orthogonal Pattern testing.
IV. Regression Testing.
 61

5.3 Test Case:

Test case for Adding Products: -

Expected
Sr. No Steps to be Executed Actual Result Result
Result
Enter a valid Product System should System allows
1 name allow product product name Pass
E.g.,Treats name
Choose Category System should System allows
2 E.g., Medicine allow category category name Pass
name
Enter a Product Cost System should System
3 E.g., 500 accept the cost accepted the Pass
cost
Enter Product System should System accepts
Description accept the the description
4 Pass
E.g., “It’s an description
Medicine for germs.”
Enter an Image System should System
4 E.g., Choose file accept image accepted the Pass
image
 62

Test case for Registration: -

Expected
Sr. No Steps to be Executed Actual Result Result
Result
System should
User Name System accepts
1 E.g.,Shubham
accept valid
valid name
Pass
name
Enter valid Email
address System should System allows
2 E.g., allow email email
Pass
Shuham@gmail.com
Enter Password System should System accepts
3 E.g., Pass@1234 accept password password
Pass
System should System
Confirm Password
4 E.g., Pass@1234
confirm confirms Pass
password password
System should
Mobile Number System accepts
5 E.g., 1234567894
accept 10-digit
mobile number
Pass
phone number
Enter valid address
System should System allows
6 E.g. Pipeline Road
allow address address
Pass
Savedi Ahmednagar
 63

Test case for Login: -

Sr. No Steps to be Executed Expected Actual Result Result

Result
1 Enter User Name System should System Pass
E.g., Shuham accept valid accepts
username
2 Enter Valid Password System should System Pass
E.g., Pass@1234 accept and accepts
match the
password

Test case for Order: -

Sr. No Steps to be Executed Expected Actual Result Result

Result
1 Select Delivery System System Pass
Date should accept accepts and
E.g., 17/Nov/2023 date and save save
it
2 Select Payment System System Pass
Method should accept accepts and
E.g.,Cash and save it save
 64

Test case for Adding Category: -

Sr. No Steps to be Executed Expected Actual Result Result

Result
1 Enter a valid System should System allows Pass
Category name accept valid category name
E.g., Toy name
2 Enter an Image System should System Pass
E.g., Choose file accept image accepted the
image
 65

5.4 Defect Report and Test log

A defect report is a document that has concise details about what defects are
identified, what action steps make the defects show up, and what are the expected
results instead of the application showing error (defect) while taking particular step
by step actions.

Defect reports are usually created by the Quality Assurance team and also by the
end-users (customers). Often customers detect more defects and report them to the
support team of the software development since the majority of the customers
curiously tries out every feature in the application. Now, you know what actually
defect and defect reports are.

The reason behind why defect reports are created is to help developers to find out
the defects easily and fix them up. After that, the developer fixes the defects in
order to get the desired outcome specified in the report.

That is why the defect reports are important and created carefully. Defect reports
should be short, organized, and straight to the point and covers all the information
that the developer needs to detect the actual defects in the report by doing what and
how the one written the defect report detected the defects. It is usual for QA teams
to get defect reports from the clients that are either too short to reproduce and
rectify or too long to understand what actually went wrong.
 66

CHAPTER – 6
LIMITATION OF PROPOSED SYSTEM
 67

6. Limitations of Proposed System:

 Only registered user can access the system.

 Online payment can be only using Scanner.
 User can further do the videocall or online voice call.
 Chat system will be also implemented.
 68

CHAPTER – 7
PROPOSED ENHANCEMENT
 69

7. Proposed Enhancement

A Online Pet Shop Management System is website that manages the Product
orders.

Further for more enhancements the online payment functionality can be added in
the system.

For finding location of user(customer) easily Google Map Functionality can be

implemented.
 70

Chapter – 8
Conclusion
 71

In conclusion, establishing an online pet shop presents both opportunities

and challenges. While the digital landscape offers a vast market reach and
convenience for customers, several key factors must be considered to
ensure the success and sustainability of the business.

Firstly, it's essential to prioritize the welfare and well-being of the animals
being sold. This involves sourcing pets from reputable breeders or rescue
organizations, ensuring they receive proper care and veterinary attention,
and providing accurate information to customers about their health,
temperament, and background.

Secondly, regulatory compliance is crucial. Adhering to local, national, and

international regulations governing the sale and transportation of animals
demonstrates a commitment to ethical business practices and helps build
trust with customers and regulatory authorities.

Thirdly, customer trust and satisfaction are paramount. Transparency,

honesty, and responsiveness in communication, along with clear policies
regarding returns, refunds, and after-sales support, are essential for
fostering positive relationships with customers and building a loyal
customer base.

Moreover, investing in a user-friendly website or platform, robust inventory

management systems, secure payment processing, and responsive
 72

customer support can enhance the overall customer experience and

differentiate the business from competitors.

Furthermore, addressing ethical considerations such as promoting

responsible pet ownership, advocating for adoption from shelters and
rescues, and supporting initiatives to improve animal welfare standards can
help position the online pet shop as a socially responsible and trusted
partner in the pet community.

In conclusion, while there are challenges inherent in operating an online pet

shop, such as ensuring the health and welfare of animals, navigating
regulatory requirements, and building customer trust, these challenges can
be overcome with careful planning, dedication to ethical principles, and a
focus on delivering exceptional customer experiences. By prioritizing the
well-being of animals, complying with regulations, fostering trust with
customers, and promoting responsible pet ownership, an online pet shop
can thrive in the digital marketplace while making a positive impact on the
lives of pets and their owners.
 73

Chapter- 9
Bibliography
 74

Bibliography:

This bibliography includes references to the React.js library itself, along with
other commonly used libraries, frameworks, and tools for building a React.js
application, managing state with Redux, implementing routing with React
Router, styling components with Material-UI, integrating with Firebase or
MongoDB for backend services, utilizing Node.js and Express.js for server-
side development, version control with Git and GitHub, seeking assistance
from Stack Overflow and MDN, and employing development tools like
React Developer Tools, ESLint, Prettier, and React Testing Library.
 75

CHAPTER – 9
USER MANUAL
 76

8. User Manual:

Home Page: -
 77

Registration Page: -

User Login Page: -

 78

About Us Page: -

Contact Us Page: -
 79

Shop By Category: -
 80

Empty Cart Page: -

Add To Cart Page: -

 81

Order Details Page: -

 82

Admin Dashboard Page: -

 83

Manage Products Page: -

 84

Manage Orders Page :-

 85

Manage Order Details: -

 86

HealthCare Page:
 87

Vet Services
88
89