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.27 GB
eLearning | Skill level: All Levels


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

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
+ Table of Contents

Course Overview – Start Here
1 How to Get Help
2 Course Resources Document.html
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 The OAuth Flow
18 Overview of Passport JS
19 Passport Setup
20 Enabling Google OAuth API
21 Securing API Keys
22 Google Strategy Options
23 Testing OAuth
24 Authorized Redirect URIs
25 OAuth Callbacks
26 Access and Refresh Tokens
27 Nodemon Setup

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

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

Moving to the Client Side
51 React App Generation
52 A Separate Front End Server
53 Running the Client and Server
54 Routing Stumbling Block
55 The Beauty of Create React Apps Proxy
56 Optional Why This Architecture

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

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

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

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

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

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

The Home Stretch
188 Fetching a List of Surveys
189 Whitelisting Model Fields
190 Testing Surveys Endpoint
191 Wiring Surveys Up to Redux
192 Wiring React to Redux
193 Rendering a List of Surveys
194 Reversing the Survey List
195 Expanding the App

Download from Turbobit

Download from DepositFiles