ONLINE SHOPPING WEBSITE

A Project Submitted
in Partial Fulfillment of the Requirements
for the Degree of

Master’s in Computer Application

by

Radhika Bhutani
(2201000000960)

DEPARTMENT OF COMPUTER SCIENCE

KERAL VERMA SUBHARTI COLLEGE OF SCIENCE

SWAMI VIVEKANAND SUBHARTI UNIVERSITY,

MEERUT (U.P)

~1~
 UNDERTAKING

I affirm that the content enclosed in this project titled

"Online Shopping Website," presented to the Department
of Computer Application at Keral Verma Subharti
College of Science (SVSU), Meerut, for the conferral of
the Master's in Computer Application degree, is the result
of my independent effort. I confirm that I have neither
engaged in plagiarism nor presented this work for the
attainment of any other academic qualification. Should
any discrepancy be discovered in this declaration, I
acknowledge the possibility of my degree being revoked
without any reservations..

December,2023 Radhika Bhutani

2201000000960

~2~
 CERTIFICATE BY SUPERVISOR

Certified that the work contained in the project “Online

Shopping Website”, by Radhika Bhutani has been carried
out under my supervision Mr. SanjeevPanwar and that
this work has not been submitted elsewhere for a degree.

Supervisor Name: Mr. SanjeevPanwar

Dept. Name:-
Keral Verma Subharti College of Science

~3~
 Acknowledgement

I extend heartfelt appreciation to those instrumental in

facilitating the completion of this report. Gratitude is
extended to my supervisor, Mr. Sanjeev Panwar whose
unwavering support, valuable suggestions, and
encouragement were pivotal throughout the process of
both crafting and finalizing this report.

Furthermore, I wish to express sincere acknowledgment

for the pivotal roles played by Dr. Shashiraj Teotia and
Mr. Himanshu Sirohi in the successful execution of my
project. Their contributions have been invaluable,
contributing significantly to the overall accomplishment
of this endeavor.

Radhika Bhutani

(2201000000960)

~4~
 TABLES OF CONTENTS

1. Introduction 06
2. Abstract 07
3. Modules 08
4. 4.Scope 11
5. Existing System 13
6. Proposed System 16
7. System Architecture 17
a. Client/Presentation tier
b. Business logic layer
c. Data tier
8. Software Requirement 20
9. Hardware Requirement 21
10. Code used for making application 22
11. Test cases screen 56
a. Front page
b. Suggested Bar
c. Details
12. Conclusion 59
13. Future Scope 62
14. Reference 65

~5~
1.Introduction:
The "Online Shopping Platform" has been developed to address
and overcome the challenges inherent in traditional manual retail
systems. This software is designed to eliminate and, in some
instances, reduce the difficulties faced by the existing retail
systems. The application is tailored to meet the specific needs of
the company, facilitating smooth and efficient operations.

Efforts have been made to minimize errors during data entry,

and the system provides error messages for invalid inputs,
enhancing accuracy and reliability. The user interface is intuitive
and user-friendly, requiring no formal knowledge for users to
navigate the system effectively.

Whether managing a large or small-scale retail business,

challenges in handling product information, inventory, and
customer needs are inevitable. Therefore, we have designed an
exclusive Online Shopping Platform equipped with features
tailored to meet the managerial requirements of retail operations.

~6~
2.Abstract
The objective of the Online Shopping Platform is to modernize
the current manual retail system through the utilization of
computerized tools and comprehensive software, meeting the
diverse needs of businesses. This facilitates the storage of
valuable data for extended periods, ensuring easy access and
manipulation. The readily available software and hardware
components make the transition seamless and user-friendly.

The Online Shopping Platform, much like the Airlines

Reservation System, is designed to be error-free, secure,
reliable, and efficient. It streamlines management processes,
allowing users to focus on other activities instead of getting
bogged down by manual record-keeping. This automation
promotes better resource utilization within the organization,
eliminating redundant entries and distractions from irrelevant
information.

The central goal is to automate the current manual retail system

by employing computerized equipment and advanced software,
ensuring the secure storage of valuable data for easy access and
manipulation. The project outlines effective strategies for
achieving optimal performance and providing enhanced services
to clients within the realm of online shopping. The emphasis is
on creating a seamless and efficient platform that not only meets
but surpasses the expectations of users, ultimately enhancing the
overall shopping experience.

~7~
3. Modules
1. User Registration and Authentication Module:
- Allows users to create accounts.
- Manages user authentication and login processes.

2. Product Catalog Management Module:

- Enables the addition, update, and removal of products.
- Manages product details such as images, descriptions, prices,
and availability.

3. Shopping Cart Module:

- Facilitates the selection and addition of products to a virtual
shopping cart.
- Manages the quantity and removal of items from the cart.

4. Order Processing Module:

- Handles the placement and confirmation of orders.
- Initiates the order fulfillment process.

5. Payment Gateway Module:

- Integrates with payment gateways for secure online
transactions.
- Manages payment processing and confirmation.

6. User Account Management Module:

- Allows users to update their account information.
- Manages user profiles and preferences.

~8~
7. Order Tracking and History Module:
- Provides users with the ability to track the status of their
orders.
- Maintains order history for users to reference past purchases.

8. Search and Navigation Module:

- Implements search functionality for users to find products.
- Provides filters and categories for easy navigation.

9. Feedback and Review Module:

- Allows customers to leave reviews and feedback on products.
- Manages and displays product ratings and reviews.

10. Admin Dashboard and Management Module:

- Empowers administrators to monitor and manage the entire
e- commerce platform.
- Provides insights into sales, user activity, and inventory.

11. Security Module:

- Implements security measures to protect user data and
transactions.
- Ensures secure communication and data storage.

12. Promotions and Discounts Module:

- Enables the creation and management of promotional offers
and discounts.
- Applies discounts during the checkout process.

~9~
13. Shipping and Logistics Module:
- Integrates with shipping services to calculate shipping costs.
- Manages order fulfillment and tracking.

14.Analytics and Reporting Module:

- Provides analytics on user behavior, sales, and website
performance.
- Generates reports for business insights.

~ 10 ~
4. Scope
It seems like you've outlined key objectives for automating
business processes in an Online Shopping Website. To
convert these objectives into features for the website, here's
a breakdown:

1. Automated Form Submission:

 Develop online forms for user interactions (e.g., order
forms, feedback forms).
 Implement a system that generates and stores multiple
copies of submitted forms.

2. Efficient Printing Processes:

 Enable users to generate and print invoices, receipts, and
order confirmations directly from the website.

3. Staff Productivity Enhancement:

 Provide staff dashboards for tracking and recording their
activities.
 Integrate tools for task management and collaboration
among staff members.

4. Information Generation:
 Develop analytics tools to generate insights from
user behavior, sales data, and website traffic.
 Implement reporting features for informed decision-
making.

~ 11 ~
5. User Satisfaction:
 Personalize user accounts with preferences and purchase
history.
 Implement a recommendation system based on user
behavior.

6 . User-Friendly Interface:
 Design a visually appealing and intuitive interface with
clear navigation.
 Ensure compatibility with different devices and screen
sizes.

7 . Ease of Operation:
 Provide a simple and straightforward checkout process.
 Include tooltips and help sections for users with varying
technical expertise.

8. Good User Interface:

 Focus on creating a visually appealing design that
enhances the overall user experience.

9. Expandability:
 Design a modular architecture allowing the addition of
new features.
 Plan for scalability to accommodate increased website
traffic and data.

~ 12 ~
10. Timely Delivery:
 Set milestones and deadlines for development
phases.
 Implement project management tools to track
progress and ensure timely delivery.

~ 13 ~
5. Existing System
1. Secure Payment Gateway:
 Integrate a secure payment system for online
transactions.
 Accept various payment methods, including
credit/debit cards and digital wallets.

2. Confirmation and Notifications:

 Send instant booking confirmations to users.
 Set up notifications for any changes in flight
schedules, gate information, or other relevant updates.

3. Mobile App Integration:

 Develop a mobile app for users to book order and
manage their order to plans on the go.
 Ensure seamless synchronization between the website
and mobile app.

4. Customer Support:
 Implement a responsive customer support system with
live chat, email, and phone support.
 Assist users with inquiries, changes, or issues related
to their orders.

5. Feedback and Improvement:

 Collect feedback from users to continuously improve
the booking experience.
 Implement changes based on user suggestions to
enhance overall satisfaction.
~ 14 ~
6. User-Friendly Interface:
 Design an intuitive and user-friendly interface for easy
navigation.
 Provide tooltips and guidance for users with varying
levels of technical expertise.

7. Budget Transparency:
 Clearly display the total cost of the transport,
including taxes and fees.
 Provide users with transparent information about any
additional charges.

~ 15 ~
6. Proposed System
 The Proposed system ensures the complete freedom for
users, where user at his own system can logon to this
website and can book his stufs. Our proposed system
allows only registered users to order the products, view
timings and cancel their products.

 In this Proposal the entire work is done on online with id is

also provided for customers as a print document. Here
customers can send their queries and suggestions through a
feedback form.

~ 16 ~
7. System Architectures
To adapt the three-tier architecture for an online shopping
website, we can define the architecture for each tier in the
context of online shopping:

 Client/Presentation Tier:

 HTML/CSS/JavaScript Frontend
 Develop responsive and user-friendly web
pages using HTML, CSS, and JavaScript.
 Implement the user interface (UI) components
for browsing products, adding items to the cart,
and managing user accounts.
 User Interface (UI):
 Design intuitive and visually appealing interfaces
for users.
 Include interactive elements for a seamless
shopping experience, such as product sliders,
filters, and dynamic content updates.

 Client-Side Logic:
 Utilize JavaScript to handle client-side interactions
and validations.
 Ensure a smooth and responsive UI with AJAX for
dynamic content loading.

~ 17 ~
2. Business Logic Layer:

 Server-Side Scripting:
 Use server-side scripting languages such as PHP,
Python, or Node.js to handle business logic.
 Implement functions for processing orders,
managing inventory, and handling user
authentication.

 E-commerce Business Logic:

 Develop logic for features like product
recommendations, discounts, and promotions.
 Implement shopping cart functionalities, including
adding/removing items and calculating the total
price.

 Middleware/APIs:
 Create middleware or APIs to communicate
between the presentation layer and the data layer.
 Handle data validation, authentication, and
authorization in this layer.

3. Data Tier:

 Database Management System (DBMS):

 Set up a relational database (e.g., MySQL,
PostgreSQL) to store product information, user
data, and order details.

~ 18 ~
  Define tables and relationships to ensure
efficient data retrieval.

 Data Access Layer:

 Create a data access layer to interact with the
database.
 Use SQL queries or an Object-Relational
Mapping (ORM) framework to fetch and
update data.

~ 19 ~
8. Software Requirement
The Software Requirement Specification is product at the
culmination of the analysis task. The function and
performance allocated to software as part of software
engineering are refined by establishing a complete
information description, a details function and behavioral,
an indication of performance requirement and design
constraints appropriate validation criteria and other data
pertinent to requirements.

 System needs store information about new user of

register user authentication.
 System needs to help the internal staff to keep
information of delivery and find them as various
queries.
 System need to maintain quantity records.
 System need to keep the records of orders.
 System need to update and delete the orders after
3months
 System also needs a search their products
 It also needs a security system to prevent data

~ 20 ~
 9. Hardware Requirement

i. Processor : ii. Pentium, AMD, or

Highest version.
iii. Operating System : iv. Windows XP/
Windows 7/ Linux
v. RAM : vi. 256 MB, 2GB
recommended
vii. Hardware Devices :viii. Keyboard with mouse
ix. Hard Disk : x. 10GB or more.
xi. Display : xii. Standard output
Display

~ 21 ~
10. Code used for making application
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="shortcut icon" href="icons8-a-32.png"
type="image/x-icon">
<!-- cdn link for bootstrap 5 -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boot
strap.min.css" rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD
65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- font awesome -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.3.0/css/all.min.css">
<title>Second class BootStrap</title>
</head>
<body>
<div class="container">
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-md navbar-light bg-
info">
<div class="container-fluid">

~ 22 ~
 <a href="#" class="navbar-brand"><img src="icons8-
a-32.png" alt=""></a>
<button class="navbar-toggler" data-bs-
toggle="collapse" data-bs-target="#example">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="example"
style="text-align: right;">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link ">Order</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link ">Cart</a>
</li>
<li class="dropdown nav-item">
<a class="nav-link dropdown-toggle" href="#"
data-bs-toggle="dropdown" >Products</a>
<div class="dropdown-menu" >
<a class="dropdown-item"
href="#">Shoes</a>
<a class="dropdown-item" href="#">Shirt/T-Shirts</a>
<hr>
<a class="dropdown-item" href="#">Short</a>
</div>
</li>

~ 23 ~
</ul>
</div>
</nav>
<br>

<!-- Carousal -->

<div class="carousel " id="indicator" data-bs-
ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-
target="#carouselExampleIndicators" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide
1"></button>
<button type="button" data-bs-
target="#carouselExampleIndicators" data-bs-slide-to="1" aria-
label="Slide 2"></button>
<button type="button" data-bs-
target="#carouselExampleIndicators" data-bs-slide-to="2" aria-
label="Slide 3"></button>
</div>

<div class="carousel-inner" >

<div class="carousel-item active">
<img class="d-block w-100"
src="https://images.unsplash.com/photo-1542291026-
7eec264c27ff?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2hvZXN
8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"
alt="">
<div class="carousel-caption">
<h2>Nike Air Force </h2>
~ 24 ~
 <p>It's best for those with neutral feet who want some
added cushioning.</p>
</div>
</div>
<div class="carousel-item ">
<img class="d-block w-100"
src="https://images.unsplash.com/photo-1549298916-
b41d501d3772?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8c2hvZXN
8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"
alt="">
<div class="carousel-caption">
<h2>Nike Air 2.O</h2>
<p>It's best for those with neutral feet who want some
added cushioning.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="https://images.unsplash.com/photo-1595341888016-
a392ef81b7de?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHNob2
VzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=50
0&q=60" alt="">
<div class="carousel-caption">
<h2>Nike Air Force 2.O</h2>
<p> It's best for those with neutral feet who want
some added cushioning.</p>
</div>
</div>
</div>
~ 25 ~
 <a class="carousel-control-prev" href="#indicator" data-bs-
slide="prev">
<span class="carousel-control-prev-icon"></span>
<!-- <span class="visually-hidden">prev</span> -->
</a>
<a class="carousel-control-next" href="#indicator" data-
bs-slide="next">
<span class="carousel-control-next-icon"></span>
<!-- <span class="visually-hidden">Next</span> -->
</a>
</div>
<br>

Context.jsx
import { useState, useEffect, createContext,
useContext } from "react";
importaxios from "axios";

constapi_key =
"2eb41dac1282d63538c8800359dea713";
consturl =
`https://api.themoviedb.org/3/search/movie?api_key=
${api_key}`;
constbase_url =
`https://api.themoviedb.org/3/search/movie`;
const query = "&query=";
const page = "&page=";

constAppContext = createContext();
~ 26 ~
exportconstAppProvide = ({ children }) => {
// STATE VALUES
const [isLoading, setIsLoading] = useState(true);
const [searchTerm, setSearchTerm] = useState("a");
const [totalPages, setTotalPages] = useState(0);
const [pageNo, setPageNo] = useState(1);
const [movies, setMovies] = useState([]);

constfetchMovies = async (pageParameter) => {

setIsLoading(true);

try {
const response = await axios.get(`${base_url}`, {
params: {
api_key: api_key,
query: searchTerm,
page: pageParameter,
},
});
// console.log(response);
setTotalPages(response.data.total_pages);
setMovies(response.data.results);
setIsLoading(false);
} catch (e) {
console.log(e);
~ 27 ~
 }

setIsLoading(false);
};

useEffect(() => {
fetchMovies(pageNo);
}, [searchTerm, pageNo]);

return (
<AppContext.Provider
value={{
movies,
isLoading,
searchTerm,
setSearchTerm,
pageNo,
setPageNo,
totalPages,
}}
>
{children}
</AppContext.Provider>
);
};

~ 28 ~
exportconstuseGlobalContext = () => {
returnuseContext(AppContext);
};

Main.jsx
import React from "react";
importReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./scss/styles.scss";

import { BrowserRouter as Router } from "react-

router-dom";
import { AppProvide } from "./context.jsx";

ReactDOM.createRoot(document.getElementById("r
oot")).render(
<Router>
<AppProvide>
<React.StrictMode>
<App />
</React.StrictMode>
</AppProvide>
</Router>
);

Style.scss
@import "bootstrap/scss/bootstrap";
~ 29 ~
body {
// background-color: #282828;
}

Home.jsx
importMovieList from "../components/MovieList";
importSearchbar from "../components/Searchbar";

const Home = () => {

return (
<main className="container">
<Searchbar />
<MovieList />
</main>
);
};

export default Home;

SingleSite.jsx
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

constSingleSite = () => {
~ 30 ~
const [ShopeDetails, setShopeDetails]=useState({});
const [loading,setLoading]=useState(true);
const [error,SetError]=useState(false);
console.log(movieDetails);

constapi_key =
"8e68e91c465477a7fb8dd5b68fdf19fc";
consturl="https://api.theOnlineShopedb.org/3/movie/
";
const { id } = useParams();

constfetchwebsiteDetails = async()=>{
setLoading(true);
try{
const response = await
fetch(`${url}${id}?api_key=${api_key}`);
const data =await response.json();
setShoppingDetaile(data);
setLoading(false);
}

catch(e){
console.log(e);
setLoading(false);
SetError(true);
}
};
~ 31 ~
useEffect(()=>{
fetchShopeDetails();
},[]);

const {
adult,
backdrop_path,
belongs_to_collection,
budget,
genres,
homepage,
original_language,
original_title,
overview,
popularity,
poster_path,
production_companies,
production_countries,
release_date,

revenue,
runtime,
spoken_language,
status,
tagline,
~ 32 ~
title,
vote_average,
vote_count
}=movieDetails;
return(

<>
<article className=""
style={{backgroundImage:`url(https://image.tmdb.or
g/t/p/w500${backdrop_path})`,
backgroundRepeat:'no-repeat',
backgroundSize:"cover",
backgroundPosition:"center center",
backgroundBlendMode:"overlay"}}>
<main className="row container mx-auto"
style={{color:"#ffffff"}}>

<div className="col-12 col-md-4" >

<div className="my-4">
<imgclassName="card-img-top rounded-4 shadow p-
1 mb-1 bg-white"
src={`https://image.tmdb.org/t/p/w500${poster_path
}`} alt="" />

<imgsrc= {`${homepage}`} alt="" />

</div>
~ 33 ~
</div>
<div className="col-12 col-md-8 ">
<h3 className="my-4 card-title fs-1">{title} </h3>
<p className="fs-4">{release_date} <span>
{vote_average}</span><span>{runtime}</span></p
>
<p style={{color:"#01d277",
fontSize:"2rem"}}>{tagline}</p>
<p style={{fontSize:"1.3rem"}}>{overview}</p>
</div>
<div className="mt-5">
<h1>Movie Facts</h1>
<p style={{color:"#01d277",}} className="fs-
3">Original_Title<br /><span
style={{color:"#ffffff"}}>{original_title}</span></p
>

<p style={{color:"#01d277",}} className="fs-

3">Original Language <br /><span
style={{color:"#ffffff"}}>{original_language}</span
></p>
<p style={{color:"#01d277",}} className="fs-
3">Status <br /><span
style={{color:"#ffffff"}}>{status}</span></p>
<p style={{color:"#01d277",}} className="fs-
3">Release Date <br /><span

~ 34 ~
 style={{color:"#ffffff"}}>{release_date}</span></p
>
<p style={{color:"#01d277",}} className="fs-
3">Rating <br /><span
style={{color:"#ffffff"}}>{vote_average}</span></p
>
<p style={{color:"#01d277",}} className="fs-
3">Runtime <br /><span
style={{color:"#ffffff"}}>{runtime}
min</span></p>

<!-- CARDS img-1 -->

<div class="card-group">
<div class="card" style="width: 16rem;">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1542219550-
37153d387c27?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDh
8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500
&q=60" alt="">
<div class="card-body bg-secondary">
<h3 class="card-title">Nike White 2.0</h3>
<p class="card-text text-white">Clothes products
technology consists of pressurized air inside a tough yet flexible
bag and provides more flexibility and spring without
compromising structure.</p>
<strong>Price</strong>=$30
<a href="https://amazon.com" class="btn btn-danger"
target="_blank">BUY NOW</a>
~ 35 ~
 </div>
</div>
<div class="card" style="width: 16rem;">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1518656306295-
aa28b28b2504?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE
wfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&
q=60" alt="">
<div class="card-body bg-secondary">
<h3 class="card-title">Nike Grey</h3>
<p class="card-text text-white">Nike Air technology
consists of pressurized air inside a tough yet flexible bag and
provides more flexibility and spring without compromising
structure.</p>
<strong>Price</strong>=$25
<a href="https://flipkart.com" class="btn btn-danger"
target="_blank">BUY NOW</a>
</div>
</div>
<div class="card" style="width: 16rem;">
<img class="card-img-top"
src="https://images.unsplash.com/photo-1511556532299-
8f662fc26c06?ixlib=rb-
4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE
3fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&
q=60" alt="">
<div class="card-body bg-secondary">
<h3 class="card-title">Nike Multicolor</h3>
<p class="card-text text-white">Nike Air technology
consists of pressurized air inside a tough yet flexible bag and
~ 36 ~
provides more flexibility and spring without compromising
structure.</p>
<strong>Price</strong>=$35
<a href="https://meesho.com" class="btn btn-danger
text-lg-center" target="_blank">BUY NOW</a>
</div>
</div>
</div>
<br>

<!-- Collapse -->

<p>
<a class="btn btn-danger d-grid " data-bs-
toggle="collapse" href="#Example">ABOUT NIKE</a>
</p>
<div class="collapse" id="Example">
<div class="card card-body text-dark">
The world's largest athletic apparel company, Nike is
best known for its footwear, apparel, and equipment. Founded in
1964 as Blue Ribbon Sports, the company became Nike in 1971
after the Greek goddess of victory. One of the most valuable
brands among sport businesses, Nike employs over 76,000
people worldwide.
</div>
</div>
<p>
<a class="btn btn-danger d-grid " data-bs-
toggle="collapse" href="#Exampletwo">ABOUT SHOES</a>
</p>
~ 37 ~
 <div class="collapse" id="Exampletwo">
<div class="card card-body text-dark">
Nike Air technology consists of pressurized air inside a
tough yet flexible bag and provides more flexibility and spring
without compromising structure. The Air Sole units maintain
their given form with elasticity, lower impact and keep the shoe
snug and lightweight.
</div>
</div>

<!-- Footer -->

<footer class="bg-dark text-white pt-5 pb-4">
<div class="container text-center text-md-start">

<div class="row text-center text-md-start">

<div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-

3">
<h5 class="text-uppercase mb-4 font-weight-bold
text-warning">about company</h5>
<p>Nike, Inc. is an American multinational
corporation that is engaged in the design, development,
manufacturing, and worldwide marketing and sales of footwear,
apparel, equipment, accessories, and services.</p>
</div>
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-
3">
<h5 class="text-uppercase mb-4 font-weight-bold
text-warning">products</h5>
<p>

~ 38 ~
 <a href="#" class="text-white text-decoration-
none" >The Providers</a>
</p>
<p>
<a href="#" class="text-white text-decoration-
none" >Kids</a>
</p>
<p>
<a href="#" class="text-white text-decoration-
none" >Shoes</a>
</p>
<p>
<a href="#" class="text-white text-decoration-
none" >Cloths</a>
</p>
</div>
<div class="col-md-3 col-lg-2 mx-auto mt-3">
<h5 class="text-uppercase mb-4 font-weight-bold
text-warning">Useful Link</h5>
<p>
<a href="#" class="text-white text-decoration-
none" >Your Account</a>
</p>
<p>
<a href="#" class="text-white text-decoration-
none" >Become a Member</a>
</p>
<p>
<a href="#" class="text-white text-decoration-
none" >Shipping</a>
</p>
~ 39 ~
 <p>
<a href="#" class="text-white text-decoration-
none" >Student Discount</a>
</p>
</div>
<div class="col-md-3 col-lg-2 mx-auto mt-3">
<h5 class="text-uppercase mb-4 font-weight-bold
text-warning">Get help</h5>
<p>
<a href="#" class="text-white text-decoration-
none" >Order Status</a>
</p>
<p>
<a href="#" class="text-white text-decoration-
none" >Delivery</a>
</p>
<p>
<a href="#" class="text-white text-decoration-
none" >Returns</a>
</p>
<p>
<a href="#" class="text-white text-decoration-
none" >Payment Option</a>
</p>
</div>
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-
3">
<h5 class="text-uppercase mb-4 font-weight-bold
text-warning">Contact</h5>
<p>

~ 40 ~
 <i class="fas fa-home mr-3"></i>New York, NY
2333, US
</p>
<p>
<i class="fas fa-envelope mr-
3"></i>[email protected]
</p>
<p>
<i class="fas fa-phone mr-3"></i>+92 3162859445
</p>
<p>
<i class="fas fa-fax mr-3"></i>+01 335 633 77
</p>
</div>

</div> Home.jsx
importProductList from "../components/ProductList";
importSearchbar from "../components/Searchbar";

const Home = () => {

return (
<main className="container">
<Searchbar />
<MovieList />
</main>
);
};

export default Home;

~ 41 ~
SingleSite.jsx
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

constOrderDetails = () => {

const [OrderDetails, setOrderDetails]=useState({});

const [loading,setLoading]=useState(true);
const [error,SetError]=useState(false);
console.log(movieDetails);

constapi_key =
"8e68e91c465477a7fb8dd5b68fdf19fc";
consturl="https://api.themoviedb.org/3/movie/";
const { id } = useParams();

constfetchOrderDetails = async()=>{
setLoading(true);
try{
const response = await
fetch(`${url}${id}?api_key=${api_key}`);
const data =await response.json();
setMovieDetails(data);
setLoading(false);
}
~ 42 ~
catch(e){
console.log(e);
setLoading(false);
SetError(true);
}
};

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

const {
adult,
backdrop_path,
belongs_to_collection,
budget,
genres,
homepage,
original_language,
original_title,
overview,
popularity,
poster_path,
production_companies,
production_countries,
release_date,

~ 43 ~
revenue,
runtime,
spoken_language,
status,
tagline,
title,
vote_average,
vote_count
}=movieDetails;
return(

<>
<article className=""
style={{backgroundImage:`url(https://image.tmdb.or
g/t/p/w500${backdrop_path})`,
backgroundRepeat:'no-repeat',
backgroundSize:"cover",
backgroundPosition:"center center",
backgroundBlendMode:"overlay"}}>
<main className="row container mx-auto"
style={{color:"#ffffff"}}>

~ 44 ~
<div className="col-12 col-md-4" >
<div className="my-4">
<imgclassName="card-img-top rounded-4 shadow p-
1 mb-1 bg-white"
src={`https://image.tmdb.org/t/p/w500${poster_path
}`} alt="" />

<imgsrc= {`${homepage}`} alt="" />

</div>
</div>
<div className="col-12 col-md-8 ">
<h3 className="my-4 card-title fs-1">{title} </h3>
<p className="fs-4">{release_date} <span>
{vote_average}</span><span>{runtime}</span></p
>
<p style={{color:"#01d277",
fontSize:"2rem"}}>{tagline}</p>
<p style={{fontSize:"1.3rem"}}>{overview}</p>
</div>
<div className="mt-5">
<h1>Movie Facts</h1>
<p style={{color:"#01d277",}} className="fs-
3">Original_Title<br /><span
style={{color:"#ffffff"}}>{original_title}</span></p
>

~ 45 ~
<p style={{color:"#01d277",}} className="fs-
3">Original Language <br /><span
style={{color:"#ffffff"}}>{original_language}</span
></p>
<p style={{color:"#01d277",}} className="fs-
3">Status <br /><span
style={{color:"#ffffff"}}>{status}</span></p>
<p style={{color:"#01d277",}} className="fs-
3">Release Date <br /><span
style={{color:"#ffffff"}}>{release_date}</span></p
>
<p style={{color:"#01d277",}} className="fs-
3">Rating <br /><span
style={{color:"#ffffff"}}>{vote_average}</span></p
>
<p style={{color:"#01d277",}} className="fs-
3">Runtime <br /><span
style={{color:"#ffffff"}}>{runtime}
min</span></p>
<p style={{color:"#01d277",}} className="fs-
3">Budget <br /><span
style={{color:"#ffffff"}}>${budget}</span></p>
<p style={{color:"#01d277",}} className="fs-
3">Revenue <br /><span
style={{color:"#ffffff"}}>${revenue}</span></p>

~ 46 ~
</div>
</main>
</article>
</>
)
};

export default OrderDetails;

Error.jsx
const Error = () => {
return<div>Error</div>;
};

export default Error;

Contact.jsx

const Contact = () => {

return (
<>
<div className="container">
<h2>Contact Us</h2>

~ 47 ~
<form>
<div className="form-group">
<label htmlFor="nameInput">Name</label>
<input type="text" className="form-control"
id="nameInput" placeholder="Enter your name" />
</div>
<div className="form-group mt-2">
<label htmlFor="emailInput">Email address</label>
<input type="email" className="form-control"
id="emailInput" placeholder="Enter your email" />
</div>
<div className="form-group mt-2">
<label htmlFor="messageInput">Message</label>
<textareaclassName="form-control"
id="messageInput" rows="5" placeholder="Enter
your message"></textarea>
</div>
<button type="submit" className="btnbtn-primary
mt-2">Submit</button>
</form>
</div>
</>
);
};

~ 48 ~
export default Contact;

About.jsx
importmyImg from "../../images/tmdb.svg";
const About = () => {
return (
<>
<main>
<article className="container">
<div>
<imgsrc={myImg} alt="image contain" />
</div>
<div className="p-3 bg-info bg-opacity-10 border
border-info border-start-0 rounded-end mt-3 fw-
semiboldlh-base" style={{fontFamily: "sans-
serif"}}>

<p>the online shopping website (TMDb): Site b is a

community-driven database that allows users to
contribute and edit information about Products and
Stuffes. It provides details about films, TV shows,
and people involved in the industry. API (Application
Programming Interface) is often used by developers
to access data for their website through the details
.</p>

~ 49 ~
<p>These databases serve as valuable resources for
clothes lovers, allowing them to explore and
discover information about their favorite products ,
SkinCare. They also aid in research, analysis, and
decision-making for Shopes, producers, and
professionals Branded stuffes.</p>
</div>
</article>
</main>
</>);
};

export default About;

Component
Navbar.jsx
import { NavLink } from "react-router-dom";
import { Collapse, Offcanvas } from "bootstrap";
import { BsFillSunFill, BsMoonFill } from "react-
icons/bs";

constNavbar = (prop) => {

const { theme, themeToggle } = prop;
return (
<header>
<navclassName="navbarnavbar-expand-lgbg-body-
tertiary">
~ 50 ~
<div className="container">
<h1 className="navbar-brand">
<NavLink
className="text-body"
style={{ textDecoration: "none" }}
to={"/"}
>
ShoppingWebSite
</NavLink>
</h1>

<div className="offcanvas-body">
<ulclassName="navbar-nav justify-content-end flex-
grow-1 pe-3">
<li className="nav-item">
<button className="btnbtn-toggle"
onClick={themeToggle}>
{theme == "light" ? <BsMoonFill /> :
<BsFillSunFill />}
</button>
</li>
<li className="nav-item">
<NavLinkclassName="nav-link" to={"/about"}>
about
</NavLink>
</li>
<li className="nav-item">
<NavLinkclassName="nav-link" to={"/contact"}>
~ 51 ~
contact
</NavLink>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
);
};

export default Navbar;

Pagination.jsx
importReactPaginate from "react-paginate";
import { useGlobalContext } from "../context";

const Pagination = () => {

const { totalPages, setPageNo, pageNo } =
useGlobalContext();

constnextPage = () => {
if (pageNo<totalPages) {
setPageNo(pageNo + 1);
}
};
constprevPage = () => {
~ 52 ~
 if (pageNo> 1) {
setPageNo(pageNo - 1);
}
};

<hr class="mb-4">
<div class="row align-items-center">
<div class="col-md-7 col-lg-8">
<p>Copyright <span>&#169;</span>2023 All
rights reserved by:
<a href="#" class="text-decoration-none text-
warning">
<Strong>XYZV </Strong>
</a>
</p>
</div>
<div class="col-md-5 col-lg-4 ">
<div class="text-center text-md-end">
<ul class="list-unstyled list-inline">
<li class="list-inline-item">
<a href="#" class="btn-floating btn-sm text-
white" style="font-size: 23px;"><i class="fab fa-
facebook"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="btn-floating btn-sm text-
white" style="font-size: 23px;"><i class="fab fa-
twitter"></i></a>
</li>

~ 53 ~
 <li class="list-inline-item">
<a href="#" class="btn-floating btn-sm text-
white" style="font-size: 23px;"><i class="fab fa-
instagram"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="btn-floating btn-sm text-
white" style="font-size: 23px;"><i class="fab fa-
youtube"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="btn-floating btn-sm text-
white" style="font-size: 23px;">

<i class="fab fa-google-plus"></i></a>

</li>
</ul>
</div>
</div>
</div>
</div>
</footer>

</div>
<!-- cdn link for javascript -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstr
ap.bundle.min.js" integrity="sha384-

~ 54 ~
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEu
NSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>

~ 55 ~
12. TEST CASES SCREEN

11.1 FRONT PAGE

~ 56 ~
11.2 Suggested bar

~ 57 ~
11.3 DETAILS

~ 58 ~
12. CONCLUSION

In conclusion, the design and implementation of an online

shopping website offer numerous benefits, providing a
seamless and convenient platform for users to browse,
select, and purchase products. The key components and
considerations in developing such a platform include:

1. User-Friendly Interface:
o The design prioritizes a user-friendly interface
to ensure easy navigation, intuitive product
discovery, and a positive overall shopping
experience.

2. Three-Tier Architecture:
o The adoption of a three-tier architecture separates
presentation, business logic, and data layers,
facilitating scalability, maintainability, and efficient
data processing.

3. Authentication and Authorization:

o Robust user authentication and authorization
mechanisms are implemented to secure user
accounts and ensure data privacy.

~ 59 ~
4. Product Management:
o A comprehensive product management system
is designed, allowing users to explore a diverse
catalog with efficient search and categorization
features.

5. Shopping Cart and Checkout Process:

o The shopping cart functionality enables users
to easily add, manage, and review items before
proceeding to a streamlined checkout process,
ensuring a smooth transaction.

6. Order Processing:
o The system includes features for order
confirmation, order history tracking, and
invoice generation, contributing to a
transparent and reliable shopping experience.

7. Documentation:
o Thorough technical documentation is prepared,
offering insights into system architecture,
modules, and database structures. Additionally,
user documentation guides users on how to
utilize the platform effectively.

8. Regular System Reviews:

o Regular code reviews, user testing, and
performance assessments are conducted to
~ 60 ~
 maintain code quality, improve usability, and
optimize system performance over time.

9. Scalability and Expandability:

o The system is designed to be scalable,
accommodating growth in user traffic, and
expandable, allowing for the incorporation of
new features to meet evolving user needs.

10. Security Measures:

o Stringent security measures, including
encrypted user authentication and secure
payment gateways, are implemented to protect
user data and financial transactions.

An online shopping website, when designed with careful

consideration for user experience, system architecture,
security, and scalability, can provide a reliable and
enjoyable platform for users to engage in e-commerce
activities. Regular reviews and updates ensure the
system's continued efficiency and responsiveness to
evolving market demands and technological
advancements.

~ 61 ~
13.Future Scope

The future scope of an online shopping website that

fetches data through APIs holds several promising
opportunities for enhanced functionality, efficiency, and
user experience. In simple terms:

1. Expanded Product Range:

o Integration with various external APIs can
allow the online shopping website to fetch
product data from a wide range of suppliers
and partners, diversifying the product
offerings.

2. Real-Time Inventory Management:

o APIs can be employed to fetch real-time
inventory data, ensuring accurate stock levels
and reducing the chances of selling out-of-
stock items.

3. Dynamic Pricing and Discounts:

o Integration with pricing APIs enables the
website to dynamically adjust prices based on

~ 62 ~
 market trends, competitor pricing, and
promotional offers, enhancing competitiveness.

4. Personalized Recommendations:
o Utilizing APIs for customer behavior analysis
can result in personalized product
recommendations, improving user engagement
and increasing the likelihood of successful
sales.

5. Efficient Order Fulfillment:

o Integration with shipping and logistics APIs
allows for real-time tracking, ensuring efficient
order fulfillment and providing users with
accurate delivery estimates.

6. Enhanced Payment Options:

o Integration with diverse payment gateway APIs
allows the inclusion of various payment
options, catering to a broader audience and
improving the overall checkout experience.

7. Social Media Integration:

o APIs from social media platforms can be
leveraged for seamless integration, enabling
users to share their favorite products, reviews,
and purchases directly on social networks.
~ 63 ~
8. Voice and Chatbot Interfaces:
o Future advancements may include integrating
voice and chatbot APIs, allowing users to
interact with the online shopping platform
through natural language, offering a more
conversational and user-friendly experience.

9. Augmented Reality (AR) Shopping:

o Implementing AR APIs could enable users to
visualize products in their real-world
environment before making a purchase
decision, enhancing the online shopping
experience.

10. Blockchain for Security and Transparency:**

o Future developments might involve integrating
blockchain APIs for secure and transparent
transactions, providing an additional layer of
trust for users.

~ 64 ~
14. References
www.codingmagazine.in
http://javahasan.blogspot.in
http://mohankathaitnotes.blogspot.in
www.freejavaguide.com
www.tutorialspoint.com
http://best-programming-tricks.blogspot.in
http://stackoverflow.com
www.roseindia.net
http://javanoteshindi.blogspot.in
www.javaprogrammingforums.com
www.wikipedia.org
www.google.com

~ 65 ~