The Project

Report On
PET CARE & CONSULTATION
JAGAN INSTITUTE OF MANAGEMENT

STUDIES SECTOR-5, ROHINI, NEW DELHI

MASTERS OF COMPUTER APPLICATION

(2023-2025)

SUBMITTED BY:-
Name:- Vanshika kasera, Enrollment No:- 70314004423
 JAGAN INSTITUE OF
MANAGEMENT STUDIES

To whom it may concern

I, vanshika, Enrollment No. 70310404423, from MCA-I Sem 2 of the JAGAN
INSTITUE OF MANAGEMENT STUDIES, Delhi hereby declare that the
Minor Project Report entitled “PET CARE & CONSULTATION” at JAGAN
INSITUTE OF MANAGEMENT STUDIES is an original work and the same
has not been submitted to any other institute for the award of any other
degree

Signature of the student Date:

Certificate that the Project Report submitted in partial fulfillment of Masters of
Computer Applications (MCA) to be awarded by G.G.S.I.P. University, Delhi
by Bhumik, Enrollment No. 00850404423 has been completed under my
guidance and is Satisfactory.

Signature of the Guide

Date:
Name of the Guide: Dr. Deepshikha Aggarwal
Designation: Professor(IT)
 Acknowledgement

We would like to take this opportunity to thank the Guru Gobind Singh
Indraprastha University (GGSIPU) for having projects as a part of the MCA
curriculum. Many people at the university have influenced the shape and
content of this project and supported us through it.

We express our sincere gratitude to Dr. Deepshikha Aggarwal for

mentioning us in this projects. She has been an inspiration and role model
for this topic. Her guidance and active support have made it possible for us
to work on the assignment.

We would like to extend our thanks to the members involved in making this
project successful and without whom this project would not have been
possible. Also, we would like to express sincere gratitude to our parents
and a load of thanks to our friends for helping us throughout the course of
the projects.

Vanshika (7031404423)

TABLE OF CONTENTS
S.No Topic Page No

1 Certificate
2 Acknowledgement
3 Introduction
4 List of Tables/figures
5 Chapter-1: Problem Definition
6 Chapter-2: System Analysis & Design
7 Chapter-3: System Coding & implementation
8 Future Scope & Conclusion
9 Bibliography
1. Introduction
The Pet Consultation and Care project is a website designed to offer users pet consultation
services, gather pet-related information, and facilitate the purchase of pet care products. It
features an interactive GUI and functionality to manage various pet categories, confirm
appointments with doctors, access a Q&A section, and browse an online store. The platform
provides interactive features such as appointment booking, online and offline video
consultations, doctor selection based on ratings, and product browsing and purchasing.
Additionally, users can provide feedback on doctors and products. Initially we have selected
four main categories of pets like dog, cat, cow, bird. Further we expand it to many more
categories and also expand the variety in pet products.
2. System
Analysis
System analysis is the process of studying the business processors and procedures, generally referred
to as business system, to see how they can operate and whether improvement is needed.
This may involve examining data movement and storage, machines and technology used in the
system, program that control the machines, people providing inputs, doing the processing and
receiving the outputs.

2.1 Investigation
Phase

The investigation phase is also known as the fact-finding stage or the analysis of the current
system. This is a detailed study conducted with the purpose of wanting to fully understand the
existing system and to identify the basic information requirements. Various techniques may be
used in fact-finding and all fact obtained must be recorded.
A thorough investigation was done in every effected aspect when determining whether the
purposed system is feasible enough to be implemented.

2.2 Constraints
and Limitations

The const raints and limitation within a system are the drawbacks that occur during the
implementation of the system. These limitations and constraints can crop up in almost every
system; the most important fact is to find a way to overcome these problems.

Software design is the first of three technical activities – design, code generation, and test
that are required to build and verify the software. Each activity transforms information in
manner that ultimately results in validated computer software .The design task produces a
data design, an architectural design, an interface design and component design.

The design of an information system produces the details that clearly describe how a system
will meet the requirements identified during system analysis. The system design process is
not a step by step adherence of clear procedures and guidelines. When I started working on
system design, I face different types of problems; many of these are due to constraints
imposed by the user or limitations of hardware and software available. Sometimes it was
quite difficult to enumerate that complexity of the problems and solutions thereof since the
variety of likely problems is so great and no solutions are exactly similar however the
following consideration I kept in mind during design phased.
 2.3 SDLC

The Systems Development Life Cycle (SDLC) is a conceptual model used in project management
that describes the stages involved in an information system development project from an initial
feasibility study through maintenance of the completed application. Various SDLC methodologies
have been developed to guide the processes involved including the waterfall model (the original
SDLC method), rapid application development (RAD), joint application development (JAD), the
fountain model and the spiral model. Mostly, several models are combined into some sort of
hybrid methodology. We have used Modular approach for our project SDLC.

3. System Design
System design is the process of defining the architechture, components, modules, interfaces, and
data for a system to satisfy specified requirements. Systems design could see it as the application
of systems theory to product development. There is some overlap with the disciplines of systems
analysis, systems architecture and systems engineering.
Designing is the most important part of software development. It requires a careful planning and
logical thinking on the part of the designer. Designing the software means to plan how the
various part of the software are going to meet the desired goals. It should be done with utmost
care because if the phase contains any error then it is going to effect the performance of the
system as a result it may take more processing time, more of coding and extra workload.

3.1 Data Flow

Diagram

3.2 Front End User

 The front end is an interface between the user and the back end. The front and back ends may be
distributed amongst one more system.
In network computing front end can refer to any hardware that optimizes or protects network
traffic. It is called application front end hardware because it is placed on the network’s outward-
facing front end or boundary. Network traffic passes through the front-end hardware before
entering the network.
In compilers, the front end translates a computer programming source code into an intermediate
representation, and the back end works with the intermediate representation to produce code in a
computer output language. The back end usually optimizes to produce code that run faster. The
front-end/back-end distinction can separate the parser section that deals with source code and the
back end that generates code and optimizes.
These days, front-end development refers to the part of the web users interact with. In the past,
web development consisted of people who worked with Photoshop and those who could code
HTML and CSS. Now, developers need a handle of programs like Photoshop and be able to code
not only in HTML and CSS, but also JavaScript or jQuery, which is a compiled library of
JavaScript.
In order for all of these to work, though, there has to be something to support the front-end; this is
where the backend comes into play.

3.3 Back End User

All the works to support the front-end of the website is done by the Back end server. The back- end
has three parts to it: server, application, and database.

To better explain how all of this works, let’s use the example of a customer trying to purchase a
plane ticket using a website. Everything that the customer sees on the webpage is the front-end, as
we have explained before, but once that customer enters all of his or her information, such as their
name, billing address, destination, etc, the web application stores the information in a database
that was created previously on the server in which the website is calling for information.
The web application creates, deletes, changes, renames, etc items in the database. For example,
when a customer purchases a ticket, that creates an item in the database, but when they have a
change in their order or they wish to cancel, the item in the database is changed.
In short, when a customer wants to buy a ticket, the backend operation is the web application
communicating with the server to make a change in a database stored on said server. Technologies
like PHP, Ruby, Python, and others are the ones backend programmers use to make this
communication work smoothly, allowing the customer to purchase his or her ticket with ease.

4. System
Requirement
4.1 Hardware
Requirement
Processor : Intel Core Duo 2.0 GHz or more

RAM : 1 GB or More

Hard disk : 80GB or more

Monitor : 15” CRT, or LCD monitor

Keyboard : Normal or

Multimedia Mouse : Compatible mouse

4.2 Software
Requirement

Front End : ReactJS, Bootstrap,

HTML, CSS,

JavaScript

Back End : MongoDB Server, Node.js, Express.js

5. Use Case
Diagram
A use case diagram at its simplest is a representation of a user's interaction with the system that
shows the relationship between the user and the different use cases in which the user is involved.
A use case diagram can identify the different types of users of a system and the different use
cases and will often be accompanied by other types of diagrams as well.

Symbols Used:

➢ Actor: An actor specifies a role that some external entity adopts when interacting with
the system directly. Actors may be both at input and output ends of a use case

➢ Use Case: Illustrates the activities that are performed by the users of the system i.e.
Actors.

Description of the Use Case diagram for our project, Main Actors of our Systems are:
 1) Admin
2) User (Doctor, Pateint)

Use cases of our systems:

1) Register: This process include two actors, i.e. Admin and User. User opens the app
and first registers themselves and doctors can also register and fill the information form
of doctor in which case an autogenerated user id will be provide to them.

2) Book Appointment: This process includes 3 use cases, i.e.,

a. Login: logging into the system

b. Book Appointment: Choose available slots and fill the appointment form.
c. Accept/Reject Appointment: Doctor can accept or reject the appointment after
that user get a confirmation mail.

3) Buy Product: This process include 3 use cases.

a. Login: logging into the system.

b. Buy Product: choose the product to buy or add it into the cart or remove from
the cart.
c. Complete order: confirm the order.

4) View: this process includes two actor, i.e., Users. It EXTENDS 2 use cases :

a. Details : shows the status of profile

b. Appointment Scheduled: Latest appointment scheduled.

5) Mantinenace: this process includes one actor, i.e., Admin and includes 3 use
cases i.e.
a. Uptade Products: adding or removing new products.
b. Manage Data : for maintaining every user data.
6. Activity
Diagram
Activity diagram is basically a flowchart to represent the flow from one activity to another
activity. The activity can be described as an operation of the system. The control flow is
drawn from one operation to another. This flow can be sequential, Branched, or concurrent.
Activity diagrams deal with all type of flow control by using different elements such as fork,
join, etc. They are not only used for visualizing the dynamic nature of the system but they are
also used to construct the executable system by using forward and reverse engineering
techniques. The only missing thing in the activity diagram is the message part.

Symbols Used:
➢ Initial State or start point: A small filled circle followed by an arrow represents
the initial action state or the start point for any activity diagram. Make sure the start
point is placed in the top left corner of the first column.

➢ Activity or Action state: An action state represents the non-interruptible action

of the objects.

➢ Action Flow: Action flows, also called edges and paths, illustrate the transactions
from one action state to another. They are usually drawn with an arrowed line.

➢ Object flow: Object flow refers to the creation and modification of the objects by
activities. An object flow arrow from an action to an object means that the action
creates or influences the object.

➢ Decisions or Branching: A diamond represents a decision with alternate prior to

moving on to the next activity, add a diamond between the two activities. The
outgoing should be labelled with a condition guard expression.

➢ Final state or End point: An arrow pointing to be filled circle nested inside
another circle represents the final action state.
Description of our Activity Diagram Mainactivity / action state are:

1. Start Application

2. Invalid Login Details : if the login details entered are wrong

3. Main Page : to be accessed if login details are valid

4. Enter details: few personal details and symptoms of the suspected pet.

5. Book Appointment: Choose doctor and request for appointment.

6. Doctors list : if user asks for it

7. Doctor Confirmation : doctor confirms the request.

 8. Email message: user will get a confirmation mail at their registered email address.
7. Sequence
Diagram
Sequence diagrams are used to show how objects & classes interact in a given situation/in a
time sequence. It also shows behaviour by showing the ordering of message exchange. A
sequence diagram shows some particular communication sequences in the system. In a
Sequence diagram, classes and actors are listed as columns, with vertical lifelines indicating
the lifetime of the object over time.

Symbols Used:

➢ OBJECT: Objects are instances of classes, and are arranged horizontally. The
pictorial representation for an Object is a class (a rectangle) with the name prefixed by
the object name (optional) and a semi-colon.

➢ ACTOR: Actors can also communicate with objects, so they too can be listed as a
column. An Actor is modelled using the ubiquitous symbol, the stick figure.

➢ LIFELINE: The Lifeline identifies the existence of the object over time. The
notation for a Lifeline is a vertical dotted line extending from an object.

ACTIVATION: Activations, modelled as rectangular boxes on the lifeline, indicate when

the object is performing an action.

MESSAGE: Messages, modelled as horizontal arrows between Activations, indicate the

communications between objects.

a) LOGIN
b) USER
Description of our Sequence Diagram Main object of diagram a) LOGIN are:
1) LOGIN
2) FORGOT PASSWORD
3) VERIFICATION
4) DATABASE

Main actor of diagram a) LOGIN are:

1. Admin

Main object of diagram b) User are:

1) LOGIN
2) DATABASE
3) RERIVING PROFILE DETAILS
4) GO TO HOMEPAGE
Main actor of diagram b) User are:
1) Admin
2) User
8. Collaboration
Diagram
A Collaboration is a collection of named objects and actors with links connecting them.
They collaborate in performing some task.A Collaboration defines a set of participants
and relationships that are meaningful for a given set of purposes. A Collaboration
between objects working together provides emergent desirable functionalities in Object-
Oriented systems. Each object (responsibility) partially supports emergent functionalities
Objects are able to produce (usable) high-level functionalities by working together
Objects collaborate by communicating (passing messages) with one another in order to
work together.

Symbols Used:

➢ OBJECT: Objects are instances of classes, and are arranged horizontally. The
pictorial representation for an Object is a class (a rectangle) with the name prefixed by
the object name (optional) and a semi-colon.

➢ ACTOR: Actors can also communicate with objects, so they too can be listed as a
column. An Actor is modelled using the ubiquitous symbol, the stick figure.

➢ Links : Links connect objects and actors and are instances of associations and each
link corresponds to an association in the class diagram.

➢ MESSAGE: Messages, modelled as horizontal arrows between Activations,

indicate the communications between objects.

a) LOGIN

b) USER
Description of our Collaboration Diagram, Main object of diagram a) LOGIN are:

1) LOGIN
2) FORGOT PASSWORD
3) VERIFICATION
4) DATABASE

Main actor of diagram a) LOGIN are:

1. Admin
Main object of diagram b) USER are:

1) LOGIN
2) DATABASE
3) RETRIEVING PROFILE DETAILS
4) GO TO HOMEPAGE
5) BUY PRODUCT/BOOK APPOINTMENT

Main actor of diagram b) USER are:

1) Admin
2) User
9. Class Diagram

A Class Diagram is a diagram describing the structure of a system. It gives an overview of a

system by showing its classes and the relationships among them. It shows the system's:
•classes
•Attributes
•operations (or methods),
•Relationships among the classes.

Symbols Used:

➢ Class: The top compartment contains the class name, the next compartment will
contain the class attributes and the final compartment will contain the class
operations.

➢ Association: An association between two classes indicates that objects at one end
of an association “recognize” objects at the other end and may send messages to
them.

An association between A and B is shown by a line joining the two classes:

1. Bidirectional: If there is no arrow on the line, the association is taken to be

bidirectional.

2. A unidirectional association is indicated like this:

➢ Aggregation: An aggregation relationship is indicated by placing a white

diamond at the end of the association next to the aggregate class. If B aggregates A,
then A is a part of B, but their lifetimes are independent.

➢ Inheritance: An inheritance (generalization/specialization)relationships indicated

in the UML by an arrow with a triangular arrow head pointing towards the
generalized class.

CLASS DIAGRAM:
 Description of our Collaboration Diagram,,Main classes of diagram are:

1. PATIENT CLASS : it contains 3 data members and 5 member function

2. DOCTOR CLASS: it contains 3 data members and 3 member function
3. ADMIN : it contains 3 data members and 4 member function

Main association in diagram are:

1. Multidirectional association between PATIENT and DOCTOR.

2. Unidirectional association between PATIENT and ADMIN.
3. Unidirectional association between and DOCTOR and ADMIN.

10. Deployment
Diagram
 Deployment diagrams are important for visualizing, specifying, and documenting
embedded, client/server, and distributed systems and also for managing executable systems
through forward and reverse engineering.
A deployment diagram is just a special kind of class diagram, which focuses on a
system's nodes. Graphically, a deployment diagram is a collection of vertices and arcs.
Deployment diagrams commonly contain:

Nodes

• 3-D box represents a node, either software or hardware

• HW node can be signified with <<stereotype>>
• Connections between nodes are represented with a line, with optional
<<stereotype>>
• Nodes can reside within a node

Description of our Activity Diagram Main nodes are:

1. .apk
2. User 1
3. User 2
4. Android device
5. Web server
6. Database server

11. Code
Home.js

import React from 'react' import

ViewCards from './cards'; import
pet from '../images/pet.jpg'; import
'../component/cards.css' import
Hero from './Hero/Hero'; // import
'./Home.css' const Home = () => {
return ( <>
<Hero/>
<section className='service-section'>
<div className='container'>
<h1 className='main-heading'>SerVices</h1>
</div>
<div className='container grid grid-four-col'></div>
<div className="card-container">
<ViewCards
title="Online Councultation"
imageUrl = {pet}
to='/Doctordetails'
/>
<ViewCards
title="QA"
imageUrl={pet}
to='/QA'
/>

<ViewCards
title="BookAppointment"
imageUrl={pet}
to='bookAppointment'
/>

<ViewCards
title="Products"
imageUrl={pet} to='/Login'
/>
</div>
</section>

</>

)
}

export default Home

Home.css

img { border: 1px solid

#ddd; border-radius:
50px; padding: 5px;
width: 100px;
} .App{ padding-
left: 50px; padding-
right: 30px;
}
AddProduct.js
import React, { useState } from 'react'
import './AddProduct.css' import cart
from'../../assets/cart.png' const
AddProduct = () => {
const [image,setImage] = useState(false);
const[productDetails,setproductDetails] = useState({
name:"", image:"", category:"Dog",
new_price:"", old_price:""
})
 const imageHandler =
(e)=>{ setImage(e.target.files[0])
}
const changeHandler = (e) =>{
setproductDetails({...productDetails,[e.target.name]:e.target.value})
}
const Add_Product = async ()=>{
console.log(productDetails) let
responseData;
let product = productDetails;

let formData = new FormData();

formData.append('product',image); await
fetch("http://localhost:4000/Upload",
{ method:'POST', headers:{
Accept:'application/json',
},
body:formData
}).then((resp)=>resp.json()).then((data)=>{responseData=data});

if(responseData.success){
product.image = responseData.image_url;
console.log(product);
await fetch("http://localhost:4000/addproduct",{
method:'POST', headers:{
Accept:'application/json',
'Content-Type':'application/json',
},
body:JSON.stringify(product)
}).then((resp)=>resp.json()).then((data)=>{
data.success?alert("product added"):alert("Fail")
});
}
}
return (
<div className='addproduct'>
<div className='addproduct-itemfield'>
<p>Product title</p>
<input value={productDetails.name} onChange={changeHandler}type='text' name='name' placeholder='Product name'/>
</div>
<div className='addproduct-price'>
<div className='addproduct-itemfield'>
<p>Price</p>
<input value={productDetails.old_price} onChange={changeHandler} type='text' name='old_price' placeholder='Type
here'/>
</div>
<div className='addproduct-itemfield'>
<p>Offer Price</p>
<input value={productDetails.new_price} onChange={changeHandler}type='text' name='new_price' placeholder='Type
here'/>
</div>
</div>
<div className='addproduct-itemfield'>
<p>Product Category</p>
<select value={productDetails.category} onChange={changeHandler} name='category' className='add-product-selector'>
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Rabbit">Rabbit</option>
</select>
</div>
<div className='addproduct-itemfield'>
<label htmlFor='file-input'>
<img className='nav-profile'src={image?URL.createObjectURL(image):cart} alt=''/>
</label>
 <input onChange={imageHandler}type='file' name='image' id='file-input' hidden/>
</div>
<button onClick={()=>{ Add_Product()}} className='addproduct-btn'>Add</button>
</div>
)
}

export default AddProduct

AddProduct.css

.nav-profile{ border:
1px solid #ddd;
border-radius: 10px;
padding: 5px; width:
75px; height: 80px;
object-fit: contain;
margin: 10px 0;
}
.addproduct{ box-
sizing: border-box;
width: 100%; max-
width: 800px; padding:
30px 50px; margin:
20px 30px; border-
radius: 6px;
background: white;
}
.addproduct-itemfield{
width: 100%; color:
#7b7b7b; font-size:
16px;
}
.addproduct-itemfield input{
box-sizing: border-box;
width: 100%; height:
50px; border-radius: 4px;
padding-left: 15px;
border: 1px solid #c3c3c3;
outline: none;
color: #7b7b7b; font-
family: 'Poppins';
font-size: 14px;
}
.addproduct-
price{ display: flex;
gap: 40px;

}
.add-product-selector{
padding: 10px;
width: 100px; height:
50px; font-size:
14px; color:
#7b7b7b; border:
1px solid #7b7b7b8b;
border-radius: 4px;
}
.addproduct-
btn{ margin-top:
20px; width: 160px;
height: 50px; border-
radius: 6px;
background: #6079ff;
border: none; cursor:
pointer; color: white;
font-size: 16px; font-
weight: 500;
}
@media(max-width:800px){
.addproduct{
width: auto;
padding: 30px;
margin: 20px;
}
}

App.js

import './App.css';
import Navbar from './Components/Navbar/Navbar'; import
{BrowserRouter ,Routes,Route} from 'react-router-dom'; import
Shop from './Pages/Shop';
import ShopCategories from './Pages/ShopCategories'; import Cart
from './Pages/Cart'; import LoginSignup from './Pages/LoginSignup';
import Footer from './Components/Footer/Footer'; import
dog_banner from './Components/Assests/dogbanner1.png'; import
rabbit_banner from './Components/Assests/rabbit_banner.jpg'; import
cat_food from './Components/Assests/cat_food.avif'; import Product
from './Pages/Product';

function App() {
return ( <div
>
<BrowserRouter>
<Navbar/>
<Routes>
<Route path='/' element={<Shop/>}/>
<Route path='/Cat' element={<ShopCategories banner={cat_food} category="Cat"/>}/>
<Route path='/Dog' element={<ShopCategories banner={dog_banner} category="Dog"/>}/>
<Route path='/Rabbit' element={<ShopCategories banner={rabbit_banner} category="Rabbit"/>}/>
<Route path='/product' element={<Product/>}>
<Route path=':productId' element={<Product/>}/>
</Route>
<Route path='/cart' element={<Cart/>}/>
<Route path='/login' element={<LoginSignup/>}/>
</Routes>
<Footer/>
</BrowserRouter>

</div>
);
}

export default App;

BookAppointment.js

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

import { useParams } from 'react-router-dom'; import
'../component/BookAppointment.css' const
BookAppointment = () => { const { doctorId } =
useParams(); const [doctor, setDoctor] =
useState(null); const [patientDetails,
setPatientDetails] = useState({ name: '', email: '',
illness:'', mobileNo:'',
// Add more fields as needed
});

useEffect(() => {
if (!doctorId) {
 console.error('doctorId is undefined');
return;
}

const fetchDoctorDetails = async () => {

try {
const response = await fetch(`http://localhost:4000/allDoctorDetails/${doctorId}`);
const data = await response.json(); setDoctor(data); } catch (error) {
console.error(error);
}
};

fetchDoctorDetails();
}, [doctorId]);

const handleInputChange = (e) => {

setPatientDetails({
...patientDetails,
[e.target.name]: e.target.value,
});
};

const handleFormSubmit = (e) =>

{ e.preventDefault();
// Handle form submission here
console.log('Patient Details:', patientDetails);
};

if (!doctor) { return
<div>Loading...</div>;
}

return (
<div className="book-appointment">
<h2 className="doctor-name">Book Appointment with {doctor.name}</h2>
<p className="clinic-category">Clinic: {doctor.Clinic}</p>
<p className="category">Category: {doctor.category}</p>
<p className="image">
Image: <img src={doctor.image} alt={doctor.name} />
</p>
<form className="appointment-form" onSubmit={handleFormSubmit}>
<label htmlFor="name" className="label">Name:</label>
<input type="text" name="name" id="name" value={patientDetails.name} onChange={handleInputChange} required
className="input-field" />
<br />
<label htmlFor="email" className="label">Email:</label>
<input type="email" name="email" id="email" value={patientDetails.email} onChange={handleInputChange} required
className="input-field" />
<br />
<label htmlFor="illness" className="label">Illness:</label>
<input type="text" name="illness" id="illness" value={patientDetails.illness} onChange={handleInputChange} required
className="input-field" />
<br />
<label htmlFor="mobileNo" className="label">Mobile Number:</label>
<input type="tel" name="mobileNo" id="mobileNo" value={patientDetails.mobileNo} onChange={handleInputChange}
required className="input-field" />
<br />
{/* Add more fields as needed */}
<button type="submit" className="submit-button">Book Appointment</button>
</form>
</div>
);
};

export default BookAppointment;

BookAppointment.css

.book-appointment
{ max-width: 600px;
margin: 0 auto;
padding: 2rem; border:
1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.doctor-name { font-
size: 2rem;
margin-bottom: 1rem;
}

.clinic-
category, .category {
font-size: 1.2rem;
margin-bottom: 1rem;
}

.image { text-
align: center;
margin-bottom: 2rem;
}

.appointment-form
{ display: flex;
flex-direction: column;
}

.label { font-
weight: bold;
margin-bottom: 0.5rem;
}

.input-field
{ padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 1rem;
}

.submit-button
{ padding: 0.5rem
2rem;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 1rem;
}

.submit-button:hover {
background-color: #3e8e41;
}

CartItem.js

import React, { useContext } from 'react' import

'./CartItems.css'
import { ShowContext } from '../../Context/ShopContext'
import remove from '../Assests/remove.png' const
CartItems = () => {
const {getTotalCartAmount,data_product,cartItem,removeToCart} = useContext(ShowContext);
debugger;

return (
<div className='cartItems'>
<div className='cartItems-format-main'>
<p>Products</p>
<p>Title</p>
<p>Quantity</p>
<p>Price</p>
<p>Total</p>
<p>Remove</p>
</div>
<hr/>
{data_product.map((e)=>{
if(cartItem[e.id]>0)
{
return (
<div>
<div className='cartitems-format cartItems-format-main'>
<img src={e.image} alt='' className='carticon-product-icon'/>
<p>{e.name}</p>
<button className='cartitems-quantity'>{cartItem[e.id]}</button>
<p>${e.new_price}</p>
<p>{e.new_price*cartItem[e.id]}</p>
<img className='carticon-remove-icon' src={remove} onClick={()=>{removeToCart(e.id)}}alt=''/>
</div>
<hr/>
</div>
);
}
return null;
})}
<div className='cartitems-down'>
<div className='cartitems-total'>
<h1>cart Totals</h1>
<div>
<div className='cartitems-total-item'>
<p>Subtotal</p>
<p>${getTotalCartAmount()}</p>
</div>
<hr/>
<div className='cartitems-total-item'>
<p>Shipping Fee</p>
<p>Free</p>
</div>
<hr/>
<div className='cartitems-total-item'>
<h3>Total</h3>
<h3>${getTotalCartAmount()}</h3>
</div>
<button>PROCEED TO CHECKOUT</button>
</div>
<div className='cartitems-promocode'>
<p>If you have a promo code, Enter it here</p>
<div className='cartitems-promobox'>
<input type='text' placeholder='promo code'/>
<button>Submit</button>
</div>
</div>
</div>
</div>
 </div>
)
}

export default CartItems

CartItems.css

.cartItems{ margin:
100px 50px;
} .cartItems
hr{ height: 3px;
background: #e2e2e2;
border: 0;
}
.cartItems-format-
main{ display: grid;
grid-template-columns: 1.5fr 2fr 1fr 1fr 1fr 1fr;
align-items: center; gap: 55px; padding:
20px 0px; color: #454545; font-size: 18px;
font-weight: 600; } .cartitems-format{ font-
size: 17px; font-weight: 500; }
.carticon-product-icon{
height: 100px; }
.carticon-remove-icon{
height: 42px; margin:
0px 0px; cursor:
pointer;
}

.cartitems-
quantity{ width: 64px;
height: 50px; border: 2px
solid #ebebeb;
background:
#fff; } .cartitems-
down{ display:flex;
margin: 100px 0px; }
.cartitems-total{ flex:
1; display: flex;
flex-direction: column;
margin-right: 3000px;
gap:40px;
}
.cartitems-total-item { display:
flex; justify-content: space-
between; padding: 15px 0px;
}
.cartitems-total button{
cursor: pointer;
width: 262px; height:
58px; outline: none;
border: none;
background: #ff5a5a;
color: #fff; font-size:
16px; font-weight:
600; }
.cartitems-promocode{
flex: 1; /*
display: flex; */
font-weight: 500;
font-size: 16px; }
.cartitems-promocode p{
width: 504px; color:
#555; }
.cartitems-
promobox{ width: 504px;
margin-top: 15px;
padding-left: 20px;
height: 58px; background:
#eaeaea;
}
.cartitems-promobox input{
border: none; outline:
none; background:
transparent; font-size:
16px; width: 330px;
height: 50px;
}
.cartitems-promobox button{
width: 170px; height:
58px; font-size: 16px;
background: black; color:
white; cursor: pointer;
}
@media(max-width:1280px){
.cartItems{ marg
in: 60px 50px;
}
.cartItems-format-main{ grid-template-
columns: 0.5fr 3fr 0.5fr 0.5fr 0.5fr;
gap: 20px;
padding: 15px 0px;
font-size: 15px;
}
.carticon-product-
icon{ height: 50px;
}
.carticon-remove-icon{
margin: auto;
}
.cartitems-quantity{
width: 40px;
height: 30px;
}
.cartitems-
down{ margin: 80px
0px; flex-direction:
column; gap: 80px;
}
.cartitems-
total{ margin: 0;
}
.cartitems-total button{
max-width: 200px;
height: 45px; font-size:
13px;
}
.cartitems-
promobox{ width: auto;
max-width: 500px;
}
.cartitems-promobox input{
width: 120px;
}
.cartitems-promobox
button{ width: 120px;
margin-left: -125px;
}
}
@media(max-width:500px)
{ .cartItems-format-
main{ display: none;
grid-template-columns: 0.5 3fr 0.5fr;
gap: 10px;
}
.cartitems-
format{ display: grid;
}
}

DoctorCards.js

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

import './Carddoctor.css'; import { Link } from
'react-router-dom';
import BookAppointment from './BookAppointment';

const DoctorCards = () => { const

[doctors, setDoctors] = useState([]);
const [categories, setCategories] = useState({});

useEffect(() => { const

fetchDoctors = async () => {
const response = await fetch('http://localhost:4000/allDoctorDetails');
const data = await response.json(); const doctorsData = data;
const categoriesData = {};

doctorsData.forEach(doctor => {
const category = doctor.category; if
(!categoriesData[category]) {
categoriesData[category] = [];
}
categoriesData[category].push(doctor);
});

setDoctors(doctorsData);
setCategories(categoriesData);
};

fetchDoctors();
}, []);

return (
<div className="doctor-cards-container"> {Object.keys(categories).map(category => (

<div key={category} className="category-container">

<h2>{category} Specialist</h2>
{categories[category].map(doctor => (
// <Link to={`/BookAppointment?doctorId=${doctor._id}`}>
<div key={doctor._id} className="doctor-card">
<img src={doctor.image} alt={doctor.name} />
<h5>{doctor.Clinic}</h5>
<h3>{doctor.name}</h3>
<Link to={`/BookAppointment/${doctor._id}`}>
<button>Book Now</button>
</Link>
</div>
// </Link>

))}
</div>

))}
</div>
 );
};

export default DoctorCards;

DoctorCards.css

.productdisplay{ disp
lay: flex; margin:
0px 100px; }
.productdisplay-left{
display: flex; gap:
10px;
}
.productdisplay-img-
list{ display: flex; flex-
direction: column; gap:
10px;
}
.productdisplay-img-list
img{ height: 163px;
}
.productdisplay-main-img{
width: 580px; height:
600px;
} .star{ paddi
ng: 5px;
width: 20px;
}
.productdisplay-
right{ margin: 0px 70px;
display: flex; flex-
direction: column;
}
.productdisplay-right
h1{ color: #3d3d3d;
font-size: 40px; font-
weight: 700;
}
.productdisplay-right-stars{
display: flex; align-
items: center; margin-
top: 13px; gap: 5px;
color: #1c1c1c;
font-size: 16px; }
.productdisplay-right-
prices{ display: flex;
margin: 20px 0px; gap: 30px;
font-size: 24px; font-weight:
700; } .productdisplay-right-
prices-old{ color: #ff4141;
text-decoration: line-
through; } .productdisplay-right-
prices-new{ color:
#ff4141; } .productdisplay-right-
size{ display: flex; flex-
direction: column; margin:
30px 0px; gap: 20px;
} .productdisplay-right-size
h1{ margin-top: 55px;
color: #656565; font-size:
20px; font-weight: 600; }
.productdisplay-righ-size div{
display: flex; flex-direction:
column; padding: 18px
24px; background: #fbfbfb;
border: 1px solid #ebebeb;
border-radius: 3px; cursor:
pointer; gap:
20px; } .productdisplay-right
button{ padding: 20px
40px; width: 200px; font-
size: 16px; font-weight:
600; color: white;
background: #ff4141;
margin-bottom: 40px;
border:none; outline: none;
cursor: pointer; }
productdisplay-right-categoty{
margin-top: 10px; }
@media(max-width:1280px)
{ .productdisplay{
margin: 0px 60px;
}
.productdisplay-left{
gap: 10px;
}
.productdisplay-img-list{
gap: 10px;
}
.productdisplay-img-list img{
height: 120px;
}
.productdisplay-main-img{
width: auto; height:
510px;
}
.productdisplay-
right{ margin: 0px 30px;
}
.productdisplay-right
h1{ font-size: 22px;
}
.productdisplay-right-stars img{
gap: 3px; font-size: 13px;
}
.productdisplay-right-prices{
margin: 10px 0px; font-size:
18px;
}
.productdisplay-right-
description{ font-size: 13px;
}
.productdisplay-right-size h1{
margin-top: 20px; font-size:
20px;
}
.productdisplay-righ-size
div{ padding: 14px 20px;
}
.productdisplay-right button{
width: 150px; padding:
15px 0px; margin-bottom:
20px;
}
.productdisplay-right-categoty{
margin-top: 5px; font-size:
14px;
}
}
@media(max-width:1024px)
{ .productdisplay{
margin: 0px 30px;
}
.productdisplay-left{
gap: 5px;
}
.productdisplay-img-list
img{ height: 80px;
}
.productdisplay-main-img{
height: 350px;
}
.productdisplay-right
h1{ font-size: 18px;
}
.productdisplay-right-stars img{
width: 15px;
}
.productdisplay-right-
description{ font-size: 13px;
}
.productdisplay-right-size
h1{ font-size: 12px;
}
.productdisplay-righ-
size{ margin-top: 10px 0px;
}
.productdisplay-righ-size div{ padding: 10px 16px; font-size: 12px;
}
.productdisplay-right button{
width: 120px; padding:
10px 0px; margin-bottom:
10px; font-size: 14px;
}
.productdisplay-right-categoty{
margin-top: 5px; font-size:
14px;
}
}
@media(max-width:800px)
{ .productdisplay{
margin: 0px 10px;
}
.productdisplay-left{
gap: 0px; align-items:
center;
}
.productdisplay-img-list
img{ height: 70px;
}
.productdisplay-main-img{
height: 300px;
}
.productdisplay-right
h1{ font-size: 14px;
}
.productdisplay-right-stars img{
width: 13px;
}
.productdisplay-right-
description{ font-size: 10px;
}
.productdisplay-right-size
h1{ font-size: 10px;
}
 .productdisplay-righ-size{
margin-top: 10px; gap:
5px;
}
.productdisplay-righ-size div{
padding: 4px 11px; font-size:
12px;
}
.productdisplay-right button{
width: 100px; font-size:
12px;
}
.productdisplay-right-
categoty{ font-size: 10px;
}
}
@media(max-width:500px)
{ .productdisplay{ fl
ex-direction: column;
}
.productdisplay-left{
gap: 10px; margin:
auto;
}
.productdisplay-img-list{ flex-
direction: column; gap: 8px;
}
.productdisplay-img-list
img{ height: 75px;
}
.productdisplay-main-img{
height: 330px;
}
.productdisplay-right{
margin: 5px;
}
.productdisplay-right h1{
font-size: 20px; margin-top:
15px;
font-weight: 500;
}
.productdisplay-right-stars img{
width: 15px;
}
.productdisplay-righ-size{
margin-top: 20px 0px; gap:
10px;
}
.productdisplay-righ-size div{
padding: 10px 16px; font-size:
14px;
}
.productdisplay-right button{
width: 130px; font-size:
15px;
padding: 12px 0px;
}
.productdisplay-right-
categoty{ font-size: 16px;
}
}

DoctorForm.js
import React, { useState } from 'react' import cart
from '../assets/cart.png' import './DoctorForm.css'
const DoctorForm = () => { const [image,setImage]
= useState(false);
const[productDetails,setproductDetails] = useState({
name:"",
image:"",
category:"Dog",
Clinic:"",
})
const imageHandler =
(e)=>{ setImage(e.target.files[0])
}
const changeHandler = (e) =>{ setproductDetails({...productDetails,
[e.target.name]:e.target.value})
}
const Add_Product = async
()=>{ debugger;
// console.log(productDetails)
let responseData; let product
= productDetails;

let formData = new FormData();

formData.append('doc',image); await
fetch("http://localhost:4000/Uploaddoc",
{ method:'POST', headers:{
Accept:'application/json',
},
body:formData
}).then((resp)=>resp.json()).then((data)=>{responseData=data});

if(responseData.success){
product.image = responseData.image_url;
console.log(product);
await fetch("http://localhost:4000/AddDetailsDoc",{
method:'POST', headers:{
Accept:'application/json',
'Content-Type':'application/json',
},
body:JSON.stringify(product)
}).then((resp)=>resp.json()).then((data)=>{
data.success?alert("product added"):alert("Fail")
});
}
}
return (
<div className='addproduct'>
<div className='addproduct-itemfield'>
<p>Product title</p>
<input value={productDetails.name} onChange={changeHandler}type='text' name='name' placeholder='Product name'/>
</div>
<div className='addproduct-price'>
<div className='addproduct-itemfield'>
<p>Price</p>
<input value={productDetails.Clinic} onChange={changeHandler} type='text' name='Clinic' placeholder='Type here'/>
</div>
</div>
<div className='addproduct-itemfield'>
<p>Product Category</p>
<select value={productDetails.category} onChange={changeHandler} name='category' className='add-product-selector'>
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Rabbit">Rabbit</option>
</select>
</div>
 <div className='addproduct-itemfield'>
<label htmlFor='file-input'>
<img className='nav-profile'src={image?URL.createObjectURL(image):cart} alt=''/>
</label>
<input onChange={imageHandler}type='file' name='image' id='file-input' hidden/>
</div>
<button onClick={()=>{ Add_Product()}} className='addproduct-btn'>Add</button>
</div>
)
}

export default DoctorForm

DoctorForm.css

.nav-profile{ border:
1px solid #ddd;
border-radius: 10px;
padding: 5px; width:
75px; height: 80px;
object-fit: contain;
margin: 10px 0;
}
.addproduct{ box-
sizing: border-box;
width: 100%; max-
width: 800px; padding:
30px 50px; margin:
20px 30px; border-
radius: 6px;
background:
white; } .addproduct-
itemfield{ width:
100%; color: #7b7b7b;
font-size:
16px; } .addproduct-
itemfield input{ box-
sizing: border-box;
width: 100%; height:
50px; border-radius:
4px; padding-left:
15px; border: 1px solid
#c3c3c3; outline: none;
color: #7b7b7b; font-
family: 'Poppins'; font-
size: 14px; } .addproduct-
price{ display: flex;
gap: 40px;

} .add-product-
selector{ padding: 10px;
width: 100px; height: 50px;
font-size: 14px; color:
#7b7b7b; border: 1px solid
#7b7b7b8b; border-radius:
4px; } .addproduct-
btn{ margin-top: 20px;
width: 160px; height: 50px;
border-radius: 6px;
background: #6079ff; border:
none; cursor: pointer;
color: white; font-size: 16px;
font-weight: 500; }
@media(max-width:800px){
.addproduct{
width: auto;
padding: 30px;
 margin: 20px;
}
}

LoginSignup.js

import React, { useState } from 'react' //

import '../Pages/LoginSignup.css'
import './LoginSignup.css'
const LoginSignup = () => {

const [state,setState]= useState("Login");

const [formData,setFormData] = useState({ doctorname:"", email:"",

password:""
})

const changeHandler = (e)=>{

setFormData({...formData,[e.target.name]:e.target.value})
}
const login = async ()=>{ let responseData;
console.log("Login function works",formData);
await fetch('http://localhost:4000/Doctorlogin',{
method:'POST', headers:{
'Accept':'application/form-data',
'Content-Type':'application/json',
},
body:JSON.stringify(formData),
}).then((response)=>response.json()).then((data)=>{responseData=data});
if(responseData.success){
window.localStorage.setItem('auth-token',responseData.token);
window.location.replace('/');
}
else{
alert(responseData.errors);
}

}
const signup = async ()=>{ let responseData;
console.log("signup function works",formData);
await fetch('http://localhost:4000/Doctorsignup',{
method:'POST', headers:{
'Accept':'application/form-data',
'Content-Type':'application/json',
},
body:JSON.stringify(formData),
}).then((response)=>response.json()).then((data)=>{responseData=data});
if(responseData.success){
window.localStorage.setItem('auth-token',responseData.token);
window.location.replace('/');
}
else{
alert(responseData.errors);
}
}
return (
<div className='loginsingup'>
<div className='loginsingup-container'>
<h1>{state}</h1>
<div className='loginsingup-field'>
{state ==="Sign-up"?<input name='patientname' value={formData.patientname} onChange={changeHandler} type='text'
placeholder='your name'/>:<></>}
<input value={formData.email} onChange={changeHandler} type='email' name='email' placeholder='Email Address' />
<input onChange={changeHandler} name='password' value={formData.password} type='password'
placeholder='password'/>
 </div>
<button onClick={()=>{state ==="Login"?login():signup()}}>Continue</button>
{state==="Sign-up"?
<p className='loginsingup-login'>Already have an account ?<span onClick={()=>{setState("Login")}}>Login
here</span></p>:
<p className='loginsingup-login'>Create An Account ?<span onClick={()=>{setState("Sign-up")}}>Click here</span></p>
}
<div className='loginsignup-agree'>
<input type='checkbox' name='' id=''/>
<p>By continue, i agree to the terms of use & policy</p>
</div>
</div>
</div>
)
}

export default LoginSignup;

LoginSignup.css

.loginsingup{ width: 100%;

height: 120vh; background:
#fce3fe; padding-top: 50px;
} .loginsingup-
container{ width: 580px;
height: 600px; background:
white; margin: auto;
padding: 40px
60px; } .loginsingup-container
h1{ margin: 20px
0; } .loginsingup-
field{ display: flex; flex-
direction: column ; gap:
29px; ; margin-top:
30px; ; } .loginsingup-field
input{ height: 72px;
width: 100%; padding-left:
20px; border: 1px solid
#c9c9c9; outline: none;
color: #5c5c5c; font-size:
18px; } .loginsingup-container
button{ width: 580px;
height: 72px; color: white;
background: #ff4141;
margin-top: 30px; border:
none; font-size: 24px;
font-weight: 500; cursor:
pointer; } .loginsingup-login{
margin-top: 20px; color:
#5c5c5c; font-size: 18px;
font-weight:
500; } .loginsingup-login
span{ color: #ff4141;
font-weight:
600; } .loginsingup-
area{ display: flex; align-
items: center; margin-top:
25px; gap:20px; color:
#5c5c5c;
font-size: 18px; font-
weight: 500;
}
@media(max-width:1280px)
{ .loginsingup{
padding-top: 50px;
}
 .loginsingup-container{
width: auto; max-width:
500px;
max-height: 500px;
}
.loginsingup-container h1{
margin: 10px 0px;
}
.loginsingup-field{
gap: 20px; margin-
top: 20px;
}
.loginsingup-field input{
height: 65px; width:
93%;
}
.loginsingup-container button{
width: 100%;
}
.loginsingup-
login{ font-size: 16px;
}
.loginsingup-area{
font-size: 14px; gap:
10px;
}
}
@media(max-width:800px){ .loginsingup-
container{
padding: 20px 30px;
}
.loginsingup-container
h1{ font-size: 24px;
}
.loginsingup-field{
margin-top: 20px;
}
.loginsingup-field
input{ height: 50px;
}
.loginsingup-container button{
height: 50px; font-size:
16px;
}}

Hero.js

import React from 'react' import './Hero.css' import

doctorlogo from '../Assests/doctorLogo.png' import
logo from '../Assests/logo.avif' const Hero = () =>
{ return (
<div className='hero'>
<div className='hero-left'>
<h2>Hi there</h2>
<div>
< div className='hand-hand-icon'>
<p>TALK TO EXPERT</p>
<img className='hand'src={logo} alt=''/>
</div>
<p>Expert Consultation</p>
<p>for your pet</p>
</div>
<div className='hero-latest-btn'>
<h6>Take care of your pet health as its more loyal then humans</h6>
{/* <div>Latest Collection</div> */}
 {/* <img className='womenok' src={womenok}alt=''/> */}
</div>
</div>
<div className='hero-right'>
<img className='womenok' src={doctorlogo}alt=''/>
</div>

</div>
)
}

export default Hero

Index.js

const port =4000;

const express = require("express");
const app= express(); const mongoose =
require("mongoose"); const jwt =
require("jsonwebtoken"); const multer
= require("multer"); const path =
require("path")
const cors =require("cors")

app.use(express.json()) app.use(cors())

const DB=
`mongodb+srv://PetDoc:[email protected]/Ecommerce?retryWrites=true&w=majority&app
Name=Cluster0`

mongoose.connect(DB,
{ useNewUrlParser: true,
useUnifiedTopology: true,
}).then(()=>{
console.log('connection successful'); }).catch((err)=>console.log("no
connection"));

const midleware = (req,res,next)=>{

console.log("middleware is here");
next(); }
app.get('/',(req,res)=>{
res.send("hello world from the server");
});

app.get('/about',midleware,(req,res)=>{
console.log("this is about");
res.send("this is about");
});
app.get('/signin',
(req,res)=>{ res.send("this is signin");
});
app.get('/signup',(req,res)=>{
res.send("this is signup");
});
app.get('/contact',
(req,res)=>{ res.cookie("Test",'example');
res.send("this is contact");
});

//image storage
const storage =
multer.diskStorage({ destination:
'./Upload/Images', filename:(req,file,cb)=>{
return cb(null,`${file.fieldname}_${Date.now()}_${path.extname(file.originalname)}`)
}
})

const upload = multer({storage:storage});

app.use('/Images',express.static('Upload/Images'))

app.post("/Upload",upload.single('product'),(req,res)=>{
res.json({ success:1,
image_url: `http://localhost:${port}/Images/${req.file.filename}`
}) })
app.post("/Uploaddoc",upload.single('doc'),(req,res)=>{
res.json({ success:1,
image_url: `http://localhost:${port}/Images/${req.file.filename}`
})
})

// schema for creating Products

const Product = mongoose.model("Product",{

id:{ type:Number, required:true,
},
name:
{ type: String,
required: true,
},
image:
{ type:
String,
required:true,
},
category:
{ type:
String,
required:true,
},
new_price:
{ type: String,
required:true,
},
old_price:
{ type: String,
required:true,
},
date:{
type: Date,
default: Date.now,
}, available:{
type:Boolean,
default: true,
},
})

app.post('/addproduct',async (req,res)=>{
 let products = await Product.find({});
let id;
if(products.length>0){ let
last_product_array=products.slice(-1); let
last_product = last_product_array[0]; id
= last_product.id+1;
}
else {
id=1;
}
const product = new Product({
id : id,
name : req.body.name,
image : req.body.image,
category:req.body.category,
new_price:req.body.new_price,
old_price:req.body.old_price,
});
console.log(product);
await product.save();
console.log("Saved");
res.json({
success:true,
name:req.body.name,
});
})

//Creating API for delete the products

app.post('/removeproduct',async (req,res)=>{ await

Product.findOneAndDelete({id: req.body.id});
console.log("deleted");
res.json({ success:tr
ue,
name: req.body.name
})
})

app.get('/allproduct',async
(req,res)=>{ let products = await
Product.find({}); console.log("All
product fetch"); res.send(products);
})

const fetchPatient =
async(req,res,next)=>{ const token =
req.header('auth-token');
if(!token){
res.status(401).send({errors:"please authanticate a valid
token"}); }
else{
try{
const data = jwt.verify(token,'secret_ecom');
req.patient = data.patient;

next(); }catch{
res.status(401).send({errors:"please authanticate a valid token"});
}
 }}
debugger;
app.post('/addtocart',fetchPatient,async
(req,res)=>{ console.log("Added",req.body.itemId);
console.log(req.body,req.patient);
let patientData = await Patient.findOne({_id:req.patient.id});
patientData.cartData[req.body.itemId]+=1;
await Patient.findOneAndUpdate({_id:req.patient.id},{cartData:patientData.cartData});
res.send("added");
})

app.post('/
removefromcart',fetchPatient,async(req,res)=>{ console.log("remov
ed",req.body.itemId);
let patientData = await
Patient.findOne({_id:req.patient.id});
if(patientData.cartData[req.body.itemId]>0)
patientData.cartData[req.body.itemId] -=1;
await Patient.findOneAndUpdate({_id:req.patient.id},{cartData:patientData.cartData});
res.send("removed");
})

app.post('/
getcart',fetchPatient,async(req,res)=>{ console.log("getcart");
let patientData = await Patient.findOne({_id:req.patient.id});
res.json(patientData.cartData);
})

app.get('/newcollection',async (req,res)=>{ let

products = await Product.find({}); let
newcollection = products.slice(1).slice(-8);
console.log("new collection fetched");
res.send(newcollection);
})

app.get('/popularwomen', async(req,res)=>{ let

products = await Product.find({category:"Cat"}); let
popular_in_women = products.slice(0,4);
console.log("popular in women fetched");
res.send(popular_in_women);
})
//userSchema

const Patient = mongoose.model('Patient',{

name:
{ type:String,
}, email:{
type:String,
unique:true,
},
password:{
type:String,
},
cartData:{
type:Object,
}, date:{
type:Date,
default:Date.now,
 }
})

app.post('/signup',async(req,res)=>{
let check =await Patient.findOne({email:req.body.email});
if(check){
return res.status(400).json({success:false,error:"this email id already exsist"});
} let cart = {};
for(let i=0;i<300;i++){
cart[i]=0;
}
const patient = new
Patient({ name:req.body.patientn
ame, email: req.body.email,
password: req.body.password,
cartData:cart,
})

await patient.save();

const data =
{ patient:
{ id:patient.id
}
}
const token =jwt.sign(data,'secret_ecom');
res.json({success:true,token})
})

app.post('/login',async(req,res)=>{
let patient = await Patient.findOne({email:req.body.email});
if(patient){
const passCompare = req.body.password === patient.password;
if(passCompare){ const data = { patient:{
id:patient.id
}
}
const token = jwt.sign(data,'secret_ecom');
res.json({success:true,token});
}
else{
res.json({success:false,error:"Wrong password"});
}
}
else{
res.json({success:false,error:"Wrong Email id"}) }
})

const Doctor = mongoose.model('Doctor',{

name:
{ type:String,
}, email:{
type:String,
unique:true,
},
password:
{ type:String,
 }, date:{
type:Date,
default:Date.now,
}
})

app.post('/Doctorsignup',async(req,res)=>{ let check

=await Doctor.findOne({email:req.body.email}); if(check)
{
return res.status(400).json({success:false,error:"this email id already exsist"});
}
const doctor = new
Doctor({ name:req.body.doctorna
me, email: req.body.email,
password: req.body.password,
})

await doctor.save();

const data =
{ doctor:
{ id:doctor.id
}
}
const token =jwt.sign(data,'secret_ecom');
res.json({success:true,token})
})

app.post('/Doctorlogin',async(req,res)=>{
let doctor = await Doctor.findOne({email:req.body.email});
if(doctor){
const passCompare = req.body.password === doctor.password;
if(passCompare){ const data = { doctor:{
id:doctor.id
}
}
const token = jwt.sign(data,'secret_ecom');
res.json({success:true,token});
}
else{
res.json({success:false,error:"Wrong password"});
}
}
else{
res.json({success:false,error:"Wrong Email id"}) }
})

const DocInfo = mongoose.model('DoctorInfo',{

id:
{ type:Number,
required:true,
},
name:
{ type: String,
required: true,
},
image:
{ type:
String,
required:true,
},
category:
{ type:
String,
required:true,
},
Clinic:
{ type:
String,
required:true,
}
})

app.post('/AddDetailsDoc',async
(req,res)=>{ let products = await
DocInfo.find({});
let id;
if(products.length>0){ let
last_product_array=products.slice(-1); let
last_product = last_product_array[0]; id
= last_product.id+1;
}
else {
id=1;
}
const product = new DocInfo({
id : id,
name : req.body.name,
image : req.body.image,
category:req.body.category,
Clinic:req.body.Clinic,
});
console.log(product);
await product.save();
console.log("Saved");
res.json({
success:true,
name:req.body.name,
});
})

app.post('/removeDoctorDetails',async
(req,res)=>{ await DocInfo.findOneAndDelete({id:
req.body.id});
console.log("deleted");
res.json({
success:true,
name: req.body.name
})
})

app.get('/allDoctorDetails',async
(req,res)=>{ let products = await
DocInfo.find({}); console.log("All product
fetch"); res.send(products);
})
app.get('/allDoctorDetails/:id', async (req, res) =>
{ try {
const doctor = await DocInfo.findOne({ _id: req.params.id });

if (!doctor) {
return res.status(404).json({ message: 'Doctor not found' });
}

console.log('Doctor details fetched');

res.send(doctor); } catch (err)
{ console.error(err);
res.status(500).json({ message: 'Server error' });
}
});

// const PORT=2000; app.listen(port,()=>{

console.log("server side is running");
});

Item.js

import React from 'react' import

'./Item.css'
import { Link } from 'react-router-dom'
const Item = (props) => { return (
<div className='item'>
<Link to={`/product/${props.id}`}><img onClick={window.scrollTo(0,0)} className='item'src={props.image}
alt=''/></Link>
<p>{props.name}</p>
<div className='item-price'>
<div className='item-price-new'>
RS-{props.new_price}
</div>
<div className='item-price-old'>
Rs-{props.old_price}
</div>
</div>
</div>

)
}

export default Item

Item.css

.item{ width:
280px; height:
300px;
}
.item img{
width:
280px; } .item p{
margin: 6px 0px; }
.item-price{ display:
flex; } .item-price-
new{ color: #374151;
font-size: 18px; font-weight:
600; } .item-price-old{ color:
#8c8c8c; font-size: 18px;
font-weight: 500; text-
decoration: line-through;
} .item:hover{ transfor
m: scale(1.05);
transition: 0.6s; }
@media(max-width:1280px)
{
.item
{ width:
220px; font-
size: 14px;
} .item img{
width: 220px;
}
.item-price-old
{ font-size:
14px;
}
}
@media(max-width:1024px)
{
.item
{ width:
170px; font-
size: 13px;
} .item img{
width: 170px;
}
.item-price-old
{ font-size:
13px;
}
}
@media(max-width:800px) {
.item
{ width:
120px; font-
size: 12px;
} .item img{
width: 180px;
}
.item-price-old
{ font-size:
13px;
}
}
@media(max-width:500px) { .item
{
width: 180px;
font-size: 10px;
}
.item img{
width: 160px;
}
.item-price-old
{
font-size: 10px;
}
}

ListProduct.js

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

'./ListProduct.css'
import remove from '../../assets/remove.png' const
ListProduct = () => { const
[allProducts,setAllProducts] = useState([]);

const featchInfo = async ()=>{

await fetch("http://localhost:4000/allproduct")
.then((res)=>res.json())
.then((data)=>{setAllProducts(data)});
}

useEffect(()=>{ featchInfo(
);
},[])

const remove_product= async(id)=>{

await fetch("http://localhost:4000/removeproduct",{
method:'POST', headers:{
Accept:'application/json',
'Content-Type':'application/json',
},
body:JSON.stringify({id:id})
})
await featchInfo();
}
return (
<div className='listproduct'>
<h1>All Product List</h1>
<div className='listproduct-format-main'>
<p>Products</p>
<p>Title</p>
<p>old price</p>
<p>new price</p>
<p>category</p>
<p>Remove</p>
</div>
<div className='listproduct-allProducts'>
<hr/>
{allProducts.map((product,index)=>{
return <>
<div key ={index}className='listproduct-format-main listproduct-format'>
<img src={product.image} alt='' className='listproduct-format-icon'/>
<p>{product.name}</p>
<p>{product.category}</p>
<p>${product.old_price}</p>
<p>${product.new_price}</p>
<img onClick={()=>{remove_product(product.id)}}className='listproduct-remove-icon'src={remove} alt=''/>
</div>
<hr/>
</>
})}
</div>
</div>
)
}

export default ListProduct;

ListProduct.css

.listproduct{ display:
flex; flex-direction:
column; align-items:
center; width: 100%;
height: 740px;
padding: 10px 50px;
margin: 30px; border-
radius: 6px; }
.listproduct-format-main{ display: grid;
grid-template-columns: 1fr 3fr 1fr 1fr 1fr 1fr;
gap: 20px; width: 100%; padding: 20px
0px; color: #454545; font-size: 15px;
font-weight: 600; } .listproduct-
format{ align-items: center; font-weight:
500; } .listproduct-format-icon{ height:
80px; } .listproduct-allProducts{ overflow-y:
auto; }
.listproduct-remove-icon{
height: 20px; display:
flex; cursor: pointer;
margin: auto;
}
@media(max-width:800px){
.listproduct{ box-
sizing: border-box;
width: 95%; height:
100%; padding: 10px
30px;
margin: 20px auto;
}
.listproduct-format-main{
padding: 15px 0px; color:
#454545; font-size: 15px;
}
.listproduct-format-
icon{ height: 60px;
}
}

NewCollections.js

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

'./NewCollections.css'
import Item from '../Item/Item'
// import data_product from '../Assests/data'
const NewCollections = () => {
const [newcollection,setNew_collection] = useState([]);

useEffect(()=>{

fetch("http://localhost:4000/newcollection") .then((response)=>response.json())
.then((data)=>setNew_collection(data))
},[])

return (
<div className='new-collections'>
<h1>New Collections</h1>
<hr/>
<div className='collections'>
{newcollection.map((item,i)=>{
return <Item key={i} id={item.id} name={item.name} image={item.image} new_price={item.new_price} old_price=
{item.old_price}/>
})}
</div>
</div>
)
}

export default NewCollections

NewCollections.css

.new-
collections{ display:
flex; flex-direction:
column; align-items:
center; gap: 10px;
margin-bottom: 120px;
}
.new-collections
h1{ color: #171717;
font-size: 50px; font-
weight: 600;
}
.new-collections
hr{ width: 200px;
height: 6px; border-
radius: 10px;
background: #252525;
}
.collections{ mar
gin-top: 50px;
display: flex; gap:
30px;
}
@media(max-width:1280px)
{
.new-collections
h1{ font-size: 40px;
}
.new-collections hr{
width: 160px; height:
4px;
}
.collections{
gap: 20px;
margin-top: 30px;
}
}
@media(max-width:1080px)
{
.new-
collections{ padding-top:
40%;
}
.new-collections
h1{ font-size: 40px;
}
.new-collections hr{
width: 160px; height:
4px;
}
.collections{
gap: 20px;
margin-top: 30px;
}
}
@media(max-width:800px)
{
.new-
collections{ padding-top:
40%; gap:6px;
}
.new-collections
h1{ font-size: 20px;
 }
.new-collections hr{
width: 100px;
}
.collections{
gap: 5px;
}
}
@media(max-width:500px)
{
.new-collections{
padding-top: 80%;
}
.collections{ display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
}

ProductDisplay.js

import React, { useContext } from 'react' import

'../ProductDisplay/ProductDisplay.css' import star from
'../Assests/star.png' import dullStar from
'../Assests/dullStar.png' import { ShowContext } from
'../../Context/ShopContext' const ProductDisplay =
(props) => {
const {product}= props;

const{addToCart} = useContext(ShowContext);
return (
<div className='productdisplay'>
<div className='productdisplay-left'>
<div className='productdisplay-img-list'>
<img src={product.image} alt=''/>
<img src={product.image} alt=''/>
<img src={product.image} alt=''/>
<img src={product.image} alt=''/>
</div>
<div className='productdisplay-img'>
<img className='productdisplay-main-img' src={product.image} alt=''/>
</div>
</div>
<div className='productdisplay-right'>
<h1>{product.name}</h1>
<div className='productdisplay-right-star'>
<img className='star 'src={star} alt=''/>
<img className='star ' src={star} alt=''/>
<img className='star ' src={star} alt=''/>
<img className='star ' src={star} alt=''/>
<img className='star ' src={dullStar} alt=''/>
<p>(122)</p>
</div>
<div className='productdisplay-right-prices'>
<div className='productdisplay-right-prices-old'>${product.old_price}</div>
<div className='productdisplay-right-prices-new'>${product.new_price}</div>
</div>
<div className='productdisplay-right-description'>
a women jacket and alll fucked up
</div>
<div className='productdisplay-righ-size'>
<h1>Select Size</h1>
<div className='productdisplay-righ-size'>
<div>Small</div>
<div>Medium</div>
 <div>Large</div>
<div>Extra large</div>
</div>
</div>
<button onClick={()=>{addToCart(product.id)}}>Add to cart</button>
<p className='productdisplay-right-categoty'><span>category:</span>women jacket</p>
</div>
</div>
)
}

export default ProductDisplay

ProductDisplay.css

.productdisplay{ di
splay: flex; margin:
0px 100px;
}
.productdisplay-left{
display: flex; gap:
10px;
}
.productdisplay-img-
list{ display: flex; flex-
direction: column; gap:
10px;
}
.productdisplay-img-list img{
height: 163px;
}
.productdisplay-main-img{
width: 580px; height:
600px;
} .star{ paddi
ng: 5px;
width: 20px;
}
.productdisplay-
right{ margin: 0px 70px;
display: flex; flex-
direction: column;
}
.productdisplay-right
h1{ color: #3d3d3d;
font-size: 40px; font-
weight: 700;
}
.productdisplay-right-stars{
display: flex; align-
items: center; margin-
top: 13px; gap: 5px;
color: #1c1c1c; font-
size: 16px; }
.productdisplay-right-
prices{ display: flex;
margin: 20px 0px; gap: 30px;
font-size: 24px; font-weight:
700; } .productdisplay-right-
prices-old{ color: #ff4141;
text-decoration: line-
through; } .productdisplay-right-
prices-new{ color:
#ff4141; } .productdisplay-right-
size{ display: flex; flex-
direction: column; margin:
30px 0px; gap: 20px;
} .productdisplay-right-size
h1{ margin-top: 55px;
color: #656565; font-size:
20px; font-weight: 600; }
.productdisplay-righ-size div{
display: flex; flex-direction:
column; padding: 18px
24px; background: #fbfbfb;
border: 1px solid #ebebeb;
border-radius: 3px; cursor:
pointer; gap:
20px; } .productdisplay-right
button{ padding: 20px
40px; width: 200px; font-
size: 16px; font-weight:
600; color: white;
background: #ff4141;
margin-bottom: 40px;
border:none; outline: none;
cursor: pointer;}
productdisplay-right-categoty{
margin-top: 10px;}
@media(max-width:1280px)
{ .productdisplay{
margin: 0px
60px; } .productdisplay-
left{ gap:
10px;} .productdisplay-
img-list{ gap: 10px;
}
.productdisplay-img-list
img{ height: 120px;
}
.productdisplay-main-img{
width: auto; height:
510px;
}
.productdisplay-
right{ margin: 0px 30px;
}
.productdisplay-right
h1{ font-size: 22px;
}
.productdisplay-right-stars img{
gap: 3px; font-size: 13px;
}
.productdisplay-right-prices{
margin: 10px 0px; font-size:
18px;
}
.productdisplay-right-
description{ font-size: 13px;
}
.productdisplay-right-size h1{
margin-top: 20px; font-size:
20px;
}
.productdisplay-righ-size div{
padding: 14px 20px;
}
.productdisplay-right button{
width: 150px; padding:
15px 0px; margin-bottom:
20px;
 }
.productdisplay-right-categoty{
margin-top: 5px; font-size:
14px;
}
}
@media(max-width:1024px)
{ .productdisplay{
margin: 0px 30px;
}
.productdisplay-left{
gap: 5px;
}
.productdisplay-img-list
img{ height: 80px;
}
.productdisplay-main-img{
height: 350px;
}
.productdisplay-right
h1{ font-size: 18px;
}
.productdisplay-right-stars img{
width: 15px;
}
.productdisplay-right-
description{ font-size: 13px;
}
.productdisplay-right-size
h1{ font-size:
12px; } .productdisplay-righ-size{
margin-top: 10px 0px; } .productdisplay-
righ-size div{ padding: 10px 16px;
font-size: 12px; } .productdisplay-
right button{ width: 120px;
padding: 10px 0px; margin-bottom:
10px; font-size:
14px; } .productdisplay-right-
categoty{ margin-top: 5px;
font-size: 14px;} }
@media(max-width:800px)
{ .productdisplay{ margi
n: 0px
10px; } .productdisplay-left{
gap: 0px; align-items:
center; } .productdisplay-
img-list img{ height: 70px;
}
.productdisplay-main-
img{ height:
300px; } .productdisplay-right
h1{ font-size:
14px; } .productdisplay-right-
stars img{ width:
13px; } .productdisplay-right-
description{ font-size: 10px;}
.productdisplay-right-size
h1{ font-size:
10px; } .productdisplay-righ-
size{ margin-top: 10px;
gap: 5px; } .productdisplay-righ-
size div{ padding: 4px 11px;
font-size:
12px; } .productdisplay-right
button{ width: 100px;
font-size: 12px;} .productdisplay-
right-categoty{ font-size: 10px;
}}
@media(max-width:500px)
{ .productdisplay{ fl
ex-direction: column;
}
.productdisplay-left{
gap: 10px; margin:
auto;
}
.productdisplay-img-list{
flex-direction: column; gap:
8px;
}
.productdisplay-img-list
img{ height: 75px;
}
.productdisplay-main-img{
height: 330px;
}
.productdisplay-right{
margin: 5px;
}
.productdisplay-right h1{
font-size: 20px; margin-top:
15px; font-weight: 500;
}
.productdisplay-right-stars
img{ width: 15px;
}
.productdisplay-righ-size{
margin-top: 20px 0px; gap:
10px;
}
.productdisplay-righ-size div{
padding: 10px 16px; font-size:
14px;
}
.productdisplay-right button{
width: 130px; font-size:
15px;
padding: 12px 0px;
}
.productdisplay-right-
categoty{ font-size: 16px;
}
}

Sidebar.js

import React from 'react' import

'./Sidebar.css' import {Link} from
'react-router-dom' import cart from
"../../assets/cart.png" const Sidebar =
() => { return (
<div className='sidebar'>
<Link to={'/addproduct'} style={{textDecoration:"none"}}>
<div className='sidebar-item'>
<img className= "nav-profile" src={cart} alt=''/>
<p>Add Product</p>
</div>
</Link>
<Link to={'/listproduct'} style={{textDecoration:"none"}}>
<div className='sidebar-item'>
<img className= "nav-profile" src={cart} alt=''/>
 <p>List Product</p>
</div>
</Link>

</div>
)
}

export default Sidebar;

Sidebar.css

.nav-profile{ border:
1px solid #ddd;
border-radius: 10px;
width: 75px; }
.sidebar{ display: flex;
flex-direction: column;
gap: 20px; padding-
top: 30px; width:
100%; max-width:
250px; height: 100vh;
background: white;
}
.sidebar-item{ display:
flex; align-items:
center; justify-content:
center; margin: 0px
20px; padding: 5px
10px; border-radius:
6px; background:
#f6f6f6; gap: 20px;
cursor: pointer; }
@media(max-width:800px){
.sidebar{ padding:
30px 0px; flex-
direction: row; width:
100%; max-width:
none; height: auto;
justify-content: center;
}
}

Navbar.css

.navbar{ display: flex; justify-

content: space-around; padding:
16px; box-shadow: 0 1px 3px -2px
black; align-items: center; }
.nav_logo{
display: flex;
align-items: center;
gap: 10px; }
.nav_logo
p{ color: black;
font-size: 28px;
font-weight: 600;}
.nav-manu{
display: flex; align-
items: center; list-
style: none; gap: 50px;
color: #626262; font-
size: 20px; font-
weight: 500;} .nav-manu
li{ display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px; cursor:
pointer;} .nav-manu hr{
border: none; width:
80%; height: 3px;
border-radius: 10px;
background:
#ff4141 } .nav-login-
cart{ display: flex;
align-items: center;
gap: 45px; /* width:
150px; */
} .nav-login-cart
button{ width: 97px;
height: 58px; outline:
none; border: 1px solid
#7a7a7a; border-radius:
75px; color: #515151;
background: white; font-
size: 20px; font-weight:
200; } .nav-login-cart
button:active{ background
: #f3f3f3; } .nav-cart-count{
width: 22px; height: 22px;
display: flex; justify-
content: center; align-
items: center; margin-top:
-35px; margin-left: -55px;
border-radius: 11px; font-
size: 14px; background:
red; color: white;} .nav-
login-cart img{ width:
80px;} /* .img { border:
1px solid #ddd; border-
radius: 50px; padding:
5px; width: 100px;
} */
.logo_img{ border: 1px
solid #ddd; border-radius:
20px; padding: 5px;
width: 100px;}
@media(max-width:1280px)
{ .navbar{ padding:
12px
50px; } .logo_img{
width: 40px;} .nav_logo
p{ font-size: 25px; }
.nav-manu{ gap:
30px; } .nav-login-cart{
gap: 30px;} .nav-login-
cart button{ width:
120px; height: 45px;
font-size: 16px } .nav-
cart-count{ margin-
left: -40px; font-size:
12px; } }
@media(max-width:1024px)
{ .navbar{ paddin
g: 12px 30px;
}
.nav-
manu{ gap:
25px; font-size:
14px; }
 .nav-login-cart{
gap: 30px;
}
.nav-login-cart button{
width: 80px; height:
35px; font-size:
14px
}
.nav-login-cart img{
width: 30px;
}
.nav-cart-
count{ width: 18px;
height: 18px;
}
}
.nav-drop_down{
display: none; }
@media(max-width:800px)
{ .navbar{ paddi
ng: 10px 0px;
}
.nav-
drop_down{ height:
35px; margin-top: 10px;
/* padding: 10px; */
rotate: -90deg; width:
30px; /* border: 1px solid
#ddd; border-radius:
30px; */ display: block;
transition: 0.5s; }
.nav-manu{ display:
none; height: 80px;
width: 100%; position:
absolute; justify-content:
center; background-
color: white;
top:
61px; } .nav-
menu-
visible{ display:
flex;}
.nav-drop_down.open
{ transform: rotate(90deg);}
}
@media(max-width:500px)
{ .navbar{ w
idth: 8px 0px;
gap:
0; } .nav_logo{ tra
nsform: scale(0.8);
}
.nav-manu{ height: 70px;
top: 50px; } .nav-login-
cart{ transform:
scale(0.8);}

}
 12.
Implementation
1. Home
2. Login & Signup
Form
3. Product Landing Page

4. Different Categories of Pets

5. Product Display
6. New Collections of Product

7. Product Add to Cart

8. Total Amount/Payment Interface

9. Appointment Form
7. Future Scope
• Expansion of Pet Categories: We plan to include additional pet categories to cater to a wider
audience.
 • Enhanced Collaboration with Products: We’ll explore more partnerships and collaborations
with other products to enhance our platform’s offerings.
• Query Section Improvements: We aim to improve the query section, making it more
userfriendly and efficient.
• Testing with Labs: Collaborating with research labs will allow us to rigorously test and validate
our features.

• Advanced Scanning Features: We’re working on implementing advanced scanning capabilities

to access relevant information quickly.
• Geolocation Integration: Adding Google Maps integration will help users locate services and
resources easily.

• Animal Welfare Initiatives: We’re committed to supporting stray cats, dogs, and other animals
by collaborating with NGOs and promoting animal welfare.

8. Conclusion
In this project, we have prioritized cross-browser accessibility and enhanced the user experience
through intuitive UI/UX design. We have effectively categorized each section to streamline user
access to information. Additionally, we've incorporated features to enable easy updates to
appointment slots, product details, frequently asked questions, and ratings based on user
feedback. To foster heightened awareness regarding the proper care of pets.

9. Bibliography
Websites
• www.google.com
• www.practo.com
• www.github.com
• www.sourcecodester.com
• www.w3school.com