🔴Let's Build MERN E-Commerce Website from Scratch | React, Node.js, MongoDB & Razorpay
Автор: Coder29
Загружено: 2025-01-25
Просмотров: 15739
This complete MERN Stack E-Commerce tutorial will teach you how to build a fully functional online store with an Admin Panel*, *secure payments*, and *modern UI using the latest technologies.
Live link : https://codestoreyt.vercel.app/
🌟 What You’ll Learn:
✔️ Frontend*: Build a *responsive UI with *React.js*, Tailwind CSS & ShadCN
✔️ *State Management*: Master Redux Toolkit for optimized performance
✔️ Backend*: Develop robust APIs with *Node.js & Express.js
✔️ Database*: Store and manage data with *MongoDB
✔️ Authentication*: Implement *role-based access control
✔️ Payments*: Integrate *Razorpay for seamless transactions
✔️ *Admin Dashboard*: Manage products, users & orders efficiently
✔️ *Dark Mode & UI Enhancements*: Improve user experience
✔️ *Query Filtering & Analytics*: Advanced features for real-world applications
✔️ Secure Deployment*: Host your project for *free and boost your resume
🛠 Tech Stack Used:
🚀 *Frontend*: React.js, Tailwind CSS, ShadCN UI
⚡ *State Management*: Redux Toolkit
🖥 *Backend*: Node.js, Express.js
🗄 *Database*: MongoDB
📸 *Media Management*: Cloudinary
💳 *Payment Gateway*: Razorpay
🔗 Get the Source Code
🆓 Free Code (Only covered in the video) 👉 [GitHub Repo](https://github.com/coder29yt/codestor...)
Join the Developer Community:
💬 Discord: [Join Now]( / discord )
🔗 LinkedIn: [Raj Padval]( / raj-padval-10869125b )
📸 Instagram: [@coder29.yt]( / coder29.yt )
🐦 Twitter/X: [@coder29yt](https://x.com/coder29yt)
🔥 Why Watch This Video?
✅ Real-World Full-Stack Project – Apply your skills with a complete e-commerce platform
✅ Modern Tech Stack – Learn the latest MERN development techniques
✅ High-Demand Skills – Build a resume-worthy project with real-world use cases
✅ Perfect for Beginners & Advanced Developers – Step-by-step guide with explanations
#mernstack #reactjs #ecommercewebsite #nodejs #mongodb #webdevelopment #fullstackdevelopment #programming #tailwindcss #razorpay #codingprojects
Timestamps
00:00:00 - Demo
00:34:47 - Mobile View
00:38:49 - Tech Stack Used
00:43:25 - Project Setup
00:57:32 - Creating Pages
01:00:43 - Client Routing Setup
01:06:21 - Creating Navbar
01:41:04 - Creating Homepage
02:25:57 - Creating Stars Generator
02:34:12 - Completing Homepage
02:35:27 - Footer
02:37:09 - Creating Signup Page
02:48:59 - Creating Login Page
02:52:50 - Creating Product Page
03:36:36 - Creating Review Component
04:05:28 - Creating Checkout Page
04:35:03 - Creating Admin Login Page
04:37:46 - Creating Error Page
04:40:30 - Creating Success Page
04:49:52 - Creating Root Layout
04:54:11 - Creating Admin Dashboard
05:10:30 - Creating Create Product Page
06:13:43 - Creating All Products Page
06:47:54 - Creating Orders Page
07:18:14 - Creating Settings Page
07:24:02 - Creating Analytics Page
07:55:51 - Integrating Redux Toolkit
08:37:25 - Backend Setup and Configuration
08:58:13 - Creating Auth Route and Controller
09:00:25 - Creating Models
09:31:55 - Working with Auth Route and Controller
10:53:37 - Setting Routes and Controllers
11:12:20 - Product Routes and Controllers
11:59:51 - Review Routes and Controllers
12:23:47 - Order Routes and Controllers
13:06:17 - Payment Routes and Controllers
13:38:37 - Integrating Server with Client
13:40:35 - Creating My Orders Page
14:02:23 - Integrating Signup
14:12:11 - Integrating Login
14:22:00 - Creating Protected Route
14:42:39 - Integrating Admin Login
14:59:44 - Creating useErrorLogout Hook
15:05:44 - Working on Settings Page
15:16:11 - Working on Create Product
15:55:08 - Working on All Products
16:36:29 - Working on Homepage
16:50:45 - Working on Product Page
18:30:43 - Working on My Orders Page
18:49:52 - Working on Checkout Page
19:09:53 - Working on Orders Page in Admin Dashboard
19:31:35 - Working on Analytics Page
19:44:53 - Working on Reviews
20:45:40 - Solving Major Bug on Product Page
20:47:19 - Adding Title and Logo
20:48:45 - Deployment
20:51:17 - How to Get Source Code for Free
20:52:04 - Continuing Deployment
@Cloudinary @Razorpayindia
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке: