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

Build fullstack React.js applications with Node.js, Express.js & MongoDB (MERN) with this project-focused course.

Start
  1. Courses
  2. React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

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.

Section: First Section

1. Introduction (1:47) Preview
2. What is the "MERN Stack"? (7:31) Preview
3. MERN - A First Overview (2:11) Preview
4. Join our Online Learning Community (1:00) Preview
5. Course Outline (2:13) Preview
6. How To Get The Most Out Of The Course (2:52) Preview
7. Using the Course Resources (1:00) Preview

Section: The MERN Stack - Theory

8. Module Introduction (1:18)
9. Understanding the Big Picture (8:04)
10. Diving Into the Frontend (4:06)
11. Understanding the Backend (5:10)
12. REST vs GraphQL (7:54)
13. Connecting Node & React (5:50)
14. Quiz 1: MERN - Essentials (1:00)
15. Creating our Development Environment & the Development Servers (11:24)
16. Diving Deeper Into the Code (9:45)
17. Useful Resources & Links (1:00)

Section: Planning the App

18. Module Introduction (4:50) Preview
19. Understanding the General App Idea (2:35) Preview
20. Sketching out the Frontend (9:37) Preview
21. Data & API Endpoints used in our App (5:19) Preview
22. Required SPA Pages for the Frontend (2:56) Preview

Section: React.js - A Refresher

23. Module Introduction (1:12)
24. What is React? (3:13)
25. Setting Up a Starting Project (4:03)
26. Understanding JSX (5:31)
27. Understanding Components (2:50)
28. Working with Multiple Components (7:04)
29. Using Props to pass Data between Components (6:52)
30. Rendering Lists of Data (4:30)
31. Handling Events (7:24)
32. Efficient Child<=>Parent Communication (4:38)
33. Working with "State" (5:54)
34. More on State (4:20)
35. Fetching User Input (Two-way Binding) (5:52)
36. Quiz 2: React.js Basics (1:00)
37. Wrap Up (2:11)
38. Useful Resources & Links (1:00)

Section: React.js - Building the Frontend

39. Module Introduction (2:32)
40. Starting Setup, Pages & Routes (17:03)
41. Adding a UsersList Page / Component (9:29)
42. Adding a UserItem Component (3:41)
43. Styling our App & More Components (7:17)
44. Presentational vs Stateful Components (3:22)
45. Adding a Main Header (9:46)
46. Adding Navlinks (5:05)
47. Implementing a Basic Desktop & Mobile Navigation (4:21)
48. Understanding Portals (3:00)
49. Handling the Drawer State (4:07)
50. Animating the Sidedrawer (5:14)
51. Rendering User Places & Using Dynamic Route Segments (16:12)
52. Getting Route Params (2:16)
53. Adding Custom Buttons (2:53)
54. Adding a Modal (17:26)
55. Rendering a Map with Google Maps (14:36)
56. Continuing without a Credit Card (1:00)
57. Optional: More on the useEffect() Hook (1:00)
58. Adding a Custom Form Input Component (9:42)
59. Managing State in the Input Component (11:51)
60. Adding Input Validation (8:02)
61. Sharing Input Values & Adding Multiple Inputs (8:11)
62. Managing Form-wide State (9:11)
63. Finishing the "Add Place" Form (3:19)
64. Starting Work on the "Update Place" Page (8:45)
65. Adjusting the Input Component (2:38)
66. Creating a Custom Form Hook (useForm) (11:02)
67. Optional: More on (Custom) React Hooks (1:00)
68. Adjusting the Form Hook (11:19)
69. Fixing Minor Issues (4:32)
70. Showing a Deletion Warning (5:27)
71. Adding an "Auth" Page & Login Form (9:05)
72. Adding Signup + "Switch Mode" Button (11:18)
73. Adding Auth Context for App-wide State Management (7:04)
74. Listening to Context Changes (2:11)
75. Adding Authenticated & Unauthenticated Routes (5:49)
76. More Auth Context Usage (2:44)
77. Wrap Up (1:08)
78. Useful Resources & Links (1:00)

Section: Node.js & Express.js - A Refresher

79. Module Introduction (1:40)
80. What is Node.js? (2:55)
81. Writing our First Node.js Code (8:20)
82. Sending Requests & Responses (13:34)
83. What is Express.js? (1:15)
84. Adding Express.js (11:39)
85. Understanding the Advantages of Express.js (8:32)
86. Quiz 3: Node & Express Basics (1:00)
87. How Code Execution Works (3:16)
88. Useful Resources & Links (1:00)

Section: Node.js & Express.js - Building our REST API

89. Module Introduction (2:17)
90. Setting up our Project (2:29)
91. Implementing Basic Routing (11:21)
92. Adding Place-Specific Routes (9:39)
93. Getting a Place By User ID (4:37)
94. Handling Errors (10:51)
95. Adding our own Error Model (4:45)
96. Adding Controllers (6:42)
97. Adding a POST Route & Using Postman (13:21)
98. Handling Errors for Unsupported Routes (2:13)
99. Adding Patch Routes to Update Places (8:03)
100. Deleting Places (4:07)
101. Finalizing the "Get Places by User ID" Resource (2:44)
102. Setting Up the User Routes (Signup, Login, Get Users) (13:23)
103. Validating API Input (Request Bodies) (10:19)
104. Validating Patch Requests & User Routes (6:14)
105. Using Google's Geocoding API to Convert an Address Into Coordinates (16:20)
106. Wrap Up (1:27)
107. Useful Resources & Links (1:00)

Section: Working with MongoDB & Mongoose - A Refresher

108. Module Introduction (1:15)
109. What is MongoDB? (1:26)
110. SQL vs NoSQL (3:41)
111. Connecting React to a Database? (1:44)
112. Setting Up MongoDB (5:26)
113. Creating a Simple Backend & Connecting it to the Database (5:50)
114. Creating a Document with MongoDB (7:52)
115. Getting Data from the Database (6:11)
116. Installing Mongoose (1:31)
117. Understanding Models & Schemas (3:51)
118. Creating a Product (3:23)
119. Connecting to the Database & Saving the Product (7:28)
120. Getting Products (4:12)
121. Understanding the ObjectID (3:18)
122. Wrap Up (1:42)
123. Useful Resources & Links (1:00)

Section: Connecting the Backend to the Database - MongoDB & Mongoose

124. Module Introduction (1:27)
125. Installing Mongoose & Connecting our Backend to MongoDB (6:32)
126. Creating the Place Schema & Model (6:34)
127. Creating & Storing Documents in the Database (7:26)
128. Getting Places by the PlaceID (8:07)
129. Getting Places by the UserID (5:53)
130. Updating Places (6:10)
131. Deleting Places (3:43)
132. How Users & Places are Related (1:34)
133. Creating the User Model (6:27)
134. Using the User Model for Signup (11:43)
135. Adding the User Login (4:19)
136. Getting Users (5:37)
137. Adding the Relation between Places & Users (5:03)
138. Creating Places & Adding it to a User (13:59)
139. Deleting Places & Removing it From the User (7:47)
140. Getting Places - An Alternative (5:38)
141. Cleaning Up our Code (2:32)
142. Wrap Up (1:43)
143. Useful Resources & Links (1:00)

Section: Connecting the React.js Frontend to the Backend

144. Module Introduction (1:31)
145. Initial Setup (1:01)
146. Sending a POST Request to the Backend (10:30)
147. Optional: The fetch() API (1:00)
148. Handling CORS Errors (6:58)
149. Getting Started with Error Handling (7:59)
150. Proper Error Handling in the Frontend (5:05)
151. Sending a Login Request (3:35)
152. Getting Users with a GET Request (10:22)
153. Creating a Custom Http Hook (10:50)
154. Improving the Custom Http Hook (8:29)
155. Using the Http Hook to GET Users (3:47)
156. Adding Places (POST) (13:06)
157. Loading Places by User Id (7:59)
158. Updating Places (12:23)
159. Deleting Places (7:40)
160. Fixing NavLinks & "My Places" (1:06)
161. Final Adjustments (3:42)
162. Useful Resources & Links (1:00)

Section: Adding File Upload

163. Module Introduction (1:13)
164. Building an ImageUpload Component (10:36)
165. Finishing & Using the ImageUpload Component (in a Form) (12:16)
166. On the Backend: Using Multer to Save Files (8:52)
167. Filtering Files on the Backend (Images Only!) (3:03)
168. Wiring Frontend and Backend Up (5:09)
169. Connecting Users to Images (6:19)
170. Serving Images Statically (3:33)
171. Uploading Images for New Places (6:08)
172. Deleting Images When Places Get Deleted (2:59)
173. Wrap Up (1:32)
174. Useful Resources & Links (1:00)

Section: Adding Authentication

175. Module Introduction (1:08)
176. How Authentication Works (in a MERN App) (5:01)
177. Hashing the User Password (5:31)
178. Logging Users In (with Hashed Passwords) (3:10)
179. Generating Tokens (JWT) on the Backend (9:01)
180. Backend Route Protection with Auth Middleware (12:48)
181. Using & Attaching JWT (Tokens) in React (7:17)
182. Using Tokens to Update and Delete Places (2:26)
183. Adding Authorization (7:35)
184. Authorization on "Delete Places" (3:01)
185. Storing the Token in the Browser Storage (6:09)
186. Adding Auto-Login (Basic Version) (5:13)
187. Managing the Token Expiration Date (4:54)
188. Finished Auto-Login & Auto-Logout (8:03)
189. Creating a Custom Authentication Hook (3:45)
190. Authentication - Summary (1:49)
191. General App Improvements (4:40)
192. Quiz 4: Authentication & Authorization (1:00)
193. Useful Resources & Links (1:00)

Section: Application Deployment

194. Module Introduction (0:55)
195. Deployment Steps Overview (2:29)
196. Using Environment Variables (Node.js) (8:25)
197. Environment Variables in React Apps (7:26)
198. Preparing API Keys & Credentials (5:47)
199. Building the React App (4:31)
200. Adding Code Splitting to React (7:14)
201. Understanding Possible Deployment Alternatives (3:49)
202. Deploying a Standalone REST API (Example: Heroku) (10:46)
203. Deploying a Standalone React SPA (Example: Firebase Hosting) (9:12)
204. Fixing Style Issues (1:35)
205. Deploying a Combined App (10:24)
206. Storing Files/ Uploads (2:20)
207. Wrap Up (0:45)

Section: Roundup & Next Steps

208. Course Roundup (3:26)

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.