Danh mục
Development
Web Development Data Storage Git Automation Database Design Web Scraping
Business
Business Analysis Communication Project Management Sales Forecasting Business Strategy Operations Management Human Resources Oil and Gas Industry
Finance & Accounting
IT & Software
Office Productivity
SAP Word Excel PowerPoint Excel VBA SharePoint
Personal Development
Persuasion Notion Workspace Mind Mapping
Design
Design Sketching Typography Game Design Digital Art zBrush 3D Animation
Marketing
SEO Marketing Strategy YouTube Marketing Digital Marketing Facebook Marketing Growth Hacking Twitter Marketing Instagram Marketing
Lifestyle
Beer Brewing Beauty Home Repair Energy Healing Bartending Leather Crafting Makeup Artistry Hypnotherapy
Music
Piano Guitar Singing Music Production Acoustic Guitar Fingerstyle Guitar Music Theory Bass Guitar
Duocmmo Tedu Tin học văn phòng Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
Node.Js
Node with React: Fullstack Web Development

Node with React: Fullstack Web Development

Loại khoá học: Web Development

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

image
50.000 VND
85 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

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.

Bạn sẽ học được gì

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

Yêu cầu

  • Basic understanding of Javascript, React, and Redux
  • A Mac, Windows, or Linux computer

Nội dung khoá học

14 sections

Course Overview - Start Here!

6 lectures
Course Resources
00:53
Join Our Community!
00:07
App Overview
04:20
App User Flow Walkthrough
04:30
Tech Stack
05:29
App Mockups
07:16

Server Side Architecture

11 lectures
Application Architecture
04:35
Relationship Between Node and Express
08:26
Generating Express Apps
08:11
Express Route Handlers
07:32
Important Info About Heroku and Deployment
00:41
Deployment Checklist
12:10
[Render] Git and GitHub Setup
01:37
[Render] Registration, Creating a Service and Deployment
02:08
[Heroku] Installing the Heroku CLI
07:29
[Heroku] Verifying Deployment
08:37
[Heroku] Followup Deployments
03:29

Authentication with Google OAuth

13 lectures
Intro to Google OAuth
05:50
The OAuth Flow
09:08
Overview of Passport JS
07:58
Passport Setup
07:16
The Google OAuth API
01:43
Google Project Setup and Enabling the Google OAuth API
01:23
Securing API Keys
05:54
Google Strategy Options
07:23
Testing OAuth
07:48
Authorized Redirect URI's
08:53
OAuth Callbacks
08:06
Access and Refresh Tokens
07:31
Nodemon Setup
03:58

Adding MongoDB

21 lectures
Server Structure Refactor
12:42
The Theory of Authentication
11:48
Signing In Users with OAuth
15:36
Introduction to MongoDB
08:03
MongoDB Atlas Setup and Configuration
02:01
mLab Setup [PARTIALLY DEPRECATED]
07:53
Connecting Mongoose to Mongo
06:51
Breather and Review
03:09
Mongoose Model Classes
08:26
Saving Model Instances
10:40
TokenError: Bad Request
00:16
Mongoose Queries
07:32
Expected Errors Around Sessions
00:22
Passport Callbacks
07:37
Encoding Users
15:01
Deserialize User
04:28
Enabling Cookies
07:57
Required Temporary Update for "req.session.regenerate is not a function"
00:11
Testing Authentication
08:18
Logging Out Users
04:12
[Optional] A Deeper Dive
22:00

Dev vs Prod Environments

8 lectures
Dev vs Prod Keys
05:38
MongoDB Atlas Production Setup and Configuration
01:35
Generating Production Resources
09:49
Determining Environment
06:34
Version Control Scheme
08:05
[Render] Production Environment Variables
01:17
[Heroku] Production Environment Variables
08:03
Fixing Proxy Issues
11:29

Moving to the Client Side

8 lectures
Important Update About React App Generation
00:29
React App Generation
06:58
A Separate Front End Server
07:25
Running the Client and Server
08:56
Important Create React App Proxy Update
01:06
Routing Stumbling Block
18:53
The Beauty of Create React App's Proxy
14:35
[Optional] Why This Architecture?
29:43

Developing the Client Side

33 lectures
Async/Await Syntax
18:49
Refactoring with Async/Await
07:39
Important Note About Proxy
00:07
Front End Tech
07:23
Client React Setup
07:40
ReactDOM warning with React v18
00:32
Installing Root Modules
06:44
Troubleshooting NPM
02:25
createStore Strikethrough in Code Editor
00:23
Redux Review and Setup
10:18
The Auth Reducer
04:51
Finishing Reducer Setup
03:35
Why We Care About Auth
04:45
React Router Setup
05:56
Route Configuration
05:40
Matching Routes with Exact
08:15
Always Visible Components
06:11
Materialize CSS
08:48
Webpack with CSS
07:56
Header Design
04:48
Current User API
05:58
Additional Proxy Rules
11:17
Basics of Redux Thunk
10:12
Refactoring the App
05:17
Testing FetchUser
09:02
Refactoring to Async/Await
08:55
AuthReducer Return Values
10:37
Accessing State in the Header
07:51
Header Content
05:00
Redirecting a User on Auth
07:33
Redirect on Logout
07:37
Landing Component
04:17
Link Tags
07:51

Handling Payments

21 lectures
Client Side Billing
03:07
Billing Considerations
11:55
Stripe Billing Process
05:34
Exploring the Stripe API
08:15
Stripe API Keys
10:19
Env Variables with React
13:31
The Payments Component
10:29
Stripe Tokens
09:08
Payment Fixes
06:56
Reusing Action Types
09:16
Posting the Stripe Token
03:11
Post Request Handlers
04:31
Creating Charges
05:19
BodyParser Middleware
06:42
Creating a Charge Object
06:32
Finalizing a Charge
04:40
Adding Credits to a User
07:27
Requiring Authentication
06:46
Route-Specific Middlewares
11:39
Displaying Credit Quantity
04:18
Updating Credits
05:18

Back End to Front End Routing in Production

7 lectures
Express with Create-React-App in Production
12:20
Routing in Production
08:09
Deployment Options
10:08
Adding in a Build Step
16:10
[Render] Postbuild and Deployment
00:55
Fixes for Failing Heroku Builds
00:32
Testing Deployment
03:49

Mongoose for Survey Creation

28 lectures
Survey Overview
08:00
Server Routes
05:24
Survey Model
07:07
Model Deficiencies
05:56
Limitations of Subdocument Collections
07:52
Setting up SubDocs
04:49
Relationship Fields
05:03
Survey Creation Route Handler
07:15
Verifying Minimum Credits
06:24
Creating Surveys
09:06
Creating Subdoc Collections
08:48
Oops! A Little Tweak
00:22
Creating Mailers
07:18
Identifying Unique Users
14:29
Sendgrid Activation Update
02:00
Sendgrid Setup
08:21
Mailer Setup
09:39
Update for "from_email" setting
00:20
Mailer in Use
11:01
Mailer Constructor
08:31
Boilerplate for Sending Emails
09:29
More Mailer Properties
05:57
Sending SendGrid Emails
06:16
Testing Email Sending
09:20
Improving the Email Template
08:58
Polish in the Route Handler
09:52
Verifying Sendgrid Click Tracking
02:09
Feedback for User Feedback
11:13

Back to the Client!

30 lectures
Client Side Survey Creation
05:01
Material Icons
08:58
Navigation with the Link Tag
02:20
SurveyNew Form
06:55
Purpose of Redux Form
11:16
Important Note about Redux Form Installation
00:12
Redux Form Setup
12:20
The ReduxForm Helper
07:07
Redux Form in Practice
10:22
Custom Field Components
08:56
Wiring up Custom Fields
05:46
DRY'ing Up Fields
05:16
Fields from Config
07:35
Styling the Form
07:19
Form Validation
06:25
Showing Validation Errors
08:31
Generalizing Field Validation
09:09
Validating Emails
08:35
Displaying Invalid Emails
13:07
Toggling Visibility?
11:55
Advancing From SurveyForm
11:28
Retreat to the Form
05:20
Persisting Form Values
11:26
Refactoring Form Fields
09:55
Finalizing Review Fields
05:26
Outstanding Form Work
10:50
Dumping Form Values
07:09
Fixing Property Names
02:53
Posting to Surveys
04:40
Redirect on Submit
09:01

Handling Webhook Data

22 lectures
Feedback with Webhooks
02:30
Webhooks in Development
09:08
Quick Note Before Next Lecture.....
00:12
LocalTunnel Setup
06:27
Ngrok setup instead of LocalTunnel
01:51
Testing Webhooks
05:16
Finalizing Webhook Setup
06:47
Encoding Survey Data
07:57
Dirty Data from Webhooks
07:15
Processing Pipeline
08:18
Parsing the Route
07:55
"TypeError: Path is not a constructor" error
00:06
Code Cleanup
05:30
Unique Events
05:14
Lodash Chain Helper
10:50
Bad Mongoose Queries
09:09
Finding the Exact Survey
13:48
Updating Records
09:33
Executing Queries
09:25
Testing the Query
02:18
Odds n' Ends Around Surveys
04:01
Mongoose Tips
06:06

The Home Stretch!

11 lectures
Fetching a List of Surveys
09:09
Whitelisting Model Fields
10:00
Testing Surveys Endpoint
02:11
Wiring Surveys Up to Redux
06:00
Wiring React to Redux
06:52
Rendering a List of Surveys
08:12
Reversing the Survey List
02:21
Expanding the App
12:44
[Render] Deploy Notes from Final Lecture
00:54
[Heroku] Deploy Notes from Final Lecture
00:28
Replacing Sendgrid with Mailgun
02:39

Extras

1 lectures
Bonus!
00:36

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

The Complete Java Development Bootcamp

The Complete Java Development Bootcamp

125 VND
50.000 VND
Trở thành Quality Control (QC) / Tester (kiểm thử phần mềm)

Trở thành Quality Control (QC) / Tester (kiểm thử phần mềm)

25 VND
50.000 VND
The Complete 2024 Web Development Bootcamp

The Complete 2024 Web Development Bootcamp

185 VND
50.000 VND
Build a Backend REST API with Python & Django - Advanced

Build a Backend REST API with Python & Django - Advanced

120 VND
50.000 VND
Complete C# Unity Game Developer 2D

Complete C# Unity Game Developer 2D

180 VND
50.000 VND
.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

100 VND
50.000 VND
Java 17 Masterclass: Start Coding in 2024

Java 17 Masterclass: Start Coding in 2024

170 VND
50.000 VND
[NEW] Spring Boot 3, Spring 6 & Hibernate for Beginners

[NEW] Spring Boot 3, Spring 6 & Hibernate for Beginners

160 VND
50.000 VND
Building Applications with React 17 and ASP.NET Core 6

Building Applications with React 17 and ASP.NET Core 6

85 VND
50.000 VND
100 Days of Code: The Complete Python Pro Bootcamp

100 Days of Code: The Complete Python Pro Bootcamp

170 VND
50.000 VND
Python Mega Course: Learn Python in 60 Days, Build 20 Apps

Python Mega Course: Learn Python in 60 Days, Build 20 Apps

145 VND
50.000 VND
Advanced React: Design System, Design Patterns, Performance

Advanced React: Design System, Design Patterns, Performance

90 VND
50.000 VND
50 Hrs Big Data Mastery: PySpark, AWS, Scala & Data Scraping

50 Hrs Big Data Mastery: PySpark, AWS, Scala & Data Scraping

65 VND
50.000 VND
Flutter Bloc cho Mobile, Web, PC - Tôi chọn bạn

Flutter Bloc cho Mobile, Web, PC - Tôi chọn bạn

65 VND
50.000 VND
Machine Learning A-Z: AI, Python & R + ChatGPT Prize [2024]

Machine Learning A-Z: AI, Python & R + ChatGPT Prize [2024]

140 VND
50.000 VND
Complete Modern C++ (C++11/14/17)

Complete Modern C++ (C++11/14/17)

145 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi