Node with React: Fullstack Web Development
-
Course Overview – Start Here!
-
Server Side ArchitectureApplication Architecture0sRelationship Between Node and Express0sGenerating Express Apps0sExpress Route Handlers0sImportant Info About Heroku and DeploymentDeployment Checklist0s[Render] Git and GitHub Setup[Render] Registration, Creating a Service and Deployment[Heroku] Installing the Heroku CLI0s[Heroku] Verifying Deployment0s[Heroku] Followup Deployments0s
-
Authentication with Google OAuthIntro to Google OAuth0sThe OAuth Flow0sOverview of Passport JS0sPassport Setup0sThe Google OAuth API0sGoogle Project Setup and Enabling the Google OAuth APISecuring API Keys0sGoogle Strategy Options0sTesting OAuth0sAuthorized Redirect URI’s0sOAuth Callbacks0sAccess and Refresh Tokens0sNodemon Setup0s
-
Adding MongoDBServer Structure Refactor0sThe Theory of Authentication0sSigning In Users with OAuth0sIntroduction to MongoDB0sRemote vs Local MongoDB Instances0sMongoDB Atlas Setup and ConfigurationConnecting Mongoose to Mongo0sBreather and Review0sMongoose Model Classes0sSaving Model Instances0sTokenError: Bad RequestMongoose Queries0sPassport Callbacks0sEncoding Users0sDeserialize User0sEnabling Cookies0sTesting Authentication0sLogging Out Users0s[Optional] A Deeper Dive0s
-
Dev vs Prod Environments
-
Moving to the Client Side
-
Developing the Client SideAsync/Await Syntax0sRefactoring with Async/Await0sImportant Note About ProxyFront End Tech0sClient React Setup0sReactDOM warning with React v18Installing Root Modules0sTroubleshooting NPM0screateStore Strikethrough in Code EditorRedux Review and Setup0sThe Auth Reducer0sFinishing Reducer Setup0sWhy We Care About Auth0sReact Router Setup0sRoute Configuration0sMatching Routes with Exact0sAlways Visible Components0sMaterialize CSS0sWebpack with CSS0sHeader Design0sCurrent User API0sAdditional Proxy Rules0sBasics of Redux Thunk0sRefactoring the App0sTesting FetchUser0sRefactoring to Async/Await0sAuthReducer Return Values0sAccessing State in the Header0sHeader Content0sRedirecting a User on Auth0sRedirect on Logout0sLanding Component0sLink Tags0s
-
Handling PaymentsClient Side Billing0sBilling Considerations0sStripe Billing Process0sExploring the Stripe API0sStripe API Keys0sEnv Variables with React0sThe Payments Component0sStripe Tokens0sPayment Fixes0sReusing Action Types0sPosting the Stripe Token0sPost Request Handlers0sCreating Charges0sBodyParser Middleware0sCreating a Charge Object0sFinalizing a Charge0sAdding Credits to a User0sRequiring Authentication0sRoute-Specific Middlewares0sDisplaying Credit Quantity0sUpdating Credits0s
-
Back End to Front End Routing in Production
-
Mongoose for Survey CreationSurvey Overview0sServer Routes0sSurvey Model0sModel Deficiencies0sLimitations of Subdocument Collections0sSetting up SubDocs0sRelationship Fields0sSurvey Creation Route Handler0sVerifying Minimum Credits0sCreating Surveys0sCreating Subdoc Collections0sOops! A Little TweakCreating Mailers0sIdentifying Unique Users0sSendgrid Activation UpdateSendgrid Setup0sMailer Setup0sUpdate for “from_email” settingMailer in Use0sMailer Constructor0sBoilerplate for Sending Emails0sMore Mailer Properties0sSending SendGrid Emails0sTesting Email Sending0sImproving the Email Template0sPolish in the Route Handler0sVerifying Sendgrid Click Tracking0sFeedback for User Feedback0s
-
Back to the Client!Client Side Survey Creation0sMaterial Icons0sNavigation with the Link Tag0sSurveyNew Form0sPurpose of Redux Form0sImportant Note about Redux Form InstallationRedux Form Setup0sThe ReduxForm Helper0sRedux Form in Practice0sCustom Field Components0sWiring up Custom Fields0sDRY’ing Up Fields0sFields from Config0sStyling the Form0sForm Validation0sShowing Validation Errors0sGeneralizing Field Validation0sValidating Emails0sDisplaying Invalid Emails0sToggling Visibility?0sAdvancing From SurveyForm0sRetreat to the Form0sPersisting Form Values0sRefactoring Form Fields0sFinalizing Review Fields0sOutstanding Form Work0sDumping Form Values0sFixing Property Names0sPosting to Surveys0sRedirect on Submit0s
-
Handling Webhook DataFeedback with Webhooks0sWebhooks in Development0sQuick Note Before Next Lecture…..LocalTunnel Setup0sNgrok setup instead of LocalTunnelTesting Webhooks0sFinalizing Webhook Setup0sEncoding Survey Data0sDirty Data from Webhooks0sProcessing Pipeline0sParsing the Route0s“TypeError: Path is not a constructor” errorCode Cleanup0sUnique Events0sLodash Chain Helper0sBad Mongoose Queries0sFinding the Exact Survey0sUpdating Records0sExecuting Queries0sTesting the Query0sOdds n’ Ends Around Surveys0sMongoose Tips0s
-
The Home Stretch!Fetching a List of Surveys0sWhitelisting Model Fields0sTesting Surveys Endpoint0sWiring Surveys Up to Redux0sWiring React to Redux0sRendering a List of Surveys0sReversing the Survey List0sExpanding the App0s[Render] Deploy Notes from Final Lecture[Heroku] Deploy Notes from Final LectureReplacing Sendgrid with MailgunComplete Project Update with Latest Versions and Libraries
-
Extras
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 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.
What's included
- 25 hours on-demand video
- 29 articles
- 96 downloadable resources
- Access on mobile and TV
- Certificate of completion