Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Create Full Stack E-commerce Website Using React JS - MERN Stack eCommerce Project with Stripe

GreatStack via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn to build and deploy a complete full-stack e-commerce website using the MERN stack (MongoDB, Express.js, React.js, Node.js) with integrated payment gateways including Stripe and Razorpay. Master the development of both frontend user interface and backend API architecture while creating a comprehensive online shopping platform with product browsing, filtering, cart functionality, user authentication, and order management. Develop essential e-commerce features including product catalog display, size variant selection, shopping cart operations, user registration and login systems, and secure checkout processes supporting both cash on delivery and online payment methods. Build a complete admin dashboard for product management, inventory control, and order tracking, enabling administrators to upload products, manage listings, and monitor customer orders. Implement robust user authentication systems, secure payment processing through multiple gateways, and responsive design principles for optimal user experience across devices. Gain hands-on experience with MongoDB database integration for storing user data, product information, and order details, while learning to create RESTful APIs using Node.js and Express.js. Master the deployment process by publishing the complete application to Vercel, making it accessible to users worldwide, and understand production-level configuration requirements for full-stack applications.

Syllabus

00:00 Project Overview
10:51 React Project Setup
20:48 Create Pages and Routing
31:21 Create Home Page components
01:50:15 Create Collection Page
02:46:21 Create Product page
03:41:41 Cart and Place Order Page
04:34:09 My Order and Login Page
04:55:57 About and Contact Page
05:10:15 Create Backend
05:50:20 Create User Authentication feature
06:22:20 Create Product upload feature
07:08:44 Create authentication for Admin
07:24:23 Create Admin dashboard
08:01:55 Connect Backend APIs with Admin panel
09:24:00 Connect Backend APIs with eCommerce Website
10:32:55 Create Place Order feature
11:37:02 Display order details in Admin panel
12:10:59 Add Stripe payment gateway
12:45:52 Add Razorpay payment gateway
13:21:15 Deploy Full Stack project on Vercel

Taught by

GreatStack

Reviews

Start your review of Create Full Stack E-commerce Website Using React JS - MERN Stack eCommerce Project with Stripe

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.