CF

Node with React: Fullstack Web Development

25h 36m 19s
English
Paid

Go beyond the basics of React and Redux! This course will empower you to combine the ultra-popular technologies of React, Redux, Express, and MongoDB to build a fullstack web application. Ready for advanced deployment and billing/payments? We've got you covered, along with comprehensive email handling!

What Will You Build?

Our course is learn-by-doing: no endless lectures, but rather live, interactive coding examples. You will build one massive web application showcasing the advanced features of React, Redux, Express, and Mongo. Every concept is integrated into the real app to ensure you grasp the unique capabilities of each feature.

Build a large feedback-collection app. This comprehensive app will incorporate full features, from authentication to email handling. You'll learn to construct an application for mass email distribution to collect user feedback. The aim is for you to understand each feature thoroughly enough to use it in future projects.

Course Content and Learning Outcomes

Core Learning Objectives

Here's what we'll dive into:

  • Understand the architectural considerations for building a fullstack app
  • Integrate a front-end Create-React-App with a NodeJS and Express backend
  • Facilitate data communication from a Mongo database to a React application
  • Route user requests on the front end with React Router and on the backend with Express
  • Create reusable user inputs with Redux Form and enable navigation
  • Manage credit card transactions with Stripe
  • Engage users via automated emails
  • Enhance authentication processes using Google OAuth authentication
  • Delineate production and development resources with API key management
  • Design custom landing pages to educate users about the app

Course Motivation

This course is crafted to be the ideal learning path I sought when I started building fullstack apps. It presents concepts in the most effective sequence for deep understanding and practical application.

Course Requirements

  • Basic understanding of JavaScript, React, and Redux
  • A computer running Mac, Windows, or Linux

Who This Course Is For:

This course is designed for:

  • Anyone eager to learn how to build fullstack apps using the latest web technologies

What You'll Learn to Achieve:

  • Create initial projects using React, Redux, Express, and Mongo as a boilerplate
  • Understand and connect common web technologies utilizing design patterns
  • Master deployment practices across production and development environments
  • Implement Google OAuth authentication in your app
  • Develop effective backend email services
  • Accept and process user credit card payments confidently

About the Authors

Stephen Grider

Stephen Grider thumbnail

Stephen Grider is one of the longest-running and most prolific instructors on Udemy, with a catalog covering essentially every major JavaScript framework, plus Docker, Kubernetes, AWS, and the broader full-stack development landscape. His teaching style is patient and project-oriented — most of his courses are structured around building a substantial application from scratch rather than working through disconnected tutorial examples.

The catalog covers React, Redux, Next.js, Vue, Angular, GraphQL, Node.js, Docker / Kubernetes, AWS infrastructure, React Native and Flutter for mobile, the algorithm / data-structure interview prep track, and the modern TypeScript / Bun / Rust adjacent material that working JavaScript developers increasingly encounter. Few independent instructors have maintained Stephen's breadth this consistently for this long.

The CourseFlix listing under this source carries over 25 Stephen Grider courses spanning that range. Material is paid; Stephen Grider courses are typically sold individually on Udemy. Courses are aimed primarily at developers picking up a specific technology through working through a complete project.

Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 191 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 191 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: How to Get Help
All Course Lessons (191)
#Lesson TitleDurationAccess
1
How to Get Help Demo
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
Unlock unlimited learning

Get instant access to all 190 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites should I have before enrolling in this course?
Before enrolling, you should have a basic understanding of JavaScript and be familiar with React and Redux. The course builds on these concepts to integrate them with Express and MongoDB, so prior experience with front-end development, especially in React, is recommended for a smoother learning experience.
What will I build during the course?
During the course, you will build a large feedback-collection app. This application will cover full features such as authentication, email handling, and mass email distribution for user feedback. The project will utilize React, Redux, Express, and MongoDB, allowing you to understand and apply each feature in a real-world context.
Who is the target audience for this course?
The course is aimed at developers who are familiar with basic React concepts and are looking to expand their skills into fullstack development. It is suitable for those who want to learn how to integrate front-end and back-end technologies to create complete web applications.
How does this course compare in depth and scope to similar courses?
This course offers a comprehensive approach to fullstack development by focusing on the integration of React, Redux, Express, and MongoDB. It goes beyond the basics by including advanced topics such as OAuth authentication with Google, Stripe for handling payments, and deployment on Heroku, providing a thorough understanding of building and deploying a fullstack web application.
What specific tools or platforms will I learn to use?
You will learn to use several tools and platforms including Create-React-App for front-end development, NodeJS and Express for the backend, MongoDB for database management, and Heroku for application deployment. Additionally, the course covers using OAuth with Google APIs for authentication and Stripe for processing credit card transactions.
What topics are not covered in this course?
The course does not cover in-depth front-end design frameworks like Bootstrap or Material-UI, nor does it delve into other databases like MySQL or PostgreSQL. It focuses on the integration of React, Redux, Express, and MongoDB, so topics outside this tech stack are not addressed.
How much time should I expect to commit to this course?
The course consists of 191 lessons with interactive coding examples that integrate into building a comprehensive web application. While the total runtime is not specified, you should expect to spend significant time on each lesson to fully understand and apply the concepts to the final project, potentially requiring several weeks to complete depending on your pace.