Node with React: Fullstack Web Development

Node with React: Fullstack Web Development

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 25.5 Hours | 3.36 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
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 Node Version in Engines Property
13 Heroku Deployment Checklist
14 Installing the Heroku CLI
15 Verifying Heroku Deployment
16 Followup Deployments

Authentication with Google OAuth
17 Intro to Google OAuth
18 The OAuth Flow
19 Overview of Passport JS
20 Passport Setup
21 Google+ Deprecation
22 Google Project Setup with new UI
23 Enabling Google OAuth API
24 Securing API Keys
25 Google Strategy Options
26 Testing OAuth
27 Authorized Redirect URI’s
28 OAuth Callbacks
29 Access and Refresh Tokens
30 Nodemon Setup

Adding MongoDB
31 Server Structure Refactor
32 The Theory of Authentication
33 Signing In Users with OAuth
34 Introduction to MongoDB
35 MongoDB Atlas Setup and Configuration
36 mLab Setup [PARTIALLY DEPRECATED]
37 Connecting Mongoose to Mongo
38 Breather and Review
39 Mongoose Model Classes
40 Saving Model Instances
41 TokenError: Bad Request
42 Mongoose Queries
43 Passport Callbacks
44 Encoding Users
45 Deserialize User
46 Enabling Cookies
47 Testing Authentication
48 Logging Out Users
49 [Optional] A Deeper Dive

Dev vs Prod Environments
50 Dev vs Prod Keys
51 MongoDB Atlas Production Setup and Configuration
52 Generating Production Resources
53 Determining Environment
54 Version Control Scheme
55 Heroku Env Variables
56 Fixing Heroku Proxy Issues

Moving to the Client Side
57 npx Create React App Generation
58 React App Generation
59 A Separate Front End Server
60 Running the Client and Server
61 Important Create React App Proxy Update
62 Routing Stumbling Block
63 The Beauty of Create React App’s Proxy
64 [Optional] Why This Architecture?

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

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

Back End to Front End Routing in Production
117 Express with Create-React-App in Production
118 Routing in Production
119 Deployment Options
120 Adding in a Heroku Build Step
121 Fixes for Failing Heroku Builds
122 Testing Deployment

Mongoose for Survey Creation
123 Survey Overview
124 Server Routes
125 Survey Model
126 Model Deficiencies
127 Limitations of Subdocument Collections
128 Setting up SubDocs
129 Relationship Fields
130 Survey Creation Route Handler
131 Verifying Minimum Credits
132 Creating Surveys
133 Creating Subdoc Collections
134 Oops! A Little Tweak
135 Creating Mailers
136 Identifying Unique Users
137 Sendgrid Activation Update
138 Sendgrid Setup
139 Mailer Setup
140 Update for “from_email” setting
141 Mailer in Use
142 Mailer Constructor
143 Boilerplate for Sending Emails
144 More Mailer Properties
145 Sending SendGrid Emails
146 Testing Email Sending
147 Improving the Email Template
148 Polish in the Route Handler
149 Verifying Sendgrid Click Tracking
150 Feedback for User Feedback

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

Handling Webhook Data
180 Feedback with Webhooks
181 Webhooks in Development
182 Quick Note Before Next Lecture…..
183 LocalTunnel Setup
184 Ngrok setup instead of LocalTunnel
185 Testing Webhooks
186 Finalizing Webhook Setup
187 Encoding Survey Data
188 Dirty Data from Webhooks
189 Processing Pipeline
190 Parsing the Route
191 “TypeError: Path is not a constructor” error
192 Code Cleanup
193 Unique Events
194 Lodash Chain Helper
195 Bad Mongoose Queries
196 Finding the Exact Survey
197 Updating Records
198 Executing Queries
199 Testing the Query
200 Odds n’ Ends Around Surveys
201 Mongoose Tips

The Home Stretch!
202 Fetching a List of Surveys
203 Whitelisting Model Fields
204 Testing Surveys Endpoint
205 Wiring Surveys Up to Redux
206 Wiring React to Redux
207 Rendering a List of Surveys
208 Reversing the Survey List
209 Expanding the App

Extras
210 Bonus!