React Cart

(E-commerce Website)

A PROJECT REPORT
Submitted in Partial Fulfilment for the award of the degree
of
MASTER OF COMPUTER APPLICATIONS
(M.C.A)

Submitted by
Anmol Bandooni
1900380140004

Under the Supervision of

Prof. Puja Dhar
Assistant Professor
Institute of Technology & Science
Mohan Nagar, Ghaziabad

Department of Information Technology

Institute of Technology & Science
Mohan Nagar, Ghaziabad-201012
(2019-2022)www.its.edu.in
a
 Declaration

I, Anmol Bandooni, student of MCA-VI Semester (2019-22) at I.T.S

Mohan Nagar Ghaziabad undertake that Industrial Project report on
topic “ React Cart” is my authentic work. It has not been published
earlier verbatim or has been submitted before for the award of any other
degree. I have appropriately mentioned the references of contents that I
have used in my report. In case of any conflict of interests, I shall be
solely responsible.

Anmol Bandooni
1900380140004
MCA-VI Semester

b
 ACKNOWLEDGEMENT

Any software project is not a work of an individual. It combines efforts, ideas,

suggestions, reviews and hard work. We express our sincere gratitude to all those
who initiated and helped us in the successful completion of our project. One of the
most pleasing aspect in collecting the necessary information and compiling it is the
opportunity to thanks those who have actively contributed to it.

I would like to express thanks to Prof. Puja Dhar for her guidance and
cooperation render for following me to undergo training under his guidance I’m
also thanks to all the other staff of college who had helped me in spite of their busy
schedule.

Anmol Bandooni
1900380140004
MCA-VI Semester

c
Certificate

This is to certify that the project work entitled REACTCART, an E-commerce

website is a bonafide work done and submitted by Anmol Bandooni in partial
fulfillment of the requirement of the requirement for the award of the degree of
Master of Computer Applications by the I.T.S Mohan Nagar during 2019-
22. REACTCART Project Report Submitted in Partial Fulfillment of the
Requirement for the award of the degree of MASTER OF COMPUTER
APPLICATIONS Under the guidance of Dr Puja Dhar, MCA Professor.

d
 TABLE OF CONTENT

Sr. No. Topic Page No.

1. Introduction 1

1.1 Objective 1

1.2 Background of project 2

1.3 Operation Environment 2

2. System Analysis 3

2.1 Software Requirement Specification 3

2.2 Preliminary Investigation 4

2.3 Feasibility Study 5-6

2.4 SRS (Functional And Non- Functional Requirement 6-8

2.5 Existing And Proposed System 8-9

2.6 Technology And Tools Used 9-11

2.7 Hardware And Software Specification 11-13

3 System Design 14

3.1 Table Design 14-16

3.2 ER Diagram 16-17

3.3 Data Flow Diagrams 17-20

3.4 Use Case 20-22

e
 3.5 Sequence Diagram 22-24

4 Coding and Screenshots 25-78

5 Testing 79

5.1 System Testing 79-82

5.2 Test for Admin login 83

5.3 Test for user login 84-87

6 Software Maintenance 88

7 Conclusion & Future Scope 89

8 References 90

f
Introduction

1.1 Overview

The ‘Online E-commerce Web application’ Services department strives to provide

solutions to develop and transfer easy and efficient way in the digital age and to help
reduces the human pressure and time. To help support shop collections, the digital
initiatives, and external partner institution digital projects, It provide services that include
the digitization of analog objects, metadata management, digital preservation, and
discovery and access of digital collections. “reactCart” is a web application written for all
operating systems, designed to help users maintain and organize shop virtually. This
software is easy to use for both beginners and advanced users. It features a familiar and
well thought out, an attractive user interface, combined with strong searching Insertion and
reporting capabilities. The report generation facility of shop system helps to get a good
idea of which are the various items brought by the members, makes users possible to get
the product easily. The main objective of this project is to create a fully mobile responsive
platform for easy access of buying of goods by incorporating user-friendly interface with
Payment Gateway Integration. For the Database part I have connected it with the Firebase
Firestore For all the orders that i order it gets stored in the database .

1.2 Background Study

E-commerce is fast gaining ground as an accepted and used business paradigm. More and
more business houses are implementing web sites providing functionality for performing
commercial transactions over the web. It is reasonable to say that the process of shopping
on the web is becoming commonplace.

The objective of this project is to develop a general-purpose e-commerce store where any
product (such as books, CDs, computers, mobile phones, electronic items, and home
appliances) can be bought from the comfort of home through the Internet. However, for
implementation purposes, this paper will deal with an online ecommerce store.

An online store is a virtual store on the Internet where customers can browse the catalog
and select products of interest. The selected items may be collected in a shopping cart. At
checkout time, the items in the shopping cart will be presented as an order. At that time,
more information will be needed to complete the transaction.

Usually, the customer will be asked to fill or select a billing address, a shipping address, a
shipping option, and payment information such f as a credit card number.
1.3 Project Planning
Project planning is part of project management, which relates to the use of schedules such
as Gantt charts to plan and subsequently report progress within the project environment.
Initially, the project scope is defined and the appropriate methods for completing the
project are determined. Following this step, the durations for the various tasks necessary to
complete the work are listed and grouped into a work breakdown structure. The logical
dependencies between tasks are defined using an activity network diagram that enables
identification of the critical path. Float or slack time in the schedule can be calculated
using project management software. Then the necessary resources can be estimated and
costs for each activity can be allocated to each resource, giving the total project cost. At
this stage, the project plan may be optimized to achieve the appropriate balance between
resource usage and project duration to comply with the project objectives. Once
established and agreed, the plan becomes what is known as the baseline. Progress will be
measured against the baseline throughout the life of the project

1.4 Purposes
The project is about to handle all the information of the shop regarding members. Also it
manages resources which were managed and handled by manpower previously. The main
purpose of the project is to integrate distinct sections of the shop into consistent manner so
that complex functions can be handled smoothly. The project aims at the following matters

∙ Buying products.
∙ To manage information of different types of items.
∙ Consistently update information of all the item.
∙ Managing security by providing authorized email & password.
Manages database efficiently.

f
Chapter Two
System Design

2.1 Design
The system is divided into some parts these are Register system, Login System, Search
System, Buying System, Order Received System, Viewing System side with database
represent the server using React.js , NOSQL and FIREBASE server. System diagram and
system database diagram illustrated in figure.

f
2.2 User Characteristics

Admin The administrator has all the rights to access the system. He is the one who has all
rights to view the members and product details, modify those details. He can add various
product based on the category. He can also set the available quantity of a product and its
reasonable price. Also he can also set discount in various occasion. Admin can also view
the details of a member. The admin have the power to generate the scratch card so that
users can also use the recharge card to buy various product.

Users The user can log in to the system by using his specific email and password. User can
view the products and order the products according to their own needs. He can view his
profile and update

his details. He can update his personal information by logging into the system. User can
find various product by using search option easily. update his details. He can update his
personal information by logging into the system. User can find various product by using
search option easily.

2.3 System Information

This system is an automated Shop Management System. Through the software user can add
members, add product, search product, update information, edit information, buy the
product in quick time. The system has the following advantages:

∙ User friendly interface

∙ Fast access to database
∙ Search facility
∙ Look and Feel Environment

f
2.4 System Analysis

System Analysis refers into the process of examining a situation with the intent of
improving it through better procedures and methods. System Analysis is the process of
planning a new system to either replace or complement an existing system. But before any
planning is done the old system must be thoroughly understood and the requirements
determined. System analysis is therefore, the process of gathering and interpreting facts,
diagnosing problems and using the information to re comment improvements in the system.
System analysis is conducted with the following objectives in mind:

✔ Evaluate the system concept for feasibility.

✔ Perform economic and technical analysis.
✔ Allocate functions to hardware, software people, database and other system elements.
✔ Establish cost and schedule constraints.
✔ Create a system definition that forms the foundation for all the subsequent engineering

work.

2.5 Feasibility Analysis

Whatever we think need not be feasible .It is wise to think about the feasibility of any
problem we undertake. Feasibility is the study of impact, which happens in the
organization by the development of a system. The impact can be either positive or
negative. When the positives nominate the negatives, then the system is considered
feasible. Here the feasibility study can be performed in two ways such as technical
feasibility and Economical Feasibility.

Technical Feasibility

It is technically feasible, since there will not be much difficulty in getting required
resources for the development and maintaining the system as well. All the resources
needed for the development of the software as well as the maintenance.

Economical Feasibility

Development of this application is highly economically feasible .The organization needed

not spend much m one for the development of the system already available. The only thing
is to be done is making an environment for the development with an effective supervision.
I f we are doing so , we can attain the maximum usability of the corresponding resources
.Even after the development , the organizationf will not be in a condition to invest more in
the organization .Therefore , the system is economically feasible.
2.7 Context Diagram

f
Chapter Three
Hardware and Software Requirement

3.1 Hardware Required

⮚ Processor : Pentium IV or Above

⮚ RAM : 2GB or above
⮚ Hard Disk : 5GB or above
⮚ Input Devices : Keyboard, Mouse
⮚ Output Devices : Monitor

3.2 Software Required

✔ Operating System : Linux, Ubuntu, Mac, Windows XP, 7, 8, 8.1, 10

✔ Frontend : HTML,CSS, JavaScript , React.js,Next.js

✔ API : Fakestore API , Stripe API

✔ Database : Firebase Firestore

f
 Chapter Four

Implementing Tools for the Project

4.1 Tools
✔ HTML
✔ CSS
✔ Javascript
✔ React.js
✔ Next.Js
✔ NoSQL

4.2 HTML

Every webpage you look at is written in a language called HTML. You can think of
HTML as the skeleton that gives every webpage structure. In this course, we'll use
HTML to add paragraphs, headings, images and links to a webpage.

4.3 CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language. Most often used to set the
visual style of web pages and user interfaces written in HTML and XHTML, and is
applicable to rendering in speech, or on other media. Along with HTML and
JavaScript, CSS is a cornerstone technology used by most websites to create visually
engaging webpages, user interfaces for web applications, and user interfaces for many
mobile applications.
CSS is designed primarily to enable the separation of document content from
document presentation, including aspects such as the layout, colors, and fonts. This
separation can improve content accessibility, provide more flexibility and control in
the specification of presentation characteristics, enable multiple HTML pages to share
formatting by specifying the relevant CSS in a separate .CSS file, and reduce
complexity and repetition in the structural content.
f
4.4 JAVASCRIPT

JavaScript is a scripting or programming language that allows you to implement complex

features on web pages every time a web page does more than just sit there and display
static information for you to look at displaying timely content updates, interactive maps,
animated 2D/3D graphics, scrolling video jukeboxes, etc. you can bet that JavaScript is
probably involved. It is the third layer of the layer cake of standard web technologies, two
of which (HTML and CSS) we have covered in much more detail in other parts of the
Learning Area.

4.5 REACT.JS

React is a free and open-source front-end JavaScript library for building user interfaces or
UI components. It is maintained by Facebook and a community of individual developers
and companies. React can be used as a base in the development of single-page or mobile
applications.

4.6 NEXT.JS
Next.js is an open-source React front-end development web framework created by Vercel
that enables functionality such as server-side rendering and generating static websites for
React based web applications.Next.js aims to have best-in-class developer experience and
many built-in features, such as:

● An intuitive page-based routing system (with support for dynamic routes)

● Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are
supported on a per-page basis
● Automatic code splitting for faster page loads
● Client-side routing with optimized prefetching
● Built-in CSS and Sass support, and support for any CSS-in-JS library
● Development environment with Fast Refresh support
● API routes to build API endpoints with Serverless Functions
● Fully extendable

Next.js is used in tens of thousands of production-facing websites and web applications,

including many of the world's largest brands.
f
 4.8 NoSQL

NoSQL database technology stores information in JSON documents instead of columns

and rows used by relational databases. To be clear, NoSQL stands for “not only SQL”
rather than “no SQL” at all. This means a NoSQL JSON database can store and retrieve
data using literally “no SQL.” Or you can combine the flexibility of JSON with the power
of SQL for the best of both worlds. Consequently, NoSQL databases are built to be
flexible, scalable, and capable of rapidly responding to the data management demands of
modern businesses. The following defines the four most-popular types of NoSQL database:

 Document databases are primarily built for storing information as documents, including,
but not limited to, JSON documents. These systems can also be used for storing XML
documents, for example.

 Key-value stores group associated data in collections with records that are identified with
unique keys for easy retrieval. Key-value stores have just enough structure to mirror the
value of relational databases while still preserving the benefits of NoSQL.

 Wide-column databases use the tabular format of relational databases yet allow a wide
variance in how data is named and formatted in each row, even in the same table. Like key-
value stores, wide-column databases have some basic structure while also preserving a lot
of flexibility.

 Graph databases use graph structures to define the relationships between stored data
points. Graph databases are useful for identifying patterns in unstructured and semi-
structured information.

f
 Chapter Five

Project Database and Table

5.1 Database Design

Database is critical for all businesses. A good database does not allow any form of
anomalies and stores only relevant information in an ordered manner. If a database
has anomalies, it is affecting the efficiency and data integrity. For example, delete
anomaly arise upon the deletion of a row which also forces other useful data to be
lost. As such, the tables need to be normalized. This fulfils the last objective of
ensuring data are accurate and retrieved correctly.

Database files are the key source of information into the system. It is the process of
designing database files, which are the key source of information to the system. The
files should be properly designed and planned for collection, accumulation, editing
and retrieving the required information.

The organization of data in database aims to achieve three major objectives: -

✔ Data integration
✔ Data integrity
✔ Data independence

5.2 Admin Table

5.3 User Table

f
5.5 Product Table

5.6 Category Table

f
5.7 Brand Table

5.8Cart Table

f
 Chapter Six

Project Model View

6.1 Home Page

f
6.2 Shop Page

6.4 Cart page

f
6.5 Checkout page

f
6.6 User Login page

f
6.7 User Registration page

f
6.8 Admin Login page

f
6.10 ADMIN DASHBOARD

6.11Admin Payment Gateway

f
6.13Add Discount page

6.14 Add Shipping rates page

f
6.15Order List page

6.16View Order page

f
 CODING

Store.js
import { configureStore } from "@reduxjs/toolkit";
import basketReducer from "../slices/basketSlice";

export const store = configureStore({

reducer: {
basket: basketReducer,
},
});
Banner.js
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css'

function Banner() {
return (
<div className="relative">
<div className="absolute w-full h-32 bg-gradient-to-t from-gray-100 to-transparent bottom-0 z-20" />
<Carousel
autoPlay
infiniteLoop
showStatus={false}
showIndicators={false}
showThumbs={false}
interval={5000}
>
<div>
<img loading="lazy" src="https://links.papareact.com/7ma" alt="" />
</div>
<div>
<img loading="lazy" src="https://links.papareact.com/6ff" alt="" />
</div>
<div>
<img loading="lazy" src="https://links.papareact.com/gi1" alt="" />
</div>

</Carousel>
</div>
)
}

30
export default Banner
CheckoutProduct.js
import { StarIcon } from "@heroicons/react/solid"
import Image from "next/image";
import Currency from 'react-currency-formatter';
import { addToBasket, removeFromBasket } from "../slices/basketSlice";
import { useDispatch } from "react-redux";

function CheckoutProduct( {
id,
title,
price,
rating,
description,
category,
image,
hasPrime,

}){
const dispatch = useDispatch();

const addItemToBasket = ()=>{

const product = {id, title, price,rating, description,category, image ,hasPrime};
dispatch(addToBasket(product));
}
const removeItemFromBasket =() =>{
dispatch(removeFromBasket({id}));
}
return (
<div className='grid grid-cols-5 transition duration-500 ease-in-out transform hover:-translate-y-1
hover:scale-110 ...'>
<Image src={image} height ={200} width={200} objectFit="contain" />

<div className="col-span-3 mx-5">

<p>{title}</p>
<div className="flex">
{Array(rating)
.fill()
.map((_,i )=> (
<StarIcon key={i} className="h-5 text-yellow-500" />
))}
</div>
<p className="text-xs mt-2 mb-2 line-clamp-3">{description}</p>
31
 <Currency quantity={price * 73} currency ="INR" />

{hasPrime && (
<div className="flex items-center space-x-2">
<img
loading="lazy"
img className="w-12"
src="https://links.papareact.com/fdw" alt="" />
<p className="text-xs text-gray-500">Free Next-day delivery</p>
</div>
)}
</div>
<div className="flex flex-col space-y-2 my-auto justify-self-end">
<button onClick={addItemToBasket} className="mt-auto button">Add to Basket</button>

<button onClick={removeItemFromBasket} className="mt-auto button">Remove from Basket</button>

</div>
</div>
);
}
export default CheckoutProduct
Footer.js
import Link from "next/link";
import { useState } from "react";
const index = () => {
const [mode, setMode] = useState("auto");
return (
<div className="pt-12">
<footer id="footer" className="relative z-50 dark:bg-gray-900 pt-24">
<div className=" border-t border-b border-gray-200 dark:border-gray-700 py-16">
<div className="mx-auto container px-4 xl:px-12 2xl:px-4">
<div className="lg:flex">
<div className="w-full lg:w-1/2 mb-16 lg:mb-0 flex">
<div className="w-full lg:w-1/2 px-6">
<ul>

<li>
<Link href="">
<a className="text-xs lg:text-sm leading-none hover:text-brand dark:hover:text-
brand text-gray-800 dark:text-gray-50">About Us</a>
</Link>
</li>
32
 <li className="mt-6">
<Link href="">
<a className="text-xs lg:text-sm leading-none hover:text-brand dark:hover:text-
brand text-gray-800 dark:text-gray-50">Careers</a>
</Link>
</li>
<li className="mt-6">
<Link href="">
<a className="text-xs lg:text-sm leading-none hover:text-brand dark:hover:text-
brand text-gray-800 dark:text-gray-50">Gift Cards</a>
</Link>
</li>
<li className="mt-6">
<Link href="">
<a className="text-xs lg:text-sm leading-none hover:text-brand dark:hover:text-
brand text-gray-800 dark:text-gray-50">100% Purchase Protection</a>
</Link>
</li>
<li className="mt-6">
<a href="" className="text-xs lg:text-sm leading-none hover:text-brand
dark:hover:text-brand text-gray-800 dark:text-gray-50">
Advertise Your Products
</a>
</li>
</ul>
</div>
<div className="w-full lg:w-1/2 px-6">
<ul>
<li>
<Link href="">
<a className="text-xs lg:text-sm leading-none hover:text-brand dark:hover:text-
brand text-gray-800 dark:text-gray-50">Free components</a>
</Link>
</li>

<li className="mt-6">
<Link href="">
<a className="text-xs lg:text-sm leading-none hover:text-brand dark:hover:text-
brand text-gray-800 dark:text-gray-50">Blog</a>
</Link>
</li>
<li className="mt-6">
<Link href=")">
<a className="text-xs lg:text-sm leading-none hover:text-brand dark:hover:text-
33
brand text-gray-800 dark:text-gray-50">Changelog</a>
</Link>
</li>
</ul>
</div>
</div>
<div className="w-full lg:w-1/2 flex">
<div className="w-full lg:w-1/2 px-6">
<ul>
<li>
<a href="" className="text-xs lg:text-sm leading-none hover:text-brand
dark:hover:text-brand text-gray-800 dark:text-gray-50">
Privacy policy
</a>
</li>
<li className="mt-6">
<Link href="">
<a className="text-xs lg:text-sm leading-none hover:text-brand dark:hover:text-
brand text-gray-800 dark:text-gray-50">Terms of service</a>
</Link>
</li>
</ul>
</div>
<div className="w-full lg:w-1/2 px-6 flex flex-col justify-between">
<div className="flex items-center mb-6">
<a href="javascript:void(0)">
<div className="text-gray-800 dark:text-gray-50 cursor-pointer hover:text-brand
dark:hover:text-brand ">
<svg className="footer-icon feather feather-github"
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35
6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7
0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0
9 18.13V22"></path>
</svg>
</div>
</a>
<a href="javascript:void(0)">
<div className="pl-4">
<svg className="footer-icon feather feather-twitter text-gray-800 dark:text-gray-
50 cursor-pointer hover:text-brand dark:hover:text-brand " xmlns="http://www.w3.org/2000/svg" width={24}
height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
strokeLinejoin="round">
34
 <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66
10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
</svg>
</div>
</a>
</div>

</div>
</div>
</div>
</div>
</div>
<div className="py-16 flex flex-col justify-center items-center">

<p className="mt-6 text-xl lg:text-xl leading-none text-gray-900 dark:text-gray-50">2021

reactcart. All Rights Reserved.</p>
</div>
</footer>
</div>
);
};
export default index;

Header.js
import Image from "next/image";
import {
MenuIcon,
SearchIcon,
ShoppingCartIcon
} from "@heroicons/react/outline";
import { signIn, signOut, useSession } from 'next-auth/client'
import { useRouter } from 'next/router';
import { useSelector } from "react-redux";
import {selectItems} from "../slices/basketSlice"
function Header() {
const [ session ] = useSession();
const router = useRouter();
const items = useSelector(selectItems);
return (
<header>

<div className="flex items-center bg-amazon_blue-light p-1 flex-grow py-2">

<div className="mt-2 flex items-center flex-grow sm:flex-grow-0">
{/* sm:flex-grow-0 means it wont grow if screen goes small or larger for mobile responsive */}
35
 <Image
src="https://repository-images.githubusercontent.com/219324208/da2f4100-5d9d-11ea-9dea-
8acf11e67ca0"
width={150}
height={50}
objectFit="contain"
className="cursor-pointer"
onClick={() => router.push('/')}
/>
</div>
<div className="hidden relative items-center flex-grow cursor-pointer rounded-md h-10 bg-yellow-400 sm:flex
hover:bg-yellow-500">
<input placeholder="Search Products... (Live Search)" className="p-2 px-5 h-full width-6 flex-grow rounded
flex-shrink rounded-l-md focus:outline-none" type ="text" />
<SearchIcon className="h-12 p-4"/>
</div>
{/* right navbar */}

<div className="text-yellow-400 flex items-center text-xs space-x-6 mx-6 whitespace-nowrap">

<div onClick={!session ? signIn : signOut} className="link">
<p className="hover:underline font-bold"> {session ? `Hello, ${session.user.name}` : 'Hello,Sign
In'}</p>
<p className="font-extrabold md:text-sm">Account & Lists</p>
</div>

<div onClick={ () => router.push('/orders')}

className=" cursor-pointer link">
<p >Returns</p>
<p className="font-extrabold md:text-sm" >& Orders</p>
</div>

<div className="link relative flex items-center" onClick={() => router.push('/checkout')}>

<span className="absolute top-0 right-0 md:right-10 h-4 w-4 bg-yellow-400 text-center rounded text-black
font-bold">{items.length}</span>
<ShoppingCartIcon className="h-10" />
<p className="font-extrabold md:text-sm hidden md:inline mt-2 ">Basket</p>
{/* md means medium screen when we reach md the basket is visible else it is hidden */}
</div>
</div>

</div>
{/* Bottom nav */}
<div className="flex space-x-3 p-2 pl-6 items-center bg-amazon_blue text-yellow-600 text-sm">
36
 <p className="link flex items-center">
<MenuIcon className="h-6 mr-1"/>
All
</p>
<p className="link">Prime Video</p>
<p className="link">Amazon Business</p>
<p className="link">Today's deals</p>
<p className="link hidden lg:inline-flex">Electronics</p>
<p className="link hidden lg:inline-flex">Food & Grocery</p>
<p className="link hidden lg:inline-flex">Electronics</p>
<p className="link hidden lg:inline-flex">Prime</p>
<p className="link hidden lg:inline-flex">Buy again</p>
<p className="link hidden lg:inline-flex">Shopping Toolkit</p>
<p className="link hidden lg:inline-flex">Mens & Womens</p>
</div>
</header>
)
}

export default Header

Order.js
import moment from 'moment'
import Currency from 'react-currency-formatter';

function Order({ id, amount, amountShipping, items, timestamp, images }) {

return (
<div className="relative rounded-md border ">
<div className="flex items-center space-x-10 p-5 bg-gray-200 text-sm text-gray-600">
<div>
<p className="font-bold text-xs">Order Placed</p>
<p>{moment.unix(timestamp).format('DD MMM YYYY')}</p>
</div>
<div>
<p className="font-bold text-xs">Total</p>
<p>
<Currency quantity={amount *73 } currency="INR"/> - Next Day delivery{" "}
<Currency quantity={amountShipping} />
</p>
</div>

<p className="text-sm whitespace-nowrap sm:text-xl self-end flex-1 text-right text-blue-

500">{items.length} Items</p>

37
 <p className="absolute top-2 right-2 w-40 lg:w-72 truncate text-xs whitespace-nowrap">Order #
{id}</p>
</div>

<div className="p-5 sm:p-10">

<div className="flex space-x-6 overflow-x-auto">
{images.map((image) => (
<img className="rounded-lg h-20 object-contain sm:h-32" src={image} loading="lazy" alt="" />
))}
</div>
</div>
</div>
)
}

export default Order

Product.js
import Image from "next/image";
import {useState} from "react";
import {StarIcon} from "@heroicons/react/solid"
import Currency from 'react-currency-formatter';
import { addToBasket } from "../slices/basketSlice";
import { useDispatch } from "react-redux";
function Product({id,title,price,description,category,image}) {
const dispatch = useDispatch()
const MAX_RATING = 5
const MIN_RATING = 1
const [rating] =useState(
Math.floor(Math.random() * (MAX_RATING - MIN_RATING + 1)) + MIN_RATING
);
const [hasPrime] = useState(Math.random() < 0.5 );
const addItemToBasket = () => {
const product = {id, title, price,rating, description,category, image ,hasPrime};
//sending the product as an action to the REDUX STORE ..the basket slice
dispatch(addToBasket(product));

};
return (
<div className="relative flex flex-col m-5 border-2 border-yellow-500 bg-white text-black z-30 p-10
transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 ... " >
<p className="absolute top-2 right-2 text-xs italic text-gray-400">{category}</p>
<Image src={image}
38
 width={200}
height={200}
objectFit="contain"/>

<h4 className="my-3">{title}</h4>
<div className="flex">
{Array(rating).fill().map((_, index) => (
<StarIcon key={index} className="h-5 text-yellow-500" />
))}
</div>
<p className="text-xs my-2 line-clamp-2 ">{description}</p>

<div className="mb-5">
<Currency quantity={price *73} currency="INR" />
</div>
{hasPrime && (
<div className="flex items-center space-x-2 -mt-5">
<img className="w-12" src ="https://links.papareact.com/fdw" alt="" />
<p className="text-xs text-gray-500">FREE Next-Day Delivery</p>
</div>
)}
<button onClick={addItemToBasket} className="mt-auto button">Add To Basket</button>
</div>
)
}

export default Product

ProductFeed.js
import Product from "./Product"

function ProductFeed ({ products }) {

return (
<div className=" grid grid-flow-row-dense md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4
md:-mt-48 lg:-mt-70 xl:-mt-96 -mt-14 mx-auto ">

{products.slice(0,4)
.map(({id,title,price,description,category,image}) => (
<Product
key={id}
id={id}
title={title}
price={price}
39
description={description}
category={category}
image={image}
/>
))}

<img src="https://links.papareact.com/dyz" alt="" className=" md:col-span-full mx-auto" />

<div className="md:col-span-2">
{products.slice(4,5)
.map(({id,title,price,description,category,image}) => (
<Product
key={id}
id={id}
title={title}
price={price}
description={description}
category={category}
image={image}
/>
))}

</div>

{products.slice(5,products.length)
.map(({id,title,price,description,category,image}) => (
<Product
key={id}
id={id}
title={title}
price={price}
description={description}
category={category}
image={image}
/>
))}

</div>

);
}
export default ProductFeed;
40
QuantityCount.js
import styles from '../styles/QuantityCount.module.css'
import { updateQuantity } from "../slices/basketSlice";
import { useDispatch } from 'react-redux';

function QuantityCount({ setQuantity, quantity = 1, dispatch = false, id = null }) {

const newDispatch = useDispatch()

const increaseCount = () => {

setQuantity(quantity + 1)
updateQuantityHere(quantity + 1)
}

const decreaseCount = () => {

if(quantity > 0) {
setQuantity(quantity - 1)
updateQuantityHere(quantity - 1)
}
}

const updateQuantityHere = count => {

if(dispatch){
const product = {id, quantity: count}
newDispatch(updateQuantity(product))
}
}

return (
<div className={styles.quantityCount}>
<button onClick={decreaseCount} className={styles.actionBtn}>-</button>
<div className={styles.counter}>{quantity}</div>
<button onClick={increaseCount} className={styles.actionBtn}>+</button>
</div>
)
}

export default QuantityCount

QuickView.js
import { useEffect, useState } from "react"
41
import { useDispatch } from "react-redux"
import { addToBasket } from "../slices/basketSlice"
import styles from "../styles/Product.module.css"
import { StarIcon } from "@heroicons/react/solid"
import Currency from 'react-currency-formatter';
import QuantityCount from "./QuantityCount"
import { useRouter } from 'next/router';

function QuickView({setShowQuick, id, products}) {

const [product, setProduct] = useState({})
const [quantity, setQuantity] = useState(1)
const dispatch = useDispatch()
const router = useRouter()
const [added, setAdded] = useState(false)

const MAX_RATING = 5
const MIN_RATING = 1
const [rating] = useState(
Math.floor(Math.random() * (MAX_RATING - MIN_RATING + 1)) + MIN_RATING
)

const addItemToBasket = () => {

dispatch(addToBasket({...product, title: product.name, quantity}))
setAdded(true)
setTimeout(() => setAdded(false), 2000)
}
useEffect(() => {
const found = products.filter(product => product.id == id)[0]
setProduct(found)
console.log(found)
}, [id])
//{ name, price, images, description, colors, company, stock, reviews, category, shipping }
return (
<>
<div className={"fixed w-full h-screen sm:h-auto top-0 left-0 flex justify-center items-start overflow-y-
scroll " + styles.quickView} style={{ zIndex: '1200'}}>
<div className={`relative max-w-screen-xl my-48 mb-20 rounded-lg ${styles.quickView_wrapper}`}
style={{ zIndex: '200'}}>
<div className="flex flex-wrap mt-5">
<div className="px-5 mb-7 w-full md:w-7/12">
<div className="w-full mb-4 overflow-hidden rounded-lg h-auto">
{product && (
<img loading="lazy" className={"w-full rounded-lg h-full width " +
styles.quickView_product_image_new} src={product?.image} alt="" />
42
 )}
</div>
</div>
<div className="px-5 mb-5 w-full md:w-5/12">
<p className="font-serif text-xl text-black">{product?.category}</p>
<h1 className="my-2 text-5xl text-yellow-500 mb-7">{product?.name}</h1>
<p className="text-gray-600 text-base mb-5">{product?.description}</p>
<p className="flex items-center">
<b className="mr-1">Rating:</b>
{" "}
{Array(rating).fill().map((_, index) => (
<StarIcon key={index} className="h-5 text-yellow-500" />
))}
<span> (30)</span>
</p>
<p><b>Company:</b> {product?.company}</p>
<p><b>Stock:</b> Available in stock</p>

<div className="flex items-center my-4 cursor-pointer">

{product?.colors && product?.colors.map(color => (
<div key={Math.random()} className={`w-7 h-7 border-gray-200 border-4 rounded-full
mx-1`} style={{ background: color }}/>
))}
</div>
<p className="text-yellow-500 text-2xl mb-7">
<Currency
quantity={product?.price}
/>
</p>
{product?.shipping && (
<div className="flex items-center space-x-2">
<img className="w-12" src="https://links.papareact.com/fdw" alt="" />
<p className="text-xs text-gray-500">Free Next-day delivery</p>
</div>
)}
<QuantityCount setQuantity={setQuantity} quantity={quantity} />
<button onClick={addItemToBasket} className="w-full button mt-4">{added ? 'Added' :
'Add to Busket'}</button>
<button onClick={() => router.push('/product/' + product?.id)} className="w-full button mt-
4">View details</button>
</div>
</div>
</div>
<div onClick={() => setShowQuick(false)} className="w-full h-screen bg-gray-900 bg-opacity-60 fixed
43
top-0 right-0 cursor-pointer" style={{ zIndex: '100'}}/>
</div>

</>
)
}

export default QuickView

Slidebar.js
// .sidebar {
// min-width: 5rem;
// width: clamp(80px,10vw,100px);
// height: 100vh;
// position: fixed;
// z-index: 99;
// top: 0;
// left: 0;
// box-shadow: 0 0 1rem rgb(26 26 44 / 5%);
// background: #fff;
// display: flex;
// flex-flow: column nowrap;
// justify-content: space-between;
// align-items: center;
// padding: 3rem 0;
// }
// *, :after, :before {
// box-sizing: border-box;
// margin: 0;
// }
// .sidebar {
// min-width: 5rem;
// width: clamp(80px,10vw,100px);
// height: 100vh;
// position: fixed;
// z-index: 99;
// top: 0;
// left: 0;
// box-shadow: 0 0 1rem rgb(26 26 44 / 5%);
// background: #fff;
// display: flex;
// flex-flow: column nowrap;
44
// justify-content: space-between;
// align-items: center;
// padding: 3rem 0;

45
 Chapter Seven

Software Testing

7.1 Why Software Testing is Needed

Tool-bars work properly? Are all menu function and pull down sub function properly listed? Is it possible to
invoke each menu function using a logical assumptions that if all parts of the system are correct, the goal
will be successfully achieved? In adequate testing or non-testing will leads to errors that may appear few
months later. Testing represents an interesting anomaly for the software engineer. During earlier software
engineering activities, the engineer attempts to build software from an abstract concept to a tangible
product. Now comes testing. The engineer creates a series of test cases that are intended to “demolish” the
software that has been built. In fact, testing is the one step in the software process that could be viewed
(psychologically, at least) as destructive rather than constructive. Testing requires that the developer discard
preconceived notions of the “correctness” of software just developed and overcome a conflict of interest that
occurs when errors are uncovered.

If testing is conducted successfully (according to the objectives stated previously) it will uncover errors in
the software. As a secondary benefit, testing demonstrates that software functions appear to be working
according to specification, that behavioral and performance requirements appear to have been met. In
addition, data collected as testing is conducted provide a good indication of software reliability and some
indication of software quality as a whole. But testing cannot show the absence of errors and defects, it can
show only that software errors and defects are present. It is important to keep this (rather gloomy)
statement in mind as testing is being conducted.

7.2 Testing Strategy

There are types of testing that we implement. They are as follows:

While deciding on the focus of testing activities, study project priorities. For example, for an on line system,
pay more attention to response time. Spend more time on the features used frequently. Decide on the effort
required for testing based on the usage of the system. If the system is to be used by a large number of users,
evaluate the impact on users due to a system failure before deciding on the effort.

This create two problem

✔ Time delay between the cause and appearance of the problem.

✔ The effect of the system errors on files and records within the system.

46
The purpose of the system testing is to consider all the likely variations to which it will be suggested and
push the systems to limits. The testing process focuses on the logical intervals of the software ensuring that
all statements have been tested and on functional interval is conducting tests to
uncover errors and ensure that defined input will produce actual results that agree with the required results.
Program level testing, modules level testing integrated and carried out.

There are two major type of testing they are:

✔ White Box Testing.

✔ Black Box Testing.

7.3 White Box Testing

White box sometimes called “Glass box testing” is a test case design uses the control structure of the
procedural design to drive test case. Using white box testing methods, the following tests where made on the
system

a) All independent paths within a module have been exercised once. In our system, ensuring that case
was selected and executed checked all case structures. The bugs that were prevailing in some part of
the code where fixed
b) All logical decisions were checked for the truth and falsity of the values.

7.4 Black Box Testing

Black box testing focuses on the functional requirements of the software. This is black box testing enables
the software engineering to derive a set of input conditions that will fully exercise all functional
requirements for a program. Black box testing is not an alternative to white box testing rather it is
complementary approach that is likely to uncover a different class of errors that white box methods like.

✔ Interface errors.
✔ Performance in data structure.
✔ Performance errors.
✔ Initializing and termination errors.

47
 Chapter Eight

Conclusion & Future Enhancement

8.1 Conclusion

This project is only a humble venture to satisfy the needs in a shop. Several user friendly coding have also
adopted. This package shall prove to be a powerful package in satisfying all the requirements of the
organization. The objective of software planning is to provide a frame work that enables the manger to make
reasonable estimates made within a limited time frame at the beginning of the software project and should
be updated regularly as the project progresses.

This website provides a computerized version of shop manipulate system which will benefit the users as
well as the visitor of the shop. It makes entire process online where users can add product, and buy
various product. It also has a facility for common user by login into the system where user can login and
can see status of ordered item. It provide the facility of admin’s login where admins can review users
activity and also give occasional discount and also add info about different events for the customer.

8.1 Future aspect

The project has a very vast scope in future. Project can be updated in near future as and when requirement
for the same arises, as it is very flexible in terms of expansion. With the proposed software of database
Space Manager ready and fully functional the client is now able to manage and hence run the entire work in
a much better, accurate and error free manner.

The following are the future scope for the project.

✔ Can be added Custom add product

✔ Can be added Detailed Products Pages
✔ Can be added Live Search Products
✔ Can be added Filter Products
✔ And many features can be added this project to make it more robust.

48