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.

  • Maximilian Schwarzmüller
  • 4.53
  • (8246 reviews)
  • 18.5 hrs
  • 208 lectures
  • Udemy
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

What you will 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

Your trainer

Maximilian Schwarzmüller

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS 2 in a lot of projects. I love both worlds nowadays!

208 lessons

Easy to follow lectures and videos covering subject details.

18.5 hours

This course includes hours of video material. Watch on-demand, anytime, anywhere.

Certificate of Completion

You will earn a Certificate of Completion at the end of this course.

Course curriculum

Introduction17:34

  • Introduction01:47
  • What is the "MERN Stack"?07:31
  • MERN - A First Overview02:11
  • Join our Online Learning Community00:25
  • Course Outline02:13
  • How To Get The Most Out Of The Course02:54
  • Using the Course Resources00:33

  • Module Introduction01:18
  • Understanding the Big Picture08:04
  • Diving Into the Frontend04:06
  • Understanding the Backend05:10
  • REST vs GraphQL07:54
  • Connecting Node & React05:50
  • MERN - Essentials7 questions
  • Creating our Development Environment & the Development Servers11:24
  • Diving Deeper Into the Code09:45
  • Useful Resources & Links00:13

  • Module Introduction04:50
  • Understanding the General App Idea02:35
  • Sketching out the Frontend09:37
  • Data & API Endpoints used in our App05:19
  • Required SPA Pages for the Frontend02:56

  • Module Introduction01:12
  • What is React?03:13
  • A Note About The NodeJS Version00:21
  • React 1800:53
  • Setting Up a Starting Project04:03
  • Understanding JSX05:31
  • Understanding Components02:50
  • Working with Multiple Components07:04
  • Using Props to pass Data between Components06:52
  • Rendering Lists of Data04:30
  • Handling Events07:24
  • Efficient Child<=>Parent Communication04:38
  • Working with "State"05:54
  • More on State04:20
  • Fetching User Input (Two-way Binding)05:52
  • React.js Basics5 questions
  • Wrap Up02:11
  • Useful Resources & Links00:11

  • Module Introduction02:32
  • Starting Setup, Pages & Routes17:21
  • Adding a UsersList Page / Component09:29
  • Adding a UserItem Component03:41
  • Styling our App & More Components07:17
  • Presentational vs Stateful Components03:22
  • Adding a Main Header09:46
  • Adding Navlinks05:05
  • Implementing a Basic Desktop & Mobile Navigation04:21
  • Understanding Portals03:00
  • Handling the Drawer State04:07
  • Animating the Sidedrawer05:14
  • Rendering User Places & Using Dynamic Route Segments16:12
  • Getting Route Params02:16
  • Adding Custom Buttons02:53
  • Adding a Modal17:26
  • Rendering a Map with Google Maps14:36
  • Continuing without a Credit Card01:08
  • Optional: More on the useEffect() Hook01:21
  • Adding a Custom Form Input Component09:42
  • Managing State in the Input Component11:51
  • Adding Input Validation08:02
  • Sharing Input Values & Adding Multiple Inputs08:11
  • Managing Form-wide State09:11
  • Finishing the "Add Place" Form03:19
  • Starting Work on the "Update Place" Page08:45
  • Adjusting the Input Component02:38
  • Creating a Custom Form Hook (useForm)11:02
  • Optional: More on (Custom) React Hooks00:55
  • Adjusting the Form Hook11:19
  • Fixing Minor Issues04:32
  • Showing a Deletion Warning05:27
  • Adding an "Auth" Page & Login Form09:05
  • Adding Signup + "Switch Mode" Button11:18
  • Adding Auth Context for App-wide State Management07:04
  • Listening to Context Changes02:11
  • Adding Authenticated & Unauthenticated Routes05:49
  • More Auth Context Usage02:44
  • Wrap Up01:08
  • Useful Resources & Links00:11

  • Module Introduction01:40
  • What is Node.js?02:55
  • Writing our First Node.js Code08:20
  • Sending Requests & Responses13:34
  • What is Express.js?01:15
  • Adding Express.js11:39
  • Understanding the Advantages of Express.js08:32
  • How Code Execution Works03:16
  • Node & Express Basics5 questions
  • Useful Resources & Links00:12

  • Module Introduction02:17
  • Setting up our Project02:29
  • Implementing Basic Routing11:21
  • Adding Place-Specific Routes09:39
  • Getting a Place By User ID04:37
  • Handling Errors10:51
  • Adding our own Error Model04:45
  • Adding Controllers06:42
  • Adding a POST Route & Using Postman13:21
  • Handling Errors for Unsupported Routes02:13
  • Adding Patch Routes to Update Places08:03
  • Deleting Places04:07
  • Finalizing the "Get Places by User ID" Resource02:44
  • Setting Up the User Routes (Signup, Login, Get Users)13:23
  • Validating API Input (Request Bodies)10:19
  • Validating Patch Requests & User Routes06:14
  • Using Google's Geocoding API to Convert an Address Into Coordinates16:20
  • Wrap Up01:27
  • Useful Resources & Links00:12

  • Module Introduction01:15
  • What is MongoDB?01:26
  • SQL vs NoSQL03:41
  • Connecting React to a Database?01:44
  • Setting Up MongoDB05:26
  • Creating a Simple Backend & Connecting it to the Database05:50
  • Creating a Document with MongoDB07:52
  • Getting Data from the Database06:11
  • Installing Mongoose01:31
  • Understanding Models & Schemas03:51
  • Creating a Product03:23
  • Connecting to the Database & Saving the Product07:28
  • Getting Products04:12
  • Understanding the ObjectID03:18
  • Wrap Up01:42
  • Useful Resources & Links00:09

  • Module Introduction01:27
  • Installing Mongoose & Connecting our Backend to MongoDB06:32
  • Creating the Place Schema & Model06:34
  • Creating & Storing Documents in the Database07:26
  • Getting Places by the PlaceID08:07
  • Getting Places by the UserID05:53
  • Updating Places06:10
  • Deleting Places03:43
  • How Users & Places are Related01:34
  • Creating the User Model06:27
  • Using the User Model for Signup11:43
  • Adding the User Login04:19
  • Getting Users05:37
  • Adding the Relation between Places & Users05:03
  • Creating Places & Adding it to a User13:59
  • Deleting Places & Removing it From the User07:47
  • Getting Places - An Alternative05:38
  • Cleaning Up our Code02:32
  • Wrap Up01:43
  • Useful Resources & Links00:09

  • Module Introduction01:31
  • Initial Setup01:01
  • Sending a POST Request to the Backend10:30
  • Optional: The fetch() API00:35
  • Handling CORS Errors06:58
  • Getting Started with Error Handling07:59
  • Proper Error Handling in the Frontend05:05
  • Sending a Login Request03:35
  • Getting Users with a GET Request10:22
  • Creating a Custom Http Hook10:50
  • Improving the Custom Http Hook08:29
  • Using the Http Hook to GET Users03:47
  • Adding Places (POST)13:06
  • Loading Places by User Id07:59
  • Updating Places12:23
  • Deleting Places07:40
  • Fixing NavLinks & "My Places"01:06
  • Final Adjustments03:42
  • Useful Resources & Links00:10

  • Module Introduction01:13
  • Building an ImageUpload Component10:36
  • Finishing & Using the ImageUpload Component (in a Form)12:16
  • On the Backend: Using Multer to Save Files08:52
  • Filtering Files on the Backend (Images Only!)03:03
  • Wiring Frontend and Backend Up05:09
  • Connecting Users to Images06:19
  • Serving Images Statically03:33
  • Uploading Images for New Places06:08
  • Deleting Images When Places Get Deleted02:59
  • Wrap Up01:32
  • Useful Resources & Links00:10

  • Module Introduction01:08
  • How Authentication Works (in a MERN App)05:01
  • Hashing the User Password05:31
  • Logging Users In (with Hashed Passwords)03:10
  • Generating Tokens (JWT) on the Backend09:01
  • Optional: More on JSON Web Tokens00:07
  • Backend Route Protection with Auth Middleware12:48
  • Using & Attaching JWT (Tokens) in React07:17
  • Using Tokens to Update and Delete Places02:26
  • Adding Authorization07:35
  • Authorization on "Delete Places"03:01
  • Storing the Token in the Browser Storage06:09
  • Adding Auto-Login (Basic Version)05:13
  • Managing the Token Expiration Date04:54
  • Finished Auto-Login & Auto-Logout08:03
  • Creating a Custom Authentication Hook03:45
  • Authentication - Summary01:49
  • General App Improvements04:40
  • Authentication & Authorization3 questions
  • Useful Resources & Links00:10

  • Module Introduction00:55
  • Deployment Steps Overview02:29
  • Using Environment Variables (Node.js)08:25
  • Environment Variables in React Apps07:26
  • Preparing API Keys & Credentials05:47
  • Building the React App04:31
  • Adding Code Splitting to React07:14
  • Understanding Possible Deployment Alternatives03:49
  • Deploying a Standalone REST API (Example: Heroku)10:46
  • Deploying a Standalone React SPA (Example: Firebase Hosting)09:12
  • Fixing Style Issues01:35
  • Deploying a Combined App10:24
  • Storing Files/ Uploads02:20
  • Wrap Up00:45

  • Course Roundup00:55
  • Bonus Content00:17
Enroll now
Online Courses

Learning NodeJS doesn't have to be hard. Here is our curated list of recommended online courses that will guide you step-by-step in the learning process.

Learn more
Books

Are you an avid book reader? Do you prefer paperback, or maybe Kindle version? Take a look at our curated list of NodeJS related books and take yourskills to the next level.

Learn more
YouTube videos

The number of high-quality and free NodeJS video tutorials is growing fast. Check this curated list of recommended videos - there is no excuse to stop learning.

Learn more