Node with React Fullstack Web Development

Node with React Fullstack Web Development

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

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/Payments? Included.  Handling Email? Of 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 appConnect a front-end Create-React-App server to a NodeJS and Express backendCommunicate data from your Mongo database to your React applicationUnderstand how to route user requests on the front end with React Router and on the backend with ExpressBuild reusable user inputs with Redux Form, complete with navigationHandle credit cards and receive payments from your users with StripeEngage your users with automated emailsEnhance authentication flows in your app with Google OAuth authenticationSeparate production and development resources with advanced API key handling techniquesEducate 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.

Overview

Section 1: Course Overview – Start Here!

Lecture 1 How to Get Help

Lecture 2 Course Resources

Lecture 3 Join Our Community!

Lecture 4 App Overview

Lecture 5 App User Flow Walkthrough

Lecture 6 Tech Stack

Lecture 7 App Mockups

Section 2: Server Side Architecture

Lecture 8 Application Architecture

Lecture 9 Relationship Between Node and Express

Lecture 10 Generating Express Apps

Lecture 11 Express Route Handlers

Lecture 12 Important Info About Heroku and Deployment

Lecture 13 Deployment Checklist

Lecture 14 [Railway] Registering for Railway and Installing Railway CLI

Lecture 15 [Railway] Creating a Railway Project and Application Service

Lecture 16 [Railway] Deploying App to Railway

Lecture 17 [Heroku] Installing the Heroku CLI

Lecture 18 [Heroku] Verifying Deployment

Lecture 19 [Heroku] Followup Deployments

Section 3: Authentication with Google OAuth

Lecture 20 Intro to Google OAuth

Lecture 21 The OAuth Flow

Lecture 22 Overview of Passport JS

Lecture 23 Passport Setup

Lecture 24 Google+ Deprecation

Lecture 25 Google Project Setup with new UI

Lecture 26 Enabling Google OAuth API

Lecture 27 Securing API Keys

Lecture 28 Google Strategy Options

Lecture 29 Testing OAuth

Lecture 30 Authorized Redirect URI’s

Lecture 31 OAuth Callbacks

Lecture 32 Access and Refresh Tokens

Lecture 33 Nodemon Setup

Section 4: Adding MongoDB

Lecture 34 Server Structure Refactor

Lecture 35 The Theory of Authentication

Lecture 36 Signing In Users with OAuth

Lecture 37 Introduction to MongoDB

Lecture 38 MongoDB Atlas Setup and Configuration

Lecture 39 mLab Setup [PARTIALLY DEPRECATED]

Lecture 40 Connecting Mongoose to Mongo

Lecture 41 Breather and Review

Lecture 42 Mongoose Model Classes

Lecture 43 Saving Model Instances

Lecture 44 TokenError: Bad Request

Lecture 45 Mongoose Queries

Lecture 46 Passport Callbacks

Lecture 47 Encoding Users

Lecture 48 Deserialize User

Lecture 49 Enabling Cookies

Lecture 50 Required Temporary Update for “req.session.regenerate is not a function”

Lecture 51 Testing Authentication

Lecture 52 Logging Out Users

Lecture 53 [Optional] A Deeper Dive

Section 5: Dev vs Prod Environments

Lecture 54 Dev vs Prod Keys

Lecture 55 MongoDB Atlas Production Setup and Configuration

Lecture 56 Generating Production Resources

Lecture 57 Determining Environment

Lecture 58 Version Control Scheme

Lecture 59 [Railway] Production Environment Variables

Lecture 60 [Railway] Avoiding an Error

Lecture 61 [Heroku] Production Environment Variables

Lecture 62 Fixing Proxy Issues

Section 6: Moving to the Client Side

Lecture 63 Important Update About React App Generation

Lecture 64 React App Generation

Lecture 65 A Separate Front End Server

Lecture 66 Running the Client and Server

Lecture 67 Important Create React App Proxy Update

Lecture 68 Routing Stumbling Block

Lecture 69 The Beauty of Create React App’s Proxy

Lecture 70 [Optional] Why This Architecture?

Section 7: Developing the Client Side

Lecture 71 Async/Await Syntax

Lecture 72 Refactoring with Async/Await

Lecture 73 Important Note About Proxy

Lecture 74 Front End Tech

Lecture 75 Client React Setup

Lecture 76 Installing Root Modules

Lecture 77 Troubleshooting NPM

Lecture 78 Redux Review and Setup

Lecture 79 The Auth Reducer

Lecture 80 Finishing Reducer Setup

Lecture 81 Why We Care About Auth

Lecture 82 React Router Setup

Lecture 83 Route Configuration

Lecture 84 Matching Routes with Exact

Lecture 85 Always Visible Components

Lecture 86 Materialize CSS

Lecture 87 Webpack with CSS

Lecture 88 Header Design

Lecture 89 Current User API

Lecture 90 Additional Proxy Rules

Lecture 91 Basics of Redux Thunk

Lecture 92 Refactoring the App

Lecture 93 Testing FetchUser

Lecture 94 Refactoring to Async/Await

Lecture 95 AuthReducer Return Values

Lecture 96 Accessing State in the Header

Lecture 97 Header Content

Lecture 98 Redirecting a User on Auth

Lecture 99 Redirect on Logout

Lecture 100 Landing Component

Lecture 101 Link Tags

Section 8: Handling Payments

Lecture 102 Client Side Billing

Lecture 103 Billing Considerations

Lecture 104 Stripe Billing Process

Lecture 105 Exploring the Stripe API

Lecture 106 Stripe API Keys

Lecture 107 Env Variables with React

Lecture 108 The Payments Component

Lecture 109 Stripe Tokens

Lecture 110 Payment Fixes

Lecture 111 Reusing Action Types

Lecture 112 Positing the Stripe Token

Lecture 113 Post Request Handlers

Lecture 114 Creating Charges

Lecture 115 BodyParser Middleware

Lecture 116 Creating a Charge Object

Lecture 117 Finalizing a Charge

Lecture 118 Adding Credits to a User

Lecture 119 Requiring Authentication

Lecture 120 Route-Specific Middlewares

Lecture 121 Displaying Credit Quantity

Lecture 122 Updating Credits

Section 9: Back End to Front End Routing in Production

Lecture 123 Express with Create-React-App in Production

Lecture 124 Routing in Production

Lecture 125 Deployment Options

Lecture 126 Adding in a Build Step

Lecture 127 [Railway] Postbuild and Deployment

Lecture 128 Testing Deployment

Section 10: Mongoose for Survey Creation

Lecture 129 Survey Overview

Lecture 130 Server Routes

Lecture 131 Survey Model

Lecture 132 Model Deficiencies

Lecture 133 Limitations of Subdocument Collections

Lecture 134 Setting up SubDocs

Lecture 135 Relationship Fields

Lecture 136 Survey Creation Route Handler

Lecture 137 Verifying Minimum Credits

Lecture 138 Creating Surveys

Lecture 139 Creating Subdoc Collections

Lecture 140 Oops! A Little Tweak

Lecture 141 Creating Mailers

Lecture 142 Identifying Unique Users

Lecture 143 Sendgrid Activation Update

Lecture 144 Sendgrid Setup

Lecture 145 Mailer Setup

Lecture 146 Update for “from_email” setting

Lecture 147 Mailer in Use

Lecture 148 Mailer Constructor

Lecture 149 Boilerplate for Sending Emails

Lecture 150 More Mailer Properties

Lecture 151 Sending SendGrid Emails

Lecture 152 Testing Email Sending

Lecture 153 Improving the Email Template

Lecture 154 Polish in the Route Handler

Lecture 155 Verifying Sendgrid Click Tracking

Lecture 156 Feedback for User Feedback

Section 11: Back to the Client!

Lecture 157 Client Side Survey Creation

Lecture 158 Material Icons

Lecture 159 Navigation with the Link Tag

Lecture 160 SurveyNew Form

Lecture 161 Purpose of Redux Form

Lecture 162 Redux Form Setup

Lecture 163 The ReduxForm Helper

Lecture 164 Redux Form in Practice

Lecture 165 Custom Field Components

Lecture 166 Wiring up Custom Fields

Lecture 167 DRY’ing Up Fields

Lecture 168 Fields from Config

Lecture 169 Styling the Form

Lecture 170 Form Validation

Lecture 171 Showing Validation Errors

Lecture 172 Generalizing Field Validation

Lecture 173 Validating Emails

Lecture 174 Displaying Invalid Emails

Lecture 175 Toggling Visibility?

Lecture 176 Advancing From SurveyForm

Lecture 177 Retreat to the Form

Lecture 178 Persisting Form Values

Lecture 179 Refactoring Form Fields

Lecture 180 Finalizing Review Fields

Lecture 181 Outstanding Form Work

Lecture 182 Dumping Form Values

Lecture 183 Fixing Property Names

Lecture 184 Posting to Surveys

Lecture 185 Redirect on Submit

Section 12: Handling Webhook Data

Lecture 186 Feedback with Webhooks

Lecture 187 Webhooks in Development

Lecture 188 Quick Note Before Next Lecture…..

Lecture 189 LocalTunnel Setup

Lecture 190 Ngrok setup instead of LocalTunnel

Lecture 191 Testing Webhooks

Lecture 192 Finalizing Webhook Setup

Lecture 193 Encoding Survey Data

Lecture 194 Dirty Data from Webhooks

Lecture 195 Processing Pipeline

Lecture 196 Parsing the Route

Lecture 197 “TypeError: Path is not a constructor” error

Lecture 198 Code Cleanup

Lecture 199 Unique Events

Lecture 200 Lodash Chain Helper

Lecture 201 Bad Mongoose Queries

Lecture 202 Finding the Exact Survey

Lecture 203 Updating Records

Lecture 204 Executing Queries

Lecture 205 Testing the Query

Lecture 206 Odds n’ Ends Around Surveys

Lecture 207 Mongoose Tips

Section 13: The Home Stretch!

Lecture 208 Fetching a List of Surveys

Lecture 209 Whitelisting Model Fields

Lecture 210 Testing Surveys Endpoint

Lecture 211 Wiring Surveys Up to Redux

Lecture 212 Wiring React to Redux

Lecture 213 Rendering a List of Surveys

Lecture 214 Reversing the Survey List

Lecture 215 Expanding the App

Lecture 216 [Heroku] Deploy Notes from Final Lecture

Lecture 217 [Railway] Deploy Notes from Final Lecture

Lecture 218 [Railway] All Steps to Deploy full Application

Section 14: Extras

Lecture 219 Bonus!

Anyone who wants to learn how to build full stack apps with the latest in web technology

Course Information:

Udemy | English | 25h 57m | 15.47 GB
Created by: Stephen Grider

You Can See More Courses in the Developer >> Greetings from CourseDown.com