CF

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

Brad Traversy is a US developer behind Traversy Media — one of the largest independent web-development YouTube channels, with millions of subscribers and one of the most-viewed introductory tutorial libraries on the platform. He has been publishing daily-or-near-daily web development content continuously for nearly a decade and has anchored a generation of self-taught developers' first exposure to HTML, CSS, JavaScript, and the modern framework landscape.

The course catalog (sold via Udemy and the standalone Traversy platform) covers the full web-development stack: HTML and CSS fundamentals, JavaScript, React (including Next.js), Vue, Node.js, Express, MongoDB, full-stack MERN applications, Tailwind CSS, modern CSS layout, and the surrounding tooling. Brad's teaching style is calm, patient, and deliberately accessible to absolute beginners.

The CourseFlix listing under this source carries over 17 Brad Traversy courses spanning that range. Material is paid and aimed primarily at self-taught developers building real proficiency with web development from a clean start.

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

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
Prospective students should have a basic understanding of JavaScript and familiarity with web development concepts. Experience with front-end development and basic knowledge of Node.js would be beneficial, as the course involves creating a full-featured MERN stack application from scratch.
What will I build during the course?
Students will develop a full-featured MERN stack application. Key features include a multi-step checkout process, PayPal integration, product search, user reviews, user profile management with order tracking, and admin functionalities. The course ensures hands-on experience with each component of the stack, from user interface creation to deployment.
Who is the target audience for this course?
The course is designed for developers eager to enhance their skills in full-stack development using the MERN stack. It is suitable for those looking to gain practical experience building a comprehensive web application from the ground up, with a focus on both frontend and backend development.
How does this course compare to other MERN stack courses in terms of depth?
This course offers a detailed and practical approach to mastering the MERN stack by guiding students through the complete development of a full-featured application. With 95 lessons, it covers everything from UI creation with React and Redux to backend API development with Node.js and MongoDB, providing a comprehensive learning experience.
What specific tools and platforms will be used in this course?
Students will use React and React Bootstrap for frontend development, and Redux for state management. The backend will involve Node.js, Express, and MongoDB, with Mongoose for database management. The course also covers deployment processes, including setting up a domain and SSL for production environments.
What topics are not covered in the course?
The course does not cover advanced Node.js topics unrelated to Express or MongoDB, such as specific Node.js frameworks other than Express. Additionally, it does not focus on testing frameworks or methodologies, as the primary focus is on building and deploying the application using the MERN stack.
How much time should I expect to commit to this course?
The course spans 12 hours of video content across 95 lessons. Students should allocate additional time for exercises, coding challenges, and project work, which can vary based on individual pacing and prior experience. The course demands a dedicated time commitment to fully grasp the material and complete the project.