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

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

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 18h 51m | 4.59 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 Understanding the Big Picture
10 Diving Into the Frontend
11 Understanding the Backend
12 REST vs GraphQL
13 Connecting Node & React
14 Creating our Development Environment & the Development Servers
15 Diving Deeper Into the Code
16 Useful Resources & Links

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 What is React
24 A Note About The NodeJS Version
25 Setting Up a Starting Project
26 Understanding JSX
27 Understanding Components
28 Working with Multiple Components
29 Using Props to pass Data between Components
30 Rendering Lists of Data
31 Handling Events
32 Efficient Child = Parent Communication
33 Working with State
34 More on State
35 Fetching User Input (Two-way Binding)
36 Wrap Up
37 Useful Resources & Links

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

Node.js & Express.js – A Refresher
78 Module Introduction
79 What is Node.js
80 Writing our First Node.js 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
86 Useful Resources & Links

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

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

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

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

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

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

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

Roundup & Next Steps
206 Course Roundup
207 Bonus Content