Node with React: Fullstack Web Development by Udemy
Build and deploy fullstack web apps with NodeJS, React, Redux, Express, and MongoDB.
Course Highlights
- 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
Skills you will learn!
Curriculum
6 Topics
Course Resources
Join Our Community!
App Overview
App User Flow Walkthrough
Tech Stack
App Mockups
11 Topics
Application Architecture
Relationship Between Node and Express
Generating Express Apps
Express Route Handlers
Important Info About Heroku and Deployment
Deployment Checklist
[Render] Git and GitHub Setup
[Render] Registration Creating a Service and Deployment
[Heroku] Installing the Heroku CLI
[Heroku] Verifying Deployment
[Heroku] Followup Deployments
13 Topics
Intro to Google OAuth
The OAuth Flow
Overview of Passport JS
Passport Setup
The Google OAuth API
Google Project Setup and Enabling the Google OAuth API
Securing API Keys
Google Strategy Options
Testing OAuth
Authorized Redirect URI's
OAuth Callbacks
Access and Refresh Tokens
Nodemon Setup
19 Topics
Server Structure Refactor
The Theory of Authentication
Signing In Users with OAuth
Introduction to MongoDB
Remote vs Local MongoDB Instances
MongoDB Atlas Setup and Configuration
Connecting Mongoose to Mongo
Breather and Review
Mongoose Model Classes
Saving Model Instances
TokenError: Bad Request
Mongoose Queries
Passport Callbacks
Encoding Users
Deserialize User
Enabling Cookies
Testing Authentication
Logging Out Users
[Optional] A Deeper Dive
8 Topics
Dev vs Prod Keys
MongoDB Atlas Production Setup and Configuration
Generating Production Resources
Determining Environment
Version Control Scheme
[Render] Production Environment Variables
[Heroku] Production Environment Variables
Fixing Proxy Issues
8 Topics
Important Update About React App Generation
React App Generation
A Separate Front End Server
Running the Client and Server
Important Create React App Proxy Update
Routing Stumbling Block
The Beauty of Create React App's Proxy
[Optional] Why This Architecture?
33 Topics
Async/Await Syntax
Refactoring with Async/Await
Important Note About Proxy
Front End Tech
Client React Setup
ReactDOM warning with React v18
Installing Root Modules
Troubleshooting NPM
createStore Strikethrough in Code Editor
Redux Review and Setup
The Auth Reducer
Finishing Reducer Setup
Why We Care About Auth
React Router Setup
Route Configuration
Matching Routes with Exact
Always Visible Components
Materialize CSS
Webpack with CSS
Header Design
Current User API
Additional Proxy Rules
Basics of Redux Thunk
Refactoring the App
Testing FetchUser
Refactoring to Async/Await
AuthReducer Return Values
Accessing State in the Header
Header Content
Redirecting a User on Auth
Redirect on Logout
Landing Component
Link Tags
21 Topics
Client Side Billing
Billing Considerations
Stripe Billing Process
Exploring the Stripe API
Stripe API Keys
Env Variables with React
The Payments Component
Stripe Tokens
Payment Fixes
Reusing Action Types
Posting the Stripe Token
Post Request Handlers
Creating Charges
BodyParser Middleware
Creating a Charge Object
Finalizing a Charge
Adding Credits to a User
Requiring Authentication
Route-Specific Middlewares
Displaying Credit Quantity
Updating Credits
7 Topics
Express with Create-React-App in Production
Routing in Production
Deployment Options
Adding in a Build Step
[Render] Postbuild and Deployment
Fixes for Failing Heroku Builds
Testing Deployment
28 Topics
Survey Overview
Server Routes
Survey Model
Model Deficiencies
Limitations of Subdocument Collections
Setting up SubDocs
Relationship Fields
Survey Creation Route Handler
Verifying Minimum Credits
Creating Surveys
Creating Subdoc Collections
Oops! A Little Tweak
Creating Mailers
Identifying Unique Users
Sendgrid Activation Update
Sendgrid Setup
Mailer Setup
Update for "from_email" setting
Mailer in Use
Mailer Constructor
Boilerplate for Sending Emails
More Mailer Properties
Sending SendGrid Emails
Testing Email Sending
Improving the Email Template
Polish in the Route Handler
Verifying Sendgrid Click Tracking
Feedback for User Feedback
30 Topics
Client Side Survey Creation
Material Icons
Navigation with the Link Tag
SurveyNew Form
Purpose of Redux Form
Important Note about Redux Form Installation
Redux Form Setup
The ReduxForm Helper
Redux Form in Practice
Custom Field Components
Wiring up Custom Fields
DRY'ing Up Fields
Fields from Config
Styling the Form
Form Validation
Showing Validation Errors
Generalizing Field Validation
Validating Emails
Displaying Invalid Emails
Toggling Visibility?
Advancing From SurveyForm
Retreat to the Form
Persisting Form Values
Refactoring Form Fields
Finalizing Review Fields
Outstanding Form Work
Dumping Form Values
Fixing Property Names
Posting to Surveys
Redirect on Submit
22 Topics
Feedback with Webhooks
Webhooks in Development
Quick Note Before Next Lecture.....
LocalTunnel Setup
Ngrok setup instead of LocalTunnel
Testing Webhooks
Finalizing Webhook Setup
Encoding Survey Data
Dirty Data from Webhooks
Processing Pipeline
Parsing the Route
"TypeError: Path is not a constructor" error
Code Cleanup
Unique Events
Lodash Chain Helper
Bad Mongoose Queries
Finding the Exact Survey
Updating Records
Executing Queries
Testing the Query
Odds n' Ends Around Surveys
Mongoose Tips
12 Topics
Fetching a List of Surveys
Whitelisting Model Fields
Testing Surveys Endpoint
Wiring Surveys Up to Redux
Wiring React to Redux
Rendering a List of Surveys
Reversing the Survey List
Expanding the App
[Render] Deploy Notes from Final Lecture
[Heroku] Deploy Notes from Final Lecture
Replacing Sendgrid with Mailgun
Complete Project Update with Latest Versions and Libraries
1 Topic
Bonus!
Node with React: Fullstack Web Development
Related React JS Courses
Thank You!
Your review has been submitted successfully.