4.64 out of 5
4.64
6997 reviews on Udemy

Node with React: Fullstack Web Development

Build and deploy fullstack web apps with NodeJS, React, Redux, Express, and MongoDB.
Instructor:
Stephen Grider
39,218 students enrolled
English [Auto-generated] More
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

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.

Course Overview - Start Here!

1
How to Get Help
2
Course Resources Document
3
[Optional] Prettier Setup
4
App Overview
5
App User Flow Walkthrough
6
Tech Stack
7
App Mockups

Server Side Architecture

1
Application Architecture
2
Relationship Between Node and Express
3
Generating Express Apps
4
Express Route Handlers
5
Heroku Deployment Checklist
6
Installing the Heroku CLI
7
Verifying Heroku Deployment
8
Followup Deployments

Authentication with Google OAuth

1
Intro to Google OAuth
2
The OAuth Flow
3
Overview of Passport JS
4
Passport Setup
5
Enabling Google OAuth API
6
Securing API Keys
7
Google Strategy Options
8
Testing OAuth
9
Authorized Redirect URI's
10
OAuth Callbacks
11
Access and Refresh Tokens
12
Nodemon Setup

Adding MongoDB

1
Server Structure Refactor
2
The Theory of Authentication
3
Signing In Users with OAuth
4
Introduction to MongoDB
5
MongoDB Setup
6
Connecting Mongoose to Mongo
7
Breather and Review
8
Mongoose Model Classes
9
Saving Model Instances
10
Mongoose Queries
11
Passport Callbacks
12
Encoding Users
13
Deserialize User
14
Enabling Cookies
15
Testing Authentication
16
Logging Out Users
17
[Optional] A Deeper Dive

Dev vs Prod Environments

1
Dev vs Prod Keys
2
Generating Production Resources
3
Determining Environment
4
Version Control Scheme
5
Heroku Env Variables
6
Fixing Heroku Proxy Issues

Moving to the Client Side

1
React App Generation
2
A Separate Front End Server
3
Running the Client and Server
4
Quick Note - Proxy Errors with Create React App 2.0
5
Routing Stumbling Block
6
The Beauty of Create React App's Proxy
7
[Optional] Why This Architecture?

Developing the Client Side

1
Async/Await Syntax
2
Refactoring with Async/Await
3
Front End Tech
4
Client React Setup
5
Installing Root Modules
6
Troubleshooting NPM
7
Redux Review and Setup
8
The Auth Reducer
9
Finishing Reducer Setup
10
Why We Care About Auth
11
React Router Setup
12
Route Configuration
13
Always Visible Components
14
Always Visible Components
15
Materialize CSS
16
Webpack with CSS
17
Header Design
18
Current User API
19
Additional Proxy Rules
20
Basics of Redux Thunk
21
Refactoring the App
22
Testing FetchUser
23
Refactoring to Async/Await
24
AuthReducer Return Values
25
Accessing State in the Header
26
Header Content
27
Redirecting a User on Auth
28
Redirect on Logout
29
Landing Component
30
Link Tags

Handling Payments

1
Client Side Billing
2
Billing Considerations
3
Stripe Billing Process
4
Exploring the Stripe API
5
Stripe API Keys
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.6
4.6 out of 5
6997 Ratings

Detailed Rating

Stars 5
5039
Stars 4
1563
Stars 3
301
Stars 2
55
Stars 1
39
7583e0c4fd44a6881a447d15c4a41c07
30-Day Money-Back Guarantee

Includes

26 hours on-demand video
5 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion
Demos
Support Buy $0