Node With React Fullstack Web Development

Build and deploy fullstack web apps with NodeJS, React, Redux, Express, and MongoDB.

Last updated 2022-01-10 | 4.6

- Create boilerplate starter projects with React
- Redux
- Express
- and Mongo
- Understand common web technologies and design patterns to connect them together
- Master deployment techniques between the production and development environments

What you'll learn

Create boilerplate starter projects with React
Redux
Express
and Mongo
Understand common web technologies and design patterns to connect them together
Master deployment techniques between the production and development environments
Make an app with Google OAuth authentication
Learn to effectively create and send emails from a backend server
Accept and process credit card payments from users

* Requirements

* Basic understanding of Javascript
* React
* and Redux
* A Mac
* Windows
* or Linux computer

Description

Note: This course assumes you've got the basics of React and Redux down.  Check out my course 'Modern React with Redux', its the perfect preparation!

Go beyond the basics of React and Redux!  This course will teach you to combine the ultra-popular React, Redux, Express, and MongoDB technologies to build a fullstack web application.

Advanced Deployment? You will learn it.  Billing/PaymentsIncluded.  Handling EmailOf course!

------------------------------

What Will You Build?

All of my courses are 'learn-by-doing': no boring endless lectures with Powerpoints, only live, interactive coding examples.  In this course we'll build one massive web application that profiles the advanced features of React, Redux, Express, and Mongo.  By putting each concept into a real app, you'll get a better idea of when to use each unique and powerful feature.

Build a large feedback-collection app. This mega app will include the full gamut of features, including everything from authentication to email handling.  You'll learn how to build an app that can be used to send mass emails to a big list of users for the purpose of collecting feedback.  It's my goal to ensure you understand each feature we build into this app so you can apply them to your own personal or professional projects in the future.

------------------------------

Here's what we'll learn:

  • Learn the architectural considerations of building a full stack app
  • Connect a front-end Create-React-App server to a NodeJS and Express backend
  • Communicate data from your Mongo database to your React application
  • Understand how to route user requests on the front end with React Router and on the backend with Express
  • Build reusable user inputs with Redux Form, complete with navigation
  • Handle credit cards and receive payments from your users with Stripe
  • Engage your users with automated emails
  • Enhance authentication flows in your app with Google OAuth authentication
  • Separate production and development resources with advanced API key handling techniques
  • Educate your users on how to use your app with custom build landing pages

I've built the course that I would have wanted to take when I was learning to build fullstack apps. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.

Who this course is for:

  • Anyone who wants to learn how to build full stack apps with the latest in web technology

Course content

14 sections • 211 lectures

How to Get Help Preview 06:12

Course Resources Preview 00:51

Join Our Community! Preview 00:07

App Overview Preview 04:20

App User Flow Walkthrough Preview 04:30

Tech Stack Preview 05:29

App Mockups Preview 07:16

Application Architecture Preview 04:35

Relationship Between Node and Express Preview 08:26

Generating Express Apps Preview 08:11

Express Route Handlers Preview 07:32

Node Version in Engines Property Preview 00:34

Heroku Deployment Checklist Preview 12:10

Installing the Heroku CLI Preview 07:29

Verifying Heroku Deployment Preview 08:37

Followup Deployments Preview 03:29

Intro to Google OAuth Preview 05:50

The OAuth Flow Preview 09:08

Overview of Passport JS Preview 07:58

Passport Setup Preview 07:16

Google+ Deprecation Preview 00:28

Google Project Setup with new UI Preview 01:04

Enabling Google OAuth API Preview 09:59

Securing API Keys Preview 05:54

Google Strategy Options Preview 07:23

Testing OAuth Preview 07:48

Authorized Redirect URI's Preview 08:53

OAuth Callbacks Preview 08:06

Access and Refresh Tokens Preview 07:31

Nodemon Setup Preview 03:58

Server Structure Refactor Preview 12:42

The Theory of Authentication Preview 11:48

Signing In Users with OAuth Preview 15:36

Introduction to MongoDB Preview 08:03

MongoDB Atlas Setup and Configuration Preview 01:54

mLab Setup [PARTIALLY DEPRECATED] Preview 07:53

Connecting Mongoose to Mongo Preview 06:51

Breather and Review Preview 03:09

Mongoose Model Classes Preview 08:26

Saving Model Instances Preview 10:40

TokenError: Bad Request Preview 00:16

Mongoose Queries Preview 07:32

Passport Callbacks Preview 07:37

Encoding Users Preview 15:01

Deserialize User Preview 04:28

Enabling Cookies Preview 07:57

Testing Authentication Preview 08:18

Logging Out Users Preview 04:12

[Optional] A Deeper Dive Preview 22:00

Dev vs Prod Keys Preview 05:38

MongoDB Atlas Production Setup and Configuration Preview 01:28

Generating Production Resources Preview 09:49

Determining Environment Preview 06:34

Version Control Scheme Preview 08:05

Heroku Env Variables Preview 08:03

Fixing Heroku Proxy Issues Preview 11:29

npx Create React App Generation Preview 00:18

React App Generation Preview 06:58

A Separate Front End Server Preview 07:25

Running the Client and Server Preview 08:56

Important Create React App Proxy Update Preview 01:15

Routing Stumbling Block Preview 18:53

The Beauty of Create React App's Proxy Preview 14:35

[Optional] Why This Architecture? Preview 29:43

Async/Await Syntax Preview 18:49

Refactoring with Async/Await Preview 07:39

Important Note About Proxy Preview 00:07

Front End Tech Preview 07:23

Client React Setup Preview 07:40

Installing Root Modules Preview 06:44

Troubleshooting NPM Preview 02:25

Redux Review and Setup Preview 10:18

The Auth Reducer Preview 04:51

Finishing Reducer Setup Preview 03:35

Why We Care About Auth Preview 04:45

React Router Setup Preview 05:56

Route Configuration Preview 05:40

Matching Routes with Exact Preview 08:15

Always Visible Components Preview 06:11

Materialize CSS Preview 08:48

Webpack with CSS Preview 07:56

Header Design Preview 04:48

Current User API Preview 05:58

Additional Proxy Rules Preview 11:17

Basics of Redux Thunk Preview 10:12

Refactoring the App Preview 05:17

Testing FetchUser Preview 09:02

Refactoring to Async/Await Preview 08:55

AuthReducer Return Values Preview 10:37

Accessing State in the Header Preview 07:51

Header Content Preview 05:00

Redirecting a User on Auth Preview 07:33

Redirect on Logout Preview 07:37

Landing Component Preview 04:17

Link Tags Preview 07:51

Client Side Billing Preview 03:07

Billing Considerations Preview 11:55

Stripe Billing Process Preview 05:34

Exploring the Stripe API Preview 08:15

Stripe API Keys Preview 10:19

Env Variables with React Preview 13:31

The Payments Component Preview 10:29

Stripe Tokens Preview 09:08

Payment Fixes Preview 06:56

Reusing Action Types Preview 09:16

Positing the Stripe Token Preview 03:11

Post Request Handlers Preview 04:31

Creating Charges Preview 05:19

BodyParser Middleware Preview 06:42

Creating a Charge Object Preview 06:32

Finalizing a Charge Preview 04:40

Adding Credits to a User Preview 07:27

Requiring Authentication Preview 06:46

Route-Specific Middlewares Preview 11:39

Displaying Credit Quantity Preview 04:18

Updating Credits Preview 05:18

Express with Create-React-App in Production Preview 12:20

Routing in Production Preview 08:09

Deployment Options Preview 10:08

Adding in a Heroku Build Step Preview 16:10

Fixes for Failing Heroku Builds Preview 00:32

Testing Deployment Preview 03:49

Survey Overview Preview 08:00

Server Routes Preview 05:24

Survey Model Preview 07:07

Model Deficiencies Preview 05:56

Limitations of Subdocument Collections Preview 07:52

Setting up SubDocs Preview 04:49

Relationship Fields Preview 05:03

Survey Creation Route Handler Preview 07:15

Verifying Minimum Credits Preview 06:24

Creating Surveys Preview 09:06

Creating Subdoc Collections Preview 08:48

Oops! A Little Tweak Preview 00:22

Creating Mailers Preview 07:18

Identifying Unique Users Preview 14:29

Sendgrid Activation Update Preview 02:00

Sendgrid Setup Preview 08:21

Mailer Setup Preview 09:39

Update for "from_email" setting Preview 00:20

Mailer in Use Preview 11:01

Mailer Constructor Preview 08:31

Boilerplate for Sending Emails Preview 09:29

More Mailer Properties Preview 05:57

Sending SendGrid Emails Preview 06:16

Testing Email Sending Preview 09:20

Improving the Email Template Preview 08:58

Polish in the Route Handler Preview 09:52

Verifying Sendgrid Click Tracking Preview 02:09

Feedback for User Feedback Preview 11:13

Client Side Survey Creation Preview 05:01

Material Icons Preview 08:58

Navigation with the Link Tag Preview 02:20

SurveyNew Form Preview 06:55

Purpose of Redux Form Preview 11:16

Redux Form Setup Preview 12:20

The ReduxForm Helper Preview 07:07

Redux Form in Practice Preview 10:22

Custom Field Components Preview 08:56

Wiring up Custom Fields Preview 05:46

DRY'ing Up Fields Preview 05:16

Fields from Config Preview 07:35

Styling the Form Preview 07:19

Form Validation Preview 06:25

Showing Validation Errors Preview 08:31

Generalizing Field Validation Preview 09:09

Validating Emails Preview 08:35

Displaying Invalid Emails Preview 13:07

Toggling Visibility? Preview 11:55

Advancing From SurveyForm Preview 11:28

Retreat to the Form Preview 05:20

Persisting Form Values Preview 11:26

Refactoring Form Fields Preview 09:55

Finalizing Review Fields Preview 05:26

Outstanding Form Work Preview 10:50

Dumping Form Values Preview 07:09

Fixing Property Names Preview 02:53

Posting to Surveys Preview 04:40

Redirect on Submit Preview 09:01

Feedback with Webhooks Preview 02:30

Webhooks in Development Preview 09:08

Quick Note Before Next Lecture..... Preview 00:12

LocalTunnel Setup Preview 06:27

Ngrok setup instead of LocalTunnel Preview 01:51

Testing Webhooks Preview 05:16

Finalizing Webhook Setup Preview 06:47

Encoding Survey Data Preview 07:57

Dirty Data from Webhooks Preview 07:15

Processing Pipeline Preview 08:18

Parsing the Route Preview 07:55

"TypeError: Path is not a constructor" error Preview 00:06

Code Cleanup Preview 05:30

Unique Events Preview 05:14

Lodash Chain Helper Preview 10:50

Bad Mongoose Queries Preview 09:09

Finding the Exact Survey Preview 13:48

Updating Records Preview 09:33

Executing Queries Preview 09:25

Testing the Query Preview 02:18

Odds n' Ends Around Surveys Preview 04:01

Mongoose Tips Preview 06:06

Fetching a List of Surveys Preview 09:09

Whitelisting Model Fields Preview 10:00

Testing Surveys Endpoint Preview 02:11

Wiring Surveys Up to Redux Preview 06:00

Wiring React to Redux Preview 06:52

Rendering a List of Surveys Preview 08:12

Reversing the Survey List Preview 02:21

Expanding the App Preview 12:44

Deployment Notes Preview 00:28