Bookstore New 1
Bookstore New 1
AIM:
To build a full-fledged e-commerce BookStore using the MERN stack (MongoDB,
Express.js, React.js, Node.js) that allows users to browse, search, and purchase books
online, while administrators can manage inventory, users, and orders through an admin
dashboard.
OBJECTIVE:
To develop a scalable, responsive, and secure full-stack web application for
online book shopping using the MERN stack. The platform will allow users to browse,
search, and filter books, manage their shopping cart, place orders, and make secure
payments. It will also provide administrators with a powerful dashboard to manage books,
categories, users, and orders, ensuring smooth operation and enhanced user experience.
The system will include features like user authentication, order tracking, and real-time
updates, making it a complete e-commerce solution for book.
DISCRIPTION:
The BookStore project is a full-stack e-commerce web application built using
the MERN stack—MongoDB, Express.js, React.js, and Node.js. It provides an intuitive and
seamless online shopping experience tailored specifically for books. Users can create
accounts, browse a wide range of books, view detailed product pages, add books to their
cart, and complete purchases through a secure payment gateway.
The frontend, built with React.js, offers a dynamic, responsive interface with features like
real-time cart updates, product filtering, and user-friendly navigation. The backend,
powered by Node.js and Express.js, handles business logic, user authentication (via JWT),
order management, and secure communication with the database.
MongoDB is used to store structured data such as user profiles, book listings, orders, and
reviews. An admin dashboard allows administrators to efficiently manage books, users,
and orders, making the platform robust and scalable. Integrated with services like Stripe for
1
payments and Cloudinary for image uploads, this project delivers a complete, modern e-
commerce solution for book enthusiasts.
A.User Module
Handles user registration, login, profile management, and secure access
control.
Features:
• Signup/Login:
• Authentication:
• Profile Management:
o Users can view and update their profile (username, email, password).
• Role-based Access:
o Admins: Can manage users, books, and orders via a separate dashboard.
B. Product Module
Manages all book-related operations such as displaying, filtering, and
managing inventory.
Features:
• Book Browsing:
2
o Display all available books with image, price, title, and rating.
o Each book includes details like title, description, price, quantity, category,
and cover image.
Features:
• Cart Functionality:
• Checkout Process:
• Payment Integration:
3
o Payment status is tracked and updated in the order.
D. Order Module
Manages placing, viewing, and tracking orders from both user and admin
perspectives.
Features:
o Users can view their past and current orders with details (items, amount,
shipping).
• Sales Analytics:
o Track total orders, total sales, and sales by date using aggregation.
E. Admin Dashboard
Central control panel for managing the BookStore’s backend operations.
Features:
• User Management:
• Product Management:
4
o Full CRUD (Create, Read, Update, Delete) operations on books.
• Order Management:
• Role-Based Access:
5. Integrations
• Payment Gateway:
Integrated with Stripe or PayPal for secure and smooth online transactions
during checkout.
• Email Service:
Uses Nodemailer with SendGrid or Mailgun to send order confirmations,
account creation alerts, and password reset emails.
• Cloud Storage:
Utilizes Cloudinary to upload, store, and manage book cover images efficiently.
• Authentication:
Implements JWT (JSON Web Tokens) for secure login and session handling.
Optional Google OAuth can be added for social login functionality.
6. Database Structure
1)Users Collection:
Stores user data like name, email, encrypted password, and admin status.
5
2) Products Collection:
Contains book details such as title, author, price, stock, category, and reviews.
3) Orders Collection:
Records order items, shipping info, payment status, and delivery status.
4) Reviews Collection:
Holds user ratings and comments for each book.
5) Categories Collection:
Defines book genres for search and filter options.
7. Controllers
• User Controller:
Handles user registration, login, logout, profile updates, and admin-level user
management.
• Product Controller:
Manages adding, updating, deleting books; fetching books by ID or category; and
handling reviews.
• Order Controller:
Processes order placement, user order history, admin view of all orders, and
marking orders as paid or delivered.
• Category Controller:
Handles creation, update, and deletion of book categories used for filtering.
8. Sample Code
Backend:
Bookcontroller.js
import {Book} from '../models/book.models.js';
try{
await newBook.save();
}catch(error){
console.log(error);
try{
res.status(200).send(books);
}catch(error){
console.log(error);
7
}
const id = req.params.id;
try{
if(!book){
}catch(error){
console.log(error);
}}
// Update a book
const id = req.params.id;
8
return res.status(400).json({success: false, message: 'Please fill all the fields'});
try{
if(!book){
}catch(error){
console.log(error);
// Delete a book
const id = req.params.id;
try{
if(!book){
9
}catch(error){
console.log(error);
book.models.js
import mongoose from "mongoose";
title: {
type: String,
required: true,
},
author: {
type: String,
required: true,
},
publishedYear: {
type: String,
required: true,
},
price: {
10
type: Number,
required: true,
},
timestamps: true,
});
bookRoutes.js
import express from 'express';
router.get('', getAllBooks)
router.get('/:id', getBook)
router.post('', createBook)
11
// Update a book
router.put('/:id', updateBook)
// Delete a book
router.delete('/:id', deleteBook)
frontend
App.js
import React from 'react'
return (
<Routes>
12
<Route path='/books/create' element={<CreateBook />}/>
</Routes>
main.js
import './index.css'
createRoot(document.getElementById('root')).render(
<BrowserRouter>
<SnackbarProvider>
<App />
</SnackbarProvider>
</BrowserRouter>,
package.json
{
13
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
},
"dependencies": {
"axios": "^1.7.9",
"framer-motion": "^11.17.0",
"notistack": "^3.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.4.0",
"react-router-dom": "^7.1.1"
},
"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"eslint": "^9.17.0",
14
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.17",
"vite": "^6.0.5"
server.js
import express from 'express';
app.use(express.json());
dotenv.config();
process.env.MONGO_URI
15
// app.use(cors({
// origin: 'http://localhost:3000',
// allowedHeaders: ['Content-Type'],
// }));
app.use(cors());
app.use('/books', bookRoutes);
mongoose.connect(process.env.MONGO_URI).then(() => {
app.listen(PORT, () => {
})
}).catch((err) => {
console.log(err);
})
16
eslint.config.js
import js from '@eslint/js'
export default [
{ ignores: ['dist'] },
files: ['**/*.{js,jsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
},
plugins: {
react,
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
17
rules: {
...js.configs.recommended.rules,
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
...reactHooks.configs.recommended.rules,
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
18
OUTPUT:
19
CONCLUSION:
The BookStore project is a complete e-commerce solution using the MERN stack,
offering dynamic browsing, secure payments, and administrative controls. With modular
structure and real-time features, it ensures a smooth user experience and scalable
architecture for future enhancements like chat support, wishlists, or inventory analytics.
20
21