KEMBAR78
Project Report | PDF | Software Testing | Databases
0% found this document useful (0 votes)
22 views68 pages

Project Report

The document outlines a final year project titled 'Online Book Store' submitted by students of United University for the Bachelor in Computer Applications degree. It details the project's objectives, scope, and the challenges faced in traditional bookstore operations, along with proposed solutions through automation and a user-friendly interface. The project aims to enhance efficiency in managing bookstore operations, improve customer experience, and reduce manual errors.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
22 views68 pages

Project Report

The document outlines a final year project titled 'Online Book Store' submitted by students of United University for the Bachelor in Computer Applications degree. It details the project's objectives, scope, and the challenges faced in traditional bookstore operations, along with proposed solutions through automation and a user-friendly interface. The project aims to enhance efficiency in managing bookstore operations, improve customer experience, and reduce manual errors.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 68

FINAL YEAR PROJECT

ON
ONLINE BOOK STORE
Submitted in partial fulfillment of requirement for the award of the degree of

BACHELOR IN COMPUTER APPLICATIONS


DEPARTMENT OF COMPUTER APPLICATIONS
SESSION: 2024-2025

SUBMITTED BY
Amit (22201020010)
Raj Tiwari (22201020056)
Milind Yadav (22201020042)
Yadav Ajay Rajkumar (22201020065)

SUPERVISED BY
Mr. Vinay Tiwari
Assistant Professor
Computer Application

UNITED UNIVERSITY
RAWATPUR, PRAYAGRAJ, UTTAR PRADESH-211012
Project Certificate

This is to certify that the project report entitled Online Book Store submitted to United University,
in partial fulfillment of the requirement for the award of the degree of BACHELOR IN
COMPUTER APPLICATIONS (BCA), is original work carried out by myself Mr. Milind Yadav
with enrolment no. UU222010004 Under the Supervision of Mr. Vinay Tiwari. The matter
embodied in this project is genuine work done by me and has not been submitted whether to this
University or to any other University / Institute for the fulfillment of the requirement of any course
of study.

Date: Milind Yadav


22201020042
UU222010004
Bachelor of Computer Application
Department of Computer Application

Verified by the Guide


Mr. Vinay Tiwari
Self-Certificate
This is to certify that the Major Project report entitled “Online Book Store” is done by me, and it
is authentic work carried out for the partial fulfillment of the requirements for the award of the
degree of Bachelor of Computer Application (BCA) under the guidance of Mr. Vinay Tiwari. The
matter and software embodied in this project has not been submitted earlier for award of any degree
or diploma to the best of my knowledge and beliefs.

Milind Yadav
22201020042
UU222010004
Bachelor In Computer Application
Department of Computer Application
Certificate from Project Guide

This is certify that this Major Project entitled "Online Book Store" submitted in partial fulfillment
of the requirements for the award of the degree of Bachelor of Computer Application (BCA) in
session 2024-2025 to the United University, Prayagraj, done by Milind Yadav is an authentic
work carried out by them at “Department of Computer Applications ” under my guidance. The
matter and software 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.

Mr. Vinay Tiwari


Assistant Professor
Department of Computer Application
Acknowledgement

This Major Project is the result of the contribution of many minds. I would like to acknowledge
and thank my project guide Mr. Vinay Tiwari for his valuable support and guidance. He guided
me through the process from conception and till the completion of this project. I would also like
to thank my HOD/Dean Sir. and all my faculties. I thank lab staff members and other non-teaching
members. I am very thankful for the open-handed support extended by many people. While no
list would be complete, it is my pleasure to acknowledge the assistance of my friends who
provided encouragement, knowledge and constructive suggestions.

Milind Yadav
22201020042
UU222010004
Bachelor of Computer Application
Department of Computer Application
Index

S. No. Content Page No


1
Introduction and objectives of the project
2
System analysis
3
Feasibility study
4
Software and hardware requirement specifications
5
System design
6
Coding
7
Validation checks
8
Implementation and maintenance
9
Testing
10
Screen shots of project
11
Future scope and further enhancement
12
Bibliography
13
Conclusion
List Of Figures

Figure1: ER-Diagram of the System


Figure2: Class Diagram
Figure3: Use Case Diagram
Figure4: Admin Activity Diagram
Figure5: User Activity Diagram

Figure6: Screenshots of Project


List Of Tables

Table 1: Books Database Collection


Table 2: Users Database Collection
Table 3: Admin Database Collection
Table 4: Admin Panel Blackbox Testing Test Cases and Results
Table 5: User Interface Blackbox Testing Test Cases and Results
Introduction
running a traditional bookstore. You'd likely be dealing with a lot of manual work – keeping track
of all the books coming in and going out, noting down every sale, and perhaps even manually
updating inventory lists. This can take up a lot of time, and there's always a chance of making
mistakes, like miscounting books or losing sales records. Plus, for customers, finding what they
need might involve browsing through shelves and hoping for the best.

The Online Book Store steps in to solve these very problems by bringing the entire bookstore
operation into the digital age. Think of it as a smart assistant that automates and simplifies all the
essential tasks. This means that things like managing the stock of books, processing sales, and
keeping accurate records are all handled electronically.

By doing this, the online bookstore makes the entire operation smoother and more efficient. There's
less room for human error, and tasks get done much faster. This not only benefits the bookstore
staff but also creates a much better experience for the customers. They can easily search for books,
see what's in stock, and make purchases from the comfort of their own homes.

The core idea behind creating this online bookstore is to modernize how bookstores work.
Traditional methods often involve a lot of paperwork and manual effort, which can be slow and
prone to errors. By using the power of the internet and modern software, this system aims to
automate and improve almost every part of running a bookstore. This leads to greater accuracy,
improved efficiency in day-to-day tasks, and a much more user-friendly experience for everyone
involved.

Ultimately, the main goal of the Online Book Store is to create a smooth and effective platform
for managing all the different aspects of an online bookstore. The reason for building this system
comes from the need for a system that is not only efficient but also easy to use and covers all the
essential functions of a bookstore.

This project aims to take all those manual processes – like managing inventory and sales – and
make them digital and more efficient. This will lead to a much better experience for both the people
managing the bookstore (the administrators) and those working in it (the employees). The system
is designed to be comprehensive and easy to navigate, catering to the needs of everyone involved.
Furthermore, it's built in a way that allows it to grow and adapt as the bookstore expands in the
future.
Problem Statement

Running a bookstore, especially in today's digital age, presents significant operational challenges.
Traditionally, managing a bookstore involves numerous manual tasks. In a physical store, this
includes the time-consuming process of physically counting new book deliveries, manually
updating inventory records, and meticulously tracking sales. These manual methods are not only
labor-intensive but also susceptible to human error, potentially leading to inaccuracies in stock
levels and sales data. Furthermore, locating specific books for customers can be inefficient if the
inventory is not well-organized.

The transition to an online bookstore introduces a new set of complexities if traditional


management approaches are still employed. Maintaining an accurate online inventory to avoid
overselling requires careful tracking. Efficiently processing online orders and managing customer
purchase history become crucial. Moreover, providing a user-friendly online experience that
allows customers to easily browse, search, and purchase books is paramount for success

A lot of bookstore owners, whether they're just online or have a physical shop with a website, run
into the same problems. If they're still doing things the old-fashioned way, with lots of manual
work, it eats up their time. Plus, keeping track of everything by hand means mistakes can easily
creep in, messing up their records and ultimately frustrating their customers. What they really need
is a smarter, automatic way to handle all the behind-the-scenes stuff. That way, they can spend
less time on paperwork and more time doing what they love: helping people find great books. And,
of course, their customers would have a much smoother and happier experience
Objective

To develop a user-friendly and efficient online platform for purchasing books

To provide customers with seamless browsing and purchasing experience.

To automate and streamline bookstore operations, including inventory management and sales
tracking.

To design a searchable and categorized catalog of books

To implement a secure and reliable online transaction system.

To create an intuitive interface for managing book inventory, orders, and customer data.

To enhance accessibility for customers by offering online purchasing options. To provide a


scalable platform that can accommodate future growth and expansion.

To improve the efficiency of book sales and reduce manual errors.

Project Scope and Limitations

Scope
Development of both an admin and employee panel.
Features for managing book categories and individual book records
Sales management capabilities, including transaction history and daily sales tracking.
User management to control access and roles within the system.
Implementation of a clean and simple user interface for a better user experience.

Limitations
It requires an internet connection to function, as it is a web-based application.
Initial setup and data entry can be time-consuming for larger bookstores.
System Analysis

The Challenges of Manual Bookstore Operations

Traditional online bookstores often rely heavily on manual processes, which can lead to several
inefficiencies and problems. These systems require a lot of hands-on work from staff, especially
when it comes to managing inventory, tracking sales, and processing transactions. Some of the
main issues with this manual approach include:

Manual Inventory Management:

Instead of using computers and software, staff must physically count all the books, update records
by hand, and track every sale manually. This is very time-consuming and there's a high chance of
errors. For example, staff might miscount books, forget to update records, or not notice when a
book is running low. This can lead to inaccurate stock information, meaning the bookstore might
either order too many books or not have enough of a popular book

Manual Sales Record Maintenance:

Sales transactions are often written down or entered into a system by hand, which again increases
the risk of mistakes. It can also be difficult and time-consuming to get an overview of sales trends.
For instance, if the manager wants to know which books sold best last month, they will have to go
through piles of records, which is not very efficient.

Inefficient Book Categorization:

Organizing and categorizing books is also often done manually. Staff must update records and
make sure every book is in the right place, which can be a huge task, especially for bookstores
with a lot of books. It's easy for books to be miscategorized or for records to become outdated,
making it harder for both staff and customers to find what they need.

Limited Accessibility:

With traditional systems, information is often only available at the physical bookstore location.
Staff and managers must be present to access records or perform important tasks. This lack of
remote access limits flexibility and can slow down decision-making. For example, if a manager
needs to check inventory levels urgently, they will have to travel to the store, even if they are at
home or elsewhere.
Error-Prone Processes:

Because manual processes rely on people, they are naturally prone to human error. Mistakes in
entering data, misplacing records, and poor communication between staff can all lead to
inaccuracies and inefficiencies. These errors can cause a lot of problems, including incorrect orders,
lost sales, and unhappy customers.

Proposed System: A Modern Solution with the Online Bookstore

The proposed Online Bookstore aims to solve the problems of traditional systems by using
automation and digital technology. It will streamline the way books are managed and sold, making
the process much more efficient and user-friendly. Here are the key improvements and features of
the new system:

Efficient Sales Record Maintenance:

The system will automatically record sales transactions and keep track of all the data. This will
greatly reduce the number of errors and make it easy to access sales information. For example, the
system can quickly generate reports showing which books are selling well, which can help
managers make better decisions about what to stock.

Streamlined Book Categorization:

The system will make it much easier to categorize and organize books. Administrators will be able
to create, update, and delete book categories quickly and easily. This will be a big improvement,
especially for large bookstores with a wide variety of books.

Enhanced Accessibility:

The system will provide real-time access to data from anywhere with an internet connection. Staff
and managers will be able to perform tasks and access records remotely, which will improve
flexibility and allow for faster decision-making. For example, a manager can check inventory
levels from their home, and staff can update book information from any location.

Error Reduction:

By automating key processes such as inventory management, sales transactions, and record-
keeping, the system will minimize the risk of human error. This will improve the accuracy of data
and reduce the number of mistakes that can lead to problems.
User-Friendly Interface:

The system will have a clean and intuitive interface that is easy to use for both administrators and
staff. This will make the system more efficient and improve the overall user experience.

Project Perspective

The Online Bookstore is a web-based application designed to make managing a bookstore's


operations more efficient. It provides tools for administrators and employees to handle tasks like
tracking book inventory, processing sales, managing user accounts, and overseeing the bookstore's
overall operation. The system is built with a user-friendly interface and strong functionality,
aiming to improve how the bookstore runs, reduce errors, and provide a better experience for both
staff and customers.

Requirement Analysis

Admin Panel

Book Category Management:

The system allows administrators to manage book categories.

Administrators can add new categories, update existing ones, and delete categories as needed.

Each category is identified by a unique name and code number.


Book Management:

The system enables administrators to manage book records.

Administrators can add new book records, update existing ones, and remove book records from
the system.

Sales Management:

The system provides tools for administrators to manage sales transactions.

Administrators can select books for a sale, specify the quantity of each book, and enter customer
details.

Transaction History:

The system maintains a detailed history of all past sales transactions like

Book details

Quantities sold

Customer information

Date and time of the transaction

User Management:

The system allows administrators to manage user accounts, including employee accounts.

Administrators can add new user accounts, update existing ones, and remove user accounts from
the system.
Earnings and Sales Overview:

The system provides administrators with an overview of earnings and sales data. Administrator
can view:

Total earnings and sales within the past 24 hours

Overall earnings and sales statistics

Employee Panel

Sales Transactions:

Employees can process sales transactions.

Employees can select books for sale, specify the quantities, and enter customer information.

View Sales Overview:

Employees can view sales data.

Employees can view their total sales within a 24-hour period and overall sales statistics.

Performance Requirements

Efficiency:

The system should perform tasks quickly to minimize response times and maximize user
productivity. This includes tasks such as:

Inventory management

Sales processing
Scalability:

The system must be designed to handle a growing amount of data, number of users, and volume
of transactions without slowing down significantly.

Reliability:

The system should operate consistently with minimal downtime and prevent data loss. This ensures
that users have uninterrupted access to important functions and information.

Security Requirements

Authentication:

The system must have secure login processes.

Only authorized users should be able to access the admin and employee panels.

Authorization:

The system should use role-based access control.

Administrators should have full access to all system features.

Employees should only be able to access the features necessary for their job duties.

Data Protection:

Sensitive data, such as user passwords, should be encrypted.

Encryption should prevent unauthorized access and keep the data confidential.
Data Integrity:

The system should have measures to prevent data from being tampered with.

This ensures that information like sales records, transaction history, and user accounts remains
accurate and trustworthy.
Feasibility Study
A feasibility study assesses the practicality and potential success of a project by examining factors
like technical, economic, and operational aspects. This study aims to determine if the proposed
Online Bookstore System is viable and likely to achieve its objectives.

Technical Feasibility

Technical feasibility assesses whether the necessary technology, infrastructure, and resources are
available to develop and implement the system. This includes evaluating:

Software development tools

Hardware requirements

Database management systems

System integration capabilities

Economic Feasibility

Economic feasibility evaluates the project's financial viability. This involves:

Estimating the costs for system development, implementation, training, and ongoing maintenance.

Considering potential cost savings.

Analyzing opportunities for increased efficiency and revenue generation resulting from the
system's implementation.
Operational Feasibility

Operational feasibility assesses how well the system will work within the existing bookstore
operations. Key aspects include:

Ease of Use:

The system will have an intuitive design to ensure it is easy for administrators and employees to
use.

Integration:

The system will integrate smoothly with current bookstore operations, minimizing disruption.

Process Improvement:

The system will replace manual processes with automated workflows to improve efficiency.

Scalability:

The system will be designed to accommodate future growth and additional features.

Flexibility:

Its modular architecture will allow for easy updates and the integration of new functionalities as
the business expands.
Hardware and Software Requirements

Hardware Requirement:

Processor: Intel CORE i5

RAM: 16GB

SSD: 1TB

Software Support:

Postman

VScode

Operating System: windows 11

Technology:

Frontend: React/Redux, Tailwind CSS, JavaScript

Backend: Node.js, Express.js, MongoDB


System Design
ER Diagram
Class Diagram
Use Case Diagram
Admin Activity Diagram
User Activity Diagram
Coding
Frontend:

Main.jsx (file)

import { StrictMode } from 'react'


import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { RouterProvider } from 'react-router-dom'
import router from './routers/router.jsx'
import 'sweetalert2/dist/sweetalert2.js'

import { Provider } from 'react-redux'


import { store } from './redux/store.js'

createRoot(document.getElementById('root')).render(
<Provider store={store}>
<RouterProvider router={router} />
</Provider>,
)
App.jsx (file)

import { Outlet } from 'react-router-dom'


import './App.css'
import Navbar from './components/Navbar'
import Footer from './components/Footer'
import { AuthProvide } from './context/AuthContext'
import { useEffect, useState } from 'react'
import Loading from './components/Loading'

function App() {

const [loading, setLoading] = useState(true);

useEffect(() => {

const timer = setTimeout(() => {


setLoading(false);
}, 2000);

// Cleanup timer
return () => clearTimeout(timer);
}, []);

if (loading) {
return <Loading />;
}
return (
<>
<AuthProvide>
<Navbar />
<main className='min-h-screen max-w-screen-2xl mx-auto px-4 py-6 font-primary'>
<Outlet />
</main>
<Footer />
</AuthProvide>

</>
)
}

export default App


Login.jsx (file)

import React, { useState } from 'react'


import { Link, useNavigate } from 'react-router-dom'
import { FaGoogle } from "react-icons/fa";
import { useForm } from "react-hook-form"
import { useAuth } from '../context/AuthContext';

const Login = () => {


const [message, setMessage] = useState("")
const { loginUser, signInWithGoogle} = useAuth();
const navigate = useNavigate()
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm()

const onSubmit = async (data) => {


try {
await loginUser(data.email, data.password);
alert("Login successful!");
navigate("/")
} catch (error) {
setMessage("Please provide a valid email and password")
console.error(error)
}
}

const handleGoogleSignIn = async () => {


try {
await signInWithGoogle();
alert("Login successful!");
navigate("/")
} catch (error) {
alert("Google sign in failed!")
console.error(error)
}
}
return (
<div className='h-[calc(100vh-120px)] flex justify-center items-center '>
<div className='w-full max-w-sm mx-auto bg-white shadow-md rounded px-8 pt-6 pb-8
mb-4'>
<h2 className='text-xl font-semibold mb-4'>Please Login</h2>

<form onSubmit={handleSubmit(onSubmit)}>
<div className='mb-4'>
<label className='block text-gray-700 text-sm font-bold mb-2'
htmlFor="email">Email</label>
<input
{...register("email", { required: true })}
type="email" name="email" id="email" placeholder='Email Address'
className='shadow appearance-none border rounded w-full py-2 px-3 leading-tight
focus:outline-none focus:shadow'
/>
</div>
<div className='mb-4'>
<label className='block text-gray-700 text-sm font-bold mb-2'
htmlFor="password">Password</label>
<input
{...register("password", { required: true })}
type="password" name="password" id="password" placeholder='Password'
className='shadow appearance-none border rounded w-full py-2 px-3 leading-tight
focus:outline-none focus:shadow'
/>
</div>
{
message && <p className='text-red-500 text-xs italic mb-3'>{message}</p>
}
<div>
<button className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-8
rounded focus:outline-none'>Login </button>
</div>
</form>
<p className='align-baseline font-medium mt-4 text-sm'>Haven't an account? Please
<Link to="/register" className='text-blue-500 hover:text-blue-700'>Register</Link></p>

{/* google sign in */}


<div className='mt-4'>
<button
onClick={handleGoogleSignIn}
className='w-full flex flex-wrap gap-1 items-center justify-center bg-secondary
hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none'>
<FaGoogle className='mr-2'/>
Sign in with Google
</button>
</div>

<p className='mt-5 text-center text-gray-500 text-xs'>©2025 Book Store. All rights


reserved.</p>
</div>
</div>
)
}

export default Login


Register.jsx (file)

import React, { useState } from 'react'


import { Link } from 'react-router-dom'
import { FaGoogle } from "react-icons/fa";
import { useForm } from "react-hook-form"
import { useAuth } from '../context/AuthContext';

const Register = () => {


const [message, setMessage] = useState("");
const {registerUser, signInWithGoogle} = useAuth();
// console.log(registerUser)
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm()

// register user

const onSubmit = async(data) => {


// console.log(data)
try {
await registerUser(data.email, data.password);
alert("User registered successfully!")
} catch (error) {
setMessage("Please provide a valid email and password")
console.error(error)
}
}

const handleGoogleSignIn = async() => {


try {
await signInWithGoogle();
alert("Login successful!");
} catch (error) {
alert("Google sign in failed!")
console.error(error)
}
}
return (
<div className='h-[calc(100vh-120px)] flex justify-center items-center '>
<div className='w-full max-w-sm mx-auto bg-white shadow-md rounded px-8 pt-6 pb-8 mb-
4'>
<h2 className='text-xl font-semibold mb-4'>Please Register</h2>

<form onSubmit={handleSubmit(onSubmit)}>
<div className='mb-4'>
<label className='block text-gray-700 text-sm font-bold mb-2'
htmlFor="email">Email</label>
<input
{...register("email", { required: true })}
type="email" name="email" id="email" placeholder='Email Address'
className='shadow appearance-none border rounded w-full py-2 px-3 leading-tight
focus:outline-none focus:shadow'
/>
</div>
<div className='mb-4'>
<label className='block text-gray-700 text-sm font-bold mb-2'
htmlFor="password">Password</label>
<input
{...register("password", { required: true })}
type="password" name="password" id="password" placeholder='Password'
className='shadow appearance-none border rounded w-full py-2 px-3 leading-tight
focus:outline-none focus:shadow'
/>
</div>
{
message && <p className='text-red-500 text-xs italic mb-3'>{message}</p>
}
<div>
<button className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-8
rounded focus:outline-none'>Register</button>
</div>
</form>
<p className='align-baseline font-medium mt-4 text-sm'>Have an account? Please <Link
to="/login" className='text-blue-500 hover:text-blue-700'>Login</Link></p>

{/* google sign in */}


<div className='mt-4'>
<button
onClick={handleGoogleSignIn}
className='w-full flex flex-wrap gap-1 items-center justify-center bg-secondary
hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none'>
<FaGoogle className='mr-2'/>
Sign in with Google
</button>
</div>

<p className='mt-5 text-center text-gray-500 text-xs'>©2025 Book Store. All rights


reserved.</p>
</div>
</div>
)
}

export default Register


Navbar.jsx (file)

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


import { HiMiniBars3CenterLeft, HiOutlineHeart, HiOutlineShoppingCart } from "react-
icons/hi2";
import { IoSearchOutline } from "react-icons/io5";
import { HiOutlineUser } from "react-icons/hi";

import avatarImg from "../assets/avatar.png"


import { useState } from "react";
import { useSelector } from "react-redux";
import { useAuth } from "../context/AuthContext";

const navigation = [
{name: "Dashboard", href:"/user-dashboard"},
{name: "Orders", href:"/orders"},
{name: "Cart Page", href:"/cart"},
{name: "Check Out", href:"/checkout"},
]

const Navbar = () => {

const [isDropdownOpen, setIsDropdownOpen] = useState(false)


const cartItems = useSelector(state => state.cart.cartItems);

const {currentUser, logout} = useAuth()

const handleLogOut = () => {


logout()
}

const token = localStorage.getItem('token');

return (
<header className="max-w-screen-2xl mx-auto px-4 py-6">
<nav className="flex justify-between items-center">
{/* left side */}
<div className="flex items-center md:gap-16 gap-4">
<Link to="/">
<HiMiniBars3CenterLeft className="size-6" />
</Link>

{/* search input */}


<div className="relative sm:w-72 w-40 space-x-2">

<IoSearchOutline className="absolute inline-block left-3 inset-y-2" />

<input type="text" placeholder="Search here"


className="bg-[#EAEAEA] w-full py-1 md:px-8 px-6 rounded-md
focus:outline-none"
/>
</div>
</div>
{/* rigth side */}
<div className="relative flex items-center md:space-x-3 space-x-2">
<div >
{
currentUser ? <>
<button onClick={() => setIsDropdownOpen(!isDropdownOpen)}>
<img src={avatarImg} alt="" className={`size-7 rounded-full
${currentUser ? 'ring-2 ring-blue-500' : ''}`} />
</button>
{/* show dropdowns */}
{
isDropdownOpen && (
<div className="absolute right-0 mt-2 w-48 bg-white shadow-lg
rounded-md z-40">
<ul className="py-2">
{
navigation.map((item) => (
<li key={item.name} onClick={() =>
setIsDropdownOpen(false)}>
<Link to={item.href} className="block px-4 py-2 text-sm
hover:bg-gray-100">
{item.name}
</Link>
</li>
))
}
<li>
<button
onClick={handleLogOut}
className="block w-full text-left px-4 py-2 text-sm hover:bg-
gray-100">Logout</button>
</li>
</ul>
</div>
)
}
</> : token ? <Link to="/dashboard" className='border-b-2 border-
primary'>Dashboard</Link> : (
<Link to="/login"> <HiOutlineUser className="size-6" /></Link>
)
}
</div>

<button className="hidden sm:block">


<HiOutlineHeart className="size-6" />
</button>

<Link to="/cart" className="bg-primary p-1 sm:px-6 px-2 flex items-center


rounded-sm">
<HiOutlineShoppingCart className='' />
{
cartItems.length > 0 ? <span className="text-sm font-semibold sm:ml-
1">{cartItems.length}</span> : <span className="text-sm font-semibold sm:ml-1">0</span>
}
</Link>
</div>
</nav>
</header>
)
}

export default Navbar;


Footer.jsx (file)

import React from 'react'


import footerLogo from "../assets/footer-logo.png"

import { FaFacebook, FaInstagram, FaTwitter } from "react-icons/fa"

const Footer = () => {


return (
<footer className="bg-gray-900 text-white py-10 px-4">
{/* Top Section */}
<div className="container mx-auto flex flex-col md:flex-row justify-between items-center
gap-8">
{/* Left Side - Logo and Nav */}
<div className="md:w-1/2 w-full">
<img src={footerLogo} alt="Logo" className="mb-5 w-36" />
<ul className="flex flex-col md:flex-row gap-4">
<li><a href="#home" className="hover:text-primary">Home</a></li>
<li><a href="#services" className="hover:text-primary">Services</a></li>
<li><a href="#about" className="hover:text-primary">About Us</a></li>
<li><a href="#contact" className="hover:text-primary">Contact</a></li>
</ul>
</div>

{/* Right Side - Newsletter */}


<div className="md:w-1/2 w-full">
<p className="mb-4">
Subscribe to our newsletter to receive the latest updates, news, and offers!
</p>
<div className="flex">
<input
type="email"
placeholder="Enter your email"
className="w-full px-4 py-2 rounded-l-md text-black"
/>
<button className="bg-primary px-6 py-2 rounded-r-md hover:bg-primary-dark">
Subscribe
</button>
</div>
</div>
</div>

{/* Bottom Section */}


<div className="container mx-auto flex flex-col md:flex-row justify-between items-center
mt-10 border-t border-gray-700 pt-6">
{/* Left Side - Privacy Links */}
<ul className="flex gap-6 mb-4 md:mb-0">
<li><a href="#privacy" className="hover:text-primary">Privacy Policy</a></li>
<li><a href="#terms" className="hover:text-primary">Terms of Service</a></li>
</ul>

{/* Right Side - Social Icons */}


<div className="flex gap-6">
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer"
className="hover:text-primary">
<FaFacebook size={24} />
</a>
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer"
className="hover:text-primary">
<FaTwitter size={24} />
</a>
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer"
className="hover:text-primary">
<FaInstagram size={24} />
</a>
</div>
</div>
</footer>
)
}

export default Footer


Backend:
Book.controller.js (file)

const Book = require("./book.model");

const postABook = async (req, res) => {


try {
const newBook = await Book({...req.body});
await newBook.save();
res.status(200).send({message: "Book posted successfully", book: newBook})
} catch (error) {
console.error("Error creating book", error);
res.status(500).send({message: "Failed to create book"})
}
}

// get all books


const getAllBooks = async (req, res) => {
try {
const books = await Book.find().sort({ createdAt: -1});
res.status(200).send(books)

} catch (error) {
console.error("Error fetching books", error);
res.status(500).send({message: "Failed to fetch books"})
}
}

const getSingleBook = async (req, res) => {


try {
const {id} = req.params;
const book = await Book.findById(id);
if(!book){
res.status(404).send({message: "Book not Found!"})
}
res.status(200).send(book)

} catch (error) {
console.error("Error fetching book", error);
res.status(500).send({message: "Failed to fetch book"})
}
}
const UpdateBook = async (req, res) => {
try {
const {id} = req.params;
const updatedBook = await Book.findByIdAndUpdate(id, req.body, {new: true});
if(!updatedBook) {
res.status(404).send({message: "Book is not Found!"})
}
res.status(200).send({
message: "Book updated successfully",
book: updatedBook
})
} catch (error) {
console.error("Error updating a book", error);
res.status(500).send({message: "Failed to update a book"})
}
}

const deleteABook = async (req, res) => {


try {
const {id} = req.params;
const deletedBook = await Book.findByIdAndDelete(id);
if(!deletedBook) {
res.status(404).send({message: "Book is not Found!"})
}
res.status(200).send({
message: "Book deleted successfully",
book: deletedBook
})
} catch (error) {
console.error("Error deleting a book", error);
res.status(500).send({message: "Failed to delete a book"})
}
};
module.exports = {
postABook,
getAllBooks,
getSingleBook,
UpdateBook,
deleteABook
}
Book.modal.js (file)

const mongoose = require('mongoose');

const bookSchema = new mongoose.Schema({


title: {
type: String,
required: true,
},
description: {
type: String,
required: true,
},
category: {
type: String,
required: true,
},
trending: {
type: Boolean,
required: true,
},
coverImage: {
type: String,
required: true,
},
oldPrice: {
type: Number,
required: true,
},
newPrice: {
type: Number,
required: true,
},
createdAt: {
type: Date,
default: Date.now,
}
}, {
timestamps: true,
});

const Book = mongoose.model('Book', bookSchema);


Book.route.js (file)

const express = require('express');


const Book = require('./book.model');
const { postABook, getAllBooks, getSingleBook, UpdateBook, deleteABook } =
require('./book.controller');
const verifyAdminToken = require('../middleware/verifyAdminToken');
const router = express.Router();

// post a book
router.post("/create-book", verifyAdminToken, postABook)

// get all books


router.get("/", getAllBooks);

// single book endpoint


router.get("/:id", getSingleBook);

// update a book endpoint


router.put("/edit/:id", verifyAdminToken, UpdateBook);

router.delete("/:id", verifyAdminToken, deleteABook)

module.exports = router;
Order.controller.js (file)

const Order = require("./order.model");

const createAOrder = async (req, res) => {


try {
const newOrder = await Order(req.body);
const savedOrder = await newOrder.save();
res.status(200).json(savedOrder);
} catch (error) {
console.error("Error creating order", error);
res.status(500).json({ message: "Failed to create order" });
}
};

const getOrderByEmail = async (req, res) => {


try {
const {email} = req.params;
const orders = await Order.find({email}).sort({createdAt: -1});
if(!orders) {
return res.status(404).json({ message: "Order not found" });
}
res.status(200).json(orders);
} catch (error) {
console.error("Error fetching orders", error);
res.status(500).json({ message: "Failed to fetch order" });
}
}

module.exports = {
createAOrder,
getOrderByEmail
};
Order.model.js (file)

const mongoose = require('mongoose');

const orderSchema = new mongoose.Schema({


name: {
type: String,
required: true,
},
email:{
type: String,
required: true,
},
address: {
city: {
type: String,
required: true,
},
country: String,
state: String,
zipcode: String,
},
phone: {
type: Number,
required: true,
},
productIds:[
{
type: mongoose.Schema.Types.ObjectId,
ref: 'Book',
required: true,
}
],
totalPrice: {
type: Number,
required: true,
}
}, {
timestamps: true,
})

const Order = mongoose.model('Order', orderSchema);


Order.route.js (file)

const express = require('express');


const { createAOrder, getOrderByEmail } = require('./order.controller');

const router = express.Router();

// create order endpoint


router.post("/", createAOrder);

// get orders by user email


router.get("/email/:email", getOrderByEmail);

module.exports = router;
Middleware (folder)

const jwt = require('jsonwebtoken');


const JWT_SECRET = process.env.JWT_SECRET_KEY

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


const token = req.headers['authorization']?.split(' ')[1];

// console.log(token)

if (!token) {
return res.status(401).json({ message: 'Access Denied. No token provided' });
}
jwt.verify(token, JWT_SECRET, (err, user) => {
if (err) {
return res.status(403).json({ message: 'Invalid credientials' });
}
req.user = user;
next();
})

module.exports = verifyAdminToken;
User.model.js (file)

const mongoose = require('mongoose')


const bcrypt = require('bcrypt');

const userSchema = new mongoose.Schema({


username: {
type: String,
required: true,
unique: true
},
password: {
type: String,
required: true
},
role: {
type: String,
enum: ['user', 'admin'],
required: true
}
})

userSchema.pre('save', async function( next) {


if(!this.isModified('password')) return next();
this.password = await bcrypt.hash(this.password, 10);
next();
}
)

const User = mongoose.model('User', userSchema);

module.exports = User;
User.route.js (file)

const express = require('express');


const User = require('./user.model');
const jwt = require('jsonwebtoken');

const router = express.Router();

const JWT_SECRET = process.env.JWT_SECRET_KEY

router.post("/admin", async (req, res) => {


const {username, password} = req.body;
try {
const admin = await User.findOne({username});
if(!admin) {
res.status(404).send({message: "Admin not found!"})
}
if(admin.password !== password) {
res.status(401).send({message: "Invalid password!"})
}

const token = jwt.sign(


{id: admin._id, username: admin.username, role: admin.role},
JWT_SECRET,
{expiresIn: "1h"}
)

return res.status(200).json({
message: "Authentication successful",
token: token,
user: {
username: admin.username,
role: admin.role
}
})

} catch (error) {
console.error("Failed to login as admin", error)
res.status(401).send({message: "Failed to login as admin"})
}
})
module.exports = router;
Database:

Admin table

Field Name Description

_Id Unique identifier for the admin

Password The admin's password

Email The admin's email address

User table

Field Name Description

_Id Unique identifier for each user

Password The user's password stored securely

Email The user's email address

Full Name The user's full name

Shipping Address The user's shipping address

Order History A list of the user's past orders

Books collection table

Field Name Description

_Id Unique identifier for each book

Title The title of the book

Author The author of the book

Price The price of the book

Description A summary or description of the book


Validation checks

Introduction

Validation plays a critical role in ensuring the security, accuracy and reliability of any application
to ensure data is correct, the application works smoothly, and it's secure. For this bookstore project,
validation is needed at different stages.

Keep data accurate and reliable:

This means preventing incorrect or inconsistent information from being saved, which is essential
for the bookstore's data integrity.

Help users correct mistakes easily:

By providing clear and immediate feedback, users can fix errors before submitting data,
improving their experience.

Prevent errors and crashes:

Valid data helps avoid unexpected issues that could disrupt the application's functionality.

Protect against attacks like SQL injection:

Validation can sanitize user input to prevent malicious code from being injected into the
database.

Frontend Validation

Frontend validation happens in the React application and is the first defense against bad data. It
gives users immediate feedback and reduces server load.

Common Checks:

Required fields:

Ensures that essential fields, such as book title, author, and price, are filled before submission.

Correct data types (e.g., number, email):

Verifies that the input matches the expected data type, preventing errors when processing the data.

Password complexity:

Enforces rules for password strength, such as minimum length, and the inclusion of uppercase
letters, lowercase letters, numbers, and special characters, to enhance security.

Immediate error messages for users:


Provides instant feedback, allowing users to correct mistakes before submitting the form and
improving the user experience.

Backend Validation

Backend validation in Node.js and Express.js is a critical defense. It ensures data is valid no matter
how it's sent to the server.

Common Checks

Required fields:

Verifies that all necessary data is present in the request.


Correct data types:

Ensures that the data received matches the expected types (e.g., a number for price, a string for
title).

Authentication and authorization:

Verifies user credentials and permissions to ensure that only authorized users can perform certain
actions, such as adding or modifying book information.

Correct formats:

Checks that data adheres to specific formats (e.g., email address format, date format) using regular
expressions or other methods.

Database Validation

MongoDB also validates data to provide a final safeguard.

Common Checks:

Required fields:

Ensures that specified fields must be present in the document.

Data types:

Enforces the expected data type for each field (e.g., String, Number, Date).

Keep rules updated:

Ensure that database schema and validation rules are kept up to date with the application's
requirements and business logic.
Implementation and maintenance

Introduction

First, we'll take the design and requirements and turn them into a real, working application. This
involves setting up our tools, organizing the project, creating the different parts, and making sure
they all work together.

After the application is launched, we need to maintain it. This means fixing any problems,
applying updates, and making sure it stays secure, performs well, and continues to meet the
needs of the business.

Implementation Strategy

use a flexible approach to build the application, delivering pieces of it in stages. This lets us get
feedback early and make changes as needed. We'll also emphasize reusable components and
write tests as we go to ensure quality.

Agile Development:

break the project into small chunks, delivering working features in each chunk. This helps us get
feedback and adapt to changes.

Modular Design:

build the application using reusable building blocks. This makes the code easier to understand,
fix, and update.

Version Control:

use Git to track all the changes to the code. This allows multiple developers to work together and
makes it easy to go back to previous versions if needed.
Key Implementation Components

Frontend

use reusable components to build the user interface.

use React state management features to handle data within the application.

use React Router to handle navigation between different pages.

use Tailwind CSS to style the user interface.

use async/await and fetch to communicate with the backend.

Backend

create our own API using Express.js and Node.js for the frontend to communicate with.
define API routes using Express.js.
use Express middleware for tasks like handling requests, security, and errors.
use Mongoose to interact with the MongoDB database.

Database

use MongoDB to store the application's data.

define the structure of the data using Mongoose.

perform standard database operations like creating, reading, updating, and deleting data.

Maintenance Plan

Security Updates:

stay up to date on security vulnerabilities, including those in our own API code.

apply security patches and updates promptly.


Performance Monitoring:

monitor server, application, and database performance to identify and address any issues,
including the performance of our API.

Feature Enhancements:

collect user feedback to identify areas for improvement.

prioritize new features based on user needs.

release new features in stages.


Testing
Testing is the process of executing a program with the intent of finding errors. Software testing is
a processor a series of processes, designed to make sure computer code does what it was designed
to do and that it does not do anything unintended. Software should be predictable and consistent,
offering no surprises to users. The purpose of testing can be quality assurance, verification, and
validation, or reliability estimation. Software testing is to assess and evaluate the quality of work
performed at each step of the software development process. The goal of testing is to ensure that
the software perform as intended, and to improve software quality, reliability and maintainability
Testing is a critical phase in the development lifecycle of the Online Bookstore. It ensures that the
application functions correctly and meets all specified requirements. Below is a detailed
breakdown of the testing process, including the test plan, testing methodologies, and results.

Test Plan

The primary objective of testing is to validate that the software performs as intended, thereby
improving its quality, reliability, and maintainability. This involves:

Functional Testing:

Validating each system function against the defined requirements.

Non-functional Testing:

Assessing performance, usability, and security aspects.

The following testing types were employed:

Black Box Testing:

This method focuses on the system's functionality without knowledge of its internal code
structure. Test cases are derived from requirements and specifications.

White Box Testing:

This method focuses on the system's internal structure, examining code paths, branches, and
conditions. Test cases are designed to ensure code coverage.
Black Box Testing: Test Cases and Results

The following table summarizes the black box testing performed on admin dashboard, along with
the expected and actual results:

Test Case Description Input Expected Result Actual


Result
Pass
Login Verify that Valid username Successful login
Functionality administrators can and password and redirection to
log in with valid the respective
credentials. dashboard.
Pass
Add Book Verify that an Category name New categories are
Category administrator can and code added and listed.
add a new book
category.
Pass
Add Book Verify that an Book title, A new book is
Record administrator can category, year, added to the
add a new book price, stock, inventory and
record. author, publisher, displayed in the
cover photo list.
Pass
View Verify that an None Transaction history
Transaction administrator can is displayed with
History view the correct details.
transaction history.

Pass
User Verify that an User details for User is
Management administrator can add/update, user added/updated/rem
add, update, and ID for delete oved successfully.
remove users.
Pass
View Total Verify that the None Earnings are
Earnings administrator can displayed correctly.
view total earnings
within the last 24
hours.
The following table summarizes the black box testing performed on User dashboard, along with
the expected and actual results:

Test Case Description Input Expected Result Actual


Result
User Verify that a new Valid name, User account is created, Pass
Registration user can register email, password, and the user is logged in
successfully. and address. or redirected to the login
page with a success
message.
User Login Verify that a Valid email and User is logged in and Pass
registered user password. redirected to the user
can log in dashboard.
successfully.
View Book Verify that a user Click on a book The book details page is Pass
Details can view the in the catalog or displayed with a full
details of a search results. description, reviews, etc.
specific book.
Add Book to Verify that a user Click the "Add to The book is added to the Pass
Cart can add a book Cart" button on a shopping cart, and the
to their shopping book details cart is updated.
cart. page or in the
catalog.
View Verify that a user Click on the The shopping cart page is Pass
Shopping can view the "View Cart" or displayed with the
Cart contents of their shopping cart selected books,
shopping cart. icon. quantities, and total
price.
Remove Verify that a user Click the The book is removed from Pass
Book from can remove a "Remove" or the shopping cart, and the
Cart book from their "Delete" button cart is updated.
shopping cart. next to a book in
the shopping
cart.
Proceed to Verify that a user Click the The user is taken to the Pass
Checkout can proceed to "Checkout" or checkout page, where
the checkout "Proceed to they can enter shipping
process. Checkout" and payment information.
button in the
shopping cart.
Complete Verify that a user Enter valid The order is placed, and Pass
Order can complete an shipping and the user receives an order
order. payment confirmation. The order
information details are saved.
View Order Verify that a user Go to "My A list of the user's past Pass
History can view their Account" or orders is displayed, with
order history. "Order History". details.
Results and Findings
The testing process yielded the following results:

Functionality:
All functional requirements were met, and no major defects were found.

Performance:
The system performed satisfactorily under expected load conditions.

Usability:
The user interface was found to be intuitive and user-friendly.

Security:
Basic security tests, including input validation and user authentication, were passed.

Code Quality:

The codebase is well-structured and adheres to best practices, with high code coverage achieved
in white box testing.
The overall assessment indicates that the Online Bookstore is stable, functional, and ready for
deployment. The combined approach of black box and white box testing has effectively validated
both the functional and structural aspects of the system. All identified issues have been resolved,
and the system meets the specified requirements.

Unit Testing

Unit testing involves testing individual units or components of the software to ensure they function
as intended. For this project, unit testing focused on the smallest testable parts of the application,
such as functions and methods within the modules. This testing was conducted in parallel with the
coding phase, with each module tested as it was developed.

Validation Testing

Validation testing was conducted to verify that the system functions correctly under various
conditions, including incorrect function calls, input errors, database errors, and
initialization/interface errors.

Functional Validation
Functional validation was performed to ensure the code produces the expected output. This process
is like black box testing, focusing on the code's accuracy in delivering the required results.
Screen shots of project

Login Page

Landing Page
Catalog page

Cart Page
Checkout Page

Order History
Wishlist Page

Admin Login Page


Admin Dashboard Page
Manage Book Page

Add Book Page


Future Scope and Further Enhancement
While the current system fulfills the essential requirements of an online bookstore, several
avenues exist for future enhancements and expansions:

Enhanced Reporting and Analytics:

Implement advanced reporting features to provide deeper insights into sales trends, popular book
categories, and customer preferences. This could involve:

Customizable report generation

Data visualization dashboards

Predictive analytics for sales forecasting

Customer Relationship Management (CRM):

Develop CRM functionalities to effectively manage customer information, preferences, purchase


history, and feedback. This could include:

Customer segmentation and targeting

Personalized recommendations and marketing campaigns

Feedback collection and analysis tools

Loyalty programs and rewards systems


Multi-channel Integration:

Integrate the bookstore system with online marketplaces and e-commerce platforms to expand
reach and distribution channels. This could involve:

API integration with platforms like Amazon, eBay, etc.

Centralized inventory management across multiple channels

Streamlined order processing and fulfillment

Mobile Application Development:

Develop a mobile application for customers to browse, purchase, and track orders conveniently
from their smartphones or tablets. This could include:

Native apps for iOS and Android platforms

User-friendly interface optimized for mobile devices

Push notifications for updates and promotions

Offline browsing capabilities


Bibliography
The following resources were used during the development of this project:

Tailwind CSS Documentation:

For styling the user interface.

React Documentation:

A JavaScript library for building user interfaces.

Redux Documentation:

For managing application state.

Geeks for Geeks:

For technical information and tutorials.


Conclusion
The Online Bookstore System is a comprehensive and highly functional web-based application
designed to streamline and automate bookstore operations. It provides administrators and
employees with the tools necessary to efficiently manage book inventories, sales transactions, user
accounts, and overall bookstore operations.

Key benefits and outcomes of implementing this system include improved operational efficiency,
as it automates and streamlines processes such as inventory, sales transactions, and user accounts,
leading to significant time and cost savings. The system also enhances accuracy by centralizing
and digitizing data entry and transaction recording, which reduces the likelihood of human error
and ensures that records are consistently up-to-date and accurate.

Enhanced security is another benefit, with role-based access control ensuring that sensitive data
and functionalities are accessible only to authorized users, protecting the system from unauthorized
access and potential security breaches. Furthermore, the system provides real-time insights into
sales and earnings, enabling prompt decision-making and strategic planning.

In summary, the Online Bookstore System effectively addresses the core needs of managing a
bookstore. Its intuitive user interface and robust functionality improve operational efficiency,
enhance accuracy in inventory and sales tracking, ensure data security, and provide real-time
financial insights. This project not only meets the practical requirements of a bookstore but also
serves as a valuable learning resource for understanding and developing web-based systems.

You might also like