How I Built a MERN Stack E-commerce Website for a Bookstore 🛒📚

#webdev #programming #javascript #beginners

As a web developer passionate about building real-world projects, I recently created a complete MERN Stack E-commerce Website themed for a Bookstore. It includes everything from product listing and cart handling to admin management and payment integration using PayPal.

In this blog post, I’ll walk you through the major parts of the project — what tech I used, key features I implemented, and where you can get the full source code to build your own version or learn from it.

🧰 Tech Stack Used

The project is built using the MERN Stack, which stands for:

MongoDB – NoSQL database to store product, order, and user data.
Express.js – Backend framework running on Node.js for APIs and server-side logic.
React.js – Frontend library for creating the user interface.
Node.js – JavaScript runtime for the server.

Additional Tools & Libraries:

Redux Toolkit – For global state management.

PayPal SDK – For payment integration.
Cloudinary – For hosting product images (optional).
Tailwind CSS / Plain CSS – For styling.
JWT – For authentication and secure APIs.

🎯 Key Features

Here’s a quick look at what the bookstore e-commerce app includes:

Frontend (User Side)

📚 Book Listing Page (grid view of products)
🔍 Single Book Page with details (description, price, stock status)
🛒 Add to Cart & Quantity Management
❤️ Favorites/Wishlist
🔐 Login / Register functionality
💳 Checkout with PayPal and Cash on Delivery options
📦 Order Summary with dynamic receipt generation

Backend (API)

📦 CRUD operations for products and orders
🔒 User authentication using JWT
🛍️ Secure order processing and storage
💰 PayPal Payment Integration with success/cancel pages

Admin Dashboard

📋 View all orders
🛠️ Add, Edit, Delete books
🔎 Order detail view
🔄 Update order delivery status

🧾 How I Handled Cart and Checkout

If the user is not logged in, the cart is managed using Redux and saved in localStorage.

Once the user logs in, their cart syncs with the database.

On successful checkout using PayPal, the order is saved, and the user receives an order ID.

Logged-in users will see the new order in their order history.

💵 PayPal Integration

To integrate PayPal:

Created a PayPal developer account.
Used the PayPal JS SDK on the client side.
Built a custom backend route to verify payments and store order data securely.
This setup allows a fully working PayPal Checkout Flow, even in a test/sandbox environment.