A complete walkthrough of a full-stack online store with JWT auth, OTP verification, Razorpay payments, Cloudinary uploads, and a real admin dashboard and why you should fork it.
If you’ve ever wanted a clean, modern, fully functional e-commerce project that actually feels production-ready, meet eKart.
eKart is a complete MERN stack online shopping platform that goes far beyond the typical “todo + cart” tutorial. It includes secure authentication with OTP email verification, real payment processing via Razorpay, image uploads with Cloudinary, a polished admin dashboard with sales analytics, and a responsive user experience built with modern tools.
Live demo: eKart
GitHub repo: ekart-ecommerce-website
Anyone can clone it, fork it, run it locally, or deploy their own version. The project is open-source under the MIT License.
Why This Project Exists
Most MERN e-Commerce tutorials stop at the basics: product listing, a simple cart, and maybe a fake checkout. Real applications need authentication that actually works, email verification, secure payments, image handling, role-based access, and an admin side that can manage the whole store.
eKart was built to fill that gap. It is a single repository that contains both the frontend and backend, properly structured, with environment variable examples and clear installation steps.
What Users Can Do
- Register and log in with JWT authentication
- Verify their email with a one-time password (OTP)
- Browse products, view details, and search
- Add items to cart, update quantities, and remove items
- Manage their profile
- View order history
- Complete payments securely through Razorpay
- Enjoy a fully responsive design across devices
What Admins Can Do
- Secure admin login
- Manage users
- Create, edit, and delete products
- Upload product images (Cloudinary)
- Manage orders and update order status
- View payments
- Access a dashboard with total users, products, orders, revenue, monthly sales charts (Recharts), and recent orders
Tech Stack
Frontend : React 19 (Vite) · Redux Toolkit · Tailwind CSS · Shadcn UI · React Router · Axios · Recharts · React Medium Image Zoom
Backend : Node.js · Express · MongoDB + Mongoose · JWT · bcryptjs · Nodemailer · Multer · Cloudinary · DataURI
Payments : Razorpay (order creation + payment verification)
Other : Protected routes · Role-based authorization · CORS · Environment variables · Cloudinary image uploads
Project Structure (High Level)
eKart
├── Frontend/
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── layouts/
│ │ ├── redux/
│ │ ├── hooks/
│ │ ├── services/
│ │ └── ...
│ └── ...
├── Backend/
│ ├── config/
│ ├── controllers/
│ ├── middleware/
│ ├── models/
│ ├── routes/
│ ├── utils/
│ └── ...
├── README.md
└── LICENSE
The separation is clean. Frontend and backend each have their own package.json and.env.example, so you can run them independently during development.
Authentication & Security Highlights
- Passwords are hashed with bcrypt
- JWT tokens protect routes
- OTP email verification via Nodemailer
- Role-based access (user vs admin)
- Protected routes on both client and server
Payment Flow
- User proceeds to checkout
- Backend creates a Razorpay order
- Frontend opens the Razorpay checkout
- After successful payment, the backend verifies the signature
- Order is created automatically This is the real integration pattern, not a mock.
Admin Dashboard
The dashboard shows:
- Total users, products, orders, and revenue
- Monthly sales analytics (Recharts)
- Recent orders
- Quick management of products, users, and orders It gives a practical feel of what a real store owner would need day-to-day.
Getting Started in Minutes
git clone https://github.com/sudhanshugaikwad/free-mern-ecommerce-website.git
cd mern-ecommerce-website
Frontend
cd Frontend
npm install
npm run dev
Backend
cd Backend
npm install
npm run dev
You will need to fill in the environment variables (examples are provided in both folders):
Backend .env
PORT=
MONGODB_URI=
JWT_SECRET=
EMAIL_USER=
EMAIL_PASS=
RAZORPAY_KEY_ID=
RAZORPAY_KEY_SECRET=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
Frontend .env
VITE_API_URL=http://localhost:5000
VITE_RAZORPAY_KEY_ID=
Future Roadmap
The project already has a solid foundation. Planned improvements include:
- Product reviews & ratings
- Wishlist
- Coupon system
- Inventory management
- Better email/SMS notifications
- Dark mode
- Multi-language support
Why You Should Fork It
- Clean, readable code
- Modern stack (React 19 + Vite, Redux Toolkit, Tailwind + Shadcn)
- Real-world features (OTP, Razorpay, Cloudinary, analytics)
- MIT License use it commercially if you want
- Active and ready for contributions
Whether you are learning the MERN stack, building a portfolio project, or looking for a solid base to customize into your own store, eKart is a great starting point.
Support the Project
If the project helps you, give it a ⭐ on GitHub. Stars make it easier for other developers to discover it.
GitHub: eKart mern-ecommerce-website
Live Demo: eKart
Built by Sudhanshu Gaikwad
GitHub: https://github.com/sudhanshugaikwad
LinkedIn: https://www.linkedin.com/in/sudhanshugaikwad
Happy coding, and feel free to fork, improve, and ship your own version of eKart!
Top comments (0)