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

18h 45m 10s
English
Paid

Course description

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.

Read more about 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

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

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

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

Unlock unlimited learning

Get instant access to all 187 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

Database Mastery: MongoDB

Database Mastery: MongoDB

Sources: jsmastery.pro, Adrian Hajdin
Enhance your backend development skills with the intensive Database Mastery: MongoDB course! This course is perfect for beginners and developers who...
11 minutes 58 seconds
Build Collaborative editor and Real-time video call with NodeJS

Build Collaborative editor and Real-time video call with NodeJS

Sources: Code4Startup (coderealprojects)
In this project, you will be learning how to build a collaborative platform with real-time code editor so that you can share what you are coding/typing on the s
4 hours 35 minutes 13 seconds
Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Sources: Nomad Coders
We will do a Uber clone (backend + frontend + deployment). From head to toe using JavaScript! This time full stack, full JavaScript stack!
22 hours 41 minutes 56 seconds