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.

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
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
Description
We built the bestselling React course on Udemy - this course now allows you to take your React knowledge to the next level and build fullstack web apps based on React, NodeJS, MongoDB and Express!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 appliedDetailed theory about the MERN stack and the different ways of combining the technologiesA complete course project where all the technologies come together into one applicationFile (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 applicationTons 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 requiredBasic 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 upBasic Node + Express knowledge is recommended but not a must-haveAs always, this course comes with a 30-day money-back guarantee.We'd love to dive into this course together with you!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 What is the "MERN Stack"?

Lecture 3 MERN - A First Overview

Lecture 4 Join our Online Learning Community

Lecture 5 Course Outline

Lecture 6 How To Get The Most Out Of The Course

Lecture 7 Using the Course Resources

Section 2: The MERN Stack - Theory

Lecture 8 Module Introduction

Lecture 9 Understanding the Big Picture

Lecture 10 Diving Into the Frontend

Lecture 11 Understanding the Backend

Lecture 12 REST vs GraphQL

Lecture 13 Connecting Node & React

Lecture 14 Creating our Development Environment & the Development Servers

Lecture 15 Diving Deeper Into the Code

Lecture 16 Useful Resources & Links

Section 3: Planning the App

Lecture 17 Module Introduction

Lecture 18 Understanding the General App Idea

Lecture 19 Sketching out the Frontend

Lecture 20 Data & API Endpoints used in our App

Lecture 21 Required SPA Pages for the Frontend

Section 4: React.js - A Refresher

Lecture 22 Module Introduction

Lecture 23 What is React?

Lecture 24 A Note About The NodeJS Version

Lecture 25 React 18

Lecture 26 Setting Up a Starting Project

Lecture 27 Understanding JSX

Lecture 28 Understanding Components

Lecture 29 Working with Multiple Components

Lecture 30 Using Props to pass Data between Components

Lecture 31 Rendering Lists of Data

Lecture 32 Handling Events

Lecture 33 Efficient Child<=>Parent Communication

Lecture 34 Working with "State"

Lecture 35 More on State

Lecture 36 Fetching User Input (Two-way Binding)

Lecture 37 Wrap Up

Lecture 38 Useful Resources & Links

Section 5: React.js - Building the Frontend

Lecture 39 Module Introduction

Lecture 40 Starting Setup, Pages & Routes

Lecture 41 Adding a UsersList Page / Component

Lecture 42 Adding a UserItem Component

Lecture 43 Styling our App & More Components

Lecture 44 Presentational vs Stateful Components

Lecture 45 Adding a Main Header

Lecture 46 Adding Navlinks

Lecture 47 Implementing a Basic Desktop & Mobile Navigation

Lecture 48 Understanding Portals

Lecture 49 Handling the Drawer State

Lecture 50 Animating the Sidedrawer

Lecture 51 Rendering User Places & Using Dynamic Route Segments

Lecture 52 Getting Route Params

Lecture 53 Adding Custom Buttons

Lecture 54 Adding a Modal

Lecture 55 Rendering a Map with Google Maps

Lecture 56 Continuing without a Credit Card

Lecture 57 Optional: More on the useEffect() Hook

Lecture 58 Adding a Custom Form Input Component

Lecture 59 Managing State in the Input Component

Lecture 60 Adding Input Validation

Lecture 61 Sharing Input Values & Adding Multiple Inputs

Lecture 62 Managing Form-wide State

Lecture 63 Finishing the "Add Place" Form

Lecture 64 Starting Work on the "Update Place" Page

Lecture 65 Adjusting the Input Component

Lecture 66 Creating a Custom Form Hook (useForm)

Lecture 67 Optional: More on (Custom) React Hooks

Lecture 68 Adjusting the Form Hook

Lecture 69 Fixing Minor Issues

Lecture 70 Showing a Deletion Warning

Lecture 71 Adding an "Auth" Page & Login Form

Lecture 72 Adding Signup + "Switch Mode" Button

Lecture 73 Adding Auth Context for App-wide State Management

Lecture 74 Listening to Context Changes

Lecture 75 Adding Authenticated & Unauthenticated Routes

Lecture 76 More Auth Context Usage

Lecture 77 Wrap Up

Lecture 78 Useful Resources & Links

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

Lecture 79 Module Introduction

Lecture 80 What is Node.js?

Lecture 81 Writing our First Node.js Code

Lecture 82 Sending Requests & Responses

Lecture 83 What is Express.js?

Lecture 84 Adding Express.js

Lecture 85 Understanding the Advantages of Express.js

Lecture 86 How Code Execution Works

Lecture 87 Useful Resources & Links

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

Lecture 88 Module Introduction

Lecture 89 Setting up our Project

Lecture 90 Implementing Basic Routing

Lecture 91 Adding Place-Specific Routes

Lecture 92 Getting a Place By User ID

Lecture 93 Handling Errors

Lecture 94 Adding our own Error Model

Lecture 95 Adding Controllers

Lecture 96 Adding a POST Route & Using Postman

Lecture 97 Handling Errors for Unsupported Routes

Lecture 98 Adding Patch Routes to Update Places

Lecture 99 Deleting Places

Lecture 100 Finalizing the "Get Places by User ID" Resource

Lecture 101 Setting Up the User Routes (Signup, Login, Get Users)

Lecture 102 Validating API Input (Request Bodies)

Lecture 103 Validating Patch Requests & User Routes

Lecture 104 Using Google's Geocoding API to Convert an Address Into Coordinates

Lecture 105 Wrap Up

Lecture 106 Useful Resources & Links

Section 8: Working with MongoDB & Mongoose - A Refresher

Lecture 107 Module Introduction

Lecture 108 What is MongoDB?

Lecture 109 SQL vs NoSQL

Lecture 110 Connecting React to a Database?

Lecture 111 Setting Up MongoDB

Lecture 112 Creating a Simple Backend & Connecting it to the Database

Lecture 113 Creating a Document with MongoDB

Lecture 114 Getting Data from the Database

Lecture 115 Installing Mongoose

Lecture 116 Understanding Models & Schemas

Lecture 117 Creating a Product

Lecture 118 Connecting to the Database & Saving the Product

Lecture 119 Getting Products

Lecture 120 Understanding the ObjectID

Lecture 121 Wrap Up

Lecture 122 Useful Resources & Links

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

Lecture 123 Module Introduction

Lecture 124 Installing Mongoose & Connecting our Backend to MongoDB

Lecture 125 Creating the Place Schema & Model

Lecture 126 Creating & Storing Documents in the Database

Lecture 127 Getting Places by the PlaceID

Lecture 128 Getting Places by the UserID

Lecture 129 Updating Places

Lecture 130 Deleting Places

Lecture 131 How Users & Places are Related

Lecture 132 Creating the User Model

Lecture 133 Using the User Model for Signup

Lecture 134 Adding the User Login

Lecture 135 Getting Users

Lecture 136 Adding the Relation between Places & Users

Lecture 137 Creating Places & Adding it to a User

Lecture 138 Deleting Places & Removing it From the User

Lecture 139 Getting Places - An Alternative

Lecture 140 Cleaning Up our Code

Lecture 141 Wrap Up

Lecture 142 Useful Resources & Links

Section 10: Connecting the React.js Frontend to the Backend

Lecture 143 Module Introduction

Lecture 144 Initial Setup

Lecture 145 Sending a POST Request to the Backend

Lecture 146 Optional: The fetch() API

Lecture 147 Handling CORS Errors

Lecture 148 Getting Started with Error Handling

Lecture 149 Proper Error Handling in the Frontend

Lecture 150 Sending a Login Request

Lecture 151 Getting Users with a GET Request

Lecture 152 Creating a Custom Http Hook

Lecture 153 Improving the Custom Http Hook

Lecture 154 Using the Http Hook to GET Users

Lecture 155 Adding Places (POST)

Lecture 156 Loading Places by User Id

Lecture 157 Updating Places

Lecture 158 Deleting Places

Lecture 159 Fixing NavLinks & "My Places"

Lecture 160 Final Adjustments

Lecture 161 Useful Resources & Links

Section 11: Adding File Upload

Lecture 162 Module Introduction

Lecture 163 Building an ImageUpload Component

Lecture 164 Finishing & Using the ImageUpload Component (in a Form)

Lecture 165 On the Backend: Using Multer to Save Files

Lecture 166 Filtering Files on the Backend (Images Only!)

Lecture 167 Wiring Frontend and Backend Up

Lecture 168 Connecting Users to Images

Lecture 169 Serving Images Statically

Lecture 170 Uploading Images for New Places

Lecture 171 Deleting Images When Places Get Deleted

Lecture 172 Wrap Up

Lecture 173 Useful Resources & Links

Section 12: Adding Authentication

Lecture 174 Module Introduction

Lecture 175 How Authentication Works (in a MERN App)

Lecture 176 Hashing the User Password

Lecture 177 Logging Users In (with Hashed Passwords)

Lecture 178 Generating Tokens (JWT) on the Backend

Lecture 179 Optional: More on JSON Web Tokens

Lecture 180 Backend Route Protection with Auth Middleware

Lecture 181 Using & Attaching JWT (Tokens) in React

Lecture 182 Using Tokens to Update and Delete Places

Lecture 183 Adding Authorization

Lecture 184 Authorization on "Delete Places"

Lecture 185 Storing the Token in the Browser Storage

Lecture 186 Adding Auto-Login (Basic Version)

Lecture 187 Managing the Token Expiration Date

Lecture 188 Finished Auto-Login & Auto-Logout

Lecture 189 Creating a Custom Authentication Hook

Lecture 190 Authentication - Summary

Lecture 191 General App Improvements

Lecture 192 Useful Resources & Links

Section 13: Application Deployment

Lecture 193 Module Introduction

Lecture 194 Deployment Steps Overview

Lecture 195 Using Environment Variables (Node.js)

Lecture 196 Environment Variables in React Apps

Lecture 197 Preparing API Keys & Credentials

Lecture 198 Building the React App

Lecture 199 Adding Code Splitting to React

Lecture 200 Understanding Possible Deployment Alternatives

Lecture 201 Deploying a Standalone REST API (Example: Heroku)

Lecture 202 Deploying a Standalone React SPA (Example: Firebase Hosting)

Lecture 203 Fixing Style Issues

Lecture 204 Deploying a Combined App

Lecture 205 Storing Files/ Uploads

Lecture 206 Wrap Up

Section 14: Roundup & Next Steps

Lecture 207 Course Roundup

Lecture 208 Bonus Content

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