Node with React: Fullstack Web Development

Node with React: Fullstack Web Development
Node with React: Fullstack Web Development
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 25.5 Hours | 3.44 GB

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

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/Payments? Included. Handling Email? Of 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.

Table of Contents

Course Overview – Start Here!
1 How to Get Help
2 Course Resources Document
3 [Optional] Prettier Setup
4 App Overview
5 App User Flow Walkthrough
6 Tech Stack
7 App Mockups

Server Side Architecture
8 Application Architecture
9 Relationship Between Node and Express
10 Generating Express Apps
11 Express Route Handlers
12 Heroku Deployment Checklist
13 Installing the Heroku CLI
14 Verifying Heroku Deployment
15 Followup Deployments

Authentication with Google OAuth
16 Intro to Google OAuth
17 Authorized Redirect URI’s
18 OAuth Callbacks
19 Access and Refresh Tokens
20 Nodemon Setup
21 The OAuth Flow
22 Overview of Passport JS
23 Passport Setup
24 Fixing redirect URI wildcard issue
25 Enabling Google OAuth API
26 Securing API Keys
27 Google Strategy Options
28 Testing OAuth

Adding MongoDB
29 Server Structure Refactor
30 Mongoose Queries
31 Passport Callbacks
32 Encoding Users
33 Deserialize User
34 Enabling Cookies
35 Testing Authentication
36 Logging Out Users
37 [Optional] A Deeper Dive
38 The Theory of Authentication
39 Signing In Users with OAuth
40 Introduction to MongoDB
41 MongoDB Setup
42 Connecting Mongoose to Mongo
43 Breather and Review
44 Mongoose Model Classes
45 Saving Model Instances

Dev vs Prod Environments
46 Dev vs Prod Keys
47 Generating Production Resources
48 Determining Environment
49 Version Control Scheme
50 Heroku Env Variables
51 Fixing Heroku Proxy Issues

Moving to the Client Side
52 React App Generation
53 A Separate Front End Server
54 Running the Client and Server
55 Quick Note – Proxy Errors with Create React App 2.0
56 Routing Stumbling Block
57 The Beauty of Create React App’s Proxy
58 [Optional] Why This Architecture

Developing the Client Side
59 AsyncAwait Syntax
60 Why We Care About Auth
61 React Router Setup
62 Route Configuration
63 Matching Routes with Exact
64 Always Visible Components
65 Materialize CSS
66 Webpack with CSS
67 Header Design
68 Current User API
69 Additional Proxy Rules
70 Refactoring with AsyncAwait
71 Basics of Redux Thunk
72 Refactoring the App
73 Testing FetchUser
74 Refactoring to AsyncAwait
75 AuthReducer Return Values
76 Accessing State in the Header
77 Header Content
78 Redirecting a User on Auth
79 Redirect on Logout
80 Landing Component
81 Front End Tech
82 Link Tags
83 Client React Setup
84 Installing Root Modules
85 Troubleshooting NPM
86 Redux Review and Setup
87 The Auth Reducer
88 Finishing Reducer Setup

Handling Payments
89 Client Side Billing
90 Reusing Action Types
91 Positing the Stripe Token
92 Post Request Handlers
93 Creating Charges
94 BodyParser Middleware
95 Creating a Charge Object
96 Finalizing a Charge
97 Adding Credits to a User
98 Requiring Authentication
99 Route-Specific Middlewares
100 Billing Considerations
101 Displaying Credit Quantity
102 Updating Credits
103 Stripe Billing Process
104 Exploring the Stripe API
105 Stripe API Keys
106 Env Variables with React
107 The Payments Component
108 Stripe Tokens
109 Payment Fixes

Back End to Front End Routing in Production
110 Express with Create-React-App in Production
111 Routing in Production
112 Deployment Options
113 Adding in a Heroku Build Step
114 Testing Deployment

Mongoose for Survey Creation
115 Survey Overview
116 Creating Surveys
117 Creating Subdoc Collections
118 Oops! A Little Tweak
119 Creating Mailers
120 Identifying Unique Users
121 Sendgrid Setup
122 Mailer Setup
123 Mailer in Use
124 Mailer Constructor
125 Boilerplate for Sending Emails
126 Server Routes
127 More Mailer Properties
128 Sending SendGrid Emails
129 Testing Email Sending
130 Improving the Email Template
131 Polish in the Route Handler
132 Verifying Sendgrid Click Tracking
133 Feedback for User Feedback
134 Survey Model
135 Model Deficiencies
136 Limitations of Subdocument Collections
137 Setting up SubDocs
138 Relationship Fields
139 Survey Creation Route Handler
140 Verifying Minimum Credits

Back to the Client!
141 Client Side Survey Creation
142 Wiring up Custom Fields
143 DRY’ing Up Fields
144 Fields from Config
145 Styling the Form
146 Form Validation
147 Showing Validation Errors
148 Generalizing Field Validation
149 Validating Emails
150 Displaying Invalid Emails
151 Toggling Visibility
152 Material Icons
153 Advancing From SurveyForm
154 Retreat to the Form
155 Persisting Form Values
156 Refactoring Form Fields
157 Finalizing Review Fields
158 Outstanding Form Work
159 Dumping Form Values
160 Fixing Property Names
161 Posting to Surveys
162 Redirect on Submit
163 Navigation with the Link Tag
164 SurveyNew Form
165 Purpose of Redux Form
166 Redux Form Setup
167 The ReduxForm Helper
168 Redux Form in Practice
169 Custom Field Components

Handling Webhook Data
170 Feedback with Webhooks
171 Parsing the Route
172 TypeError Path is not a constructor error
173 Code Cleanup
174 Unique Events
175 Lodash Chain Helper
176 Bad Mongoose Queries
177 Finding the Exact Survey
178 Updating Records
179 Executing Queries
180 Testing the Query
181 Webhooks in Development
182 Odds n’ Ends Around Surveys
183 Mongoose Tips
184 LocalTunnel Setup
185 Testing Webhooks
186 LocalTunnel Crash Fix
187 Finalizing Webhook Setup
188 Encoding Survey Data
189 Dirty Data from Webhooks
190 Processing Pipeline

The Home Stretch!
191 Fetching a List of Surveys
192 Whitelisting Model Fields
193 Testing Surveys Endpoint
194 Wiring Surveys Up to Redux
195 Wiring React to Redux
196 Rendering a List of Surveys
197 Reversing the Survey List
198 Expanding the App
199 Bonus!