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

Module Introduction

Understanding the Big Picture

Diving Into the Frontend

Understanding the Backend

REST vs GraphQL

Connecting Node & React

MERN - Essentials

Creating our Development Environment & the Development Servers

Diving Deeper Into the Code

Useful Resources & Links

Module Introduction

Understanding the General App Idea

Sketching out the Frontend

Data & API Endpoints used in our App

Required SPA Pages for the Frontend

Module Introduction

What is React?

A Note About The NodeJS Version

React 18

Setting Up a Starting Project

Understanding JSX

Understanding Components

Working with Multiple Components

Using Props to pass Data between Components

Rendering Lists of Data

Handling Events

Efficient Child<=>Parent Communication

Working with "State"

More on State

Fetching User Input (Two-way Binding)

React.js Basics

Wrap Up

Useful Resources & Links

Module Introduction

Important: Use React Script v5

Starting Setup, Pages & Routes

Adding a UsersList Page / Component

Adding a UserItem Component

Styling our App & More Components

Presentational vs Stateful Components

Adding a Main Header

Adding Navlinks

Implementing a Basic Desktop & Mobile Navigation

Understanding Portals

Handling the Drawer State

Animating the Sidedrawer

Rendering User Places & Using Dynamic Route Segments

Getting Route Params

Adding Custom Buttons

Adding a Modal

Rendering a Map with Google Maps

Continuing without a Credit Card

Optional: More on the useEffect() Hook

Adding a Custom Form Input Component

Managing State in the Input Component

Adding Input Validation

Sharing Input Values & Adding Multiple Inputs

Managing Form-wide State

Finishing the "Add Place" Form

Starting Work on the "Update Place" Page

Adjusting the Input Component

Creating a Custom Form Hook (useForm)

Optional: More on (Custom) React Hooks

Adjusting the Form Hook

Fixing Minor Issues

Showing a Deletion Warning

Adding an "Auth" Page & Login Form

Adding Signup + "Switch Mode" Button

Adding Auth Context for App-wide State Management

Listening to Context Changes

Adding Authenticated & Unauthenticated Routes

More Auth Context Usage

Wrap Up

Useful Resources & Links

Module Introduction

What is Node.js?

Writing our First Node.js Code

Sending Requests & Responses

What is Express.js?

Adding Express.js

Understanding the Advantages of Express.js

How Code Execution Works

Node & Express Basics

Useful Resources & Links

Module Introduction

Setting up our Project

Implementing Basic Routing

Adding Place-Specific Routes

Getting a Place By User ID

Handling Errors

Adding our own Error Model

Adding Controllers

Adding a POST Route & Using Postman

Handling Errors for Unsupported Routes

Adding Patch Routes to Update Places

Deleting Places

Finalizing the "Get Places by User ID" Resource

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

Validating API Input (Request Bodies)

Validating Patch Requests & User Routes

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

Wrap Up

Useful Resources & Links

Module Introduction

What is MongoDB?

SQL vs NoSQL

Connecting React to a Database?

Setting Up MongoDB

Creating a Simple Backend & Connecting it to the Database

Creating a Document with MongoDB

Getting Data from the Database

Installing Mongoose

Understanding Models & Schemas

Creating a Product

Connecting to the Database & Saving the Product

Getting Products

Understanding the ObjectID

Wrap Up

Useful Resources & Links

Module Introduction

Installing Mongoose & Connecting our Backend to MongoDB

Creating the Place Schema & Model

Creating & Storing Documents in the Database

Getting Places by the PlaceID

Getting Places by the UserID

Updating Places

Deleting Places

How Users & Places are Related

Creating the User Model

Using the User Model for Signup

Adding the User Login

Getting Users

Adding the Relation between Places & Users

Creating Places & Adding it to a User

Deleting Places & Removing it From the User

Getting Places - An Alternative

Cleaning Up our Code

Wrap Up

Useful Resources & Links

Module Introduction

Initial Setup

Sending a POST Request to the Backend

Optional: The fetch() API

Handling CORS Errors

Getting Started with Error Handling

Proper Error Handling in the Frontend

Sending a Login Request

Getting Users with a GET Request

Creating a Custom Http Hook

Improving the Custom Http Hook

Using the Http Hook to GET Users

Adding Places (POST)

Loading Places by User Id

Updating Places

Deleting Places

Fixing NavLinks & "My Places"

Final Adjustments

Useful Resources & Links

Module Introduction

Building an ImageUpload Component

Finishing & Using the ImageUpload Component (in a Form)

On the Backend: Using Multer to Save Files

Filtering Files on the Backend (Images Only!)

Wiring Frontend and Backend Up

Connecting Users to Images

Serving Images Statically

Uploading Images for New Places

Deleting Images When Places Get Deleted

Wrap Up

Useful Resources & Links

Module Introduction

How Authentication Works (in a MERN App)

Hashing the User Password

Logging Users In (with Hashed Passwords)

Generating Tokens (JWT) on the Backend

Optional: More on JSON Web Tokens

Backend Route Protection with Auth Middleware

Using & Attaching JWT (Tokens) in React

Using Tokens to Update and Delete Places

Adding Authorization

Authorization on "Delete Places"

Storing the Token in the Browser Storage

Adding Auto-Login (Basic Version)

Managing the Token Expiration Date

Finished Auto-Login & Auto-Logout

Creating a Custom Authentication Hook

Authentication - Summary

General App Improvements

Authentication & Authorization

Useful Resources & Links

Module Introduction

Deployment Steps Overview

Using Environment Variables (Node.js)

Environment Variables in React Apps

Preparing API Keys & Credentials

Building the React App

Adding Code Splitting to React

Understanding Possible Deployment Alternatives

Deploying a Standalone REST API (Example: Heroku)

Deploying a Standalone React SPA (Example: Firebase Hosting)

Fixing Style Issues

Deploying a Combined App

Storing Files/ Uploads

Wrap Up

Course Roundup

Bonus Content