Node with React: Fullstack Web Development

25h 36m 19s
English
Paid
April 9, 2024

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!

More

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.

Requirements:

  • Basic understanding of Javascript, React, and Redux

  • A Mac, Windows, or Linux computer

Who this course is for:
  • Anyone who wants to learn how to build full stack apps with the latest in web technology

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

Watch Online Node with React: Fullstack Web Development

Join premium to watch
Go to premium
# Title Duration
1 How to Get Help 06:13
2 App Overview 04:21
3 App User Flow Walkthrough 04:31
4 Tech Stack 05:30
5 App Mockups 07:17
6 Application Architecture 04:36
7 Relationship Between Node and Express 08:27
8 Generating Express Apps 08:12
9 Express Route Handlers 07:33
10 Deployment Checklist 12:12
11 [Heroku] Installing the Heroku CLI 07:30
12 [Heroku] Verifying Deployment 08:38
13 [Heroku] Followup Deployments 03:29
14 Intro to Google OAuth 05:51
15 The OAuth Flow 09:09
16 Overview of Passport JS 07:58
17 Passport Setup 07:17
18 Enabling Google OAuth API 10:00
19 Securing API Keys 05:55
20 Google Strategy Options 07:24
21 Testing OAuth 07:49
22 Authorized Redirect URI's 08:54
23 OAuth Callbacks 08:07
24 Access and Refresh Tokens 07:32
25 Nodemon Setup 03:59
26 Server Structure Refactor 12:43
27 The Theory of Authentication 11:49
28 Signing In Users with OAuth 15:37
29 Introduction to MongoDB 08:04
30 mLab Setup [PARTIALLY DEPRECATED] 07:54
31 Connecting Mongoose to Mongo 06:52
32 Breather and Review 03:10
33 Mongoose Model Classes 08:27
34 Saving Model Instances 10:41
35 Mongoose Queries 07:33
36 Passport Callbacks 07:38
37 Encoding Users 15:02
38 Deserialize User 04:29
39 Enabling Cookies 07:58
40 Testing Authentication 08:19
41 Logging Out Users 04:13
42 [Optional] A Deeper Dive 22:01
43 Dev vs Prod Keys 05:39
44 Generating Production Resources 09:50
45 Determining Environment 06:35
46 Version Control Scheme 08:05
47 [Heroku] Production Environment Variables 08:04
48 Fixing Proxy Issues 11:30
49 React App Generation 06:59
50 A Separate Front End Server 07:26
51 Running the Client and Server 08:57
52 Routing Stumbling Block 18:54
53 The Beauty of Create React App's Proxy 14:36
54 [Optional] Why This Architecture? 29:44
55 Async/Await Syntax 18:50
56 Refactoring with Async/Await 07:40
57 Front End Tech 07:24
58 Client React Setup 07:41
59 Installing Root Modules 06:45
60 Troubleshooting NPM 02:27
61 Redux Review and Setup 10:19
62 The Auth Reducer 04:52
63 Finishing Reducer Setup 03:36
64 Why We Care About Auth 04:46
65 React Router Setup 05:57
66 Route Configuration 05:41
67 Matching Routes with Exact 08:16
68 Always Visible Components 06:12
69 Materialize CSS 08:48
70 Webpack with CSS 07:57
71 Header Design 04:48
72 Current User API 05:59
73 Additional Proxy Rules 11:18
74 Basics of Redux Thunk 10:13
75 Refactoring the App 05:18
76 Testing FetchUser 09:03
77 Refactoring to Async/Await 08:56
78 AuthReducer Return Values 10:38
79 Accessing State in the Header 07:52
80 Header Content 05:01
81 Redirecting a User on Auth 07:34
82 Redirect on Logout 07:38
83 Landing Component 04:18
84 Link Tags 07:52
85 Client Side Billing 03:08
86 Billing Considerations 11:56
87 Stripe Billing Process 05:35
88 Exploring the Stripe API 08:16
89 Stripe API Keys 10:20
90 Env Variables with React 13:32
91 The Payments Component 10:30
92 Stripe Tokens 09:09
93 Payment Fixes 06:57
94 Reusing Action Types 09:17
95 Positing the Stripe Token 03:12
96 Post Request Handlers 04:32
97 Creating Charges 05:20
98 BodyParser Middleware 06:43
99 Creating a Charge Object 06:33
100 Finalizing a Charge 04:40
101 Adding Credits to a User 07:28
102 Requiring Authentication 06:47
103 Route-Specific Middlewares 11:40
104 Displaying Credit Quantity 04:19
105 Updating Credits 05:19
106 Express with Create-React-App in Production 12:21
107 Routing in Production 08:10
108 Deployment Options 10:09
109 Adding in a Build Step 16:11
110 Testing Deployment 03:50
111 Survey Overview 08:01
112 Server Routes 05:25
113 Survey Model 07:08
114 Model Deficiencies 05:57
115 Limitations of Subdocument Collections 07:53
116 Setting up SubDocs 04:50
117 Relationship Fields 05:03
118 Survey Creation Route Handler 07:16
119 Verifying Minimum Credits 06:25
120 Creating Surveys 09:07
121 Creating Subdoc Collections 08:49
122 Creating Mailers 07:19
123 Identifying Unique Users 14:30
124 Sendgrid Setup 08:22
125 Mailer Setup 09:40
126 Mailer in Use 11:02
127 Mailer Constructor 08:32
128 Boilerplate for Sending Emails 09:30
129 More Mailer Properties 05:58
130 Sending SendGrid Emails 06:17
131 Testing Email Sending 09:21
132 Improving the Email Template 08:59
133 Polish in the Route Handler 09:53
134 Verifying Sendgrid Click Tracking 02:10
135 Feedback for User Feedback 11:14
136 Client Side Survey Creation 05:02
137 Material Icons 08:59
138 Navigation with the Link Tag 02:21
139 SurveyNew Form 06:56
140 Purpose of Redux Form 11:17
141 Redux Form Setup 12:21
142 The ReduxForm Helper 07:08
143 Redux Form in Practice 10:23
144 Custom Field Components 08:57
145 Wiring up Custom Fields 05:47
146 DRY'ing Up Fields 05:17
147 Fields from Config 07:36
148 Styling the Form 07:20
149 Form Validation 06:26
150 Showing Validation Errors 08:32
151 Generalizing Field Validation 09:10
152 Validating Emails 08:36
153 Displaying Invalid Emails 13:08
154 Toggling Visibility? 11:56
155 Advancing From SurveyForm 11:29
156 Retreat to the Form 05:21
157 Persisting Form Values 11:27
158 Refactoring Form Fields 09:56
159 Finalizing Review Fields 05:27
160 Outstanding Form Work 10:51
161 Dumping Form Values 07:10
162 Fixing Property Names 02:54
163 Posting to Surveys 04:41
164 Redirect on Submit 09:02
165 Feedback with Webhooks 02:31
166 Webhooks in Development 09:09
167 LocalTunnel Setup 06:28
168 Testing Webhooks 05:17
169 Finalizing Webhook Setup 06:48
170 Encoding Survey Data 07:58
171 Dirty Data from Webhooks 07:15
172 Processing Pipeline 08:19
173 Parsing the Route 07:56
174 Code Cleanup 05:31
175 Unique Events 05:15
176 Lodash Chain Helper 10:51
177 Bad Mongoose Queries 09:10
178 Finding the Exact Survey 13:49
179 Updating Records 09:34
180 Executing Queries 09:26
181 Testing the Query 02:19
182 Odds n' Ends Around Surveys 04:02
183 Mongoose Tips 06:07
184 Fetching a List of Surveys 09:10
185 Whitelisting Model Fields 10:01
186 Testing Surveys Endpoint 02:12
187 Wiring Surveys Up to Redux 06:01
188 Wiring React to Redux 06:53
189 Rendering a List of Surveys 08:13
190 Reversing the Survey List 02:22
191 Expanding the App 12:45

Similar courses to Node with React: Fullstack Web Development

React and Laravel: Breaking a Monolith to Microservices
Stripe Payments JavaScript Course

Stripe Payments JavaScript Coursefireship.io

Duration 1 hour 29 minutes 26 seconds
Node.js, Express, MongoDB & More The Complete Bootcamp 2024
Just Express (with a bunch of node and http). In detail.
The Official React Query Course - query.gg
Build Telegram Bots with JavaScript: The Complete Guide
Build a Shopping Cart App

Build a Shopping Cart AppReed Barger

Duration 1 hour 41 minutes 52 seconds
Scale React Development with Nx

Scale React Development with Nxegghead

Duration 1 hour 34 minutes 10 seconds
Starting with React & Redux: Build modern apps (2nd edition)