React Node FullStack - Ecommerce from Scratch to Deployment

16h 15m 14s
English
Paid

Course description

Learn to Deploy your fully functioning Ecommerce app to production by using Digital Ocean cloud servers. Learn to add your own custom Domain name. Learn to use Cloudflare's CDN to supercharge the speed of your site and also use free SSL to secure your app.

Read more about the course

Full Stack / MERN Stack (Mongo Express React Node) Powered Ecommerce App from Scratch to Deoplyment

As a Web Developer, I have always wanted to build an Ecommerce App.

I wanted to know how to implement Add to Cart, Payment Gateways, Order Management System and so much more...

And I know a lot of you out there want to experience building Ecommerce app. The experience is absolutely amazing and it gives you loads of must have knowledge and confidence to start off your next big project using React Node and MongoDB.

This course also uses latest React Hooks which is an absolute joy. Your code will be so much simplified and readable, you wont believe it.

Our Node API will follow MVC Pattern. The codebase will be so clean and elegant, you will be absolutely loving it.

You will also get introduced with Braintree (A PayPal Company) for handling Payments. Braintree is hands down the best payment gateway you could possibly use in a production site for both PayPal and Credit Card payments.

By the end of the course you will learn to deploy your fully functioning Ecommerce app to Digital Ocean cloud servers for production.

Not only that... you will also learn to add your own custom Domain, use Cloudflare's CDN to supercharge your app and free SSL to secure your app.

All this goodness for the price of lunch? YES! Thats right!

We are really living in an age of goodness. Aren't we?

OK. Enough said, I know you cant wait to get your hands on this course :)

By the way, you will never get stuck with this course because each lecture has the Source Code available. Really?

Here are some of the course highlights:

  • Search product

  • Search products based on particular category

  • New arrivals

  • Best sellers

  • Product image

  • Product information

  • Product in stock/out of stock

  • View product

  • Related product

  • Add to cart

  • Remove product

  • Adjust quantity

  • Signin to checkout

  • User dashboard

  • Admin dashboard

  • Private routes

  • Admin routes

  • Shopping cart

  • Checkout with credit card and paypal

  • Checkout with delivery address

  • Success message

  • Update profile

  • Advance search of products

  • Advance search based on category and price range

  • Load more products

  • Admin dashboard

  • Create category

  • Create product

  • View orders

  • Manage products update/delete

  • Role based access

  • and lots more...............

Let me welcome you in an Incredible Journey of Building a  MERN Stack React, Node and MongoDB powered Ecommerce Application from the groud up. Let's do it. Let's code together.

Requirements:
  • Basic Understanding JavaScript or any other programming language
  • Basic Understanding of React Js
  • Basic Understanding of Node Js
Who this course is for:
  • A Web Developer looking to Build API with Node JS and MongoDB
  • A Web Developer looking to Build Fast, Interactive and Scalable Web Applications using React JS
  • A Web Developer looking to Build a FullStack Ecommerce Application using MERN Stack

What you'll learn:

  • Learn Node JS API (Backend) Development
  • Learn React JS (Frontend) Web Development
  • Learn to Write Functional Components with React Hooks
  • Learn the Fundamental Concepts of Building Ecommerce Application
  • Learn to Implement Payment Gateway using Credit Card and PayPal
  • Learn to Integrate Braintree (A PayPal Company) for Payment Processing
  • Learn to Implement Advance Searching/Filtering based on Categories
  • Learn to Implement Advance Searching/Filtering based on Price Range
  • Learn to Implement Standard Products Search System with Categories option/dropdown
  • Learn to Build Shopping Cart
  • Learn to Implement Authentication based on JWT
  • Learn to Build Scalable React App with Proper Layouts and Routes
  • Learn to build Admin and User Dashboard
  • Learn to Implement Flexible Private and Admin Routing System
  • Learn advance CRUD with Products and Categories
  • Learn to handle File Upload
  • Learn to use LocalStorage (CRUD) to Minimize Requests to Backend
  • Learn to Store Sold Products Record into the Database for Further Processing
  • User Profile and Update Ability
  • Learn to implement Order Management System by Admin
  • Learn to Deploy your app to Digital Ocean's Cloud Servers
  • Learn to add a Custom Domain name to your app
  • Learn to use Cloudflare's CDN to serve your app (for speed)
  • Learn to use Cloudflare's free SSL to secure your app

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 145 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online React Node FullStack - Ecommerce from Scratch to Deployment

0:00
/
#1: Course introduction

All Course Lessons (145)

#Lesson TitleDurationAccess
1
Course introduction Demo
02:00
2
Are you ready for this course?
04:16
3
Course roadmap (optional)
09:51
4
Express server
09:04
5
Using MongoDB Atlas
01:43
6
Connecting to MongoDB
03:22
7
Routes
04:46
8
Controllers
04:53
9
User schema
05:42
10
Virtual fields and methods
05:20
11
User signup
06:00
12
Using Postman to signup user
05:15
13
Friendly error message
04:44
14
Using express validator
09:17
15
User signin using JWT
10:08
16
Using Postman to signin user
04:13
17
User signout
02:03
18
Require signin middleware
03:17
19
Renaming from user to auth
02:40
20
User by id middleware
11:25
21
Auth and admin middlewares
07:50
22
Category model route and controller
06:08
23
Creating category using postman
04:49
24
Product model
06:18
25
Create product with file upload
09:26
26
Creating product using postman
07:00
27
Create product validation
06:13
28
Product by id middleware and single product
07:26
29
Product delete
06:37
30
Product update
07:10
31
Category by id and single category
05:10
32
Category update delete and get all
09:47
33
Products by sell and arrival on request query params
09:39
34
Fetch products based on request query using postman
05:15
35
Related products
07:32
36
List product categories
03:22
37
List products by search
07:33
38
Send product photo
03:46
39
User profile read and update
07:33
40
Installing CORS
01:49
41
React hooks
01:31
42
Why we used class components?
00:51
43
Counter app using class
05:45
44
useState hook
03:49
45
useEffect hook
06:01
46
News app using hooks
06:39
47
Search news on input change
05:56
48
Controlling useEffect's behaviour
04:44
49
Loading
03:11
50
Code Organization
04:24
51
Create react app
02:54
52
Routing pages
08:38
53
Menu and active links
09:28
54
Shared layout component
07:42
55
Environment variables
03:09
56
Signup form handle change
10:21
57
User signup
10:05
58
User signup success and error
09:17
59
Code refactoring - Signup
03:09
60
User signin
08:22
61
Save user and token in local storage
05:12
62
User signout
05:25
63
Show and hide signin signout links conditionally
06:22
64
Private route for authenticated users only
08:13
65
User dashboard
07:42
66
Links on user dashboard
05:14
67
Admin dashboard
02:59
68
Private route for admin
08:06
69
Add category component
10:27
70
Category create success and error
09:55
71
Create product part one
04:19
72
Create product part two
19:14
73
Create product part three
07:13
74
Create product with categories
13:13
75
Products by arrival and sell
10:05
76
Show products in card
07:38
77
Show product image
06:26
78
Styling buttons and jumbotron
04:34
79
Shop page
03:30
80
Get categories in shop page
03:10
81
Show categories in shop sidebar
05:27
82
Handle categories toggle
07:34
83
Passing categories filter to parent component
04:30
84
Set filters with category
04:49
85
Fixed price range
04:42
86
Radio buttons for price range
07:25
87
Filter with price range
07:04
88
Show products by filter on shop page
11:24
89
Pass products to card component
05:03
90
Load more button
06:24
91
Search component
06:12
92
Search form
09:11
93
Implementing search
09:55
94
Backend implementation of search
11:38
95
Search message to users
04:57
96
Single product component
09:08
97
Reuse card for single product
10:23
98
Product detail on single product page
10:09
99
Show related products
09:01
100
Add to cart
13:25
101
Cart items total in menu
05:06
102
Show products in cart page
10:01
103
Conditionally show hide add to cart
02:57
104
Product quantity update in cart
11:45
105
Remove product from cart
07:14
106
Cart total
09:10
107
Braintree as payment gateway
03:40
108
Signup to braintree
04:00
109
Braintree setup backend
09:56
110
Braintree setup frontend
12:36
111
Handling payment frontend
08:17
112
Processing payment backend
03:45
113
Successful transaction
10:38
114
Empty cart after successful purchase
03:19
115
Activate paypal payment
05:44
116
Steps to create paypal sandbox account
05:37
117
Order routes and controller setup - Backend
03:28
118
Create order - Frontend
06:37
119
Save orders in the database
11:14
120
Save delivery address of orders
02:15
121
Push orders to user's purchase history
07:33
122
Update sold products quantity
06:56
123
List all orders for admin
03:48
124
Fetch all orders for admin
07:43
125
Loop through orders
08:55
126
Show product details of each order
05:20
127
enum status values of each order
10:17
128
Find order by id and update order status
06:20
129
Update order status by admin
04:32
130
User profile update methods
09:41
131
Get user info for profile update
08:24
132
User profile update
10:43
133
User purchase history - Backend
03:13
134
User purchase history - Frontend
11:13
135
Manage products for admin
03:54
136
Product CRUD requests
05:58
137
Products list and delete single product
09:44
138
Get all products for admin CRUD
03:44
139
Product Update
15:57
140
Deploy to Digital Ocean Part 1
07:21
141
Deploy to Digital Ocean Part 2
12:09
142
Update user role to Admin in production
01:58
143
Fully functioning Ecommerce app in production
03:04
144
Adding a Domain name
03:03
145
Using Cloudflare's CDN and free SSL for our app
02:49

Unlock unlimited learning

Get instant access to all 144 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Node.js for Beginners - Become a NodeJs Developer + Project

Node.js for Beginners - Become a NodeJs Developer + Project

Sources: udemy
I don't know about you,but regular classes bore me, and that is why on this Node.js course we make it fun to learn LOTS of cool things. This course is meant for
22 hours 54 minutes 50 seconds
React JS 19 Crash Course | Build an App and Master React in 2 Hours

React JS 19 Crash Course | Build an App and Master React in 2 Hours

Sources: jsmastery.pro, Adrian Hajdin
This course offers a practical approach: clear explanations, real tasks, and necessary tools, so you can not only understand but also immediately apply the new.
2 hours 7 minutes 16 seconds
React and Django: A Practical Guide with Docker

React and Django: A Practical Guide with Docker

Sources: udemy
Learn how to create an Admin App using React and Django Rest Framework. Django 3.1, React Typescript, Redux, Docker, Authentication and Authorisation, Upload Im
6 hours 50 minutes 20 seconds
Node.js, Express & MongoDB Dev to Deployment

Node.js, Express & MongoDB Dev to Deployment

Sources: udemy
Node.js Express & MongoDB Dev to Deployment is a training course for building and deploying Node.js programs that teaches all the techniques from the foundation
9 hours 4 minutes 14 seconds
React Formula - Learn Frontend Development

React Formula - Learn Frontend Development

Sources: Alvin Zablan
Learn how to create modern interfaces using React, Tailwind CSS, and other tools. Most React textbooks are not designed for real-world...
23 hours 47 minutes 37 seconds