Mô tả

React is one of the most popular library's for building client apps with HTML, CSS and JavaScript. If you want to establish yourself as a front-end or full-stack developer, you need to learn React.

This course follows a hands-on approach or 'learn-by-doing, which means the whole course is structured around building a fullstack web application and the different concepts will be explained detailedly as they are introduced.

What's this course about?

This course is about building a complete fullstack web application from scratch using popular development tools. The curriculum for this course is going to be very hands on as we walk from start to finish building and deploying the application to production. The course is structured into 2 main parts:

  • Development (Backend and Frontend)

  • Deployment (Infrastructure setup on AWS and CI/CD)

Each structure is broken down into its sections.

  • Backend development

  • Backend deployment

  • Frontend development

  • Frontend deployment

Students can go through all the sections or just the sections they are most interested in.

What Technology You'll Use

We are building a real-time fullstack application with Continuous integration/delivery and automatic deployment, we'll use a variety of technologies.

Development

  • React

  • Redux-toolkit

  • NodeJS

  • Typescript and Javascript

  • Redis

  • MongoDB and Mongoose

  • Message queues

  • SocketIO

  • Jest for unit test

  • Cloudinary for image and video upload

  • Nodemailer and Sendgrid mail

  • and much more...

Infrastructure Setup and Deployment

  • Terraform

  • AWS

  • CircleCI

Numerous AWS resources will be used. Some of those resources are:

- VPC and subnets

- Internet gateways

- Route tables

- NAT gateways and elastic ips

- Security groups

- Load balancers

- Autoscaling groups

- EC2 instances

- Route53

- S3

- Code deploy

- Elasticache for redis clusters

- and much more

Not familiar with some of these? No problem! This course will guide you on how to setup and use these technologies in your apps.

What You'll Be Able to Do

By the time you complete this course or one of the sections you are interested in, you'll be able

  • Build a real-time fullstack application

  • Setup unit tests in both your React application and NodeJS backend application

  • Setup CI/CD Pipeline

  • Setup Automatic Deployment

  • Create AWS Resources using Terraform

  • Integrate Terraform into CircleCI Pipeline

  • Setup Multiple Online Environments (Dev, Staging and Production)

  • Use GitHub w/ CircleCI

  • Use Feature Branches on GitHub

  • Write unit tests

  • Create Custom React Components

  • Setup Redux-toolkit

  • Upload images and videos

  • And More...

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

Build a MERN (MongoDb, Express, React, Node) fullstack app

Build an amazing social network application

Define Infrastructure as Code using Terraform to easily create and destroy environment

Setup Continuous Integration/Delivery Pipeline

Integrate Terraform into CI/CD Pipeline

Deploy full-scale application to AWS

Use Redis for caching

Setup Redis message queues and workers

Learn to write unit tests for Frontend and Backend apps

User AWS services like VPC, subnets, internet gateways, EC2, route53, elasticache, S3, cloudfront, load balancer, autoscaling group and much more.

Setup Online Dev, Staging and Production Environments

Integrate Slack in the CI/CD Pipeline

Build custom react hooks

Setup redux-toolkit

Yêu cầu

  • Just basic JavaScript knowledge
  • No prior React knowledge is required
  • No prior Backend Development knowledge required
  • No prior DevOps knowledge required

Nội dung khoá học

34 sections

Introduction

6 lectures
Introduction
05:49
App demo
16:12
Video upload demo
02:01
App sections
03:38
Github repos
01:30
Github project links
00:02

Backend Introduction

4 lectures
Tools description
05:26
App features
07:32
Install tools
00:13
VSCode Extensions
00:21

Backend: Project Setup

23 lectures
Section introduction
01:08
Create backend project
06:25
TSConfig
02:39
Folder structure setup
07:01
Setup server class
09:49
Standard middleware
12:14
Setup http server - Part 1
10:46
Setup http server - Part 2
04:32
Mongoose connection
00:12
Database connection setup
07:28
Environment config class - Part 1
12:55
Environment config class - Part 2
08:10
SocketIO setup
11:44
Routes function
02:43
Global error handler
16:46
Logger setup
09:19
ESLint setup
14:22
Create github repo
10:29
Change absolute imports
13:23
Build script
06:38
About updating dependencies
00:07
Update dependencies
06:57
Update build script
06:19

Backend: Authentication Feature

33 lectures
Section introduction
02:01
App dataflow
07:00
Redis commands
09:47
Cloudinary upload function
13:46
Auth validation schemes
06:37
Joi validator decorator
11:28
Auth interface and model schema
11:39
Signup user method - Part 1
15:34
Signup user method - Part 2
11:38
Auth routes
12:44
User interface and model schema
07:35
Redis base class
12:59
Issue with redis HSET
00:08
Save user to redis cache - Part 1
11:58
Save user to redis cache - Part 2
13:08
Install redis commander
08:53
Base message queue
12:06
Base queue add job method
13:27
Auth queue and worker
14:10
Add JWT to session
08:26
View mongodb data with compass
04:31
User login controller
08:19
Login bug
00:28
Fix login bug
04:32
Signup auth bug fix
00:12
Update login controller
03:40
User logout controller
05:37
Get user data from redis cache
12:53
Get user by id from mongodb - Part 1
10:11
Get user by id from mongodb - Part 2
06:28
Current user controller
11:54
Authentication middleware
13:38
Merge feature branch to develop
04:39

Backend: Auth Password Reset

18 lectures
Section introduction
01:29
Mail transport class
15:23
Test dev email sender
06:40
Email queue and worker
05:50
Password reset templates
10:58
Test email with password reset templates
08:44
Forgot password controller method
12:49
Reset password controller method
13:28
Jest config
11:23
Unit test script command
05:58
Auth unit test mock
12:35
Signup unit test - Part 1
13:31
Signup unit test - Part 2
19:09
Clear mocks
02:59
Login unit test
04:59
Password reset and logout unit tests
05:56
Current user unit test
04:05
Push code to github
01:27

Backend: Post Feature

26 lectures
Section introduction
01:13
Post interface and model schema
08:51
Post joi validation scheme
03:43
SocketIO post handler
07:18
Create post controller method
09:09
Save post to redis cache
16:20
Use save post to redis cache method
12:52
Add post socketIO event
02:33
Post queue and worker
12:37
Post with image controller method
08:09
Create post unit test
06:54
Get posts from redis cache
17:06
Get total post count from cache
11:46
Get posts from mongodb
09:39
Get posts controller
14:30
Get post routes
05:45
Get post controller unit test
03:07
Delete post controller
15:49
Delete post controller unit test
01:52
Update post in redis cache
11:45
Update redis HSET method in post cache
09:14
Update post controller
13:18
Update post with image controller
14:31
Update post controller unit test
05:27
Push code to github
02:27
Fix tsconfig issue
05:48

Backend: Post Reactions Feature

19 lectures
Section introduction
01:24
Reactions description
05:22
Reactions interface, modal schema and joi schemes
08:33
Add post reaction to redis cache
12:04
Remove post reaction from redis cache
12:41
Add reaction controller
14:41
Fix add reaction issue
05:24
Add post reaction to mongodb
11:59
Post reactions queue and worker
13:55
Fix add reaction to mongodb issue
09:15
Remove reaction controller
07:33
Add and remove reaction controllers unit test
06:47
Get post reactions from redis cache
12:15
Update redis HSET method in reactions cache
02:33
Get post reactions from mongodb
10:35
Get reactions controller
14:08
Get reactions routes
07:55
Get reactions controller unit test
05:58
Push code to github
02:22

Backend: Comments Feature

13 lectures
Section introduction
01:10
Comment interface, model schema and joi schemes
07:04
Comment redis cache methods - Part 1
12:42
Comment redis cache methods - Part 2
09:37
Update redis HSET method in comment cache
02:35
Comment socketIO event
05:07
Comments service - Part 1
11:56
Comments service - Part 2
07:39
Comments queue and worker
04:05
Add comment controller
08:10
Get comment controller
11:59
Test comment feature
05:54
Comments controller unit test
05:28

Backend: Followers, Following, Block and Unblock Features

20 lectures
Section introduction
00:58
Followers interface and model schema
07:53
Follower data structure
06:17
Save follower/following to redis cache
11:11
Add follower controller - Part 1
16:58
Add follower controller - Part 2
13:10
Follower service - Part 1
13:42
Follower service - Part 2
12:22
Unfollow user controller
09:55
Follow and unfollow user controller unit tests
06:53
Get followers from redis cache
15:02
Fix auth bug
07:30
Get followers from mongodb
14:16
Get followers controller
12:39
Block user redis cache method
13:33
Update redis HSET method in follower cache
02:19
Block user mongodb method
11:38
Block and unblock user controller methods
13:15
User socketIO handler
03:07
Push code to github
03:14

Backend: Notification Feature

12 lectures
Section introduction
01:23
Notification interface
12:08
Insert notification method
15:35
Add comment notification
12:59
Notification socketIO handler
05:46
Test comment notification
10:40
Add followers notification
08:12
Add reactions notification
07:21
Delete and update notification service
07:21
Update and delete controller
15:05
Get notifications controller
06:05
Notification controller unit tests
02:49

Backend: Images Upload Feature

12 lectures
Section introduction
01:27
Images interface and model schema
07:05
Update single user item in redis cache
07:17
Add images to database
11:40
Get images from mongodb
11:53
Add image queue method
03:04
Add profile image controller
12:19
Add background image controller - Part 1
12:50
Add background image controller - Part 2
14:09
Delete images controller
09:14
Get images controller
06:14
Add controller unit tests
04:18

Backend: Chat Feature

20 lectures
Section introduction
01:24
Chat interface, model schema and joi schemes
13:05
Add chat controller - Part 1
16:28
Add chat controller - Part 2
16:00
Add chat list to redis cache
14:01
Add chat message route
08:46
Add chat message to redis cache
07:03
Add chat users to redis cache
14:16
Add chat message to mongodb
13:03
Get conversation list from redis cache
06:32
Get conversation list from mongodb
13:51
Get chat messages
16:09
Mark messages as deleted in cache
13:18
Mark messages as deleted in mongodb
11:23
Update messages in redis cache
11:18
Update messages in mongodb
13:24
Fix message update bug in redis cache
06:21
Add message reaction to redis cache
14:19
Add message reaction to mongodb
10:58
Add message controller unit tests
04:10

Backend: Users Feature

23 lectures
Section introduction
01:07
Add user map inside users socketIO handler
13:25
Emit online users
09:42
User schemes
03:38
Get users from redis cache
11:47
Get users profile controller
18:27
Get total users
10:03
Fix user followers bug
02:56
Get user profile
04:50
Get user profile and posts
08:38
Get random users from redis cache
14:54
Get random users from mongodb
12:11
Random users controller method
06:23
Update redis HSET method in user cache
09:27
Search users
12:22
Change password
15:28
Update basic info
15:39
Update notification settings
14:51
Fix change password bug
02:59
Add controller unit tests
08:19
Health routes - Part 1
14:58
Health routes - Part 2
10:24
Test health routes
06:42

Backend: Video Upload Feature

8 lectures
Section introduction
01:14
Add video properties to post model
08:54
Update post cache methods
11:23
Add video upload method to cloudinary upload file
04:50
Create post with video
11:08
Test post video upload
05:24
Update post with video
14:51
Get posts with videos
06:37

Backend: PM2 and MongoDB Setup

9 lectures
Seed user script - Part 1
18:24
Seed user script - Part 2
06:09
Handle process exceptions
09:15
Add mongodb url
13:24
Install swagger stats library
06:53
Install pm2 library
13:00
Update start command
03:21
Get sendgrid api key
05:30
Merge to all branches
10:00

Backend Deployment: AWS Setup

10 lectures
Create AWS account
10:32
Create IAM user
16:41
Add billing policy to IAM user
05:03
Login with IAM user
12:11
Create cloudwatch billing alarm
09:51
Add aws cli
11:12
Get a domain
11:53
AWS services to use
08:32
AWS infrastructure
13:12
AWS infrastructure connections
07:31

Backend Deployment: Infrastructure with Terraform

31 lectures
Install terraform
00:05
Terraform AWS S3 bucket for remote state
06:50
Terraform variables
16:22
Terraform version and backend
09:53
VPC and subnets
11:52
Internet gateway and public route tables
10:27
Elastic ip and NAT gateway
10:59
Security groups
17:27
Application load balancer target group
15:20
Route53 certificate
11:48
Application load balancer
15:01
Application load balancer route53 alias
05:07
IAM EC2 role
06:21
Elasticache
11:53
Update env file script
11:39
EC2 launch config
09:53
EC2 user data script
14:05
Autoscaling group
12:22
Create env file S3 bucket
10:35
Run terraform apply locally
21:11
Access elasticache command line
11:48
Code deploy intro
12:56
Code deploy S3 bucket
09:03
Code deploy app
15:46
Code deploy app spec
17:58
Trigger code deployment
16:41
Update aws cli command for code deployment
09:05
Delete code deploy autoscaling group script
13:25
Terraform destroy resources
02:55
Autoscaling group policy
13:48
Merge to different branches
18:08

Backend Deployment: CI/CD with CircleCI

19 lectures
Section introduction
02:42
Create circleci account
13:44
CIrcleCI docker images version
00:15
Circleci executors
09:36
Setup yaml aliases
09:57
CircleCI Codecov Orb version
00:09
Unit test job
13:29
CircleCI AWS CLI Orb version
00:09
Upload to S3 job
09:42
Terraform jobs
07:07
Code deploy job
09:57
Setup slack app
09:01
Slack notify on fail
10:15
Notify via slack job
05:16
Circleci workflows
11:48
Trigger a develop build
08:05
Job workflow correction
02:19
Add aws cli to terraform apply job
08:53
Add circleci badge
08:04

Frontend: Project Setup

6 lectures
Section introduction
00:53
Create folder
07:39
Create project folders
08:10
Add sass file
05:06
Setup ESLint and prettier
09:44
Setup github repo
05:36

Frontend: Authentication Feature

20 lectures
Section introduction
01:33
Sample html
02:14
Create auth tabs page
09:51
App router
11:45
Add auth background image
07:49
Button and input components
14:10
Login component
13:42
Register user component
09:31
Forgot password and reset password components
09:53
Add static data
05:42
Auth service
12:42
Register user logic - Part 1
13:37
Register user logic - Part 2
12:17
Generate avatar image
16:56
Login user logic
09:23
Reset password logic
15:35
Merge code
03:06
Setup jsconfig paths
16:30
Change absolute paths
08:01
Create streams page component
09:14

Frontend: Custom Hooks

7 lectures
Section introduction
01:53
useLocalStorage and useSessionStorage
12:05
useChatScrollToBottom
09:06
useDebounce
09:51
useDetectOutsideClick
08:32
useInfiniteScroll
14:18
useEffectOnce
06:52

Frontend: Redux Toolkit Setup

6 lectures
Section introduction
01:44
useLocalStorage hook in login component
05:03
Setup redux store
15:22
Fix redux store import issue
01:12
Dispatch user action
11:02
Clear user reducer method
04:23

Frontend: Setup Unit Test

18 lectures
Section introduction
01:21
Testing library intro
13:13
Mock service worker
03:26
Setup mock service worker
18:23
Create test utils
11:07
Register component unit test - Part 1
13:34
Register component unit test - Part 2
17:25
Register component unit test - Part 3
13:39
Register component unit test - Part 4
11:48
Auth tabs and login component unit tests
12:39
Forgot and reset password components unit tests
09:51
Fix register component error test
01:04
Button component unit test
04:13
User reducer unit test
13:05
Custom hooks unit test - Part 1
14:31
Custom hooks unit test - Part 2
10:00
Custom hooks unit test - Part 3
05:08
Section conclusion
01:32

Frontend: Streams Page Component

23 lectures
Section introduction
01:46
Main app page overview
02:27
Social page component
07:59
Header component with avatar - Part 1
15:28
Header component with avatar - Part 2
10:59
Display app environment name
07:43
Sidebar component
11:57
Streams page component
06:18
Suggestions component
13:48
Add users suggestions to redux
08:18
Get users suggestions from redux
06:59
Add sidebar navigation
12:51
Message sidebar component
12:20
Dropdown component
14:22
Profile utils service
10:15
Logout user
07:34
Protected route component
18:12
Use protected route component
02:28
Navigate to streams page from auth page
05:50
Error page component
06:09
Add skeleton components
12:09
Lazy load routes
10:53
Add components unit test
04:36

Frontend: Notification Page Component

15 lectures
Section introduction
01:04
Setup socketIO client
09:16
Toast component - Part 1
11:00
Toast component - Part 2
11:01
Add toast component to app component
07:13
Notification reducer
10:44
Use dispatch notification method
07:54
Notification page component
12:00
Notification utils service
15:08
Mark and delete notification
12:29
Map notification dropdown items method
15:31
Timeago utils service
11:24
Add notification to dropdown
11:56
Notification skeleton
03:23
Notification component unit test
10:25

Frontend: Post Components and Features

30 lectures
Section introduction
02:03
Post form component
07:56
Modal reducer
08:57
Post modal wrapper
06:49
Create post modal component - Part 1
14:56
Create post modal component - Part 2
09:41
Create post modal component - Part 3
09:58
Background color selection
09:22
Select privacy component
17:28
Feelings component
12:16
File selection
12:07
Image utils service
14:25
Display selected image
15:28
Clear image
14:20
Giphy component
14:00
Use giphy component
08:43
Spinner component
05:05
Open create post modal component from post form
09:50
Create post - Part 1
15:27
Create post - Part 2
09:04
Posts and single post components
13:10
Display posts
07:09
Post pagination function
13:39
Test post pagination
04:38
Check post privacy
10:15
Handle button disable state
05:00
Position cursor
11:45
Create socketIO post method
14:15
Use socketIO post method
03:20
Posts components unit tests
14:29

Frontend: Post Reactions and Comments Features

31 lectures
Section introduction
02:01
Comment area component
10:11
Reactions component
10:05
Reactions display component
05:59
Set user selected reaction
12:43
User post reaction reducer
11:47
Add post reaction - Part 1
13:03
Add post reaction - Part 2
12:17
Add post reaction - Part 3
08:40
Display reactions - Part 1
15:12
Display reactions - Part 2
09:32
Reactions modal component - Part 1
12:36
Reactions modal component - Part 2
14:18
Display reactions modal
15:24
Fix reactions modal issue
05:08
Display post image
04:36
Comment input box component
13:46
Display comment input component
10:25
Display comments count
12:47
Fix comment names display issue
03:02
Comments modal
13:33
Delete selected post id from localstorage
01:52
Add skeleton to posts component
05:09
Add image modal
10:28
Add edit post component
14:04
Add values to edit post component
14:38
Update post method - Part 1
16:34
Update post method - Part 2
08:23
Delete post
13:24
Fix update post notification toast display
04:57
Components unit tests
00:09

Frontend: People's Page Component

7 lectures
Section introduction
00:50
People's component
15:46
Card element stats and buttons components
14:50
Get all users api method
12:28
Navigate to profile page
03:31
Card skeleton
01:37
Card elements unit tests
02:27

Frontend: Follow and Unfollow Features

16 lectures
Section introduction
02:23
Follower service
04:42
Follow utils service - Part 1
13:38
Follow utils service - Part 2
15:38
Remove user from list method
03:12
Followers component
14:07
SocketIO follow and unfollow on people's page
09:28
Fix follow and unfollow bug
03:57
Following component
06:54
Refactor map key index
11:33
Follow user suggestions
13:18
Updating following component
05:37
Get user following from streams component
04:55
Get background image color
16:45
Add background image color to post
07:47
Components unit tests
00:04

Frontend: Images Page Component

7 lectures
Section introduction
01:11
Add photos component
13:29
Create gallery image component
16:22
Add image modal component
11:47
Add left and right arrows click
10:12
Fix image modal issue
06:20
Add components unit tests
02:43

Frontend: Private Chat Features

35 lectures
Section introduction
01:25
Chat reducer
09:46
Chat page component
07:35
Search list component - Part 1
14:12
Search list component - Part 2
10:10
Search users api result
09:13
Chat utils service - Part 1
13:34
Chat utils service - Part 2
13:27
SocketIO message received method
02:49
Add selected searched user to chat list
14:52
Display chat list items
12:59
Chat list body component
13:50
Add existing user to url query
11:01
Update sidebar component
15:50
Add socketIO chat list method to chat list component
01:11
Chat window component
04:06
Message input component
13:44
Create GIF container
14:24
Image preview component
14:08
Get messages from message input component
16:28
Add methods to chat window component
15:08
Send chat messages
10:37
Replace useEffectOnce with useEffect in window component
07:48
Message display component
08:48
Right message display component
16:18
Right message bubble
13:06
Use right message display component
04:44
Display right messages
13:02
Fix message reaction display issue
01:13
Left message display component
05:58
Update message sidebar
11:15
Add socketIO message notification method
14:07
Users online method in people's component
02:04
Sort chat list data
02:51
Components unit tests
00:09

Frontend: Profile Page Component

26 lectures
Section introduction
01:48
Background header component - Part 1
14:41
Background header component - Part 2
14:40
Get user profile by username
12:07
Add more properties to background header component
17:59
Add change tab content method
13:31
Save image method
12:35
Get user images
07:26
Fix profile image select issue
02:35
Create tabs component
13:06
Add delete dialog and image modal
07:52
Display timeline posts component
14:20
Create counter container
10:48
Info display component - Part 1
13:43
Info display component - Part 2
15:15
Basic info component
14:58
Social links component
10:06
Fix social links update issue
06:36
Get reactions by username
04:02
Followers card component
08:06
Hide follower card button
02:01
Change password component
15:39
Notification settings component - Part 1
14:19
Notification settings component - Part 2
11:28
Page loader component
05:22
Components unit tests
00:08

Frontend: Video Upload Feature

11 lectures
Section introduction
02:01
Add video select button to post form
11:42
Add video file to redux store
15:01
Add video select button to modal
04:29
Display selected video
15:45
Upload selected video
16:34
Display uploaded videos
10:49
Display video in edit modal
13:09
Edit post with video
12:40
Create video component
09:40
Display videos in videos component
06:18

Frontend Deployment: Infrastructure with Terraform and CircleCI

24 lectures
Add env variables to S3 bucket
12:13
Terraform variables
10:41
Terraform remote backend
04:28
S3 bucket resource
13:49
AWS certificate resource
07:30
Cloudfront distribution - Part 1
14:35
Cloudfront distribution - Part 2
06:31
Cloudfront route53 alias
10:20
Execute terraform locally
13:28
Make changes to react code
12:29
Use redis commander GUI
09:29
CircleCI images and orbs versions
00:07
Add circleci config yaml with jobs
12:19
Build app job
09:58
Terraform jobs
07:46
Upload to S3 job
06:01
Cloudfront distribution job
11:13
CircleCI workflows
09:08
Add env variables to circleci context
10:09
Trigger develop build
08:38
Set CI to false for build script command
08:55
Remove build app job
08:45
Persist cloudfront distribution id to workspace
10:41
Add codecov badge
04:06

Đá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?

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.