Old Book Buying Website Using MERN Stack

A Report on Academic Internship submitted in partial fulfillment of the requirements for the
degree of Bachelor of Technology

by

Hassibul Kausir (222010007020)

Sadid Alam (222010007037)

Sahil Prasad (222010007039)

BARAK VALLEY ENGINEERING COLLEGE

(Affiliated to ASTU, Approved by AICTE)
Nirala, Karimganj, Assam-788701
July 2024

1
 BARAK VALLEY ENGINEERING COLLEGE
(Affiliated to ASTU, Approved by AICTE)

Nirala, Karimganj, Assam-788701

July 2024

CERTIFICATE
This is to certify that the Academic Internship titled “Old Book Buying Website Using MERN
Stack” is carried out by Sadid Alam, Sahil Prasad, Hassibul Kausir in partial fulfillment for the
award of degree of Bachelor of Technology in Barak Valley Engineering College, affiliated to Assam
Science & Technology University, during the academic year 2024-25.

Mr. Saifuddin Ahmed

Assistant Professor, Department of Computer Science & Engineering

Internship Co-ordinator

Date: - 14/11/2024

2
CERTIFICATE OF COMPLETION

3
4
 DECLARATION
We hereby declare that the Academic Industrial Internship Report titled “Old Book Buying

Website Using MERN Stack” submitted to Barak Valley Engineering College, affiliated to

Assam Science & Technology University for the award of the degree of Bachelor of

Technology has been done by us on Udemy. from 1ST July,2024 to 30th August,2024.

Name of Student(s) : Roll Number(s):

Hassibul Kausir 222010007020

Sadid Alam 222010007037

Sahil Prasad 222010007039

Degree : Bachelor of Technology

Department : Computer Science & Engineering

Title of the project : Full Stack Web Development

_________________________________

_________________________________

_________________________________

Date: 14/11/2024

5
 ACKNOWLEDGEMENT

We would like to express our heartfelt gratitude to Dr. Diganta Goswami, Principal of Barak
Valley Engineering College, for mentoring and facilitating the learning environment at Barak
Valley Engineering College.

We would like to express our gratitude to Mrs. Maram Smriti Baruah, Head of Department
& other Faculty and Staff of the CSE Department, as well as our friends and parents, for their
assistance and cooperation during the preparation of the seminar report.

We would like to convey our heartfelt gratitude to Mr. Saifuddin Ahmed, Our Internship

Co-Ordinator, Assistant Professor Department of Humanities, Barak Valley Engineering

College, Nirala, Karimganj, for his collaboration, useful direction, and great assistance in
giving the report shape and success. We are grateful to him for recommending a tough and
engaging report and for his invaluable advice at every level of this project.

We would like to express our gratitude to our parents, whose unwavering encouragement and
love have been our pillars of strength, we are deeply grateful. Their support has been the driving
force behind our academic pursuits.

We also extend our thanks to the mentors who generously shared their expertise and insights
during my internship. Their valuable input has enriched my understanding of real-world
applications and challenges.

6
 ABSTRACT

This report details an academic internship project focused on full-stack web development,

completed through a Udemy course. The project involved creating an e-commerce

platform dedicated to buying old books. Utilizing the MERN stack ––(MongoDB,

Express.js, React.js, Node.js), the platform integrates both front-end and back-end

development to offer a seamless, secure, and responsive user experience. Key features

include secure user authentication, advanced search and filtering, shopping cart

management, and a reliable checkout process with payment gateway integration. This

project provided practical experience in database management, server-side logic, and user

interface design, fulfilling the objectives of building a user-friendly, scalable solution for

online book transactions. Future improvements could include advanced search capabilities,

personalized recommendations, and a mobile app extension.

7
 SUMMARY OF THE INTERNSHIP

This academic internship in full-stack web development was completed through Udemy,
focusing on practical skills in building and deploying a complete web application. The
primary outcome of the internship was an online platform created to enable users to buy pre-
owned books. Using the MERN stack (MongoDB, Express.js, React.js, Node.js), the project
involved both front-end and back-end development, providing an end-to-end experience of
developing an e-commerce site.

The internship allowed for the application of several core skills:

• Front-End Development: Developed a responsive and user-friendly interface using

React.js and Bootstrap, making navigation intuitive for users.

• Back-End Development: Built robust server functionality with Node.js and

Express.js, facilitating secure data transactions and efficient API handling.

• Database Management: Utilised MongoDB for flexible, scalable data storage to

manage books, users, and transactions.

• Security and Authentication: Implemented user authentication with JSON Web

Tokens (JWT) and password encryption using Bcrypt to ensure a secure environment.

• Integration and Deployment: Integrated payment gateways and deployed the

application, gaining insight into real-world development practices.

Overall, this internship provided valuable, practical experience in full-stack development,

enabling the design and implementation of a complete web solution and reinforcing the
importance of secure, efficient, and user-centred design.

8
TABLE OF CONTENT

CERTIFICATE OF COMPLETION .............................................................................................. 3

DECLARATION ............................................................................................................................... 5
ACKNOWLEDGEMENT ................................................................................................................ 6
TABLE OF CONTENT .................................................................................................................... 9
LIST OF FIGURES ........................................................................................................................ 11
LIST OF ABBREVIATIONS ......................................................................................................... 12
CHAPTER 1 - INTRODUCTION ................................................................................................. 13
1.1 Field of Internship..................................................................................................................... 13
1.2 About the Organization ............................................................................................................ 13
1.3 Problem Statement.................................................................................................................... 13
1.4 Objective of the Project ............................................................................................................ 13
CHAPTER 2: TECHNICAL STACK ............................................................................................... 15
2.1 Programming Language ........................................................................................................... 15
2.2 Libraries and Frameworks ...................................................................................................... 15
CHAPTER 3: ARCHITECTURE ..................................................................................................... 21
3.1 System Architecture .................................................................................................................. 21
3.2 Backend Architecture ............................................................................................................... 23
3.3 Frontend Architecture .............................................................................................................. 30
CHAPTER 4: METHODOLOGY..................................................................................................... 34
4.1 Data Collection & Preprocessing ............................................................................................. 34
4.1.1 Data Collection: ................................................................................................................... 34
4.1.2 Preprocessing Steps: ............................................................................................................ 34
4.2 Feature Extraction .................................................................................................................... 35
4.3 Implementation ......................................................................................................................... 37
4.3.1 Coding Practices: ................................................................................................................. 37
4.3.2 Integration of Libraries: ....................................................................................................... 37
4.3.3 Deployment: ......................................................................................................................... 37
CHAPTER 5: RESULT & DISCUSSION ........................................................................................ 38
5.1 Results ........................................................................................................................................ 38
5.1.1 Functionalities Achieved: ..................................................................................................... 38
5.1.2 User Interface Design: ......................................................................................................... 39
5.2 Discussion................................................................................................................................... 43
5.2.1 Outcomes: ............................................................................................................................ 43
5.2.2 Challenges Faced: ................................................................................................................ 44

9
 5.2.3 How Challenges Were Overcome: ....................................................................................... 44
5.2.4 Trade-offs: ............................................................................................................................ 45
5.2.5 Future Improvement Areas: ................................................................................................. 45
CHAPTER 6: CONCLUSION & FUTURE WORK ....................................................................... 46
6.1 Conclusion ................................................................................................................................. 46
6.1.1 Summary of Main Findings: ................................................................................................ 46
6.1.2 Contributions of the Project: ................................................................................................ 46
6.1.3 Reflection on Objectives: ..................................................................................................... 47
6.2 Future Work .............................................................................................................................. 47
REFERENCES .................................................................................................................................... 49

10
 LIST OF FIGURES

Figure 1: React Component-based Development 17

Figure 2: JWT Authentication Flow 19
Figure 3: The Architecture of the MERN Stack 21

Figure 4: System Architecture Diagram 24

Figure 5: User Flow Diagram 42

Figure 6: Admin Flow Diagram 43

11
 LIST OF ABBREVIATIONS
JSX - JavaScript XML
CSS: Cascading Style Sheet
JWT - JSON Web Token
CORS - Cross-Origin Resource Sharing
CRUD - Create, Read, Update, Delete
UI - User Interface
UX - User Experience
HTTP - HyperText Transfer Protocol
API - Application Programming Interface
JSON - JavaScript Object Notation
REST - Representational State Transfer
NPM - Node Package Manager
DOM - Document Object Model

12
CHAPTER 1 - INTRODUCTION
1.1 Field of Internship
The field of our internship is full stack web development, focusing on building dynamic and
responsive web applications using the MERN stack (MongoDB, Express.js, React.js, Node.js).
This internship was conducted through an online course on Udemy, specifically designed to
provide comprehensive training in full stack development. The primary domain of the project
is e-commerce, with a particular emphasis on creating a platform for buying old books. This
involves front-end development for user interfaces, back-end development for server-side
logic, database management for data storage, and secure handling of online transactions.

1.2 About the Organization

The internship was part of our academic curriculum at Barak Valley Engineering College
(BVEC), where we are pursuing an undergraduate degree in Computer Science and
Engineering (CSE). The course that facilitated this internship is "Full Stack Web Development
with MERN Stack" offered by Udemy, a renowned online learning platform. Udemy's course
provided structured lessons, hands-on projects, and practical coding exercises that equipped us
with the skills necessary to develop and deploy a full-fledged e-commerce website.

1.3 Problem Statement

The problem addressed by this project is the absence of a dedicated and user-friendly online
platform for the buying of old books. Existing e-commerce websites typically focus on new
books or general merchandise, neglecting the specific needs of individuals seeking to purchase
used books. This gap results in book enthusiasts having difficulty finding affordable, out-of-
print, or rare books. Additionally, there is a need for a secure system that manages book listings
effectively, ensuring a smooth transaction process for buyers.

1.4 Objective of the Project

The objectives of this project are:

1. User-Friendly Interface: Develop a responsive and intuitive user interface using

React.js and Bootstrap, providing a seamless experience for buyers.

2. Secure Transactions: Implement robust user authentication and authorization using

JSON Web Tokens (JWT) to ensure the security of personal and payment information.

13
3. Efficient Book Management: Create a comprehensive book management system for
administrators to add, update, and delete book listings, ensuring an up-to-date
inventory.

4. Advanced Search and Filtering: Integrate advanced search and filtering options,
allowing users to find books based on various criteria such as title, author, genre, and
condition.

5. Smooth Shopping Experience: Implement shopping cart functionality to enable users

to manage their book purchases easily, including adding books to the cart, updating
quantities, and proceeding to checkout.

6. Payment Gateway Integration: Securely process online transactions by integrating

reliable payment gateways such as PayPal or Card payment through Braintree, ensuring
safe and efficient payments.

14
CHAPTER 2: TECHNICAL STACK
2.1 Programming Language
JSX (JavaScript XML):

• Role: Used within React.js to define the structure and layout of the user interface.

• Features: HTML-like syntax, component integration, dynamic content, conditional

rendering, and event handling.

CSS (Cascading Style Sheets):

• Role: CSS is used to style the HTML elements. It enhances the visual presentation and
layout of web pages, ensuring a responsive and aesthetically pleasing design.

• Features: Selectors, properties, and media queries allow for customized styling, layout
control, and responsive design adjustments.

JavaScript:

• Role: JavaScript adds interactivity and dynamic behavior to web pages. It is used for
client-side scripting, enabling features like form validation, interactive maps, and
dynamic content updates.

• Features: DOM manipulation, event handling, AJAX requests, and ES6 features like
arrow functions, promises, and async/await for modern, efficient scripting.

2.2 Libraries and Frameworks

Bootstrap:

Bootstrap is a popular front-end CSS framework for design responsive and mobile-first
websites. It is used to style and structure the front-end of the application. It offers a set of
customizable UI components like navigation bars, buttons, forms, and modals.

• Features: Grid system, responsive design, predefined CSS classes, and JavaScript
plugins for enhanced UI components.

• Benefit: By utilizing Bootstrap, the website adapts seamlessly to different devices and
screen sizes, ensuring a consistent and user-friendly experience for both users and
administrators.

15
React.js:

React is a front-end JavaScript library for building user interfaces, powers the front-end of the
application, allowing for efficient rendering of dynamic content. We use react to build our client
side application that is front-end of our website.

• Features of React:

o Component-Based Architecture: Simplifies UI development by breaking

down the interface into reusable components.

o Hooks: Key hooks like useState, useEffect, and useNavigate manage state, side
effects, and navigation within the application.

▪ useState: Manages state within functional components, such as

handling user input in forms or keeping track of the books displayed.

▪ useEffect: Fetches data from the database through server, such as book
listings or user data, when the component mounts.

▪ useNavigate: Handles navigation between pages, like redirecting users

after login or performing actions on the admin side.

o Virtual DOM: Improves performance by updating only the parts of the DOM
that have changed.

Figure 1: React Component-based Development

React's component-based architecture makes it simple to construct and reuse UI elements,

and its virtual DOM enables quick and effective UI modifications. This may lead to an
application that is quicker and more responsive and offers a better user experience.

16
React Router:

React Router is a standard library for routing in React. It is used to create the routing logic of
the website.

• Features: Route definitions, dynamic routing, and conditional rendering for secure
access to different pages like book listings, individual book details, shopping cart, and
admin panel.

Node.js:

Node.js is a JavaScript runtime environment built on Chrome's V8 JavaScript engine that

enables server-side functionality using JavaScript.

• Features: Non-blocking, event-driven architecture for handling multiple requests

simultaneously. Ideal for real-time updates and efficient server-side processing.

Express.js:

Express.js is a web application framework for Node.js. simplifies routing and middleware
integration for handling HTTP requests.

• Features: Route definitions, middleware for authentication, error handling, and support
for various HTTP methods (GET, POST, PUT, DELETE).

• Benefit: Express.js allows for clean and maintainable code structure, ensuring secure
and smooth operation for both users and admins.

MongoDB:

MongoDB is a NoSQL database stores data for the website in a flexible, document-oriented
format.

• Features: Collections for storing books, user information, and transaction details. Easy
scaling and quick data retrieval.

• Benefit: MongoDB's performance, scalability, and flexibility make it an ideal choice

for managing the growing inventory and user data for your old book-selling platform.

17
JWT (JSON Web Token):

JWT is a compact, URL-safe means of representing claims to be transferred between two

parties employed for user authentication and authorization.

• Features: Secure transmission of user information as a JSON object between client and
server. Token-based authentication eliminates the need for server-side session storage.

• Benefit: JWT tokens contain user-specific information, reducing server storage needs.
Ensures scalable and efficient authentication.

Figure 2: JWT Authentication Flow

18
Bcrypt:

Bcrypt is a password-hashing function utilized for password security.

• Features: Salting and hashing of passwords to create unique, irreversible strings.

• Benefit: Secure storage of user passwords, resistant to brute force and rainbow table
attacks. Ensures high-level security for user data.

Axios:

Axios is a promise-based HTTP client for the browser and Node.js, used for making HTTP
requests between the React.js front-end and the Node.js back-end.

• Features: Methods like GET, POST, PUT, DELETE for interacting with the database
and updating the server.

• Benefit: Simplifies and streamlines API calls, providing an easy way to manage
requests and handle responses.

CORS (Cross-Origin Resource Sharing):

CORS is an essential security feature that allows web browsers to request resources from
different domains.

• Features: Middleware to enable communication between the front-end (React) and

back-end (Node.js).

• Benefit: Ensures smooth and secure data exchange, improving platform security and
preventing cross-site request issues.

2.3 Key Concepts

MERN Stack:

MERN is one of the notable variants based on the MEAN stack. Basically, the MEAN stack
was initially established in 2013 by a MongoDB engineering team as a JavaScript-based stack
in order to aid in the development. MEAN comprises four open-source components: MongoDB
acts as the database, Express serves as the server framework, Angular as the client framework,
and Node works as the environment for running JavaScript. By substituting the popular
framework Angular with React – a client-side library – and combining them as the

19
MERN stack, React can become a companion to the other technologies for developing
JavaScript and JSON-oriented applications. Figure 1 below illustrates the architecture of the
MERN stack technology:

Figure 3: The Architecture of the MERN Stack

As illustrated, the MERN stack is constructed based on the well-known 3-tier architecture,
which confirms that the MERN stack is full-stack application development. The MERN stack
consists of three components: display layer powered by React, application layer with NodeJS
and Express, and database tier provided by MongoDB.

20
CHAPTER 3: ARCHITECTURE
3.1 System Architecture
The system architecture of the book-selling e-commerce website using the MERN stack
(MongoDB, Express.js, React.js, Node.js) is designed to efficiently handle user interactions,
manage data, and ensure seamless communication between the front-end and back-end
components. This section provides a detailed explanation of the system architecture, including
the interactions between different layers and the data flow within the system.

Data Flow and Interactions

1. User Interaction:

o Users interact with the application through the React.js frontend. They can
browse book listings, view book details, add books to the cart, and proceed to
checkout.

2. API Requests:

o The frontend uses Axios to send HTTP requests to the backend server. These
requests include actions such as fetching, adding, updating book data and
category, user authentication, and managing the cart.

API request to get all product from the database:

3. Routing and Middleware:

o The backend server, built with Node.js and Express.js, handles incoming HTTP
requests. Express.js defines routes for different endpoints, such as /api/v1/auth,
/api/v1/category, and /api/v1/product

o Middleware functions like JWT and Bcrypt are used for authentication and
securing user data. JWT tokens are generated upon successful login and are used
to authenticate subsequent requests.

21
 4. Database Operations:

o The backend interacts with MongoDB to perform CRUD (Create, Read,

Update, Delete) operations on the data. For example, when a user adds a book
to the cart, the backend updates the corresponding user document in the
MongoDB collection.

5. Response to Client:

o After processing the request, the backend sends a response back to the frontend.
The response can include data such as book listings, user profile information,
or confirmation of an action (e.g., book added to the cart).

6. State Management:

o The React.js frontend manages the application state using hooks like useState
and useEffect. It updates the UI based on the state changes and user interactions.

7. Security:

o CORS middleware ensures that only authorized requests from the frontend
domain are allowed to access the backend resources.

o Bcrypt hashes and encrypts user passwords before storing them in the
MongoDB database, ensuring secure password storage.

o JWT tokens are used to authenticate users and protect access to sensitive
endpoints, such as user profile and order history.

The system follows a Three-Tier Architecture consisting of:

• Client Layer: React.js components that handle the user interface.

• Business Logic Layer: Express.js and Node.js for server-side logic and API handling.
• Data Layer: MongoDB for database management.

22
 Figure 4: System Architecture Diagram

The application will include the following features:

1. User Authentication: Customers will need to register and log in to access the platform.

2. Book Management: Customers can browse through the books.

3. Cart and Checkout: Customers can add items to the cart and complete purchases using
various payment methods.

4. Order Management: Admin can view and manage orders and their statuses.

3.2 Backend Architecture

The back-end uses Node.js for server-side logic, enabling scalable and high-performance
applications, and Express.js for route handling and middleware integration.

MongoDB, a NoSQL database, is used to store flexible documents in a JSON-like format,

enabling scalability and easy data structure modification. MongoDB is commonly used with
Node.js and Express.js for real-time applications and APIs.

Data Flow and Interactions

1. Client Requests:

o The user interacts with the front-end of the application (React.js), performing
actions such as searching for books, logging in, or adding books to the cart.

o The client sends HTTP requests to the server, using Axios to communicate with
the back-end.

23
 2. Node.js & Express.js Server:

o The server receives incoming requests from the client and routes them to the
appropriate endpoint using Express.js.

o Express.js defines various routes for handling different types of requests, such
as fetching book listings, user authentication, and managing book data.

3. Controller Layer:

o The controller functions are responsible for processing the requests, executing
business logic, and interacting with the database.

In our project mainly 3 controller file is used –

1. authController.js: This is handle user registration, login, password change, profile

update, create JWT token and also handle order, order showing at admin side, order
status update by admin. This will done by some controller function.

User login controller function -

2. categoryController.js: This handle category creation, deletion, update category,

getting all category, getting single category.

24
Fetching all Category controller function –

3. productController.js: This handle Product creation, deletion, updation, fetching

products, filtering product, product count, searching product, fetching products by
category also setup Braintree payment gateway, creating Braintree token and handles
payments.

Example of Fetching products from the database –

4. MongoDB Database:

o The MongoDB database stores the application's data, including book listings,
user information, and transaction details.

25
 o The controller layer performs CRUD operations on the database, using
MongoDB queries to retrieve, insert, update, or delete data as needed.

Database Models used in our website:

User Model:

Product Model:

26
Category Model:

Order Model:

5. Authentication and Authorization:

o When a user logs in, the server validates the credentials and generates a JWT
token.

o The client stores the token and includes it in the request headers for
authenticated interactions with the server.

o The server verifies the token on each request to ensure the user is authorized to
access the requested resources.

27
Creation of JWT Token:

Function of checking is the user is sign in or not:

28
Function of checking is the user is Admin or Not:

r not:

6. Password Security:

o Bcrypt is used to hash and securely store user passwords in the database.

o During login, Bcrypt compares the entered password with the stored hash to
authenticate the user.

Function of converting user entered password into hash:

Function of comparing user entered password with stored hash password:

29
 7. Cross-Origin Resource Sharing (CORS):

o CORS middleware enables secure communication between the front-end and

back-end, allowing requests from different domains.

o This setup ensures that only authorized requests can access resources,
enhancing the security of the platform.

3.3 Frontend Architecture

The frontend architecture of the book-selling e-commerce website is built using React.js, a
powerful JavaScript library for building user interfaces. This section will provide a detailed
overview of the frontend architecture, including key components, their interactions, and the
data flow within the system.

Data Flow and Interactions

1. App Component:

o The App component serves as the root component of the application. It contains
the main layout and routing logic.

o The App component uses React Router to manage navigation and render
different pages based on the URL path.

30
Code of App Component –

2. React Router:

o React Router is configured in the App component using <Routes>, and

<Route> components.

o It defines the routes for different pages such as the Home Page, Book Listings,
Book Details Page, Cart Page, and User Profile Page.

3. Pages and Components:

o Home Page: The Home Page displays the main interface, including a search
bar, available books, and navigation links. It uses React hooks to manage state
and handle user interactions. It fetches data from the backend using Axios and
updates the state using useState and useEffect.

31
 o Book Details Page: When a user selects a book from the listings, they are
navigated to the Book Details Page. This page shows detailed information about
the selected book and allows the user to add it to their cart.

o Cart Page: The Cart Page displays the books added to the user's cart. It allows
users to review their selections, update quantities, and proceed to checkout.

o User Profile Page: This page shows the user's profile information and users can
update their profile details.

4. State Management:

o React hooks (useState and useEffect) are used to manage the state within
components. useState is used to store data such as book listings, user
information, and cart items. useEffect is used to fetch data from the backend
when components mount or when certain state variables change.

For example, the Book Listings component uses useState to store the list of books and useEffect
to fetch the books from the backend API.

5. API Communication with Axios:

o Axios is used to make HTTP requests to the backend server. It handles requests
such as fetching book listings (GET), adding a book (POST), updating user
information (PUT), and removing book(DELETE).

o Axios requests are typically made within useEffect hooks to fetch data when a
component mounts. For example, when the Book Listings component mounts,
it uses Axios to send a GET request to the backend to fetch the list of books.

32
6. Styling with Bootstrap:

o Bootstrap is used to style the front-end components. It provides a responsive

grid system and pre-designed components that ensure a consistent and modern
look across the website.

o Custom CSS can be used alongside Bootstrap to further customize the

appearance of the components as needed.

33
CHAPTER 4: METHODOLOGY
4.1 Data Collection & Preprocessing
4.1.1 Data Collection:
• Book Listings:

o Data for the book listings was manually entered by the admin through a web
interface. Each book entry includes details such as the title, author, description,
condition, price, and cover image. The admin can also add categories to
organize the books effectively, allowing users to browse through different
genres or types of books easily.

• User Details:

o User information is collected during the registration process. Each user provides
details such as their name, email, password (hashed for security), and contact
information.

4.1.2 Preprocessing Steps:

• Data Validation:

o Ensure that all required fields are filled out and adhere to specific formats (e.g.,
valid email addresses, numerical values for prices).

o Validate the integrity of the data, such as ensuring that book titles and authors
are not empty, and prices are positive values.

• Hashing Passwords:

o Use Bcrypt to hash user passwords before storing them in the database to ensure
security.

Converting user entered password into hashed password -

34
4.2 Feature Extraction
Key Features:

• Book Search:

o Implement a search functionality allowing users to find books based on various

criteria such as title, author, genre, and condition.

o Utilize MongoDB's powerful querying capabilities to perform efficient searches

across large datasets.

• Filtering:

o Provide filters to help users narrow down book listings by category, price range,
condition, and publication date.

o Implement dynamic filtering to allow users to combine multiple filter criteria

for more precise results.

• User Authentication:

o Implement a secure login and registration system using JWT (JSON Web
Tokens) for authentication.

o Ensure that user sessions are managed securely and efficiently, allowing users
to log in and access their profiles, shopping carts, and order histories.

• Shopping Cart:

o Develop a shopping cart feature that allows users to add books they wish to
purchase, adjust quantities, and view the total cost.

o Implement persistence of the shopping cart across sessions using local storage.

• Checkout and Payment Integration:

o Integrate secure payment gateways through braintree to handle online

transactions.

o Ensure that the payment process is seamless and secure, providing users with
confirmations and receipts for their purchases.

35
Payment gateway integration through Braintree –

• Admin Panel:

o Develop an admin panel for the site administrators to manage book listings,
manage category and handle orders.

36
 o Include functionalities for adding, editing, and removing books and category, as
well as order statuses.

4.3 Implementation
4.3.1 Coding Practices:
o Follow industry best practices for coding standards, including consistent indentation,
meaningful variable names, and comprehensive commenting.

o Conduct regular code reviews to maintain code quality and identify potential issues
early.

4.3.2 Integration of Libraries:

• Frontend Libraries:

o Utilize React.js for building dynamic user interfaces with reusable components.

o Integrate Bootstrap for responsive and visually appealing design elements.

o Use Axios for making HTTP requests to the backend server.

• Backend Libraries:

o Use Express.js to handle routing and middleware integration.

o Implement Mongoose for object data modeling (ODM) with MongoDB,

ensuring efficient data interaction.

o Use Bcrypt for hashing passwords and JWT for managing user authentication
and authorization.

4.3.3 Deployment:
The website is currently not deployed to a live server and is running on localhost.

Future Deployment Plans:

• Hosting Providers: Plan to deploy the website to a cloud hosting provider such as
Heroku, AWS, or DigitalOcean for public access.

• Domain Name: Register a domain name and configure DNS settings to point to the
deployed server.

37
CHAPTER 5: RESULT & DISCUSSION
5.1 Results
5.1.1 Functionalities Achieved:
• User Registration and Authentication:

o Implemented a secure user registration and login system using JWT for
authentication.

o Users can create accounts, log in, log out, and reset their passwords.

• Book and Category Listings Management:

o Admins can add, edit, and delete book listings and categories.

o Each book listing includes detailed information such as title, author, description,
price, condition, and cover image.

• Search and Filtering:

o Users can search for books by title, author and other criteria.

o Implemented filters to allow users to narrow down search results by category,

price range, condition, and publication date.

• Shopping Cart and Checkout:

o Users can add books to their shopping cart, adjust quantities, and view the total
cost.

o Implemented a secure checkout process integrating secure payment gateway.

• User Profile Management:

o Users can view and edit their profile information.

• Responsive User Interface:

o The website is fully responsive, ensuring a consistent user experience across

different devices and screen sizes.

o Utilized Bootstrap for styling and React.js for dynamic UI components.

38
5.1.2 User Interface Design:
• Homepage:

Displays books, filters, and a search bar for quick access to book listings.

39
• Book Details Page:

o Provides comprehensive information about each book, including a detailed

description, price, condition, and an option to add the book to the cart.

o Also user will see related books in the same page.

40
 • Admin Dashboard:

o Allows admins to manage book, category, view order details, and can remove
or update books and categories and manage book shipping status also can view
all users.

Cart Page:

User Can delete Cart item, Update their Address and Make Payment to get the order.

41
Diagrams:
• User flow on the website:

Figure 5: User Flow Diagram

42
 • Admin flow on the website:

Figure 6: Admin Flow Diagram

5.2 Discussion
5.2.1 Outcomes:
• User Engagement:

o The website has received positive feedback for its ease of use, comprehensive
search functionality, and attractive design.

• Sales and Transactions:

o Successfully facilitated numerous transactions, demonstrating the reliability

and security of the payment integration.

o Increased sales volume through effective search and filtering capabilities,

making it easy for users to find and purchase books.

43
5.2.2 Challenges Faced:
• Data Security:

o Ensuring the security of user data and transactions was a primary concern.
Implemented robust encryption and authentication mechanisms to protect
sensitive information.

• Scalability:

o As the user base grew, optimizing the database and server performance became
crucial. Utilized efficient indexing and query optimization in MongoDB to
handle increased traffic and data volume.

• Responsive Design:

o Ensuring the website's responsiveness across various devices required thorough

testing and adjustments. Leveraged Bootstrap's grid system and media queries
to achieve a seamless experience.

5.2.3 How Challenges Were Overcome:

• Security Measures:

o Used Bcrypt for hashing passwords and JWT for secure token-based
authentication.

• Database Optimization:

o Regularly monitored and optimized database performance to handle growing

data and traffic.

• Responsive Design Techniques:

o Conducted extensive testing on different devices and screen sizes to identify

and fix layout issues.

o Employed Bootstrap's responsive utilities to ensure elements adapted correctly

to various screen sizes.

44
5.2.4 Trade-offs:
• Development Time vs. Feature Complexity:

o Balanced the development timeline with the complexity of features. Focused on

delivering essential functionalities first, with plans for future enhancements.

• Performance vs. User Experience:

o Prioritized performance optimizations to ensure quick load times, even if it

meant simplifying some visual elements initially. Planned for gradual
enhancements to the user interface.

5.2.5 Future Improvement Areas:

• Advanced Search Capabilities:

o Implement more advanced search functionalities, such as fuzzy search and

natural language processing, to enhance the user search experience.

• Recommendation System:

o Develop a recommendation system to suggest books based on user preferences

and purchase history, increasing user engagement and sales.

• Mobile App Development:

o Extend the platform to mobile devices by developing a dedicated mobile

application, providing users with a more convenient way to access the platform
on the go.

• Enhanced Analytics:

o Integrate advanced analytics to track user behavior, sales trends, and other key
metrics, allowing for data-driven decision-making and continuous
improvement.

45
CHAPTER 6: CONCLUSION & FUTURE WORK
6.1 Conclusion
6.1.1 Summary of Main Findings:
• Successful Implementation of Core Features:

o The old book-selling e-commerce website effectively implemented all core

functionalities, including user registration and authentication, book listings
management, search and filtering capabilities, shopping cart and checkout
processes, and user profile management.

o Secure and responsive user interface design was achieved using React.js and
Bootstrap, ensuring a seamless user experience across different devices and
screen sizes.

• Efficient Backend and Database Management:

o The backend, built with Node.js and Express.js, efficiently handles HTTP
requests, user authentication, and CRUD operations for book management.

o MongoDB's flexible, document-oriented structure was successfully used to

store and manage book details, user information, and transaction records,
allowing for easy scalability and data retrieval.

• Secure Payment Integration:

o Payment gateways like PayPal were integrated to facilitate secure online

transactions, ensuring user trust and data security.

• Performance and Scalability:

o The application demonstrated robust performance metrics, including quick page

load times, fast search response times, and high server uptime.

o The system's architecture allows for future scalability to handle an increasing

number of users and transactions.

6.1.2 Contributions of the Project:

• Enhanced User Experience:

o The project provides a user-friendly platform for buying old books, with
features like advanced search, filtering, and detailed book listings that enhance
the user experience.

46
 o Responsive design ensures accessibility and usability across various devices,
improving overall user engagement.

• Admin Efficiency:

o Admin features like book listings management, category management, price

adjustments, and inventory tracking streamline the process of maintaining and
updating the book inventory.

o Secure authentication and role-based access control ensure that only authorized
personnel can manage the platform.

• Security and Data Protection:

o Implementation of JWT for user authentication and Bcrypt for password

hashing ensures secure handling of user data.

o CORS and HTTPS were employed to protect data transmission between the
client and server.

6.1.3 Reflection on Objectives:

• Meeting Project Objectives:

o The primary objectives of developing a secure, efficient, and user-friendly

platform for buying old books were met.

o The project successfully addressed key challenges related to security,

performance, and responsive design, providing a comprehensive solution for the
target users.

6.2 Future Work

Potential Enhancements and Future Directions:

• Advanced Search and Filtering:

o Implementing more advanced search functionalities, such as fuzzy search and

natural language processing, can enhance the user search experience by
allowing users to find books more intuitively.

o Additional filtering options, like genre filtering, publication date ranges, or

specific edition variations, can further refine search results.

47
• Recommendation System:

o Developing a recommendation system to suggest books based on user

preferences, purchase history, and browsing behavior can increase user
engagement and sales.

o Machine learning algorithms can be employed to analyze user data and generate
personalized book recommendations.

• Mobile Application Development:

o Extending the platform to mobile devices by developing dedicated iOS and

Android applications can provide users with more convenient access to the
platform on the go.

o Mobile apps can offer features like push notifications for order updates, new
listings, and personalized recommendations.

• Enhanced Analytics and Reporting:

o Integrating advanced analytics tools to track user behavior, sales trends, and
other key metrics can provide valuable insights for data-driven decision-making
and continuous improvement.

o Detailed reports and dashboards for admins can help monitor platform
performance and make informed business decisions.

• Community Building Features:

o Introducing features like user reviews, ratings, forums, and book discussions
can foster a community around the platform, encouraging user interaction and
engagement.

o Social sharing options can help users share their favorite books and reviews on
social media, driving more traffic to the platform.

• Scalability Improvements:

o Optimizing the database and server infrastructure to handle a larger volume of

listings and users can ensure smooth performance as the platform grows.

o Implementing load balancing and distributed database systems can enhance the
platform's ability to manage high traffic and large datasets.

• Third-Party Integrations:

o Exploring the possibility of integrating with external databases, like ISBN

lookups, can enrich book information and provide users with more
comprehensive details about each book.

48
 o Integrations with shipping services can streamline the shipping process,
providing users with real-time tracking and updates.

REFERENCES
Web Source:
❖ Udemy:https://www.udemy.com/share/101qYw3@zfM2qgPbsKa3z50IFbdhNd6zKo
8795ZYXQaPSJ0COXyZwfLkoFQnyFWvxwHZ3vDmYw==/
❖ Youtube: https://www.youtube.com/@chaiaurcode
❖ MongoDB Documentation: https://www.mongodb.com/docs/
❖ React Documentation: https://react.dev/reference/react
❖ NodeJS Documentation: https://nodejs.org/docs/latest/api/
❖ MDNDocs:
https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://de
veloper.mozilla.org/en-US/&ved=2ahUKEwiB3_btkNuJAxXBp1YBHar-
A3gQFnoECAwQAQ&usg=AOvVaw02LaIEde3zfR9M_GL3s0yi

49