MERN Stack From Scratch

13h 32m 38s
English
Paid

Embark on a comprehensive journey to build a full-featured MERN Stack application from the ground up. This intensive 12-hour project covers everything from user interface creation to deployment, ensuring you gain practical experience with each component of the stack. You'll implement a multi-step checkout process, integrate PayPal, enable product search and user reviews, and manage user profiles complete with order tracking. Additionally, you'll explore admin functionalities and more.

Course Highlights

This detailed course offers a hands-on approach to mastering the MERN Stack. Here's what you can expect to learn:

Frontend Development

  • Create stunning user interfaces with React & the React Bootstrap UI library

State Management

  • Elegantly manage state with Redux & Redux Toolkit for dynamic and responsive applications

Backend Development

  • Develop an advanced API using Node.js, Express & MongoDB
  • Implement authentication with JWT & HTTP-Only cookies for secure user sessions
  • Create custom middleware for error handling and authorization

Database and Architecture

  • Work with Mongoose to define models, create controllers, and set up routes

Complete Development Workflow

  • Understand the full stack structure & workflow for efficient project management

Deployment

  • Deploy your application to production settings, setup domain, SSL, and more to ensure smooth operation

This course is designed for developers who are eager to enhance their skills and build a robust, production-ready application. Join us and master the MERN Stack from scratch!

About the Author: Brad Traversy

Brad Traversy thumbnail
I started coding in 2007 at the age of 26. I became a full-time educator & content creator in 2016. I show people that they don't have to be a straight A student or a genius to learn to code. I break down complex concepts by showing you how to implement them in project-based courses and tutorials.

Watch Online 95 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Welcome To The Course
All Course Lessons (95)
#Lesson TitleDurationAccess
1
Welcome To The Course Demo
02:58
2
Course Project Intro
07:02
3
ProShop Code Repo
01:50
4
Premium Docs
01:53
5
Getting Setup
04:41
6
Create React App & Git Setup
10:11
7
Header & Footer Component
10:06
8
Custom Bootstrap Theme
03:39
9
List Products
08:46
10
Implement React Router
08:04
11
Rating Component
08:12
12
Product Details Page
09:54
13
Full Stack Workflow Explanation
03:42
14
Express Server & Initial Product Routes
09:55
15
Nodemon & Concurrently
04:29
16
Environment Variables
03:31
17
Fetch Products
09:46
18
MongoDB Atlas Setup
05:04
19
MongoDB Compass Setup
01:46
20
Connect With Mongoose
04:42
21
Modeling Our Data
13:58
22
Prepare Sample Data
04:52
23
Seed Sample Data
14:21
24
Getting Started With Postman
05:34
25
Get Products From Database
12:22
26
Custom Error Middleware
07:34
27
Product Controller
05:38
28
Redux & State Overview
07:14
29
Redux Store & API Slice
14:17
30
Products API Slice & Get Products Endpoint
13:03
31
Get Product Details Endpoint Challenge
05:28
32
Loader & Message Components
05:55
33
Cart & Slice Reducer
04:38
34
Add To Cart Function
11:23
35
Qty & Add To Cart Handler
15:59
36
Cart Utils File
03:10
37
Item Count In Header
06:01
38
Cart Screen
21:49
39
Remove From Cart
06:28
40
User Routes & Controllers
20:19
41
User Email & Password Auth
10:51
42
How JWT Works
03:54
43
JWT HTTP-Only Cookie
08:28
44
Auth Middleware & Endpoint
14:12
45
Logout User & Clear Cookie
03:15
46
User Register Endpoint & Encryption
10:16
47
User Profile Endpoints
06:15
48
Auth & User API Slice
08:32
49
Login Screen
07:36
50
Login Functionality
19:39
51
User Logout
06:58
52
User Registration
08:54
53
Shipping Screen
13:20
54
Private Route Component
03:46
55
Checkout Steps Component
05:39
56
Payment Method
09:59
57
Order Routes & Controller
15:43
58
Create & Get Orders
05:25
59
Order API Slice & Start Order Screen
08:16
60
Create & Get Orders
18:20
61
Oder Page
14:47
62
PayPal Setup & Mark As Paid
05:53
63
React - PayPal Integration
12:23
64
PayPal Buttons
12:40
65
User Profile & Update
15:46
66
Display Order History
09:21
67
Admin Route Component
07:13
68
List Orders For Admin
06:51
69
Deliver Order Status
06:07
70
List Products For Admin
09:42
71
Creating Products
09:01
72
Edit Product
21:58
73
Update Product Bug Fix
01:16
74
Multer & Image Upload Endpoint
09:36
75
Upload Product Image - Frontend
08:08
76
Delete Products
07:13
77
Backend User Routes
04:27
78
List Users For Admin
07:25
79
Delete Users
04:05
80
Update Users
14:58
81
Create Reviews Backend
04:45
82
Create Reviews Frontend
13:06
83
Paginate Products
07:14
84
Paginate Component
09:27
85
Search Products
09:54
86
SearchBox Component
06:54
87
Product Carousel
07:06
88
Page Titles
07:14
89
Prepare For Production
05:10
90
Deploy To Render
09:58
91
Add Server IP To MongoDB Atlas
01:10
92
Add A Custom Domain Name
04:22
93
Wrap Up
01:37
94
Small Fixes
12:19
95
PayPal & Price Calculate Fixes
14:00
Unlock unlimited learning

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

Learn more about subscription