0% found this document useful (0 votes)
11 views21 pages

Bookstore New 1

The BookStore project is a full-fledged e-commerce application built using the MERN stack, allowing users to browse, search, and purchase books online while providing administrators with a dashboard to manage inventory and orders. Key features include user authentication, secure payment integration, and real-time updates for a seamless shopping experience. The system is designed to be scalable and responsive, with a modular structure for future enhancements.

Uploaded by

mukilraja026
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)
11 views21 pages

Bookstore New 1

The BookStore project is a full-fledged e-commerce application built using the MERN stack, allowing users to browse, search, and purchase books online while providing administrators with a dashboard to manage inventory and orders. Key features include user authentication, secure payment integration, and real-time updates for a seamless shopping experience. The system is designed to be scalable and responsive, with a modular structure for future enhancements.

Uploaded by

mukilraja026
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/ 21

Book-Store

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:

o Users register with a username, email, and password.

o Passwords are encrypted using bcryptjs.

o Login generates a JWT token stored in cookies for secure session


management.

• Authentication:

o JWT-based authentication protects routes.

o Middleware verifies user identity and grants access based on token.

• Profile Management:

o Users can view and update their profile (username, email, password).

o Changes trigger validation and secure update in the database.

• Role-based Access:

o Normal Users: Can browse, buy, and track orders.

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 Supports pagination or infinite scrolling.

• Search & Filter:

o Search books by title or author.

o Filter by category (genre), price range, and rating.

• Admin Book Management:

o Admins can Add/Edit/Delete books.

o Each book includes details like title, description, price, quantity, category,
and cover image.

• Product Detail Page:

o Displays complete book details.

o Includes reviews, ratings, and related book suggestions.

C. Cart & Checkout Module


Allows users to manage selected items and complete purchases.

Features:

• Cart Functionality:

o Add books to cart from listings or product pages.

o Update quantity or remove items.

o Cart state persists between sessions (local storage or DB).

• Checkout Process:

o Users review the cart before payment.

o Collect shipping details and payment method.

• Payment Integration:

o Integrated with Stripe or PayPal for secure payments.

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:

• User Order Management:

o Users can view their past and current orders with details (items, amount,
shipping).

• Admin Order Dashboard:

o Admins can view all orders.

o Update order status: mark as paid or delivered.

o View buyer info and order history.

• Sales Analytics:

o Track total orders, total sales, and sales by date using aggregation.

o Helps in business analysis and inventory planning.

E. Admin Dashboard
Central control panel for managing the BookStore’s backend operations.

Features:

• User Management:

o View list of all users.

o Edit user roles (Admin/User).

o Delete non-admin users if necessary.

• Product Management:

4
o Full CRUD (Create, Read, Update, Delete) operations on books.

o Manage categories, prices, stock availability.

• Order Management:

o View and update all customer orders.

o Mark orders as paid/delivered.

o Generate reports from order data.

• Role-Based Access:

o Only admins have access to this module.

o Protected via backend middleware and frontend route guards.

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';

// Create a new book


6
const createBook = async (req, res) => {

const {title, author, publishedYear, price} = req.body;

if(!title || !author || !publishedYear || !price){

return res.status(400).json({success: false, message: 'Please fill all the fields'});

const newBook = new Book({title, author, publishedYear, price});

try{

await newBook.save();

res.status(201).json({success: true, data: newBook});

}catch(error){

console.log(error);

res.status(500).json({success: false, message: 'Internal Server Error'});

// Get all books

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

try{

const books = await Book.find();

res.status(200).send(books);

}catch(error){

console.log(error);

res.status(500).send('Internal Server Error');

7
}

// res.status(200).send('Let\'s get started');

// Get a single book

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

const id = req.params.id;

try{

const book = await Book.findById(id);

if(!book){

return res.status(404).json({success: false, message: 'Book not found'});

res.status(200).json({success: true, data: book});

}catch(error){

console.log(error);

res.status(500).json({success: false, message: 'Internal Server Error'});

}}

// Update a book

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

const id = req.params.id;

const {title, author, publishedYear, price} = req.body;

if(!title || !author || !publishedYear || !price){

8
return res.status(400).json({success: false, message: 'Please fill all the fields'});

try{

const book = await Book.findByIdAndUpdate(id, {title, author, publishedYear, price},


{new: true});

if(!book){

return res.status(404).json({success: false, message: 'Book not found'});

res.status(200).json({success: true, data: book});

}catch(error){

console.log(error);

res.status(500).json({success: false, message: 'Internal Server Error'});

// Delete a book

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

const id = req.params.id;

try{

const book = await Book.findByIdAndDelete(id);

if(!book){

return res.status(404).json({success: false, message: 'Book not found'});

res.status(200).json({success: true, message: 'Book deleted successfully'});

9
}catch(error){

console.log(error);

res.status(500).json({success: false, message: 'Internal Server Error'});

export {createBook, getAllBooks, getBook, updateBook, deleteBook};

book.models.js
import mongoose from "mongoose";

const bookSchema = new mongoose.Schema({

title: {

type: String,

required: true,

},

author: {

type: String,

required: true,

},

publishedYear: {

type: String,

required: true,

},

price: {

10
type: Number,

required: true,

},

timestamps: true,

});

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

bookRoutes.js
import express from 'express';

const router = express.Router();

import {createBook, getAllBooks, getBook, updateBook, deleteBook} from


'../controllers/booksController.js';

// Get all books

router.get('', getAllBooks)

// Get a single book

router.get('/:id', getBook)

// Create a new book

router.post('', createBook)

11
// Update a book

router.put('/:id', updateBook)

// Delete a book

router.delete('/:id', deleteBook)

export default router;

frontend
App.js
import React from 'react'

import { Route, Routes } from 'react-router-dom'

import CreateBook from './pages/CreateBook'

import Home from './pages/Home'

import EditBook from './pages/EditBook'

import DeleteBook from './pages/DeleteBook'

import ShowBook from './pages/ShowBook'

import NotFound from './pages/404page'

const App = () => {

return (

<Routes>

<Route path='' element={<Home />}/>

<Route path='/books/edit/:id' element={<EditBook />}/>

12
<Route path='/books/create' element={<CreateBook />}/>

<Route path='/books/show/:id' element={<ShowBook />}/>

<Route path='/books/delete/:id' element={<DeleteBook />}/>

<Route path='*' element={<NotFound />}/>

</Routes>

export default App

main.js

import { createRoot } from 'react-dom/client'

import './index.css'

import App from './App.jsx'

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

import {SnackbarProvider} from 'notistack'

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",

"build": "vite build",

"lint": "eslint .",

"preview": "vite preview"

},

"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';

import dotenv from 'dotenv';

import mongoose from 'mongoose';

import cors from 'cors';

// import {Book} from './models/book.models.js';

import bookRoutes from './router/bookRoutes.js';

const app = express();

//Middleware for parsing JSON data

app.use(express.json());

dotenv.config();

process.env.MONGO_URI

const PORT = process.env.PORT || 5555;

15
// app.use(cors({

// origin: 'http://localhost:3000',

// methods: ['GET', 'POST', 'PUT', 'DELETE'],

// allowedHeaders: ['Content-Type'],

// }));

app.use(cors());

app.use('/books', bookRoutes);

mongoose.connect(process.env.MONGO_URI).then(() => {

console.log('MongoDB Connected successfully');

app.listen(PORT, () => {

console.log(`Server is running on port ${PORT}`);

})

}).catch((err) => {

console.log(err);

})

16
eslint.config.js
import js from '@eslint/js'

import globals from 'globals'

import react from 'eslint-plugin-react'

import reactHooks from 'eslint-plugin-react-hooks'

import reactRefresh from 'eslint-plugin-react-refresh'

export default [

{ ignores: ['dist'] },

files: ['**/*.{js,jsx}'],

languageOptions: {

ecmaVersion: 2020,

globals: globals.browser,

parserOptions: {

ecmaVersion: 'latest',

ecmaFeatures: { jsx: true },

sourceType: 'module',

},

},

settings: { react: { version: '18.3' } },

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy