Autoplay
Autocomplete
Previous Lesson
Complete and Continue
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide
First Section
Introduction (1:47)
What is the "MERN Stack"? (7:31)
MERN - A First Overview (2:11)
Join our Online Learning Community
Course Outline (2:13)
How To Get The Most Out Of The Course (2:52)
Using the Course Resources
The Academind Pro Referral Program
The MERN Stack - Theory
Module Introduction (1:18)
Understanding the Big Picture (8:04)
Diving Into the Frontend (4:06)
Understanding the Backend (5:10)
REST vs GraphQL (7:54)
Connecting Node & React (5:50)
Quiz 1: MERN - Essentials
Creating our Development Environment & the Development Servers (11:24)
Diving Deeper Into the Code (9:45)
Useful Resources & Links
Planning 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)
React.js - A Refresher
Module Introduction (1:12)
What is React? (3:13)
Setting Up a Starting Project (4:03)
Understanding JSX (5:31)
Understanding Components (2:50)
Working with Multiple Components (7:04)
Using Props to pass Data between Components (6:52)
Rendering Lists of Data (4:30)
Handling Events (7:24)
Efficient Child<=>Parent Communication (4:38)
Working with "State" (5:54)
More on State (4:20)
Fetching User Input (Two-way Binding) (5:52)
Quiz 2: React.js Basics
Wrap Up (2:11)
Useful Resources & Links
React.js - Building the Frontend
Module Introduction (2:32)
Starting Setup, Pages & Routes (17:03)
Adding a UsersList Page / Component (9:29)
Adding a UserItem Component (3:41)
Styling our App & More Components (7:17)
Presentational vs Stateful Components (3:22)
Adding a Main Header (9:46)
Adding Navlinks (5:05)
Implementing a Basic Desktop & Mobile Navigation (4:21)
Understanding Portals (3:00)
Handling the Drawer State (4:07)
Animating the Sidedrawer (5:14)
Rendering User Places & Using Dynamic Route Segments (16:12)
Getting Route Params (2:16)
Adding Custom Buttons (2:53)
Adding a Modal (17:26)
Rendering a Map with Google Maps (14:36)
Continuing without a Credit Card
Optional: More on the useEffect() Hook
Adding a Custom Form Input Component (9:42)
Managing State in the Input Component (11:51)
Adding Input Validation (8:02)
Sharing Input Values & Adding Multiple Inputs (8:11)
Managing Form-wide State (9:11)
Finishing the "Add Place" Form (3:19)
Starting Work on the "Update Place" Page (8:45)
Adjusting the Input Component (2:38)
Creating a Custom Form Hook (useForm) (11:02)
Optional: More on (Custom) React Hooks
Adjusting the Form Hook (11:19)
Fixing Minor Issues (4:32)
Showing a Deletion Warning (5:27)
Adding an "Auth" Page & Login Form (9:05)
Adding Signup + "Switch Mode" Button (11:18)
Adding Auth Context for App-wide State Management (7:04)
Listening to Context Changes (2:11)
Adding Authenticated & Unauthenticated Routes (5:49)
More Auth Context Usage (2:44)
Wrap Up (1:08)
Useful Resources & Links
Node.js & Express.js - A Refresher
Module Introduction (1:40)
What is Node.js? (2:55)
Writing our First Node.js Code (8:20)
Sending Requests & Responses (13:34)
What is Express.js? (1:15)
Adding Express.js (11:39)
Understanding the Advantages of Express.js (8:32)
How Code Execution Works (3:16)
Quiz 3: Node & Express Basics
Useful Resources & Links
Node.js & Express.js - Building our REST API
Module Introduction (2:17)
Setting up our Project (2:29)
Implementing Basic Routing (11:21)
Adding Place-Specific Routes (9:39)
Getting a Place By User ID (4:37)
Handling Errors (10:51)
Adding our own Error Model (4:45)
Adding Controllers (6:42)
Adding a POST Route & Using Postman (13:21)
Handling Errors for Unsupported Routes (2:13)
Adding Patch Routes to Update Places (8:03)
Deleting Places (4:07)
Finalizing the "Get Places by User ID" Resource (2:44)
Setting Up the User Routes (Signup, Login, Get Users) (13:23)
Validating API Input (Request Bodies) (10:19)
Validating Patch Requests & User Routes (6:14)
Using Google's Geocoding API to Convert an Address Into Coordinates (16:20)
Wrap Up (1:27)
Useful Resources & Links
Working with MongoDB & Mongoose - A Refresher
Module Introduction (1:15)
What is MongoDB? (1:26)
SQL vs NoSQL (3:41)
Connecting React to a Database? (1:44)
Setting Up MongoDB (5:26)
Creating a Simple Backend & Connecting it to the Database (5:50)
Creating a Document with MongoDB (7:52)
Getting Data from the Database (6:11)
Installing Mongoose (1:31)
Understanding Models & Schemas (3:51)
Creating a Product (3:23)
Connecting to the Database & Saving the Product (7:28)
Getting Products (4:12)
Understanding the ObjectID (3:18)
Wrap Up (1:42)
Useful Resources & Links
Connecting the Backend to the Database - MongoDB & Mongoose
Module Introduction (1:27)
Installing Mongoose & Connecting our Backend to MongoDB (6:32)
Creating the Place Schema & Model (6:34)
Creating & Storing Documents in the Database (7:26)
Getting Places by the PlaceID (8:07)
Getting Places by the UserID (5:53)
Updating Places (6:10)
Deleting Places (3:43)
How Users & Places are Related (1:34)
Creating the User Model (6:27)
Using the User Model for Signup (11:43)
Adding the User Login (4:19)
Getting Users (5:37)
Adding the Relation between Places & Users (5:03)
Creating Places & Adding it to a User (13:59)
Deleting Places & Removing it From the User (7:47)
Getting Places - An Alternative (5:38)
Cleaning Up our Code (2:32)
Wrap Up (1:43)
Useful Resources & Links
Connecting the React.js Frontend to the Backend
Module Introduction (1:31)
Initial Setup (1:01)
Sending a POST Request to the Backend (10:30)
Optional: The fetch() API
Handling CORS Errors (6:58)
Getting Started with Error Handling (7:59)
Proper Error Handling in the Frontend (5:05)
Sending a Login Request (3:35)
Getting Users with a GET Request (10:22)
Creating a Custom Http Hook (10:50)
Improving the Custom Http Hook (8:29)
Using the Http Hook to GET Users (3:47)
Adding Places (POST) (13:06)
Loading Places by User Id (7:59)
Updating Places (12:23)
Deleting Places (7:40)
Fixing NavLinks & "My Places" (1:06)
Final Adjustments (3:42)
Useful Resources & Links
Adding File Upload
Module Introduction (1:13)
Building an ImageUpload Component (10:36)
Finishing & Using the ImageUpload Component (in a Form) (12:16)
On the Backend: Using Multer to Save Files (8:52)
Filtering Files on the Backend (Images Only!) (3:03)
Wiring Frontend and Backend Up (5:09)
Connecting Users to Images (6:19)
Serving Images Statically (3:33)
Uploading Images for New Places (6:08)
Deleting Images When Places Get Deleted (2:59)
Wrap Up (1:32)
Useful Resources & Links
Adding Authentication
Module Introduction (1:08)
How Authentication Works (in a MERN App) (5:01)
Hashing the User Password (5:31)
Logging Users In (with Hashed Passwords) (3:10)
Generating Tokens (JWT) on the Backend (9:01)
Backend Route Protection with Auth Middleware (12:48)
Using & Attaching JWT (Tokens) in React (7:17)
Using Tokens to Update and Delete Places (2:26)
Adding Authorization (7:35)
Authorization on "Delete Places" (3:01)
Storing the Token in the Browser Storage (6:09)
Adding Auto-Login (Basic Version) (5:13)
Managing the Token Expiration Date (4:54)
Finished Auto-Login & Auto-Logout (8:03)
Creating a Custom Authentication Hook (3:45)
Authentication - Summary (1:49)
General App Improvements (4:40)
Quiz 4: Authentication & Authorization
Useful Resources & Links
Application Deployment
Module Introduction (0:55)
Deployment Steps Overview (2:29)
Using Environment Variables (Node.js) (8:25)
Environment Variables in React Apps (7:26)
Preparing API Keys & Credentials (5:47)
Building the React App (4:31)
Adding Code Splitting to React (7:14)
Understanding Possible Deployment Alternatives (3:49)
Deploying a Standalone REST API (Example: Heroku) (10:46)
Deploying a Standalone React SPA (Example: Firebase Hosting) (9:12)
Fixing Style Issues (1:35)
Deploying a Combined App (10:24)
Storing Files/ Uploads (2:20)
Wrap Up (0:45)
Roundup & Next Steps
Course Roundup (3:26)
Data & API Endpoints used in our App
Download
application-data.pdf
Complete and Continue