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

React, NodeJS, Express & MongoDB – The MERN Fullstack Guide
React, NodeJS, Express & MongoDB – The MERN Fullstack Guide
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 18.5 Hours | 7.35 GB

Build fullstack React.js applications with Node.js, Express.js & MongoDB (MERN) with this project-focused course.

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 applied
  • Detailed theory about the MERN stack and the different ways of combining the technologies
  • A complete course project where all the technologies come together into one application
  • File (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 application
  • Tons 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 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
Table of Contents

1 Introduction
2 What is the MERN Stack
3 MERN – A First Overview
4 Join our Online Learning Community
5 Course Outline
6 How To Get The Most Out Of The Course
7 Using the Course Resources

The MERN Stack – Theory
8 Module Introduction
9 Useful Resources & Links
10 Understanding the Big Picture
11 Diving Into the Frontend
12 Understanding the Backend
13 REST vs GraphQL
14 Connecting Node & React
15 Creating our Development Environment & the Development Servers
16 Diving Deeper Into the Code

Planning the App
17 Module Introduction
18 Understanding the General App Idea
19 Sketching out the Frontend
20 Data & API Endpoints used in our App
21 Required SPA Pages for the Frontend

React.js – A Refresher
22 Module Introduction
23 Efficient Child=Parent Communication
24 Working with State
25 More on State
26 Fetching User Input (Two-way Binding)
27 Wrap Up
28 Useful Resources & Links
29 What is React
30 Setting Up a Starting Project
31 Understanding JSX
32 Understanding Components
33 Working with Multiple Components
34 Using Props to pass Data between Components
35 Rendering Lists of Data
36 Handling Events

React.js – Building the Frontend
37 Module Introduction
38 Understanding Portals
39 Handling the Drawer State
40 Animating the Sidedrawer
41 Rendering User Places & Using Dynamic Route Segments
42 Getting Route Params
43 Adding Custom Buttons
44 Adding a Modal
45 Rendering a Map with Google Maps
46 Continuing without a Credit Card
47 Optional More on the useEffect() Hook
48 Starting Setup, Pages & Routes
49 Adding a Custom Form Input Component
50 Managing State in the Input Component
51 Adding Input Validation
52 Sharing Input Values & Adding Multiple Inputs
53 Managing Form-wide State
54 Finishing the Add Place Form
55 Starting Work on the Update Place Page
56 Adjusting the Input Component
57 Creating a Custom Form Hook (useForm)
58 Optional More on (Custom) React Hooks
59 Adding a UsersList Page Component
60 Adjusting the Form Hook
61 Fixing Minor Issues
62 Showing a Deletion Warning
63 Adding an Auth Page & Login Form
64 Adding Signup + Switch Mode Button
65 Adding Auth Context for App-wide State Management
66 Listening to Context Changes
67 Adding Authenticated & Unauthenticated Routes
68 More Auth Context Usage
69 Wrap Up
70 Adding a UserItem Component
71 Useful Resources & Links
72 Styling our App & More Components
73 Presentational vs Stateful Components
74 Adding a Main Header
75 Adding Navlinks
76 Implementing a Basic Desktop & Mobile Navigation

Node.js & Express.js – A Refresher
77 Module Introduction
78 Useful Resources & Links
79 What is Node.js
80 Writing our First Node Code
81 Sending Requests & Responses
82 What is Express.js
83 Adding Express.js
84 Understanding the Advantages of Express.js
85 How Code Execution Works

Node.js & Express.js – Building our REST API
86 Module Introduction
87 Handling Errors for Unsupported Routes
88 Adding Patch Routes to Update Places
89 Deleting Places
90 Finalizing the Get Places by User ID Resource
91 Setting Up the User Routes (Signup, Login, Get Users)
92 Validating API Input (Request Bodies)
93 Validating Patch Requests & User Routes
94 Using Google’s Geocoding API to Convert an Address Into Coordinates
95 Wrap Up
96 Useful Resources & Links
97 Setting up our Project
98 Implementing Basic Routing
99 Adding Place-Specific Routes
100 Getting a Place By User ID
101 Handling Errors
102 Adding our own Error Model
103 Adding Controllers
104 Adding a POST Route & Using Postman

Working with MongoDB & Mongoose – A Refresher
105 Module Introduction
106 Understanding Models & Schemas
107 Creating a Product
108 Connecting to the Database & Saving the Product
109 Getting Products
110 Understanding the ObjectID
111 Wrap Up
112 Useful Resources & Links
113 What is MongoDB
114 SQL vs NoSQL
115 Connecting React to a Database
116 Setting Up MongoDB
117 Creating a Simple Backend & Connecting it to the Database
118 Creating a Document with MongoDB
119 Getting Data from the Database
120 Installing Mongoose

Connecting the Backend to the Database – MongoDB & Mongoose
121 Module Introduction
122 Creating the User Model
123 Using the User Model for Signup
124 Adding the User Login
125 Getting Users
126 Adding the Relation between Places & Users
127 Creating Places & Adding it to a User
128 Deleting Places & Removing it From the User
129 Getting Places – An Alternative
130 Cleaning Up our Code
131 Wrap Up
132 Installing Mongoose & Connecting our Backend to MongoDB
133 Useful Resources & Links
134 Creating the Place Schema & Model
135 Creating & Storing Documents in the Database
136 Getting Places by the PlaceID
137 Getting Places by the UserID
138 Updating Places
139 Deleting Places
140 How Users & Places are Related

Connecting the React.js Frontend to the Backend
141 Module Introduction
142 Creating a Custom Http Hook
143 Improving the Custom Http Hook
144 Using the Http Hook to GET Users
145 Adding Places (POST)
146 Loading Places by User Id
147 Updating Places
148 Deleting Places
149 Fixing NavLinks & My Places
150 Final Adjustments
151 Useful Resources & Links
152 Initial Setup
153 Sending a POST Request to the Backend
154 Optional The fetch() API
155 Handling CORS Errors
156 Getting Started with Error Handling
157 Proper Error Handling in the Frontend
158 Sending a Login Request
159 Getting Users with a GET Request

Adding File Upload
160 Module Introduction
161 Deleting Images When Places Get Deleted
162 Wrap Up
163 Useful Resources & Links
164 Building an ImageUpload Component
165 Finishing & Using the ImageUpload Component (in a Form)
166 On the Backend Using Multer to Save Files
167 Filtering Files on the Backend (Images Only!)
168 Wiring Frontend and Backend Up
169 Connecting Users to Images
170 Serving Images Statically
171 Uploading Images for New Places

Adding Authentication
172 Module Introduction
173 Adding Authorization
174 Authorization on Delete Places
175 Storing the Token in the Browser Storage
176 Adding Auto-Login (Basic Version)
177 Managing the Token Expiration Date
178 Finished Auto-Login & Auto-Logout
179 Creating a Custom Authentication Hook
180 Authentication – Summary
181 General App Improvements
182 How Authentication Works (in a MERN App)
183 Useful Resources & Links
184 Hashing the User Password
185 Logging Users In (with Hashed Passwords)
186 Generating Tokens (JWT) on the Backend
187 Optional More on JSON Web Tokens
188 Backend Route Protection with Auth Middleware
189 Using & Attaching JWT (Tokens) in React
190 Using Tokens to Update and Delete Places

Application Deployment
191 Module Introduction
192 Deploying a Standalone React SPA (Example Firebase Hosting)
193 Fixing Style Issues
194 Deploying a Combined App
195 Storing Files Uploads
196 Wrap Up
197 Deployment Steps Overview
198 Using Environment Variables (Node.js)
199 Environment Variables in React Apps
200 Preparing API Keys & Credentials
201 Building the React App
202 Adding Code Splitting to React
203 Understanding Possible Deployment Alternatives
204 Deploying a Standalone REST API (Example Heroku)

Roundup & Next Steps
205 Course Roundup
206 Bonus Content