Truenote is a full stack e-commerce web application built using the MERN stack (MongoDB, Express.js, React, Node.js). It was developed for a university assignment to demonstrate how a real e-commerce system works end-to-end: from UI pages and navigation, to backend APIs, to database storage, and finally to checkout/payment flows (in test mode).
The Project is into three parts:
- Customer Website (Frontend): where users browse products, add items to cart, place orders, and view order history.
- Admin Panel (Frontend): where an admin can manage products and view/manage orders.
- Backend API (Server): handles authentication, database operations, image uploads, cart logic, order logic, and payment integration.
This separation is done on purpose. Putting admin tools inside the customer website would make the site harder to manage and less secure. Keeping a separate admin panel is how most real companies build it.
- Register / Login
- Browse product listings
- View product details
- Add to cart, remove from cart, update quantity
- Checkout and place orders
- View order history
- Payment workflow using Stripe test mode
The customer website allows users to create an account or log in, then browse through the available products and open any item to see its full details. Users can add products to their cart, remove items they don’t want, and change quantities before checkout. Once they are ready, they can proceed to checkout to place an order and complete the payment process using Stripe in test mode (and Razorpay if enabled). After placing an order, users can also view their order history to track what they have purchased.
- Admin login
- Add / edit / delete products
- Upload product images
- View customer orders
- Update order status
The admin panel is designed for administrators to manage the store. Admins can log in securely and then add new products, edit existing product information, or delete products that are no longer needed. When creating or updating products, they can upload product images so items appear properly on the customer website. The admin panel also allows admins to view customer orders and update the order status as the order moves through different stages, such as pending, processing, or delivered.
- REST APIs for user, product, cart, and order modules
- JWT-based authentication
- Password hashing using bcrypt
- MongoDB integration through Mongoose
- Image hosting through Cloudinary
- Payment integration via Stripe (test) and Razorpay (optional)
The backend API is the main server-side part of the project that connects everything together. It provides REST APIs for the user, product, cart, and order modules so the frontend and admin panel can send requests and receive data. It uses JWT-based authentication to protect secure routes and make sure only authorized users can access certain features. User passwords are safely stored by hashing them with bcrypt instead of saving them as plain text. The backend also connects to MongoDB through Mongoose to store and manage data such as users, products, carts, and orders. Product images are uploaded and stored using Cloudinary so they can be accessed through reliable image links. Finally, the backend handles payment processing in test mode using Stripe, with optional support for Razorpay if needed.
- React (Vite)
- React Router DOM
- Axios
- Tailwind CSS
- React Toastify
- Context API (state management)
- Node.js
- Express.js
- MongoDB + Mongoose
- JWT (authentication)
- bcrypt (password hashing)
- Multer (uploads)
- Cloudinary (image storage)
- Stripe (payments)
- Razorpay (optional)
git clone https://github.com/himanshu-negi-755/TrueNote.git
cd Truenote
cd backend
npm install
cd frontend
npm install
cd admin
npm install
Create the .env file in backend to store database url , also all API secret keys , admin panel credentials and for authentication to store JWT secret key. Backend Environment
Create backend/.env:
JWT_SECRET = "Himanshunegi123"
ADMIN_EMAIL = "admin@example.com"
ADMIN_PASSWORD = "Welcome@100"
MONGODB_URI = "mongodb+srv://truenote_db:truenote123@cluster0.5sotisy.mongodb.net"
CLOUDINARY_API_KEY = 934139975247446
CLOUDINARY_SECRET_KEY = jYsdXpgzFbyx4r_kqApB2ev2vVE
CLOUDINARY_NAME = drcyy1lb8
STRIPE_SECRET_KEY = sk_test_51ScmTpEyaYllG2BPVGhw2GWxxrRA05UmvjsthX2zHuGJIvZG1BdgHihGwGCQuvCXM9j3EHWTbuv5Wtm3AKmYWqXS00RHpSD1uO
Frontend Environment
Create frontend/.env:
VITE_BACKEND_URL=http://localhost:4000
Admin Panel Environment
Create admin/.env:
VITE_BACKEND_URL=http://localhost:4000
Running the Project
cd backend
npm run server
Backend should run at: http://localhost:4000
cd frontend
npm run dev
cd admin
npm run dev
These are typical route groups used in the backend:
/api/user → user authentication and user actions
/api/product → product listing and admin product management
/api/cart → cart operations
/api/order → order placement + order history
Use Stripe test mode keys in your backend .env.
Test card for successful payment
Card number: 4242 4242 4242 4242
Expiry date: any future date (e.g., 12/34)
CVC: any 3 digits (e.g., 123)
ZIP/Postal: any value (e.g., 12345)
Role-Based Access Control (RBAC)
Email verification + password reset
Pagination and search for large product catalogs
Admin analytics dashboard
Payment webhooks for stronger verification
Automated tests (Jest + Cypress/Playwright)
Better accessibility (ARIA, keyboard navigation)
This project successfully delivers a full stack e-commerce web application using the MERN stack. It includes a customer website for browsing products, managing a cart, placing orders, and completing payments in test mode, along with a separate admin panel for managing products and orders. The backend connects the system through REST APIs, handles authentication securely using JWT and bcrypt, stores data in MongoDB using Mongoose, and integrates third-party services like Cloudinary for image hosting and Stripe for payment testing. Overall, the project meets the main academic goal of demonstrating how a complete e-commerce system is designed and built, and it also provides a strong base for future improvements such as better security features, automated testing, and more advanced admin controls.