MERN Stack E-Commerce Project - JWT Auth, Redux, Payments, Cart & Deployment | Razorpay + Cloudinary
Build ShopNest — A Production-Ready MERN E-Commerce App From Scratch
In this video, we build ShopNest from the ground up — a fully-featured, production-grade
e-commerce platform powered by the MERN stack (MongoDB, Express.js, React, Node.js).
This isn't a toy project. It's a real-world application with everything you'd expect
from a live store — authentication, payments, cloud storage, admin panel & 1-click deployment.
📌 RESOURCES & LINKS:
⭐ Live Link - https://shopnest-qiiw.onrender.com/
🔗 GitHub Repo: https://github.com/ShivaMani02/shopne...
📦 Postman Collection: https://github.com/ShivaMani02/shopne...
📄 Full Documentation: https://github.com/ShivaMani02/shopne...
🔗 All Links → https://linktr.ee/shivanshvasu
🌐 Website → https://theshivanshvasu.com
💬 Telegram (NOTES, QUIZZES, DOUBTS)→ https://t.me/shivanshvasu
💼 LinkedIn → / theshivanshvasu
📢 WhatsApp Channel → https://whatsapp.com/channel/0029VbAW...
📚 Elevate Full Stack → https://theshivanshvasu.com/courses/e...
📚 System Design Mastery → https://theshivanshvasu.com/courses/s...
📚 Master DSA 360 → https://theshivanshvasu.com/courses/m...
⏱️ TIMESTAMPS:
Project Overview & Setup:
• Introduction to the project & features: (0:00)
• Project demo (Auth, Admin portal, Cart): (0:46)
• System design & deployment strategy (Render): (11:03)
Backend Development:
• User Registration & JWT Authentication: (59:08)
• Creating the Send Email utility: (11:15)
• Middleware implementation (Auth & Admin): (1:18:25)
• Cloudinary integration for image uploads: (1:26:46)
• MongoDB Cloud (Atlas) configuration: (1:30:45)
• Product creation route & logic: (2:00:11)
• Order routing & Email confirmations: (2:31:35)
• Admin Dashboard & Revenue calculation: (3:18:56)
Frontend Development:
• React project initialization: (3:43:47)
• Routing with React Router DOM: (4:00:52)
• Navbar & Component styling: (4:13:30)
• Product Card implementation: (4:28:19)
• Admin product creation form: (6:03:44)
Deployment & Conclusion:
• Root build scripts & deployment steps: (6:19:54)
• Final app wrap-up & resources: (6:25:38)
💡 WHAT YOU'LL BUILD & LEARN:
→ Full-stack monorepo architecture (React + Express in one repo)
→ JWT Authentication with React Context API (login, register, protected routes)
→ Global Cart state management using Redux Toolkit
→ Unified Admin Dashboard — manage products, orders & users
→ Cloudinary image uploads via Multer (secure, cloud-hosted product images)
→ Razorpay payment gateway — complete end-to-end checkout flow
→ MongoDB + Mongoose — data modelling, relationships & schemas
→ Database seeding script with dummy products & auto admin provisioning
→ REST API architecture with middleware-based Express routing
→ Postman API testing with a pre-built, variable-mapped collection
→ 1-click free deployment to Render as a single Node.js instance
⚙️ TECH STACK:
Frontend — React.js (CRA), Redux Toolkit, Context API
Backend — Node.js, Express.js
Database — MongoDB + Mongoose
Payments — Razorpay
Storage — Cloudinary + Multer
Auth — JWT (JSON Web Tokens)
Deploy — Render (Free Tier)
🔗 OTHER RESOURCES:
📍System Design Complete Mastery Course : • System Design Complete Course 🔥
📍Master DSA 360 Complete Course : • Master DSA 360 Complete Course 🔥
📍MERN Stack Course: • MERN Stack Complete Course 🔥
📍ELEVATE - Web Dev Complete Course : • Full Stack Web Development (ELEVATE) Compl...
📍How Internet Works: • Cracking Web Dev ( Actually )
📍Full Stack Mastery Course: • Full Stack Concepts Complete Course 🔥
📍Web Dev Techs: • Web Tech Conceptual Video
📍React Project Series: • React Project Series Complete Course 🔥
-- TAGS:
#mern #mernstack #reactjs #nodejs #mongodb #expressjs #ecommerce #javascript
#fullstackdeveloper #webdevelopment #razorpay #cloudinary #redux #reduxToolkit
#jwt #webdev #programming #coding #project #100daysofcode #developer #react
#backend #frontend #api #mongoose #render #deployment #openSource #portfolio