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
- User Registration & Login
- JWT Authentication
- OTP Email Verification
- Secure Password Encryption
- Browse products, view details, and search
- Manage their profile
- View order history
- Product Details Page
- Search Products
- Add to Cart
- Update Cart Quantity
- Remove Cart Items
- User Profile Management
- Order History
- Razorpay Secure Payment
- Responsive Design
What Admins Can Do
- Admin Authentication
- Manage Users
- Add Products
- Edit Products
- Delete Products
- Upload Product Title, Product Info with 5 Images (Cloudinary)
- Create, edit, and delete products
- Access a dashboard with total users
- Sales charts (Recharts) and recent orders
- Manage orders and update order status
- Manage Payments
- Update Order Status
- Access a dashboard with total users, products, orders, revenue, and monthly
- Dashboard Analytics
- Sales Reports using Recharts
- User Control Permissions: User, Admin, Delete, Edit.
Tech Stack
Frontend :
- React.js 19 (Vite)
- Redux Toolkit
- Tailwind CSS
- Shadcn UI
- React Router DOM
- Axios
- Recharts
- React Medium Image Zoom
Backend :
- Node.js
- Express.js
- MongoDB + Mongoose
- JWT
- bcryptjs
- Nodemailer
- Multer
- Cloudinary
- DataURI
Payments :
- Razorpay (order creation + payment verification)
Other :
- Protected Routes
- OTP Email Verification
- CORS
- Environment Variables
- Cloudinary Image Upload
Project Structure (High Level)
eKart
│
├── Frontend
│ ├── public
│ ├── src
│ │ ├── assets
│ │ ├── components
│ │ ├── pages
│ │ ├── layouts
│ │ ├── redux
│ │ ├── hooks
│ │ ├── services
│ │ ├── utils
│ │ ├── App.jsx
│ │ └── main.jsx
│ ├── package.json
│ └── .env.example
│
├── Backend
│ ├── config
│ ├── controllers
│ ├── middleware
│ ├── models
│ ├── routes
│ ├── uploads
│ ├── utils
│ ├── app.js
│ ├── server.js
│ ├── package.json
│ └── .env.example
│
├── README.md
├── LICENSE
└── .gitignore
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
- JWT Authentication
- Protected Routes
- Password Hashing (bcrypt)
- OTP Email Verification
- Role-Based Authorization
- Admin Access
Payment Integration
- 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
- Total Products
- Total Orders
- Total Revenue
- Monthly Sales Analytics
- Recent Orders
- Revenue Charts It gives a practical feel of what a real store owner would need day-to-day.
API Modules
Authentication
- Register
- Login
- Logout
- Verify OTP
Users
- User Profile
- Update Profile
Products
- Get Products
- Product Details
- Add Product
- Update Product
- Delete Product
Cart
- Add Item
- Update Quantity
- Remove Item
- Get Cart
Orders
- Create Order
- View Orders
- Update Order Status
Payments
- Create Razorpay Order
- Verify Payment
Admin
- Dashboard Statistics
- Manage Users
- Manage Products
- Manage Orders
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/free-mern-ecommerce-website
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)