Presentation on

Old Book Buying Website Using MERN Stack

An Academic Internship Project
Organization Name: Udemy

Submitted by
Name Roll No.
Sahil Prasad 222010007039
Sadid Alam 222010007037
Hassibul Kausir 222010007020

Department of Computer Science & Engineering

Barak Valley Engineering College
NIrala,Karimganj-788701;Assam
November-2024
1
 Introduction to Web Development

Overview of the Organization

Internship Summery

Project Introduction:

Tools & Environment

Contents Methodologies

Result & Analysis

Conclusion & Future Scope

Certificate of Completion

References

2
 Skills Gained:
 Front-end and back-end development
 Database management
 API integration and full-stack connectivity
Internship
Summary: Technologies Used:
 Front-end: HTML, CSS, JavaScript, React
 Back-end: Node.js, Express.js
 Database: MongoDB

3
Introduction to Web
Development

• Purpose: Building and managing

websites.
• Types: Frontend (visuals),
Backend (server), Full Stack
(both).
• Core Tech: HTML, CSS, JavaScript.
• Process: Plan → Design →
Develop → Test → Deploy.

4
5
 Udemy:
 Overview: Udemy is a global online learning
platform offering courses on various topics.
About the  Courses: 210,000+ in tech, business, and more.

Organizat  Learning Model: Self-paced, accessible anytime,

anywhere.
 Instructors: Industry experts and experienced
ion​ professionals.
 Impact: Enables skills enhancement and career
growth for learners at all levels.

6
 • Build an Online bookstores for buying
books provide a platform where customers
can browse, search, and purchase old
books.

• Customers can search for books by title,

INTRODUCTION author, or genre, and make purchases
TO PROJECT conveniently from anywhere, at any time.

• Utilized the MERN stack (MongoDB,

Express.js, React.js, Node.js) for build our
website.

7
  Lack of Affordable Access to Books

 Lack of dedicated platforms for selling old

Problem books.
statement  Addressing the Issue: Access to Budget-
Friendly Books
 Need for a Reliable Solution

8
 •User-Friendly Interface: Use React.js and Bootstrap for a
responsive, intuitive UI.
•Secure Transactions: Implement JWT for secure user
authentication and authorization.
Objective •Efficient Book Management: Create an admin dashboard for
of the managing book listings.
•Advanced Search: Enable fast search and filtering by title,
Project author, genre, etc.
•Smooth Shopping: Provide a cart feature with an easy
checkout process.
•Payment Integration: Integrate PayPal and Card Payment
through Braintree for secure payments.

9
  JSX: A JavaScript syntax extension for writing
HTML-like elements, primarily used in React.
Language  CSS: A language for styling web pages by
Used defining colors, layouts, and fonts.
 JavaScript: A programming language that adds
interactive functionality to web pages.

10
 The MERN stack is a popular set of technologies
used to build full-stack web applications. It consists
of four main components:
Technology
Used 1.MongoDB: A NoSQL database that stores data in
(MERN JSON-like format, providing flexibility in
handling unstructured data.
STACK)
2.Express.js: A lightweight web application
framework for Node.js, designed to simplify
building server-side applications and APIs.

11
 3. React.js: A JavaScript library for building user
Technology interfaces, particularly for single-page applications
(SPAs). It allows developers to create reusable UI
Used components and manage application state
(MERN efficiently.

STACK) 4. Node.js: A JavaScript runtime built on Chrome's

V8 engine that allows for server-side scripting
using JavaScript. It's used to run Express.js and
handle backend logic.

12
 Bootstrap:
• Role: Front-end styling and structure.
• Features: Grid system, responsive design, CSS
classes
Additional
Frameworks
and libraries JWT (JSON Web Token):
• Role: User authentication and authorization.
• Features: Secure transmission of user
information.

Bcrypt:
• Role: Password security.
• Features: Salting and hashing passwords. 13
Additional Axios:
Frameworks •Role: HTTP requests between front-end and back-end.

and libraries •Features: Methods for interacting with the database.

CORS (Cross-Origin Resource Sharing):

•Role: Security feature for resource sharing.
•Features: Middleware for communication between
front-end and back-end.

14
 System Architecture:

 User Interaction
 API Requests
 Routing & Middleware
Architecture
 Database Operations
 Response to Client
 State Management

15
 System Architecture:

Architecture

Three-Tier Architecture
Client Layer: React.js for UI.
Business Logic Layer: Express.js & Node.js for server-side logic.
Data Layer: MongoDB for database management.

16
 Backend Architecture:
 Client Requests
 Node.js & Express.js
 Controller Layer
 MongoDB
Architecture
 Authentication & Authorization
 Password Security
 CORS

17
 Frontend Architecture:

 App Component
 Pages & Components
 State Management
Architecture  API Communication
 Styling

18
 Data Collection & Preprocessing

Book Listings
User Details

METHODOLOGY Preprocessing:

Data validation (email format, price validation).

Passwords hashed using Bcrypt for security.

19
 Feature Extraction

 Book Search
 Filtering
 User Authentication
METHODOLOGY
 Shopping Cart
 Payment Integration
 Admin Panel

20
METHODOLOGY
User Flow Diagram

21
METHODOLOGY
Admin Flow Diagram

22
 Functionalities Achieved:

 User registration, login, and password reset with JWT.

 Admin can manage book listings and categories.
RESULT &  Search and filtering by title, author, price, and more.
DISCUSSION  Shopping cart, checkout, and secure payment
integration.
 Responsive UI using Bootstrap and React.js.

23
Home Page

Result and
discussion
–
User Interface

Fig: 1
24
Product Detail Page

Result and
discussion
–
User Interface

Fig:2
25
 Cart Page

Result and
discussion-
User Interface
Fig:3

26
Admin Dashboard

Result and
discussion
–
User Interface

Fig:4

27
User Dashboard

Result and
discussion
–
User Interface

Fig:5
28
 Challeng
1. Data Security
es Faced: 2. Responsive Design

29
 1. Personalization: Add machine learning for
personalized recommendations.

Future 2. Advanced Filtering: Improve search with more

Scope filter options.

3. New Payment Options: Integrate digital wallets.

4. Make an App

30
 1. Core Features Implemented: Successfully added user
registration, book management, search, shopping cart,
and user profile functionalities.

2. Responsive UI: Designed a secure and user-friendly

interface using React.js and Bootstrap.
Conclusion
3. Database Flexibility: MongoDB's document structure
supports scalable and easy data management.

4. Secure Payments: Integrated PayPal and Card Payment

through Braintree for secure online transactions.

31
 1. Udemy:
https://www.udemy.com/share/101qYw3@zfM2qgPbsKa3z50IF
bdhNd6zKo8795ZYXQaPSJ0COXyZwfLkoFQnyFWvxwHZ3v
DmYw==/

2. YouTube: https://www.youtube.com/@chaiaurcode

REFERENCE 3. MongoDB Documentation: https://www.mongodb.com/docs/

4. React Documentation: https://react.dev/reference/react

5. NodeJS Documentation: https://nodejs.org/docs/latest/api/

6. MDN DOCS: https://developer.mozilla.org/en-US/

32
33
Thank You

34