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

Course Curriculum

Chapter 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

Lecture 8: Course Setup

Chapter 2: The MERN Stack – Theory

Lecture 1: Module Introduction

Lecture 2: Understanding the Big Picture

Lecture 3: Diving Into the Frontend

Lecture 4: Understanding the Backend

Lecture 5: REST vs GraphQL

Lecture 6: Connecting Node & React

Lecture 7: Creating our Development Environment & the Development Servers

Lecture 8: Diving Deeper Into the Code

Lecture 9: Useful Resources & Links

Chapter 3: Planning the App

Lecture 1: Module Introduction

Lecture 2: Understanding the General App Idea

Lecture 3: Sketching out the Frontend

Lecture 4: Data & API Endpoints used in our App

Lecture 5: Required SPA Pages for the Frontend

Chapter 4: React.js – A Refresher

Lecture 1: Module Introduction

Lecture 2: What is React?

Lecture 3: A Note About The NodeJS Version

Lecture 4: React 18

Lecture 5: Setting Up a Starting Project

Lecture 6: Understanding JSX

Lecture 7: Understanding Components

Lecture 8: Working with Multiple Components

Lecture 9: Using Props to pass Data between Components

Lecture 10: Rendering Lists of Data

Lecture 11: Handling Events

Lecture 12: Efficient Child<=>Parent Communication

Lecture 13: Working with "State"

Lecture 14: More on State

Lecture 15: Fetching User Input (Two-way Binding)

Lecture 16: Wrap Up

Lecture 17: Useful Resources & Links

Chapter 5: React.js – Building the Frontend

Lecture 1: Module Introduction

Lecture 2: Important: Use React Script v5

Lecture 3: Starting Setup, Pages & Routes

Lecture 4: Adding a UsersList Page / Component

Lecture 5: Adding a UserItem Component

Lecture 6: Styling our App & More Components

Lecture 7: Presentational vs Stateful Components

Lecture 8: Adding a Main Header

Lecture 9: Adding Navlinks

Lecture 10: Implementing a Basic Desktop & Mobile Navigation

Lecture 11: Understanding Portals

Lecture 12: Handling the Drawer State

Lecture 13: Animating the Sidedrawer

Lecture 14: Rendering User Places & Using Dynamic Route Segments

Lecture 15: Getting Route Params

Lecture 16: Adding Custom Buttons

Lecture 17: Adding a Modal

Lecture 18: Rendering a Map with Google Maps

Lecture 19: Continuing without a Credit Card

Lecture 20: Optional: More on the useEffect() Hook

Lecture 21: Adding a Custom Form Input Component

Lecture 22: Managing State in the Input Component

Lecture 23: Adding Input Validation

Lecture 24: Sharing Input Values & Adding Multiple Inputs

Lecture 25: Managing Form-wide State

Lecture 26: Finishing the "Add Place" Form

Lecture 27: Starting Work on the "Update Place" Page

Lecture 28: Adjusting the Input Component

Lecture 29: Creating a Custom Form Hook (useForm)

Lecture 30: Optional: More on (Custom) React Hooks

Lecture 31: Adjusting the Form Hook

Lecture 32: Fixing Minor Issues

Lecture 33: Showing a Deletion Warning

Lecture 34: Adding an "Auth" Page & Login Form

Lecture 35: Adding Signup + "Switch Mode" Button

Lecture 36: Adding Auth Context for App-wide State Management

Lecture 37: Listening to Context Changes

Lecture 38: Adding Authenticated & Unauthenticated Routes

Lecture 39: More Auth Context Usage

Lecture 40: Wrap Up

Lecture 41: Useful Resources & Links

Chapter 6: Node.js & Express.js – A Refresher

Lecture 1: Module Introduction

Lecture 2: What is Node.js?

Lecture 3: Writing our First Node.js Code

Lecture 4: Sending Requests & Responses

Lecture 5: What is Express.js?

Lecture 6: Adding Express.js

Lecture 7: Understanding the Advantages of Express.js

Lecture 8: How Code Execution Works

Lecture 9: Useful Resources & Links

Chapter 7: Node.js & Express.js – Building our REST API

Lecture 1: Module Introduction