lOMoARcPSD|43377640

lOMoARcPSD|43377640

PROJECT REPORT
ON
ADD TO CART
PRODUCT ADDING ON CART WEBSITE
(Submitted in Partial Fulfillment for BCA, M.S.U, Saharanpur)

ST. R.C. COLLEGE OF HIGHER EDUCTION

SUBMITTED TO: SUBMITTED BY:

Mr. SONU MALIK SHASHANK GARG
BCA – 6th sem
 lOMoARcPSD|43377640

PERFORMA FOR APPROVAL OF THE BCA PROJECT (605)

PROPOSAL
1. Roll No. 210649106056

2. Name of the student: SHASHANK GARG

3. E-mail: [email protected]

4. Mob. No. 8791961400

5. Title of the Project (605) - ADD TO CART

6. Name of the Mentor- Mr.SONU MALIK

For Office Use Only:

Approved Not Approved Date: ------------

(Signature of the Mentor)

Suggestions (if any):-

 1
 2
 3
 4
 lOMoARcPSD|43377640

Certificate

This is to certify that this Project Report entitled “ADD TO CART” submitted
IT Department, ST R C College Of Higher Education done by SHASHANK
GARG is an authentic work carried out by him at under my guidance. The
matter embodied in this project work has not been submitted earlier for the
award of any degree or diploma to the best of my knowledge and belief.

Signature of the Guide

 lOMoARcPSD|43377640

ACKNOWLEDGEMENT

I am thankful to all the faculty members, providing their valuable time and
guidance in elaborating view of studying the project details and
getting the right vision for its implementation.

I am highly thankful to my Project guide Mr. SONU MALIK, who not only supervised me
while my project, but also gave me valuable suggestions which will be very beneficial for
me in future.
I would like to thank my colleagues, who assisted me and helped me through out.
 lOMoARcPSD|43377640

Abstract

Requirements definition and management is recognized for well and

successful event planner, discipline is also required by standards,
regulations, and quality improvement initiatives. Creating and managing
requirements is a challenge. Organization need to effectively define and
manage requirements to ensure they are meeting needs of the customer,
while proving compliance and staying on the schedule and within budge.
The impact of a poorly expressed requirement can bring a business out of
compliance or even cause injury or death. Requirements definition and
management is an activity that can deliver a high, fast return on investment.

The ADD TO CART undertaken as a project is based on ADDING ON

CART. The main aim of this project is to PROUCTI ADDING ON CART
SUCCESSFULLY.
 lOMoARcPSD|43377640

Table of Contents
1. Introduction of the Project
Project Objective
Project Benefit
Project Scope
Project Access

2. System Development Life Cycle

Preliminary Investigation
Request Clarification
Feasibility Study
Technical Feasibility
Economical Feasibility
Operational Feasibility
Request Approval
Determination of System Requirements

3. System Design
Interface Design
User Interface
Communication Interface
Detailed System Specification
Detailed System Design
Functional Flow of System
Data Flow of System

4. Testing & Debugging

5. Appendix
References
 lOMoARcPSD|43377640

Introduction of the Project

POJECT OBJECTIVE

The objective of the "Add to Cart" project is to design and implement a seamless, user-
friendly feature for an e-commerce platform that enhances the online shopping
experience. This project aims to create an intuitive interface allowing users to effortlessly
add items to their shopping cart with minimal clicks, ensuring a smooth transition from
product selection to purchase. The key objectives include optimizing the user interface
for ease of use, ensuring the system's compatibility across various devices, and
integrating real-time updates to reflect inventory changes and cart modifications.
Additionally, the project seeks to implement robust backend functionality to handle
concurrent user interactions, maintain data integrity, and provide secure storage of user
information. By focusing on these aspects, the "Add to Cart" feature will contribute to
increased user satisfaction, higher conversion rates, and overall improved efficiency of
the e-commerce platform.

PROJECT BENEFITS
 Enhanced User Experience: Streamlines the shopping process with an intuitive and
responsive interface, leading to increased customer satisfaction and retention.

 Increased Conversion Rates: Simplifies adding items to the cart, reducing friction and
encouraging users to complete their purchases, thus boosting sales.

 Real-Time Inventory Management: Provides accurate stock information and dynamic

updates, minimizing cart abandonment due to out-of-stock issues and improving inventory
efficiency.
 lOMoARcPSD|43377640

PROJECT SCOPE:
 User Interface Design:

 Develop a visually appealing and intuitive interface for the "Add to Cart" button and
cart view.
 Ensure the interface is responsive and provides a consistent experience across
desktop, tablet, and mobile devices.

 User Experience (UX) Optimization:

 Streamline the process of adding items to the cart, including options for quantity
adjustments and variant selections (size, color, etc.).
 Implement features such as hover effects, animations, and confirmations to enhance
the user experience.

 Backend Development:

 Design and develop a robust backend system to manage cart operations, including
adding, updating, and removing items.
 Ensure data integrity and consistency across user sessions, even in cases of high
concurrency.

 Real-Time Updates:

 Implement real-time updates for inventory management to reflect stock levels

accurately and notify users of any changes.
 Ensure the cart updates dynamically without requiring page reloads.

 Integration with Existing Systems:

 Integrate the "Add to Cart" functionality with the existing product catalog, user
accounts, and order processing systems.
 Ensure seamless communication between frontend and backend components.

 Security and Data Protection:

 Implement secure protocols to protect user data during cart operations.

 Ensure compliance with relevant data protection regulations and standards.
 lOMoARcPSD|43377640

 Testing and Quality Assurance:

 Conduct thorough testing, including unit tests, integration tests, and user acceptance
tests, to ensure functionality and performance.
 Identify and resolve any bugs or issues before deployment.

 Documentation and Training:

 Provide comprehensive documentation for the development and maintenance of the

"Add to Cart" feature.
 Offer training sessions for relevant stakeholders, including customer support and
technical teams.

 Deployment and Maintenance:

 Plan and execute a smooth deployment of the "Add to Cart" feature on the live e-
commerce platform.
 Establish a maintenance plan to address any post-deployment issues and ensure
continuous improvement.

PROJECT ACCESS

https://exquisite-cheesecake-27edc6.netlify.app/
 lOMoARcPSD|43377640

2. System Development Life Cycle

System development Life cycle consist of two major steps of System

analysis and design. It includes set of activities that analysts, designers and
users carry out to develop and implement an information system.

So, here we followed the different stages of system development life cycle
to develop the website efficiently.

The systems development life cycle consists of the following

activities:

1. Preliminary Investigation

2. Determination Requirements

3. Design of System

4. Development of System

5. System Testing

6. Implementation
 lOMoARcPSD|43377640

Technology Used
HTML-:
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render
the content of the page

 WHY HTML?

HTML is the acronym for Hyper Text Markup Language. It is a form of

programming language that is used to make web pages on the internet
viewable. So it can be said that it is because of HTML that web pages are
interesting to look at, but the importance of HTML is often taken for
granted.

CSS-:
What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all
at once
 External stylesheets are stored in CSS files

Why CSS?

CSS Provides Efficiency in Design and Updates

With CSS, we are able to create rules, and apply those rules to many elements within the
website. This approach offers many advantages when site-wide changes are required by a
client. Since the content is completely separated from the design, we can make those
changes in our Style Sheet and have it effect every applicable instance.
 lOMoARcPSD|43377640

CSS Use Can Lead To Faster Page Downloads

Since rules are only downloaded once by the browser, then are cached and used for each
page load, the use of CSS can lead to lighter page loads, and improved performance. This
contributes to lighter server load and lower requirements, which overall saves money for
our clients.

CSS is Easy to Work With

Because we are able to keep every visual aspect of the website completely separated from
the content, using CSS when designing our websites allows us to quickly create layouts,
and troubleshoot any problems. We know that regardless of the page, we control all
elements from one (or several) stylesheet.

These are just a few reasons why we choose to use CSS. Although we have not gone into
the details of using CSS (that is well beyond the scope of this article), we hope that you
have a better understanding of why it’s important. One last reason is, “all the cool kids
are doing it”. We’re kidding of course, but it is the way of the future…so why not get
there now.

TAILWIND CSS -:

 What is ? TAILWIND CSS

 DEFINITION: Tailwind CSS is a utility-first framework

offering pre-defined classes for rapid, customizable, and
consistent styling directly in HTML.

 Tailwind CSS is a utility-first CSS framework that simplifies

web design by providing a vast array of low-level utility
classes. These classes allow developers to style elements
directly in their HTML, promoting rapid and consistent UI
development. Tailwind CSS emphasizes customization,
enabling developers to create unique designs without writing
custom CSS. Its approach helps streamline the styling process,
making it easier to maintain and scale web applications
efficiently.
 lOMoARcPSD|43377640

HOW TO USE TAILWIND CSS-:

1. Install Tailwind CSS: Use npm or Yarn to install Tailwind CSS in

your project: npm install tailwindcss or yarn add tailwindcss.
2. Configure Tailwind: Create a configuration file with npx tailwindcss
init to customize the default settings.
3. Include in CSS: Add Tailwind's directives to your CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Use Utility Classes: Apply Tailwind's utility classes directly in your

HTML for styling elements, such as class="bg-blue-500 text-white p-
4".
5. Build CSS: Run the Tailwind CLI to generate the final CSS file: npx
tailwindcss build src/tailwind.css -o dist/output.css.

 Why TAILWIND CSS?

 Rapid Development: Tailwind's utility-first approach allows for fast styling

by applying pre-defined classes directly in HTML, speeding up the
development process.
 Customizability: Tailwind offers extensive configuration options, enabling
developers to customize the design system to match project requirements
without writing custom CSS.
 Consistency: Utility classes ensure consistent styling across the project,
reducing discrepancies and maintaining a uniform look and feel.
 lOMoARcPSD|43377640

 JAVASCRIPT:-

JavaScript is a versatile and widely-used programming language that is primarily known

for its role in web development. Here are key points about JavaScript:

1. Origins and Evolution:

o JavaScript was created by Brendan Eich in 1995 while he was working at

Netscape. Initially named Mocha, it was later renamed LiveScript and finally
JavaScript.
o It has evolved significantly since its inception, with major updates
standardized in the ECMAScript (ES) specifications.
2. Core Features:

o Interpreted Language: JavaScript code is executed by web browsers directly

without the need for prior compilation.
o Dynamic Typing: Variables in JavaScript are not bound to a specific data
type, allowing for more flexible coding.
o Prototypal Inheritance: Unlike classical inheritance in languages like Java,
JavaScript uses prototypes to implement inheritance.
o First-Class Functions: Functions in JavaScript are treated as first-class
citizens, meaning they can be assigned to variables, passed as arguments, and
returned from other functions.

3. Usage and Applications:

o Client-Side Scripting: JavaScript is primarily used to enhance the user

experience on web pages by enabling dynamic content, form validation, and
interactive features.
o Server-Side Development: With the advent of Node.js, JavaScript can also be
used for server-side programming, enabling the development of full-stack
applications using a single language.
o Mobile and Desktop Applications: Frameworks like React Native and
Electron allow JavaScript to be used in developing mobile apps and cross-
platform desktop applications.
 lOMoARcPSD|43377640

 Why use JAVASCRIPT :

JavaScript is a core programming language in web development, essential for creating

dynamic and interactive web applications. It operates primarily on the client side, allowing
real-time user interactions without page reloads. This enhances user experience through
dynamic content updates, form validation, interactive maps, animations, and multimedia
controls directly in the browser.
JavaScript’s universal support across all modern web browsers ensures consistent
performance, making it a reliable choice for developers. Its syntax is easy to learn for
beginners yet powerful enough for complex applications.
With Node.js, JavaScript extends to server-side development, enabling developers to use a
single language for both client-side and server-side programming. This full-stack
capability is supported by frameworks like Express.js for backend development and React,
Angular, and Vue.js for building advanced front-end interfaces.
The JavaScript ecosystem is rich with libraries and frameworks that expedite development
and address common challenges. jQuery simplifies DOM manipulation, while frameworks
like React and Angular offer robust solutions for single-page applications (SPAs). Package
managers like npm provide access to a vast repository of reusable code, fostering
collaboration and innovation.
Continuous updates in ECMAScript standards (e.g., ES6 and beyond) introduce features
that improve code readability and maintainability. The active JavaScript community offers
extensive resources, tutorials, and open-source projects, supporting developers in learning
and problem-solving.
In summary, JavaScript’s capability to create dynamic web experiences, its full-stack use,
and its extensive ecosystem make it indispensable in modern web development.
 lOMoARcPSD|43377640

Technical Feasibility

Issues to be studied are, whether the work for the project will be done
with current equipment, existing S/W technology and available
personnel? If the new technology is required, then what is the
likelihood that it can be developed?

This Website is technically feasible. The primary technical requirement

includes the availability of Windows 2000 or higher version of
operating systems installed in the network. Tailwind is also required
which was already installed. To develop programs WAMP server was
required which was also available. Reliability, access power and data
security was also available. The system can also be developed if the
new technology is acquired. Thus, through all the ends technical
feasibility was met.

The tools that we were requiring were all available to us they

are:-
 lOMoARcPSD|43377640

Hardware Requirements
HARDWARE REQUIREMENTS (Minimum)

 Processor- Pentium IV

 Minimum RAM -256 MB

 512 Cache Memory

 Hard Disk 10 GB

 Modem for Internet Access.

SOFTWARE REQUIREMENTS (Minimum)

 Operating system- windows 98,win xp ,win 7

 On a Mac OS X 10.3 machine: Internet Explorer 5.2.3 and Safari 1.25

 Mozilla 1.4 and above, Mozilla Firefox 0.9.3, and Opear 7.11
 Adobe flash player (any)
 It should allow "Javascript" or "Active scripting(IE
 lOMoARcPSD|43377640

Economic Feasibility

Issues to be studied are, whether the new system is cost effective or

not? The benefits in the form of reduced cost?

This website is economically feasible. As the hardware was installed

from quite beginning, the cost on project of hardware is low. Similarly,
the software loaded for this project was used even after this project was
developed for many other applications. The software cost was under
budget. Moreover, the technical requirements were already available so
there was no further expenditure for buying software packages.

Operational Feasibility

Issues to be studied are, is there sufficient support for management and

users? Is the current method acceptable to users? Will the proposed
system cause any harm?

This Website is operationally feasible. This application provides the

necessary information to the user such as how to enter the information
regarding different operations performed on the database. The
application was planned in such a way that no prior knowledge was
required to go through the various operations. The user just needed to
have the basic knowledge of computers.
 lOMoARcPSD|43377640

This software also possesses behavioral feasibility. It’s because the

users of the system are computer professionals and know the
advantages of computer system. Moreover, this application is going to
enhance their skills and reduce their workloads.

Determination of System Requirement

Determination of system requirement means studying the adjacent

system in order to collect the details regarding the way it captures data,
processes the data, produces the output. I used following techniques for
identifying system requirements:

 Reviewing organization documents

 Onsite observations
 Conducting interviews

2.2.1. Reviewing Organization Documents

I first learnt about the organization involved in, or affected by the project, I
got to know how the department works and the employees were directly
involved/associated with the application. Annual manuals and reports were of
great help to me.

2.2.2. Onsite Observations

It is a process of recognizing and observing people, objects and their
occurrence to obtain the information. The major objective of the
Onsite Observation is to get as close as possible to real system being
studied.
 lOMoARcPSD|43377640

Here, I observed the activities of the system directly. I saw the office
environment, workload on the system, and workload on the users. The
physical layout of the current system along with the location & movement of
staff was analyzed. In this way, the information about the present workflow,
objects and people was gathered.

This helped me to understand various procedures & processes, which were to be

developed in the new system.

2.2.3. Conducting Interviews

Written documents and onsite observation just tell that how the system
should operate. They do not include enough details to allow a decision
to be made about the merits of system proposal, nor do they present
user views about the current system.

I conducted interviews of the staff, which were directly involved with

the application. Also the regular users of the application were
interviewed. Based on their viewpoints, crystal clear system
requirements were jolted down. These interviews were of great help.
 lOMoARcPSD|43377640

Design of System

Interface Design

A well-designed interface improves the user perception of the content

or services. It needs not to be flashy but it should be ergonomically
sound. Two main types of design interface, which I considered, are:

 User Interface
 Communication Interface

User Interface

The various documents that are maintained by the RR section that have
been used to analyze the user interfaces that will interact with the
Online ADDING PRODUCT ON CART.

Communication Interface

The software may either be installed on a client server based setup with
a Local Area Network (using the Ethernet Interface, one to one
connection and TCP/IP) or on a standalone machine whereby client and
server components resides on the same machine.
 lOMoARcPSD|43377640

3.2.1. Detailed Design

The design that we have formed for the new system are given as under:-

3.2.1.2 Data Flow Diagram:

What is a data flow diagram?

A data flow diagram (DFD) maps out the flow of information for any
process or system. It uses defined symbols like rectangles, circles and
arrows, plus short text labels, to show data inputs, outputs, storage points
and the routes between each destination. Data flowcharts can range from
simple, even hand-drawn process overviews, to in-depth, multi-level DFDs
that dig progressively deeper into how the data is handled. They can be used
to analyze an existing system or model a new one. Like all the best
diagrams and charts, a DFD can often visually “say” things that would be
hard to explain in words, and they work for both technical and nontechnical
audiences, from developer to CEO. That’s why DFDs remain so popular
after all these years. While they work well for data flow software and
systems, they are less applicable nowadays to visualizing interactive, real-
time or database-oriented software or systems.
 lOMoARcPSD|43377640

0-Level DFD

User

Details

ADD
TO
Transaction CART
 lOMoARcPSD|43377640

1-Level DFD

Avail
services

COORDINATOR/CUSTOMER

COORDINATOR DETAIL FILE

Give services

ADD PRODUCTS TO CART

 lOMoARcPSD|43377640

ER Diagram

ADDRESS.
Services

ADDIN
NAME GG

EMW
request CORDINATOR

PROCESS avail
Service

ORDER D. OTHER
 lOMoARcPSD|43377640

START

COORDINATOR

Record ADD

ADC ADC
 lOMoARcPSD|43377640

Use Case Diagram

GET INFO

AVAIL SERVICES

ADDING TO
C

CHECK STATUS
 lOMoARcPSD|43377640

FORM & CODING

HTML FILE:-Index.html
<!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" />
<title>Shopping Cart</title>

<link rel="shortcut icon" href="/favicon.ico" type="image/x-

icon">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-
touch-icon.png">
 lOMoARcPSD|43377640

<link rel="icon" type="image/png" sizes="32x32"

href="/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16"

href="/favicon-16x16.png">

<link rel="manifest" href="/site.webmanifest">

<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="preconnect" href="https://fonts.gstatic.com"

crossorigin />

<link
href="https://fonts.googleapis.com/css2?
family=Poppins:wght@400;600;700&display=swap"
rel="stylesheet"

/>
</head>
<body>
<div id="root"></div>
</body>
</html>
 lOMoARcPSD|43377640

ANDROID-CHROME PNG>>>

ANDROID-CHROME- 192X192

LOCATION:
C:\Users\DELL\Downloads\ME\Add_to_Cart\Add_to_Cart\public\android-
chrome-192x192.png

ANDROID-CHROME 512X512
 lOMoARcPSD|43377640

LOCATION:
C:\Users\DELL\Downloads\ME\Add_to_Cart\Add_to_Cart\public\android-
chrome-512x512.png

APPLA-TOUCH ICON

LOCATION:
C:\Users\DELL\Downloads\ME\Add_to_Cart\Add_to_Cart\public\apple-
touch-icon.png

favicon-16X16
 lOMoARcPSD|43377640

LOCATION: C:\Users\DELL\Downloads\ME\Add_to_Cart\Add_to_Cart\
public\favicon-16x16.png

favicon 32X32

LOCATION:
C:\Users\DELL\Downloads\ME\Add_to_Cart\Add_to_Cart\public\favicon-
32x32.png

SITE.WEBmanifet.

{"name":"","short_name":"","icons":[{"src":"/android-chrome-
192x192.png","sizes":"192x192","type":"image/png"},{"src":"/
android-chrome-512x512.png","sizes":"512x512","type":"image/
png"}],"theme_color":"#ffffff","background_color":"#ffffff","displ
ay":"standalone"}
 lOMoARcPSD|43377640

 DESIGN OF PHASE CSS FILE :

CSS FILE: # Index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: "Poppins", sans-serif;
min-height: 100vh;
background-color: #fff;

}
 lOMoARcPSD|43377640

COMPONENTS:-

CartItem.jsx:
 lOMoARcPSD|43377640

import {toast} from "react-hot-toast";

import {FcDeleteDatabase} from "react-icons/fc";
import { useDispatch } from "react-redux";
import { remove } from "../redux/Slices/CartSlice";

const CartItem = ({item,itemIndex}) => {

const dispatch = useDispatch();

const removeFromCart = () => {

dispatch(remove(item.id));
toast.error("Item Removed");
}
return (
<div>

<div>

<div>
<img src={item.image}/>
</div>
<div>
<h1>{item.title}</h1>
<h1>{item.description}</h1>
<div>
<p>{item.price}</p>
<div onClick={removeFromCart}>
<FcDeleteDatabase/>
</div>

</div>
</div>
</div>
 lOMoARcPSD|43377640

</div>
)
};

export default CartItem;

Navbar.jsx:

import {FaShoppingCart} from "react-icons/fa"

import { useSelector } from "react-redux";
import { NavLink } from "react-router-dom";
// import cartSlice from "../redux/Slices/CartSlice";

const Navbar = () => {

const {cart}= useSelector((state) => state);
return (
<div className="">
<nav className="flex justify-between items-center h-20 max-w-
6xl mx-auto">
<NavLink to="/">
<div className="ml-5">
<img src="../logo.png" className="h-14"/>
</div>
</NavLink>
 lOMoARcPSD|43377640

<div className="flex items-center font-medium text-slate-100

mr-5 space-x-6">
<NavLink to="/"><p>Home</p></NavLink>
<NavLink to="/cart">
<div className="relative ">
<FaShoppingCart className="text-2xl" />
{
cart.length > 0 &&
<span className="absolute -top-1 -right-2 bg-green-600
text-xs w-5 h-5 flex justify-center items-center animate-bounce
rounded-full text-white ">
{cart.length}</span>
}

</div>
</NavLink>

</div>
</nav>

</div>
)
}

export default Navbar;

 lOMoARcPSD|43377640

Product.jsx

import toast from "react-hot-toast";

import { useDispatch, useSelector } from "react-redux";
import { add, remove } from "../redux/Slices/CartSlice";

const Product = ({ post }) => {

const { cart } = useSelector((state) => state);
const dispatch = useDispatch();
const addToCart = () => {
dispatch(add(post));
toast.success("Item added to cart");
}
const removeFromCart = () => {
dispatch(remove(post.id));
toast.success("Item remove from cart");
}

return (
 lOMoARcPSD|43377640

<div className="flex flex-col items-center justify-between

hover:scale-110 transition duration-300 ease-in gap-3 p-4 mt-10
rounded-xl hover:shadow-[rgba(0,_0,_0,_0.4)_0px_30px_90px]">
<div>
<p className="text-gray-700 font-semibold text-lg text-
left truncate w-40 mt-1">{post.title}</p>
</div>
<div>
<p className="w-40 text-gray-400 font-normal text-[10px]
text-left">{post.description.split(" ").slice(0, 10).join(" ") +
"..."}</p>
</div>

<div className="h-[180px]">
<img src={post.image} className="h-full w-full" />
</div>

<div className="flex justify-between gap-12 items-center

w-full mt-5 ">
<div>
<p className="text-green-600 font-semibold">$
{post.price}</p>
</div>

{
cart.some((p) => p.id == post.id) ?
(<button className="text-gray-700 border-2 border-
gray-700 rounded-full font-semibold text-[12px] p-1 px-3 uppercase
hover:bg-gray-700
hover:text-white transition duration-300 ease-in"
onClick={removeFromCart}>
Remove Item
</button>) :
(<button className="text-gray-700 border-2 border-
gray-700 rounded-full font-semibold text-[12px] p-1 px-3 uppercase
 lOMoARcPSD|43377640

hover:bg-gray-700
hover:text-white transition duration-300 ease-in"
onClick={addToCart}>
Add to Cart
</button>)
}
</div>

</div>
);
};

export default Product;

# Spinner.css:
.loader {
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
padding: 1px;

background: conic-gradient(#0000, #1E4D92) content-box;

mask: repeating-conic-gradient(

#0000 0deg,
#000 1deg calc(360deg/10 - 10deg - 1deg),
#0000 calc(360deg/10 - 10deg) calc(360deg/10)

), radial-gradient(
farthest-side,
#0000 calc(98% - 10px),
 lOMoARcPSD|43377640

#000 calc(100% - 10px)

);

mask-composite: intersect;
-webkit-mask-composite: destination-in;
animation: spin 1000ms infinite steps(10);

}
@keyframes spin { to { transform: rotate(1turn) } }

Spinner.jsx:
import React from "react";
import "./Spinner.css"

const Spinner = () => {

return (
<div>
<div className="loader">

</div>

</div>
)
}

export default Spinner

 lOMoARcPSD|43377640

Redux:

.Slices
JS CartSlice.js

import { createSlice } from "@reduxjs/toolkit";

export const CartSlice=createSlice({

name:"cart",
initialState: [],

reducers:{
 lOMoARcPSD|43377640

add:(state,action) => {
state.push(action.payload);
},
remove:(state,action) => {
return state.filter((item) => item.id!
=action.payload);
},

}
);

export const {add,remove} = CartSlice.actions;

export default CartSlice.reducer;

JS Store.js
import { configureStore } from "@reduxjs/toolkit";

import { CartSlice } from "./Slices/CartSlice";

// import CartReducer from "./Slices/CartSlice"

export const store= configureStore({

 lOMoARcPSD|43377640

reducer:{

cart: CartSlice.reducer,

}
}

)
;

APP.jsx
import Navbar from "./components/Navbar"
import { Routes,Route } from "react-router-dom";
import Home from "./pages/Home"
import Cart from "./pages/Cart"

const App = () => {

return (
<div>

<div className="bg-slate-900 ">

<Navbar/>

</div>
<Routes>
 lOMoARcPSD|43377640

<Route path="/" element={<Home/>} />

<Route path="/cart" element={<Cart/>} />
</Routes>

</div>
)

};

export default App;

JAVASCRIPT FILE:
JS inex.js
mport React from "react";

import ReactDOM from "react-dom/client";

import App from "./App";

import "./index.css";

import { Provider } from "react-redux";

import { BrowserRouter } from "react-router-dom";

import { store } from "./redux/Store";

import { Toaster } from "react-hot-toast";

 lOMoARcPSD|43377640

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
<BrowserRouter>

<Provider store={store}>
<App/>
<Toaster/>
</Provider>

</BrowserRouter>

);

JS data.js
export const products = [
{
id: 1,
 lOMoARcPSD|43377640

title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15

Laptops",
price: 109.95,
description:
"Your perfect pack for everyday use and walks in the forest.
Stash your laptop (up to 15 inches) in the padded sleeve, your
everyday",

category: "men's clothing",

image: "https://fakestoreapi.com/img/81fPKd-
2AYL._AC_SL1500_.jpg",

rating: {
rate: 3.9,
count: 120,

},
},
{
id: 2,
title: "Mens Casual Premium Slim Fit T-Shirts ",
price: 22.3,
description:
"Slim-fitting style, contrast raglan long sleeve, three-
button henley placket, light weight & soft fabric for breathable
and comfortable wearing. And Solid stitched shirts with round neck
made for durability and a great fit for casual fashion wear and
diehard baseball fans.

The Henley style round neckline includes a three-button placket.",

category: "men's clothing",
image:
"https://fakestoreapi.com/img/71-
3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
 lOMoARcPSD|43377640

rating: {
rate: 4.1,
count: 259,
},
},
{
id: 3,
title: "Mens Cotton Jacket",
price: 55.99,
description:
"great outerwear jackets for Spring/Autumn/Winter, suitable for
many occasions, such as working, hiking, camping, mountain/rock
climbing, cycling, traveling or other outdoors. Good gift choice

for you or your family member. A warm hearted love to Father,

husband or son in this thanksgiving or Christmas Day.",
category: "men's clothing",
image: "https://fakestoreapi.com/img/71li-
ujtlUL._AC_UX679_.jpg",
rating: {
rate: 4.7,
count: 500,
},
},
{
id: 4,
title: "Mens Casual Slim Fit",
price: 15.99,
description:

"The color could be slightly different between on the screen

and in practice. / Please note that body builds vary by person,
therefore, detailed size information should be reviewed below on
the product description.",
 lOMoARcPSD|43377640

category: "men's clothing",

image:
"https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg",
rating: {
rate: 2.1,
count: 430,
},
},
{
id: 5,
title:
"John Hardy Women's Legends Naga Gold & Silver Dragon
Station Chain Bracelet",
price: 695,
description:

"From our Legends Collection, the Naga was inspired by the

mythical water dragon that protects the ocean's pearl. Wear facing
inward to be bestowed with love and abundance, or outward for
protection.",
category: "jewelery",
image:
"https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg"
,
rating: {
rate: 4.6,
count: 400,
},
},
{
 lOMoARcPSD|43377640

id: 6,
title: "Solid Gold Petite Micropave ",
price: 168,
description:
"Satisfaction Guaranteed. Return or exchange any order
within 30 days.Designed and sold by Hafeez Center in the United
States. Satisfaction Guaranteed. Return or exchange any order
within 30 days.",
category: "jewelery",
image:
"https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg"
,
rating: {
rate: 3.9,
count: 70,
},
},
{
id: 7,
title: "White Gold Plated Princess",
price: 9.99,
description:
"Classic Created Wedding Engagement Solitaire Diamond
Promise Ring for Her. Gifts to spoil your love more for
Engagement, Wedding, Anniversary, Valentine's Day...",
category: "jewelery",
image:
"https://fakestoreapi.com/img/71YAIFU48IL._AC_UL640_QL65_ML3_.jpg"
,
rating: {
rate: 3,
count: 400,
},
},
{
 lOMoARcPSD|43377640

id: 8,
title: "Pierced Owl Rose Gold Plated Stainless Steel Double",
price: 10.99,
description:
"Rose Gold Plated Double Flared Tunnel Plug Earrings. Made
of 316L Stainless Steel",
category: "jewelery",
image:
"https://fakestoreapi.com/img/51UDEzMJVpL._AC_UL640_QL65_ML3_.jpg"
,
rating: {
rate: 1.9,
count: 100,
},
},
{
id: 9,
title: "WD 2TB Elements Portable External Hard Drive - USB 3.0
",
price: 64,
description:

"USB 3.0 and USB 2.0 Compatibility Fast data transfers

Improve PC Performance High Capacity; Compatibility Formatted NTFS
for Windows 10, Windows 8.1, Windows 7; Reformatting may be
required for other operating systems; Compatibility may vary
depending on user’s hardware configuration and operating system",
category: "electronics",
image:
"https://fakestoreapi.com/img/61IBBVJvSDL._AC_SY879_.jpg",
rating: {
rate: 3.3,
count: 203,
 lOMoARcPSD|43377640

},
},
{
id: 10,
title: "SanDisk SSD PLUS 1TB Internal SSD - SATA III 6 Gb/s",
price: 109,
description:
"Easy upgrade for faster boot up, shutdown, application load
and response (As compared to 5400 RPM SATA 2.5” hard drive; Based
on published specifications and internal benchmarking tests using
PCMark vantage scores) Boosts burst write performance, making it
ideal for typical PC workloads The perfect balance of performance
and reliability Read/write speeds of up to 535MB/s/450MB/s (Based
on internal testing; Performance may vary depending upon drive
capacity, host device, OS and application.)",
category: "electronics",
image:
"https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_.jpg",
rating: {
rate: 2.9,
count: 470,
},
},
{

id: 11,
title:
"Silicon Power 256GB SSD 3D NAND A55 SLC Cache Performance
Boost SATA III 2.5",
price: 109,
description:
"3D NAND flash are applied to deliver high transfer speeds
Remarkable transfer speeds that enable faster bootup and improved
overall system performance. The advanced SLC Cache Technology
 lOMoARcPSD|43377640

allows performance boost and longer lifespan 7mm slim design

suitable for Ultrabooks and Ultra-slim notebooks. Supports TRIM
command, Garbage Collection technology, RAID, and ECC (Error
Checking & Correction) to provide the optimized performance and
enhanced reliability.",
category: "electronics",
image:
"https://fakestoreapi.com/img/71kWymZ+c+L._AC_SX679_.jpg",
rating: {
rate: 4.8,
count: 319,
},
},
{
id: 12,
title:
"WD 4TB Gaming Drive Works with Playstation 4 Portable
External Hard Drive",
price: 114,
description:
"Expand your PS4 gaming experience, Play anywhere Fast and
easy, setup Sleek design with high capacity, 3-year manufacturer's
limited warranty",
category: "electronics",
image:

"https://fakestoreapi.com/img/61mtL65D4cL._AC_SX679_.jpg",
rating: {
rate: 4.8,
count: 400,
},
},
{
 lOMoARcPSD|43377640

id: 13,
title: "Acer SB220Q bi 21.5 inches Full HD (1920 x 1080) IPS
Ultra-Thin",
price: 599,
description:
"21. 5 inches Full HD (1920 x 1080) widescreen IPS display
And Radeon free Sync technology. No compatibility for VESA Mount
Refresh Rate: 75Hz - Using HDMI port Zero-frame design | ultra-
thin | 4ms response time | IPS panel Aspect ratio - 16: 9. Color
Supported - 16. 7 million colors. Brightness - 250 nit Tilt angle
-5 degree to 15 degree. Horizontal viewing angle-178 degree.
Vertical viewing angle-178 degree 75 hertz",
category: "electronics",
image:
"https://fakestoreapi.com/img/81QpkIctqPL._AC_SX679_.jpg",
rating: {
rate: 2.9,
count: 250,
},
},
{
id: 14,
title:
"Samsung 49-Inch CHG90 144Hz Curved Gaming Monitor
(LC49HG90DMNXZA) – Super Ultrawide Screen QLED ",
price: 999.99,
description:

"49 INCH SUPER ULTRAWIDE 32:9 CURVED GAMING MONITOR with

dual 27 inch screen side by side QUANTUM DOT (QLED) TECHNOLOGY,
HDR support and factory calibration provides stunningly realistic
and accurate color and contrast 144HZ HIGH REFRESH RATE and 1ms
ultra fast response time work to eliminate motion blur, ghosting,
and reduce input lag",
 lOMoARcPSD|43377640

category: "electronics",
image:
"https://fakestoreapi.com/img/81Zt42ioCgL._AC_SX679_.jpg",
rating: {
rate: 2.2,
count: 140,
},
},
{
id: 15,
title: "BIYLACLESEN Women's 3-in-1 Snowboard Jacket Winter
Coats",
price: 56.99,
description:
"Note:The Jackets is US standard size, Please choose size as
your usual wear Material: 100% Polyester; Detachable Liner Fabric:
Warm Fleece. Detachable Functional Liner: Skin Friendly,
Lightweigt and Warm.Stand Collar Liner jacket, keep you warm in
cold weather. Zippered Pockets: 2 Zippered Hand Pockets, 2
Zippered Pockets on Chest (enough to keep cards or keys)and 1
Hidden Pocket Inside.Zippered Hand Pockets and Hidden Pocket keep
your things secure. Humanized Design: Adjustable and Detachable
Hood and Adjustable cuff to prevent the wind and water,for a
comfortable fit. 3 in 1 Detachable Design provide more
convenience, you can separate the coat and inner as needed, or
wear it together. It is suitable for different season and help you
adapt to different climates",
category: "women's clothing",
image: "https://fakestoreapi.com/img/51Y5NI-
I5jL._AC_UX679_.jpg",
rating: {
rate: 2.6,
count: 235,
},
},
 lOMoARcPSD|43377640

{
id: 16,
title:
"Lock and Love Women's Removable Hooded Faux Leather Moto
Biker Jacket",
price: 29.95,
description:
"100% POLYURETHANE(shell) 100% POLYESTER(lining) 75%
POLYESTER 25% COTTON (SWEATER), Faux leather material for style
and comfort / 2 pockets of front, 2-For-One Hooded denim style
faux leather jacket, Button detail on waist / Detail stitching at
sides, HAND WASH ONLY / DO NOT BLEACH / LINE DRY / DO NOT IRON",
category: "women's clothing",
image:
"https://fakestoreapi.com/img/81XH0e8fefL._AC_UY879_.jpg",
rating: {
rate: 2.9,
count: 340,
},
},
{
id: 17,
title: "Rain Jacket Women Windbreaker Striped Climbing
Raincoats",
price: 39.99,
description:

"Lightweight perfet for trip or casual wear---Long sleeve

with hooded, adjustable drawstring waist design. Button and zipper
front closure raincoat, fully stripes Lined and The Raincoat has 2
side pockets are a good size to hold all kinds of things, it
covers the hips, and the hood is generous but doesn't overdo
it.Attached Cotton Lined Hood with Adjustable Drawstrings give it
a real styled look.",
 lOMoARcPSD|43377640

category: "women's clothing",

image: "https://fakestoreapi.com/img/71HblAHs5xL._AC_UY879_-
2.jpg",
rating: {
rate: 3.8,
count: 679,
},
},
{
id: 18,
title: "MBJ Women's Solid Short Sleeve Boat Neck V ",
price: 9.85,
description:
"95% RAYON 5% SPANDEX, Made in USA or Imported, Do Not
Bleach, Lightweight fabric with great stretch for comfort, Ribbed
on sleeves and neckline / Double stitching on bottom hem",
category: "women's clothing",
image:
"https://fakestoreapi.com/img/71z3kpMAYsL._AC_UY879_.jpg",
rating: {
rate: 4.7,
count: 130,
},
},
{
id: 19,
title: "Opna Women's Short Sleeve Moisture",
price: 7.95,
description:
"100% Polyester, Machine wash, 100% cationic polyester
interlock, Machine Wash & Pre Shrunk for a Great Fit, Lightweight,
roomy and highly breathable with moisture wicking fabric which
helps to keep moisture away, Soft Lightweight Fabric with
comfortable V-neck collar and a slimmer fit, delivers a sleek,
more feminine silhouette and Added Comfort",
 lOMoARcPSD|43377640

category: "women's clothing",

image:
"https://fakestoreapi.com/img/51eg55uWmdL._AC_UX679_.jpg",
rating: {
rate: 4.5,
count: 146,
},

},

{
id: 20,
title: "DANVOUY Womens T Shirt Casual Cotton Short",
price: 12.99,
description:
"95%Cotton,5%Spandex, Features: Casual, Short Sleeve, Letter
Print,V-Neck,Fashion Tees, The fabric is soft and has some
stretch., Occasion: Casual/Office/Beach/School/Home/Street.
Season: Spring,Summer,Autumn,Winter.",
category: "women's clothing",

image:

"https://fakestoreapi.com/img/61pHAEJ4NML._AC_UX679_.jpg",
rating: {
rate: 3.6,
count: 145,
},
},
];
 lOMoARcPSD|43377640

{} package-lock.json
{
"name": "shopping-cart",
"version": "0.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "shopping-cart",
"version": "0.1.0",
"dependencies": {
"@reduxjs/toolkit": "^1.9.5",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",

"react-hot-toast": "^2.4.0",
"react-icons": "^4.11.0",
"react-redux": "^8.1.2",
"react-router-dom": "^6.9.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.1.3",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"autoprefixer": "^10.4.14",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.7"
}
},
"node_modules/@aashutoshrathi/word-wrap": {
 lOMoARcPSD|43377640

"version": "1.2.6",
"resolved":
"https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-
1.2.6.tgz",
"integrity":
"sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4
Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/@adobe/css-tools": {
"version": "4.3.1",
"resolved":
"https://registry.npmjs.org/@adobe/css-tools/-/css-tools-
4.3.1.tgz",
"integrity":
"sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73
zSJQ4fMVLA+0uBhBHAle7Wg+2kSg=="
},
"node_modules/@alloc/quick-lru": {
"version": "5.2.0",
"resolved":
"https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-
5.2.0.tgz",
"integrity":
"sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUy
uiecfdGQ85jglMW6juS3+z5TsKLw==",
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@ampproject/remapping": {
"version": "2.2.1",
 lOMoARcPSD|43377640

"resolved":
"https://registry.npmjs.org/@ampproject/remapping/-/remapping-
2.2.1.tgz",
"integrity":
"sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE
3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.0",
"@jridgewell/trace-mapping": "^0.3.9"
},
"engines": {
"node": ">=6.0.0"
}
},

"node_modules/@babel/code-frame": {
"version": "7.22.13",
"resolved": "https://registry.npmjs.org/@babel/code-
frame/-/code-frame-7.22.13.tgz",
"integrity": "sha512-
XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuT
JIUhPKKJE3cIsYTiAT3w==",
"dependencies": {
"@babel/highlight": "^7.22.13",
"chalk": "^2.4.2"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/code-frame/node_modules/ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-
styles-3.2.1.tgz",
"integrity":
"sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR
1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
 lOMoARcPSD|43377640

"dependencies": {
"color-convert": "^1.9.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/code-frame/node_modules/chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-
2.4.2.tgz",
"integrity":
"sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHSh
jkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dependencies": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/code-frame/node_modules/color-convert": {
"version": "1.9.3",
"resolved":
"https://registry.npmjs.org/color-convert/-/color-convert-
1.9.3.tgz",
"integrity": "sha512-
QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/
SHHJYAT88/az/IuDGALsNVbGg==",
"dependencies": {
"color-name": "1.1.3"
}
},
"node_modules/@babel/code-frame/node_modules/color-name": {
"version": "1.1.3",
 lOMoARcPSD|43377640

"resolved": "https://registry.npmjs.org/color-name/-/color-name-
1.1.3.tgz",
"integrity": "sha512-
72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8T
FUDPJK5SUU3QhE9NEXDw=="
},
"node_modules/@babel/code-frame/node_modules/escape-string-
regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-
regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity":
"sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRef
kRVhuOkIGVne7BQ35DSfo1qvJqFg==",
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/@babel/code-frame/node_modules/has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-
3.0.0.tgz",
"integrity": "sha512-
sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/
dpjlb+HugGYzW7uQXH98HPEYw==",
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/code-frame/node_modules/supports-color":
{
"version": "5.5.0",
"resolved":
"https://registry.npmjs.org/supports-color/-/supports-color-
5.5.0.tgz",
 lOMoARcPSD|43377640

"integrity": "sha512-
QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma
0ey4f5lgLrkB0aX0QMow==",
"dependencies": {
"has-flag": "^3.0.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/@babel/compat-data": {
"version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/compat-
data/-/compat-data-7.22.9.tgz",
"integrity":
"sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+k
oZwOfd+SgtFKOKRhRakdg++DcJpQ==",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/core": {
"version": "7.22.19",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-
7.22.19.tgz",
"integrity": "sha512-
Q8Yj5X4LHVYTbLCKVz0//2D2aDmHF4xzCdEttYvKOnWvErGsa6geHXD6w46x64n5tP
69VfeH+IfSrdyH3MLhwA==",
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.22.13",
"@babel/generator": "^7.22.15",
"@babel/helper-compilation-targets": "^7.22.15",
"@babel/helper-module-transforms": "^7.22.19",
"@babel/helpers": "^7.22.15",
"@babel/parser": "^7.22.16",
"@babel/template": "^7.22.15",
 lOMoARcPSD|43377640

"@babel/traverse": "^7.22.19",
"@babel/types": "^7.22.19",
"convert-source-map": "^1.7.0",
"debug": "^4.1.0",
"gensync": "^1.0.0-beta.2",
"json5": "^2.2.3",
"semver": "^6.3.1"
},
"engines": {
"node": ">=6.9.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/babel"
}
},
"node_modules/@babel/core/node_modules/semver": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-
6.3.1.tgz",
"integrity": "sha512-
BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/
MprG9yArRkyrQxTO6XjMzA==",
"bin": {
"semver": "bin/semver.js"
}
},
"node_modules/@babel/eslint-parser": {
"version": "7.22.15",
"resolved": "https://registry.npmjs.org/@babel/eslint-
parser/-/eslint-parser-7.22.15.tgz",
"integrity": "sha512-
yc8OOBIQk1EcRrpizuARSQS0TWAcOMpEJ1aafhNznaeYkeL+OhqnDObGFylB8ka8VF
F/sZc+S4RzHyO+3LjQxg==",
"dependencies": {
"@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
"eslint-visitor-keys": "^2.1.0",
 lOMoARcPSD|43377640

"semver": "^6.3.1"
},
"engines": {
"node": "^10.13.0 || ^12.13.0 || >=14.0.0"
},
"peerDependencies": {
"@babel/core": "^7.11.0",
"eslint": "^7.5.0 || ^8.0.0"
}
},
"node_modules/@babel/eslint-parser/node_modules/eslint-
visitor-keys": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-
keys/-/eslint-visitor-keys-2.1.0.tgz",
"integrity":
"sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YU
lMGYLQy2zprNmoT8qasCGtY+QaKw==",
"engines": {
"node": ">=10"
}
},
"node_modules/@babel/eslint-parser/node_modules/semver": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-
6.3.1.tgz",
"integrity": "sha512-
BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/
MprG9yArRkyrQxTO6XjMzA==",
"bin": {
"semver": "bin/semver.js"
}
},
"node_modules/@babel/generator": {

"version": "7.22.15",
 lOMoARcPSD|43377640

"resolved":
"https://registry.npmjs.org/@babel/generator/-/generator-
7.22.15.tgz",
"integrity":
"sha512-Zu9oWARBqeVOW0dZOjXc3JObrzuqothQ3y/n1kUtrjCoCPLkXUwMvOo/F/
TCfoHMbWIFlWwpZtkZVb9ga4U2pA==",
"dependencies": {
"@babel/types": "^7.22.15",
"@jridgewell/gen-mapping": "^0.3.2",
"@jridgewell/trace-mapping": "^0.3.17",
"jsesc": "^2.5.1"
},
"engines": {
"node": ">=6.9.0"
}
},

{} package.json
{
"name": "shopping-cart",
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.9.5",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.0",
"react-icons": "^4.11.0",
"react-redux": "^8.1.2",
"react-router-dom": "^6.9.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.1.3",
""
 lOMoARcPSD|43377640

web-vitals": "^2.1.4
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.4.14",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.7"
}
}
 lOMoARcPSD|43377640

JS postcss.config.js

module.exports = {

plugins: {

tailwindcss: {},

autoprefixer: {},
},
}

JS twailwind.config.js

module.exports = {

content: ["./src/**/*.{js,jsx,ts,tsx}"],

theme: {
extend: {},
},
plugins: [],
};
 lOMoARcPSD|43377640

Testing & Debugging

Testing is a process of executing the program with the intent of finding

errors and it establishes confidence that the program does what it is
suppose to do. Testing can be performed in two ways:-

Unit Testing:

It is testing of individual module. Before initiating unit testing, it must be

ensured that the code is peer previewed.

Integration Testing:

Integration testing is performed after all the software units are combined
together. The objective here is to test the software interfaces. Project
team conducts the integration testing. Before entering integration testing,
it may be ensured that code review and unit testing have been performed
on the individual software modules.

I conducted the unit testing for finding errors and the results of
the unit testing are recorded and action initiated for rectification
of the errors/defects.
 lOMoARcPSD|43377640

VALIDATION

Almost every field in the database which is sensitive i.e. responsible for some
important changes are validated. Basically we validated the field as such is
numeric and the length in case of the primary keys and also used the Data base to
complete most of the details once entered at the data entry time,

, status, book no that can be issued, and other important fields.

Mostly the validation is carried out in the lost focus, click, change and
other similar events where the entered value is compared with the one stored in
the database and if there is duplication to occur or no match with the database
then the entry is to be removed and user is prompt to reenter it.
Implementation & consequently maintenance was not included as part of our
project.
 lOMoARcPSD|43377640

References

 CODE WITH HARRY

 FREE CODE CAMP

 LION SCHOOL OF CODDING

 CHAT-GPT