Node with React: Fullstack Web Development

Build and deploy fullstack web apps with NodeJS, React, Redux, Express, and MongoDB.

  • Stephen Grider
  • 4.66
  • (14259 reviews)
  • 25.5 hrs
  • 214 lectures
  • Udemy
Node with React: Fullstack Web Development

What you will 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

Your trainer

Stephen Grider

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.

214 lessons

Easy to follow lectures and videos covering subject details.

25.5 hours

This course includes hours of video material. Watch on-demand, anytime, anywhere.

Certificate of Completion

You will earn a Certificate of Completion at the end of this course.

Course curriculum

Course Overview - Start Here!28:46

  • How to Get Help06:12
  • Course Resources00:51
  • Join Our Community!00:07
  • App Overview04:20
  • App User Flow Walkthrough04:30
  • Tech Stack05:29
  • App Mockups07:16

  • Application Architecture04:35
  • Relationship Between Node and Express08:26
  • Generating Express Apps08:11
  • Express Route Handlers07:32
  • Node Version in Engines Property00:36
  • Deployment Checklist12:10
  • Installing the Heroku CLI07:29
  • Verifying Deployment08:37
  • Followup Deployments03:29

  • Intro to Google OAuth05:50
  • The OAuth Flow09:08
  • Overview of Passport JS07:58
  • Passport Setup07:16
  • Google+ Deprecation00:17
  • Google Project Setup with new UI01:11
  • Enabling Google OAuth API09:59
  • Securing API Keys05:54
  • Google Strategy Options07:23
  • Testing OAuth07:48
  • Authorized Redirect URI's08:53
  • OAuth Callbacks08:06
  • Access and Refresh Tokens07:31
  • Nodemon Setup03:58

  • Server Structure Refactor12:42
  • The Theory of Authentication11:48
  • Signing In Users with OAuth15:36
  • Introduction to MongoDB08:03
  • MongoDB Atlas Setup and Configuration02:01
  • mLab Setup [PARTIALLY DEPRECATED]07:53
  • Connecting Mongoose to Mongo06:51
  • Breather and Review03:09
  • Mongoose Model Classes08:26
  • Saving Model Instances10:40
  • TokenError: Bad Request00:16
  • Mongoose Queries07:32
  • Passport Callbacks07:37
  • Encoding Users15:01
  • Deserialize User04:28
  • Enabling Cookies07:57
  • Required Temporary Update for "req.session.regenerate is not a function"00:11
  • Testing Authentication08:18
  • Logging Out Users04:12
  • [Optional] A Deeper Dive22:00

  • Dev vs Prod Keys05:38
  • MongoDB Atlas Production Setup and Configuration01:35
  • Generating Production Resources09:49
  • Determining Environment06:34
  • Version Control Scheme08:05
  • SyntaxError: Unexpected token ...00:31
  • Heroku Env Variables08:03
  • Fixing Proxy Issues11:29

  • Important Update About React App Generation00:29
  • React App Generation06:58
  • A Separate Front End Server07:25
  • Running the Client and Server08:56
  • Important Create React App Proxy Update01:06
  • Routing Stumbling Block18:53
  • The Beauty of Create React App's Proxy14:35
  • [Optional] Why This Architecture?29:43

  • Async/Await Syntax18:49
  • Refactoring with Async/Await07:39
  • Important Note About Proxy00:07
  • Front End Tech07:23
  • Client React Setup07:40
  • Installing Root Modules06:44
  • Troubleshooting NPM02:25
  • Redux Review and Setup10:18
  • The Auth Reducer04:51
  • Finishing Reducer Setup03:35
  • Why We Care About Auth04:45
  • React Router Setup05:56
  • Route Configuration05:40
  • Matching Routes with Exact08:15
  • Always Visible Components06:11
  • Materialize CSS08:48
  • Webpack with CSS07:56
  • Header Design04:48
  • Current User API05:58
  • Additional Proxy Rules11:17
  • Basics of Redux Thunk10:12
  • Refactoring the App05:17
  • Testing FetchUser09:02
  • Refactoring to Async/Await08:55
  • AuthReducer Return Values10:37
  • Accessing State in the Header07:51
  • Header Content05:00
  • Redirecting a User on Auth07:33
  • Redirect on Logout07:37
  • Landing Component04:17
  • Link Tags07:51

  • Client Side Billing03:07
  • Billing Considerations11:55
  • Stripe Billing Process05:34
  • Exploring the Stripe API08:15
  • Stripe API Keys10:19
  • Env Variables with React13:31
  • The Payments Component10:29
  • Stripe Tokens09:08
  • Payment Fixes06:56
  • Reusing Action Types09:16
  • Positing the Stripe Token03:11
  • Post Request Handlers04:31
  • Creating Charges05:19
  • BodyParser Middleware06:42
  • Creating a Charge Object06:32
  • Finalizing a Charge04:40
  • Adding Credits to a User07:27
  • Requiring Authentication06:46
  • Route-Specific Middlewares11:39
  • Displaying Credit Quantity04:18
  • Updating Credits05:18

  • Express with Create-React-App in Production12:20
  • Routing in Production08:09
  • Deployment Options10:08
  • Adding in a Build Step16:10
  • Fixes for Failing Heroku Builds00:32
  • Testing Deployment03:49

  • Survey Overview08:00
  • Server Routes05:24
  • Survey Model07:07
  • Model Deficiencies05:56
  • Limitations of Subdocument Collections07:52
  • Setting up SubDocs04:49
  • Relationship Fields05:03
  • Survey Creation Route Handler07:15
  • Verifying Minimum Credits06:24
  • Creating Surveys09:06
  • Creating Subdoc Collections08:48
  • Oops! A Little Tweak00:22
  • Creating Mailers07:18
  • Identifying Unique Users14:29
  • Sendgrid Activation Update02:00
  • Sendgrid Setup08:21
  • Mailer Setup09:39
  • Update for "from_email" setting00:20
  • Mailer in Use11:01
  • Mailer Constructor08:31
  • Boilerplate for Sending Emails09:29
  • More Mailer Properties05:57
  • Sending SendGrid Emails06:16
  • Testing Email Sending09:20
  • Improving the Email Template08:58
  • Polish in the Route Handler09:52
  • Verifying Sendgrid Click Tracking02:09
  • Feedback for User Feedback11:13

  • Client Side Survey Creation05:01
  • Material Icons08:58
  • Navigation with the Link Tag02:20
  • SurveyNew Form06:55
  • Purpose of Redux Form11:16
  • Redux Form Setup12:20
  • The ReduxForm Helper07:07
  • Redux Form in Practice10:22
  • Custom Field Components08:56
  • Wiring up Custom Fields05:46
  • DRY'ing Up Fields05:16
  • Fields from Config07:35
  • Styling the Form07:19
  • Form Validation06:25
  • Showing Validation Errors08:31
  • Generalizing Field Validation09:09
  • Validating Emails08:35
  • Displaying Invalid Emails13:07
  • Toggling Visibility?11:55
  • Advancing From SurveyForm11:28
  • Retreat to the Form05:20
  • Persisting Form Values11:26
  • Refactoring Form Fields09:55
  • Finalizing Review Fields05:26
  • Outstanding Form Work10:50
  • Dumping Form Values07:09
  • Fixing Property Names02:53
  • Posting to Surveys04:40
  • Redirect on Submit09:01

  • Feedback with Webhooks02:30
  • Webhooks in Development09:08
  • Quick Note Before Next Lecture.....00:12
  • LocalTunnel Setup06:27
  • Ngrok setup instead of LocalTunnel01:51
  • Testing Webhooks05:16
  • Finalizing Webhook Setup06:47
  • Encoding Survey Data07:57
  • Dirty Data from Webhooks07:15
  • Processing Pipeline08:18
  • Parsing the Route07:55
  • "TypeError: Path is not a constructor" error00:06
  • Code Cleanup05:30
  • Unique Events05:14
  • Lodash Chain Helper10:50
  • Bad Mongoose Queries09:09
  • Finding the Exact Survey13:48
  • Updating Records09:33
  • Executing Queries09:25
  • Testing the Query02:18
  • Odds n' Ends Around Surveys04:01
  • Mongoose Tips06:06

  • Fetching a List of Surveys09:09
  • Whitelisting Model Fields10:00
  • Testing Surveys Endpoint02:11
  • Wiring Surveys Up to Redux06:00
  • Wiring React to Redux06:52
  • Rendering a List of Surveys08:12
  • Reversing the Survey List02:21
  • Expanding the App12:44
  • Deployment Notes00:28
  • Railway Deployment instead of Heroku03:15

  • Bonus!00:29
Enroll now
Online Courses

Learning NodeJS doesn't have to be hard. Here is our curated list of recommended online courses that will guide you step-by-step in the learning process.

Learn more
Books

Are you an avid book reader? Do you prefer paperback, or maybe Kindle version? Take a look at our curated list of NodeJS related books and take yourskills to the next level.

Learn more
YouTube videos

The number of high-quality and free NodeJS video tutorials is growing fast. Check this curated list of recommended videos - there is no excuse to stop learning.

Learn more