CF

React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

18h 45m 10s
English
Paid
Released
Added to CourseFlix

React, NodeJS, Express & MongoDB - The MERN Fullstack Guide is a 188-lesson 18 hours 45 minutes self-paced course by Udemy. Building fullstack applications (i.

Course facts

Lessons
188
Duration
18 hours 45 minutes
Language
English
Released
November 2019
Added to CourseFlix
April 2024
Instructor
Udemy
Price
Premium

Building fullstack applications (i.e. frontend + backend) with the MERN stack is very popular - in this course, you will learn it from scratch at the example of a complete project! MERN stands for MongoDB, Express.js, React.js and Node.js - and combined, these four technologies allow you to build amazing web applications. In this course, we'll build an entire project and you will learn how these different technologies work together step by step. We'll first have a look at all the individual building blocks, so that we then can also combine them all into one amazing application by the end of the course.

This course also doesn't stop after the basics - instead, you'll also learn how to add file upload, authentication, authorization and how to deploy your application in different ways to different hosting services.

This course is taught by two instructors - Max (React.js, Node/ Express) and Manuel (MongoDB) who have years of experience of working with these technologies and teaching them to other people. We took and combined our experiences to deliver you the best possible MERN stack course you can find out there.

In detail, this course offers:

  • Brief refreshers on the core technologies (React, Node, Express, MongoDB)

  • Project sections for each technology where the theoretic knowledge is applied

  • Detailed theory about the MERN stack and the different ways of combining the technologies

  • A complete course project where all the technologies come together into one application

  • File (image) upload in both React.js (sending the file) and Node/ Express (receiving the file)

  • User authentication (signup + login)

  • User authorization (controlling access to certain resources)

  • Detailed deployment instructions - including different ways of deploying the application

  • Tons of quizzes and extra resources!

By the end of this course, you'll feel comfortable building your own MERN stack applications and you can build up on all the knowledge taught throughout this course to dive into your own projects and use-cases.

What are the requirements for taking this course?

  • NO prior MERN stack knowledge is required

  • Basic React.js knowledge is strongly recommended - a refresher is provided as part of the course but this course is NOT meant to teach React from the ground up

  • Basic Node + Express knowledge is recommended but not a must-have

As always, this course comes with a 30-day money-back guarantee.

We'd love to dive into this course together with you!

Requirements:
  • Basic knowledge about ReactJS is required
  • ReactJS Hooks knowledge is recommended
  • Basic knowledge about Node, Express and MongoDB is recommended but not a must-have
  • NO expert React knowledge or MERN knowledge is required
Who this course is for:
  • Developers who got basic React knowledge and now want to build a fullstack app
  • Advanced React developers who are interested in connecting React apps to Node/ Express
  • Node/ Express developers who want to learn how to add a modern frontend to their backend

What you'll learn:

  • Learn how to connect ReactJS with NodeJS, Express & MongoDB
  • Build an entire project from scratch!
  • Refresh the basics about ReactJS, NodeJS, Express and MongoDB
  • Learn how to implement Authentication & Authorization
  • Add File Upload to ReactJS + Node/ Express Applications

Who teaches React, NodeJS, Express & MongoDB - The MERN Fullstack Guide? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in React, NodeJS, Express & MongoDB - The MERN Fullstack Guide?

This is a demo lesson (10:00 remaining)

Watch the first 10 minutes free. One payment unlocks all 188 lessons here and every other premium course. No auto-renew.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (188)
#Lesson TitleDurationAccess
1
Introduction Demo
01:48
2
What is the "MERN Stack"?
07:32
3
MERN - A First Overview
02:12
4
Course Outline
02:14
5
How To Get The Most Out Of The Course
02:55
6
Module Introduction
01:19
7
Understanding the Big Picture
08:05
8
Diving Into the Frontend
04:07
9
Understanding the Backend
05:11
10
REST vs GraphQL
07:55
11
Connecting Node & React
05:51
12
Creating our Development Environment & the Development Servers
11:25
13
Diving Deeper Into the Code
09:46
14
Module Introduction
04:51
15
Understanding the General App Idea
02:37
16
Sketching out the Frontend
09:38
17
Data & API Endpoints used in our App
05:20
18
Required SPA Pages for the Frontend
02:57
19
Module Introduction
01:13
20
What is React?
03:14
21
Setting Up a Starting Project
04:04
22
Understanding JSX
05:32
23
Understanding Components
02:51
24
Working with Multiple Components
07:05
25
Using Props to pass Data between Components
06:53
26
Rendering Lists of Data
04:31
27
Handling Events
07:25
28
Efficient Child<=>Parent Communication
04:39
29
Working with "State"
05:55
30
More on State
04:21
31
Fetching User Input (Two-way Binding)
05:53
32
Wrap Up
02:12
33
Module Introduction
02:33
34
Starting Setup, Pages & Routes
17:22
35
Adding a UsersList Page / Component
09:30
36
Adding a UserItem Component
03:42
37
Styling our App & More Components
07:18
38
Presentational vs Stateful Components
03:23
39
Adding a Main Header
09:47
40
Adding Navlinks
05:06
41
Implementing a Basic Desktop & Mobile Navigation
04:22
42
Understanding Portals
03:01
43
Handling the Drawer State
04:09
44
Animating the Sidedrawer
05:15
45
Rendering User Places & Using Dynamic Route Segments
16:13
46
Getting Route Params
02:17
47
Adding Custom Buttons
02:54
48
Adding a Modal
17:27
49
Rendering a Map with Google Maps
14:37
50
Adding a Custom Form Input Component
09:43
51
Managing State in the Input Component
11:52
52
Adding Input Validation
08:03
53
Sharing Input Values & Adding Multiple Inputs
08:12
54
Managing Form-wide State
09:12
55
Finishing the "Add Place" Form
03:20
56
Starting Work on the "Update Place" Page
08:46
57
Adjusting the Input Component
02:39
58
Creating a Custom Form Hook (useForm)
11:04
59
Adjusting the Form Hook
11:20
60
Fixing Minor Issues
04:33
61
Showing a Deletion Warning
05:29
62
Adding an "Auth" Page & Login Form
09:07
63
Adding Signup + "Switch Mode" Button
11:19
64
Adding Auth Context for App-wide State Management
07:05
65
Listening to Context Changes
02:12
66
Adding Authenticated & Unauthenticated Routes
05:50
67
More Auth Context Usage
02:45
68
Wrap Up
01:09
69
Module Introduction
01:41
70
What is Node.js?
02:56
71
Writing our First Node.js Code
08:21
72
Sending Requests & Responses
13:35
73
What is Express.js?
01:16
74
Adding Express.js
11:40
75
Understanding the Advantages of Express.js
08:33
76
How Code Execution Works
03:17
77
Module Introduction
02:18
78
Setting up our Project
02:30
79
Implementing Basic Routing
11:22
80
Adding Place-Specific Routes
09:40
81
Getting a Place By User ID
04:38
82
Handling Errors
10:53
83
Adding our own Error Model
04:46
84
Adding Controllers
06:43
85
Adding a POST Route & Using Postman
13:23
86
Handling Errors for Unsupported Routes
02:14
87
Adding Patch Routes to Update Places
08:04
88
Deleting Places
04:08
89
Finalizing the "Get Places by User ID" Resource
02:45
90
Setting Up the User Routes (Signup, Login, Get Users)
13:25
91
Validating API Input (Request Bodies)
10:20
92
Validating Patch Requests & User Routes
06:15
93
Using Google's Geocoding API to Convert an Address Into Coordinates
16:21
94
Wrap Up
01:28
95
Module Introduction
01:16
96
What is MongoDB?
01:27
97
SQL vs NoSQL
03:42
98
Connecting React to a Database?
01:45
99
Setting Up MongoDB
05:27
100
Creating a Simple Backend & Connecting it to the Database
05:51
101
Creating a Document with MongoDB
07:53
102
Getting Data from the Database
06:12
103
Installing Mongoose
01:32
104
Understanding Models & Schemas
03:52
105
Creating a Product
03:24
106
Connecting to the Database & Saving the Product
07:29
107
Getting Products
04:13
108
Understanding the ObjectID
03:19
109
Wrap Up
01:43
110
Module Introduction
01:28
111
Installing Mongoose & Connecting our Backend to MongoDB
06:33
112
Creating the Place Schema & Model
06:35
113
Creating & Storing Documents in the Database
07:27
114
Getting Places by the PlaceID
08:09
115
Getting Places by the UserID
05:54
116
Updating Places
06:11
117
Deleting Places
03:44
118
How Users & Places are Related
01:35
119
Creating the User Model
06:29
120
Using the User Model for Signup
11:44
121
Adding the User Login
04:20
122
Getting Users
05:38
123
Adding the Relation between Places & Users
05:04
124
Creating Places & Adding it to a User
14:00
125
Deleting Places & Removing it From the User
07:48
126
Getting Places - An Alternative
05:39
127
Cleaning Up our Code
02:33
128
Wrap Up
01:44
129
Module Introduction
01:32
130
Initial Setup
01:02
131
Sending a POST Request to the Backend
10:31
132
Handling CORS Errors
06:59
133
Getting Started with Error Handling
08:00
134
Proper Error Handling in the Frontend
05:06
135
Sending a Login Request
03:36
136
Getting Users with a GET Request
10:23
137
Creating a Custom Http Hook
10:51
138
Improving the Custom Http Hook
08:30
139
Using the Http Hook to GET Users
03:48
140
Adding Places (POST)
13:07
141
Loading Places by User Id
08:00
142
Updating Places
12:24
143
Deleting Places
07:41
144
Fixing NavLinks & "My Places"
01:07
145
Final Adjustments
03:43
146
Module Introduction
01:14
147
Building an ImageUpload Component
10:37
148
Finishing & Using the ImageUpload Component (in a Form)
12:17
149
On the Backend: Using Multer to Save Files
08:53
150
Filtering Files on the Backend (Images Only!)
03:04
151
Wiring Frontend and Backend Up
05:10
152
Connecting Users to Images
06:20
153
Serving Images Statically
03:34
154
Uploading Images for New Places
06:09
155
Deleting Images When Places Get Deleted
03:00
156
Wrap Up
01:33
157
Module Introduction
01:09
158
How Authentication Works (in a MERN App)
05:02
159
Hashing the User Password
05:33
160
Logging Users In (with Hashed Passwords)
03:11
161
Generating Tokens (JWT) on the Backend
09:02
162
Backend Route Protection with Auth Middleware
12:49
163
Using & Attaching JWT (Tokens) in React
07:18
164
Using Tokens to Update and Delete Places
02:27
165
Adding Authorization
07:36
166
Authorization on "Delete Places"
03:02
167
Storing the Token in the Browser Storage
06:10
168
Adding Auto-Login (Basic Version)
05:15
169
Managing the Token Expiration Date
04:55
170
Finished Auto-Login & Auto-Logout
08:04
171
Creating a Custom Authentication Hook
03:46
172
Authentication - Summary
01:50
173
General App Improvements
04:41
174
Module Introduction
00:56
175
Deployment Steps Overview
02:30
176
Using Environment Variables (Node.js)
08:26
177
Environment Variables in React Apps
07:27
178
Preparing API Keys & Credentials
05:48
179
Building the React App
04:32
180
Adding Code Splitting to React
07:16
181
Understanding Possible Deployment Alternatives
03:51
182
Deploying a Standalone REST API (Example: Heroku)
10:47
183
Deploying a Standalone React SPA (Example: Firebase Hosting)
09:13
184
Fixing Style Issues
01:36
185
Deploying a Combined App
10:25
186
Storing Files/ Uploads
02:21
187
Wrap Up
00:46
188
Course Roundup
00:56
Watch the other 187 lessons

One payment unlocks this course and every other premium course. No auto-renew.

See plans

Recommended next

What courses are similar to React, NodeJS, Express & MongoDB - The MERN Fullstack Guide?

More courses by Udemy

Frequently asked questions

What prerequisites are needed before enrolling in this course?
This course does not list specific prerequisites, but familiarity with JavaScript and basic web development concepts would be beneficial. The course begins with an introduction to the MERN stack, including MongoDB, Express.js, React.js, and Node.js, providing a foundation for those less experienced with these technologies.
What will I build during the course?
You will build a complete fullstack web application using the MERN stack. The course guides you through the process step by step, starting with individual building blocks and culminating in an integrated application that combines MongoDB, Express.js, React.js, and Node.js.
Who is the target audience for this course?
The course is designed for web developers interested in learning how to build fullstack applications using the MERN stack. It is suitable for those who want to understand how frontend and backend technologies can be integrated to create dynamic web applications.
How does this course compare to other fullstack courses?
This course specifically focuses on the MERN stack, which includes MongoDB, Express.js, React.js, and Node.js. Unlike some fullstack courses that might cover a broader range of technologies, this course provides an in-depth look at how these four technologies work together to build a complete web application.
Which specific tools or platforms are covered in this course?
The course covers MongoDB as the database, Express.js for the server framework, React.js for the frontend library, and Node.js as the runtime environment. It also includes lessons on connecting Node and React, creating development environments, and rendering a map with Google Maps.
What are some topics that are not covered in this course?
This course focuses on the MERN stack and does not cover other web technologies such as Angular, Vue.js, or SQL databases. It also does not delve into advanced topics like serverless architecture or containerization with Docker.
What is the expected time commitment for this course?
The course consists of 188 lessons. While the exact runtime is not specified, students should expect to invest a significant amount of time to work through the material, especially if they choose to practice coding alongside the lessons.