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

Learn how to Build and Deploy Full Stack E-commerce Website using React JS, MongoDB, Express JS, Node JS, Stripe and Razorpay. MERN Stack eCommerce project step by step tutorial

???? Source Code: https://greatstack.dev/go/forever

???? Live Preview: https://foreverbuy.in
???? Download the assets: https://greatstack.dev/assets/forever-react

???? Figma Design: https://greatstack.dev/go/figma-forever
???? Deploy this project: https://youtu.be/o2J_jdKBLI4

❤️ Complete this quiz after watching this tutorial and get project completion certificate:
???? https://quiz.greatstack.dev/fcom

SUBSCRIBE: @GreatStackDev

-------------------
In this project tutorial you will learn to build and deploy an eCommerce website using React JS, MongoDB, Express JS, Node JS. After building this e-Commerce project using MERN Stack, We will deploy it online on Vercel.

In this eCommerce website project, user can explore products, filer and short the product and user can add the product in cart by selecting product variant like size. User can also order the product by providing the delivery address and using any Payment method either Cash on Delivery or Online payment. In this Full Stack e commerce project we will add 2 online payment gateways that is Stripe and Razorpay. So that customer can pay online and place the order.

We will build the admin dashboard of this eCommerce website so that admin can upload the project, delete the product or check all products added on the store. We will build this eCommerce backend project / Backend API's using Node.js and Express and all products, user and order data will be stored on MongoDB database.

After completing this full stack project's ( Frontend and Backend ) we will deploy it on Vercel so that anyone can explore this ecommerce website.

Vercel JSON config for deployment:
???? https://github.com/GreatStackDev/notes/blob/main/Vercel_JSON_Config_For_MERN.md

-------------------

Watch Full Stack Food Order Website tutorial:
???? https://youtu.be/DBMPXJJfQEA

Watch Full Stack Chat App tutorial:
???? https://youtu.be/gbocZlm71nE

Watch Full Stack Music Streaming Website
???? https://youtu.be/KdGfhSpT6pc

Watch Full Stack Blog Website Tutorial
???? https://youtu.be/HdWCh_4XE1Q

-------------------------------------
Build more React JS projects:

Complete Portfolio Website In React:
???? https://youtu.be/4ag1LsgIUc0

Build ChatGPT Clone In React:
???? https://youtu.be/EzkWAviyYgg

Build AI Image Generator with OpenAI In React
???? https://youtu.be/PZG2MvOjud0

Create Weather App In React
???? https://youtu.be/7JqdjWB88Kk

-------------------------------------
Timestamp:

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

-------------------------------------
Images Credit:
https://www.pexels.com/
https://unsplash.com/
https://www.freepik.com/

-------------------------------------
Connect with me:
???? https://linktr.ee/iamavinashkr

Connect with GreatStack:
Instagram: https://instagram.com/GreatStackDev
Twitter: https://twitter.com/GreatStackDev
Facebook: https://facebook.com/GreatStack