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.

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.

Course content

Section 1First Section

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

Section 2The MERN Stack - Theory

Module IntroductionPremium
1:18
Understanding the Big PicturePremium
8:04
Diving Into the FrontendPremium
4:06
Understanding the BackendPremium
5:10
REST vs GraphQLPremium
7:54
Connecting Node & ReactPremium
5:50
Quiz 1: MERN - EssentialsPremium
1:00
Creating our Development Environment & the Development ServersPremium
11:24
Diving Deeper Into the CodePremium
9:45
Useful Resources & LinksPremium
1:00

Section 3Planning the App

Module Introduction
4:50
Understanding the General App Idea
2:35
Sketching out the Frontend
9:37
Data & API Endpoints used in our App
5:19
Required SPA Pages for the Frontend
2:56

Section 4React.js - A Refresher

Module IntroductionPremium
1:12
What is React?Premium
3:13
Setting Up a Starting ProjectPremium
4:03
Understanding JSXPremium
5:31
Understanding ComponentsPremium
2:50
Working with Multiple ComponentsPremium
7:04
Using Props to pass Data between ComponentsPremium
6:52
Rendering Lists of DataPremium
4:30
Handling EventsPremium
7:24
Efficient Child<=>Parent CommunicationPremium
4:38
Working with "State"Premium
5:54
More on StatePremium
4:20
Fetching User Input (Two-way Binding)Premium
5:52
Quiz 2: React.js BasicsPremium
1:00
Wrap UpPremium
2:11
Useful Resources & LinksPremium
1:00

Section 5React.js - Building the Frontend

Module IntroductionPremium
2:32
Starting Setup, Pages & RoutesPremium
17:03
Adding a UsersList Page / ComponentPremium
9:29
Adding a UserItem ComponentPremium
3:41
Styling our App & More ComponentsPremium
7:17
Presentational vs Stateful ComponentsPremium
3:22
Adding a Main HeaderPremium
9:46
Adding NavlinksPremium
5:05
Implementing a Basic Desktop & Mobile NavigationPremium
4:21
Understanding PortalsPremium
3:00
Handling the Drawer StatePremium
4:07
Animating the SidedrawerPremium
5:14
Rendering User Places & Using Dynamic Route SegmentsPremium
16:12
Getting Route ParamsPremium
2:16
Adding Custom ButtonsPremium
2:53
Adding a ModalPremium
17:26
Rendering a Map with Google MapsPremium
14:36
Continuing without a Credit CardPremium
1:00
Optional: More on the useEffect() HookPremium
1:00
Adding a Custom Form Input ComponentPremium
9:42
Managing State in the Input ComponentPremium
11:51
Adding Input ValidationPremium
8:02
Sharing Input Values & Adding Multiple InputsPremium
8:11
Managing Form-wide StatePremium
9:11
Finishing the "Add Place" FormPremium
3:19
Starting Work on the "Update Place" PagePremium
8:45
Adjusting the Input ComponentPremium
2:38
Creating a Custom Form Hook (useForm)Premium
11:02
Optional: More on (Custom) React HooksPremium
1:00
Adjusting the Form HookPremium
11:19
Fixing Minor IssuesPremium
4:32
Showing a Deletion WarningPremium
5:27
Adding an "Auth" Page & Login FormPremium
9:05
Adding Signup + "Switch Mode" ButtonPremium
11:18
Adding Auth Context for App-wide State ManagementPremium
7:04
Listening to Context ChangesPremium
2:11
Adding Authenticated & Unauthenticated RoutesPremium
5:49
More Auth Context UsagePremium
2:44
Wrap UpPremium
1:08
Useful Resources & LinksPremium
1:00

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

Module IntroductionPremium
1:40
What is Node.js?Premium
2:55
Writing our First Node.js CodePremium
8:20
Sending Requests & ResponsesPremium
13:34
What is Express.js?Premium
1:15
Adding Express.jsPremium
11:39
Understanding the Advantages of Express.jsPremium
8:32
Quiz 3: Node & Express BasicsPremium
1:00
How Code Execution WorksPremium
3:16
Useful Resources & LinksPremium
1:00

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

Module IntroductionPremium
2:17
Setting up our ProjectPremium
2:29
Implementing Basic RoutingPremium
11:21
Adding Place-Specific RoutesPremium
9:39
Getting a Place By User IDPremium
4:37
Handling ErrorsPremium
10:51
Adding our own Error ModelPremium
4:45
Adding ControllersPremium
6:42
Adding a POST Route & Using PostmanPremium
13:21
Handling Errors for Unsupported RoutesPremium
2:13
Adding Patch Routes to Update PlacesPremium
8:03
Deleting PlacesPremium
4:07
Finalizing the "Get Places by User ID" ResourcePremium
2:44
Setting Up the User Routes (Signup, Login, Get Users)Premium
13:23
Validating API Input (Request Bodies)Premium
10:19
Validating Patch Requests & User RoutesPremium
6:14
Using Google's Geocoding API to Convert an Address Into CoordinatesPremium
16:20
Wrap UpPremium
1:27
Useful Resources & LinksPremium
1:00

Section 8Working with MongoDB & Mongoose - A Refresher

Module IntroductionPremium
1:15
What is MongoDB?Premium
1:26
SQL vs NoSQLPremium
3:41
Connecting React to a Database?Premium
1:44
Setting Up MongoDBPremium
5:26
Creating a Simple Backend & Connecting it to the DatabasePremium
5:50
Creating a Document with MongoDBPremium
7:52
Getting Data from the DatabasePremium
6:11
Installing MongoosePremium
1:31
Understanding Models & SchemasPremium
3:51
Creating a ProductPremium
3:23
Connecting to the Database & Saving the ProductPremium
7:28
Getting ProductsPremium
4:12
Understanding the ObjectIDPremium
3:18
Wrap UpPremium
1:42
Useful Resources & LinksPremium
1:00

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

Module IntroductionPremium
1:27
Installing Mongoose & Connecting our Backend to MongoDBPremium
6:32
Creating the Place Schema & ModelPremium
6:34
Creating & Storing Documents in the DatabasePremium
7:26
Getting Places by the PlaceIDPremium
8:07
Getting Places by the UserIDPremium
5:53
Updating PlacesPremium
6:10
Deleting PlacesPremium
3:43
How Users & Places are RelatedPremium
1:34
Creating the User ModelPremium
6:27
Using the User Model for SignupPremium
11:43
Adding the User LoginPremium
4:19
Getting UsersPremium
5:37
Adding the Relation between Places & UsersPremium
5:03
Creating Places & Adding it to a UserPremium
13:59
Deleting Places & Removing it From the UserPremium
7:47
Getting Places - An AlternativePremium
5:38
Cleaning Up our CodePremium
2:32
Wrap UpPremium
1:43
Useful Resources & LinksPremium
1:00

Section 10Connecting the React.js Frontend to the Backend

Module IntroductionPremium
1:31
Initial SetupPremium
1:01
Sending a POST Request to the BackendPremium
10:30
Optional: The fetch() APIPremium
1:00
Handling CORS ErrorsPremium
6:58
Getting Started with Error HandlingPremium
7:59
Proper Error Handling in the FrontendPremium
5:05
Sending a Login RequestPremium
3:35
Getting Users with a GET RequestPremium
10:22
Creating a Custom Http HookPremium
10:50
Improving the Custom Http HookPremium
8:29
Using the Http Hook to GET UsersPremium
3:47
Adding Places (POST)Premium
13:06
Loading Places by User IdPremium
7:59
Updating PlacesPremium
12:23
Deleting PlacesPremium
7:40
Fixing NavLinks & "My Places"Premium
1:06
Final AdjustmentsPremium
3:42
Useful Resources & LinksPremium
1:00

Section 11Adding File Upload

Module IntroductionPremium
1:13
Building an ImageUpload ComponentPremium
10:36
Finishing & Using the ImageUpload Component (in a Form)Premium
12:16
On the Backend: Using Multer to Save FilesPremium
8:52
Filtering Files on the Backend (Images Only!)Premium
3:03
Wiring Frontend and Backend UpPremium
5:09
Connecting Users to ImagesPremium
6:19
Serving Images StaticallyPremium
3:33
Uploading Images for New PlacesPremium
6:08
Deleting Images When Places Get DeletedPremium
2:59
Wrap UpPremium
1:32
Useful Resources & LinksPremium
1:00

Section 12Adding Authentication

Module IntroductionPremium
1:08
How Authentication Works (in a MERN App)Premium
5:01
Hashing the User PasswordPremium
5:31
Logging Users In (with Hashed Passwords)Premium
3:10
Generating Tokens (JWT) on the BackendPremium
9:01
Backend Route Protection with Auth MiddlewarePremium
12:48
Using & Attaching JWT (Tokens) in ReactPremium
7:17
Using Tokens to Update and Delete PlacesPremium
2:26
Adding AuthorizationPremium
7:35
Authorization on "Delete Places"Premium
3:01
Storing the Token in the Browser StoragePremium
6:09
Adding Auto-Login (Basic Version)Premium
5:13
Managing the Token Expiration DatePremium
4:54
Finished Auto-Login & Auto-LogoutPremium
8:03
Creating a Custom Authentication HookPremium
3:45
Authentication - SummaryPremium
1:49
General App ImprovementsPremium
4:40
Quiz 4: Authentication & AuthorizationPremium
1:00
Useful Resources & LinksPremium
1:00

Section 13Application Deployment

Module IntroductionPremium
0:55
Deployment Steps OverviewPremium
2:29
Using Environment Variables (Node.js)Premium
8:25
Environment Variables in React AppsPremium
7:26
Preparing API Keys & CredentialsPremium
5:47
Building the React AppPremium
4:31
Adding Code Splitting to ReactPremium
7:14
Understanding Possible Deployment AlternativesPremium
3:49
Deploying a Standalone REST API (Example: Heroku)Premium
10:46
Deploying a Standalone React SPA (Example: Firebase Hosting)Premium
9:12
Fixing Style IssuesPremium
1:35
Deploying a Combined AppPremium
10:24
Storing Files/ UploadsPremium
2:20
Wrap UpPremium
0:45

Section 14Roundup & Next Steps

Course RoundupPremium
3:26

Course instructor

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.