Node with React: Fullstack Web Development
4.9 (617 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
5,998 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Node with React: Fullstack Web Development to your Wishlist.

Add to Wishlist

Node with React: Fullstack Web Development

Build and deploy fullstack web apps with NodeJS, React, Redux, Express, and MongoDB.
4.9 (617 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
5,998 students enrolled
Created by Stephen Grider
Last updated 8/2017
English
English
Curiosity Sale
Current price: $10 Original price: $180 Discount: 94% off
30-Day Money-Back Guarantee
Includes:
  • 25.5 hours on-demand video
  • 3 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
Requirements
  • Basic understanding of Javascript, React, and Redux
  • A Mac, Windows, or Linux computer
Description

Note: This course assumes you've got the basics of React and Redux down.  Check out my course 'Modern React with Redux', its the perfect preparation!

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/PaymentsIncluded.  Handling EmailOf 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.

Who is the target audience?
  • Anyone who wants to learn how to build full stack apps with the latest in web technology
Students Who Viewed This Course Also Viewed
Curriculum For This Course
195 Lectures
25:40:49
+
Course Overview - Start Here!
7 Lectures 34:22

Course Resources Document
00:06

[Optional] Prettier Setup
06:29


App User Flow Walkthrough
04:30

Tech Stack
05:29

App Mockups
07:16
+
Server Side Architecture
8 Lectures 01:00:29

Relationship Between Node and Express
08:26

Generating Express Apps
08:11

Express Route Handlers
07:32

Heroku Deployment Checklist
12:10

Installing the Heroku CLI
07:29

Verifying Heroku Deployment
08:37

Followup Deployments
03:29
+
Authentication with Google OAuth
12 Lectures 01:29:44

The OAuth Flow
09:08

Overview of Passport JS
07:58

Passport Setup
07:16

Enabling Google OAuth API
09:59

Securing API Keys
05:54

Google Strategy Options
07:23

Testing OAuth
07:48

Authorized Redirect URI's
08:53

OAuth Callbacks
08:06

Access and Refresh Tokens
07:31

Nodemon Setup
03:58
+
Adding MongoDB
17 Lectures 02:42:13
Server Structure Refactor
12:42

The Theory of Authentication
11:48

Signing In Users with OAuth
15:36

Introduction to MongoDB
08:03

MongoDB Setup
07:53

Connecting Mongoose to Mongo
06:51

Breather and Review
03:09

Mongoose Model Classes
08:26

Saving Model Instances
10:40

Mongoose Queries
07:32

Passport Callbacks
07:37

Encoding Users
15:01

Deserialize User
04:28

Enabling Cookies
07:57

Testing Authentication
08:18

Logging Out Users
04:12

[Optional] A Deeper Dive
22:00
+
Dev vs Prod Environments
6 Lectures 49:38
Dev vs Prod Keys
05:38

Generating Production Resources
09:49

Determining Environment
06:34

Version Control Scheme
08:05

Heroku Env Variables
08:03

Fixing Heroku Proxy Issues
11:29
+
Moving to the Client Side
6 Lectures 01:26:30
React App Generation
06:58

A Separate Front End Server
07:25

Running the Client and Server
08:56

Routing Stumbling Block
18:53

The Beauty of Create React App's Proxy
14:35

[Optional] Why This Architecture?
29:43
+
Developing the Client Side
30 Lectures 03:43:10
Async/Await Syntax
18:49

Refactoring with Async/Await
07:39

Front End Tech
07:23

Client React Setup
07:40

Installing Root Modules
06:44

Troubleshooting NPM
02:25

Redux Review and Setup
10:18

The Auth Reducer
04:51

Finishing Reducer Setup
03:35

Why We Care About Auth
04:45

React Router Setup
05:56

Route Configuration
05:40

Always Visible Components
08:15

Always Visible Components
06:11

Materialize CSS
08:48

Webpack with CSS
07:56

Header Design
04:48

Current User API
05:58

Additional Proxy Rules
11:17

Basics of Redux Thunk
10:12

Refactoring the App
05:17

Testing FetchUser
09:02

Refactoring to Async/Await
08:55

AuthReducer Return Values
10:37

Accessing State in the Header
07:51

Header Content
05:00

Redirecting a User on Auth
07:33

Redirect on Logout
07:37

Landing Component
04:17

Link Tags
07:51
+
Handling Payments
21 Lectures 02:34:53
Client Side Billing
03:07

Billing Considerations
11:55

Stripe Billing Process
05:34

Exploring the Stripe API
08:15

Stripe API Keys
10:19

Env Variables with React
13:31

The Payments Component
10:29

Stripe Tokens
09:08

Payment Fixes
06:56

Reusing Action Types
09:16

Positing the Stripe Token
03:11

Post Request Handlers
04:31

Creating Charges
05:19

BodyParser Middleware
06:42

Creating a Charge Object
06:32

Finalizing a Charge
04:40

Adding Credits to a User
07:27

Requiring Authentication
06:46

Route-Specific Middlewares
11:39

Displaying Credit Quantity
04:18

Updating Credits
05:18
+
Back End to Front End Routing in Production
5 Lectures 50:36
Express with Create-React-App in Production
12:20

Routing in Production
08:09

Deployment Options
10:08

Adding in a Heroku Build Step
16:10

Testing Deployment
03:49
+
Mongoose for Survey Creation
26 Lectures 03:18:40
Survey Overview
08:00

Server Routes
05:24

Survey Model
07:07

Model Deficiencies
05:56

Limitations of Subdocument Collections
07:52

Setting up SubDocs
04:49

Relationship Fields
05:03

Survey Creation Route Handler
07:15

Verifying Minimum Credits
06:24

Creating Surveys
09:06

Creating Subdoc Collections
08:48

Oops! A Little Tweak
00:23

Creating Mailers
07:18

Identifying Unique Users
14:29

Sendgrid Setup
08:21

Mailer Setup
09:39

Mailer in Use
11:01

Mailer Constructor
08:31

Boilerplate for Sending Emails
09:29

More Mailer Properties
05:57

Sending SendGrid Emails
06:16

Testing Email Sending
09:20

Improving the Email Template
08:58

Polish in the Route Handler
09:52

Verifying Sendgrid Click Tracking
02:09

Feedback for User Feedback
11:13
3 More Sections
About the Instructor
Stephen Grider
4.7 Average rating
42,695 Reviews
98,156 Students
12 Courses
Engineering Architect

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area. With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers. Invest in yourself by learning from Stephen's published courses.