CourseFlix

Build a React & Redux App w CircleCI CICD, AWS & Terraform

25h 45m 21s
English
Paid

Learn how to build and ship a real React app. You will create a full project and see each idea in action. You will use React, Redux, and a full CI/CD setup to deploy your app on the web. The steps are clear, direct, and easy to follow.

Course Overview

This course teaches you React, Redux, Hooks, CI/CD, AWS S3, CloudFront, Slack, GitHub, Docker, and more. You will build a working app and deploy it online. You will learn each tool as you use it in your project.

Tools You Will Use

You will use these tools while you build and deploy your app.

  • React
  • Redux
  • AWS S3 and CloudFront
  • Slack
  • Docker
  • GitHub
  • Sentry for monitoring
  • CircleCI for CI/CD

If some of these are new to you, that is fine. You will learn how to set them up as you go.

What You Will Build

By the end of the course, you will be able to build and deploy a full React app. You will also learn how to manage code, track changes, and ship updates with ease.

Skills You Will Gain

  • Build a full React app
  • Set up a CI/CD pipeline
  • Create automatic deployments
  • Integrate Slack, Sentry, and Docker
  • Set up dev, staging, and production environments
  • Use GitHub with CircleCI
  • Work with feature branches
  • Use CSS Grid
  • Create custom React components
  • Write CI/CD config files

Requirements

  • Basic HTML, CSS, and JavaScript
  • No React experience needed

Who This Course Is For

  • New or growing React developers
  • Anyone who wants to learn by building a real project
  • Developers who want to set up a CI/CD pipeline
  • Developers who want to use AWS S3 and CloudFront

What You Will Learn

  • Build a complete React app
  • Set up a CI/CD pipeline
  • Store and serve your app with AWS S3 and CloudFront
  • Create Docker images
  • Send Slack messages in your CI/CD steps
  • Set up dev, staging, and production environments
  • Use Sentry to track errors
  • Create custom React components
  • Style layouts with CSS Grid
  • Configure automatic deployment
  • Integrate GitHub and CircleCI
  • Create and merge feature branches

About the Author: udemy

udemy thumbnail

Udemy is a global online marketplace for teaching and learning. It connects students with instructors who share skills in many fields.

Who Uses Udemy

Millions of learners use Udemy to gain skills for work and personal growth. Companies, governments, and nonprofits also use Udemy to train their teams.

What Udemy Offers

Udemy provides a curated set of business and technical courses. These courses help teams build practical skills and support ongoing learning at work.

Watch Online 240 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 240 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Introduction
All Course Lessons (240)
#Lesson TitleDurationAccess
1
Course Introduction Demo
03:29
2
Course App Demo
05:27
3
Project Structure Demo
07:13
4
Project Github Repo Description
03:13
5
CircleCI Project Pipelines
07:04
6
AWS Services
04:54
7
About CI/CD
05:18
8
Install Tools
05:54
9
Create React App
06:00
10
Gihub Branching
06:44
11
Create Github Project
04:42
12
Create Github Project Branches
05:43
13
Add Github Project to CircleCI
08:26
14
Fetch Develop Branch Locally
03:49
15
AWS Intro
06:06
16
AWS IAM User
07:54
17
Add AWS Region to CircleCI Environment Variables
01:39
18
Create AWS S3 Dev Bucket
08:18
19
Add Bucket Policy
04:25
20
Create AWS S3 Staging and Production Buckets
04:04
21
Add AWS Cloudfront Distribution
13:29
22
Show Staging and Production S3 Buckets
02:02
23
Section Introduction
01:03
24
Description of Important CircleCI Concepts
10:50
25
Add Build Job to CircleCI Config
12:30
26
Add Install Command to Build Job
02:59
27
AWS S3 CircleCI Job - Part 1
09:14
28
AWS S3 CircleCI Job - Part 2
08:19
29
AWS Cloudfront CircleCI Job
06:03
30
Create CircleCI Jobs Workflow
05:37
31
Deploy First App Changes
10:05
32
Deploy to Staging
03:56
33
Format Config FIle
08:55
34
Section Introduction
01:25
35
Section Information
01:51
36
Create Heroku Apps
05:43
37
Deploy to Heroku Job - Part 1
10:06
38
Deploy to Heroku Job - Part 2
10:28
39
Deploy App Dev App to Heroku
08:03
40
Add Express Server Configuration
12:03
41
Deploy Express Server Changes
04:12
42
Deploy App to Staging and Production on Heroku
12:00
43
Section Conclusion
02:42
44
Section Introduction
01:10
45
Install Eslint
05:49
46
Run Linting Command
05:27
47
Add Linting CircleCI Job (Optional)
05:37
48
Deploy Linting Job
02:33
49
Add Prettier and EditorConfig
07:38
50
Deploy Prettier Job
06:09
51
Show Prettier Job
00:38
52
Section Integration
00:56
53
Setup Slack Workspace
07:05
54
Create Slack App
07:55
55
Add Slack Token to CircleCI Environment Variables
03:45
56
CircleCI Orbs
03:25
57
Add CircleCI Slack Orbs
03:46
58
CircleCI Slack Job
12:42
59
Slack Orbs Custom Template
12:25
60
Add View Job Button
03:51
61
Add Slack Notify Job to Workflow
07:17
62
Fix Custom Template Error
04:54
63
Uncomment Other Jobs
01:54
64
Upgrade Slack Sentry Integration
04:04
65
Section Introduction
00:59
66
Install Terraform on MacOS
05:01
67
Show AWS Management Console
02:33
68
Create Terraform S3 Bucket Backend
06:54
69
Add Remote Terraform Backend
06:50
70
Create terraform Locals
07:06
71
Add AWS S3 Terraform Resource
11:35
72
Add S3 Bucket Policy to Terraform Resource
10:24
73
Terraform S3 Bucket Output
05:18
74
Add Terraform to Gitignore
06:49
75
Run Terraform Init Command
08:02
76
Run Terraform Apply Command Locally
08:36
77
AWS CloudFront Distribution - Part 1
12:11
78
AWS CloudFront Distribution - Part 2
10:50
79
AWS CloudFront Distribution - Part 3
07:23
80
Create Cloudfront Distribution
04:16
81
Run Terraform Destroy Command
02:19
82
Section Introduction
01:41
83
Add Terraform CircleCI Executor
07:46
84
Add Terraform Validate Job
05:54
85
Add Terraform Pland and Apply Job
11:15
86
Use Terraform S3 Output
08:53
87
Use Terraform Cloudfront Output
01:48
88
Add Terraform Destroy Job
04:02
89
Add Jobs to Workflow
05:49
90
Push Code to Github
06:45
91
Fix Artifacts Directory Issue
05:22
92
CircleCi Terraform Destroy
08:18
93
Section Introduction
00:57
94
Install Redux
04:49
95
Setup Redux Store
09:02
96
Add React Redux Provider
04:59
97
Add Reducer Files
07:41
98
Merge Pull Request
04:56
99
Header Section Introduction
00:53
100
Install node Sass
03:20
101
Create Header Component
07:53
102
Header Component Divs
08:27
103
Header Component Styles
12:49
104
Add Menu Toggle
10:34
105
Add List Item
07:25
106
Header Logo
02:33
107
Merge Header Feature to Dev Branch
02:28
108
Merge Dev Branch to Staging for Header Feature
03:17
109
Section Introduction
01:09
110
Add Main Component
05:58
111
Main Content Component Styles
09:29
112
Create Slideshow Component
06:53
113
Add Slideshow Arrows
04:24
114
Slideshow Indicators
08:58
115
Slideshow Arrows Functionality - Part 1
10:21
116
Slideshow Arrows Functionality - Part 2
07:09
117
Slideshow Arrows Functionality - Part 3
02:58
118
Auto Move Slideshow
08:47
119
Add Slideshow Props
06:03
120
Add Slideshow Prop Types
07:25
121
Deploy Slideshow Component
04:31
122
Section Introduction
01:26
123
Create Paginate Component
05:33
124
Paginate Component Styles
04:59
125
Paginate Buttons Function
10:46
126
Add Prop Types
05:57
127
Merge Paginate Feature
04:27
128
Section Introduction
00:57
129
Create Grid Component
09:47
130
Grid Cell Styles
09:35
131
Style Grid Button
08:30
132
Grid Cell Details
09:01
133
Add Styles to Star Rating
07:35
134
Display Stars with Props
10:24
135
Calculate Star Percentage
06:48
136
Add Rating Prop Types
03:49
137
Create Grid Component Pull Request
02:06
138
Section Introduction
01:27
139
Get Movie API
10:18
140
Create Movie Service
14:09
141
Get Movies Redux Action Method
11:18
142
Use Get Movies Redux Action method
11:06
143
Add Page and Total Pages Number to Redux Store
05:04
144
Get Random Images For Slideshow
12:05
145
Loading Spinner
11:44
146
Display Slideshow Images from Redux Store
03:25
147
Display Images on Grid
09:18
148
Load More Movies Redux Action
06:56
149
Main Component OnScroll Method
10:21
150
Fetch More Data
07:41
151
Import Main SCSS File
03:04
152
Lazy Load Images - Part 1
11:21
153
Lazy Load Images - Part 2
10:37
154
Set Movie Type - Part 1
08:55
155
Set Movie Type - Part 2
05:30
156
Add Active Class to Header List
02:38
157
Refactor Set Move Type Method
08:34
158
Fix Load More Issue
07:59
159
Add Paginate Functionality
08:45
160
API Service Feature Pull Request
04:38
161
Section Introduction
01:17
162
Search Movie Redux Action
10:38
163
Create Search Movies Feature Branch
05:24
164
Create Search Result Component
09:43
165
Add Search Result Component to Main
04:41
166
onSearch Change Method
06:27
167
Fix Empty Search Result Cell
04:50
168
Search Component Pull Request
05:15
169
Section Introduction
00:54
170
Add react-router-dom Module
10:19
171
Details Component HTML
09:38
172
Details Component Styles
07:14
173
Create Tabs- Part 1
09:40
174
Create Tabs- Part 2
11:11
175
Overview Component
09:45
176
Crew Component
02:00
177
Media Component
03:58
178
Reviews Component
02:38
179
Details Page Link
08:22
180
Merge Details Component Pull Request
05:47
181
Section Introduction
01:23
182
Details API Service Methods
08:46
183
Details Redux Action Method
12:24
184
Use Movie Details Redux Action Method
09:08
185
Display Details Info - Part 1
10:22
186
Display Details Info - Part 2
04:17
187
Display Overview Data
14:38
188
Display Crew Data
03:32
189
Display Media Data
07:20
190
Dsiplay Reviews Data
06:45
191
Hide Search Input
09:40
192
Create Details API Service Pull Request
03:21
193
Section Introduction - Part 1
00:57
194
Section Introduction - Part 2
00:40
195
Create Error Page
09:15
196
Error Page HTML
02:49
197
Style Error Page
04:49
198
Fix 404 Error in AWS S3 Bucket
04:38
199
Fix AWS Cloudfront Access Denied Error
05:21
200
Add Spinner to Details Page
01:54
201
Merge Error Component Pull Request
02:54
202
Deploy to Staging and Production
11:31
203
Section Introduction
00:59
204
Add Spinner Test - Part 1
11:39
205
Add Spinner Test - Part 2
04:34
206
Add CircleCI Test Job
05:03
207
Run Test Job
04:28
208
Section Introduction
01:39
209
Create Sentry Feature Branch
10:54
210
Create Error Boundary Component
08:10
211
Use ClearState Redux Action
04:26
212
Move Provider to Index
05:19
213
Use Error Boundary Component
05:19
214
Add Routes to Redux Store
09:23
215
Add Path and Url to Redux Store
08:36
216
Add Details Path to Store
03:38
217
Use Path and Url in Header Component
11:40
218
Create Error Action Method
09:45
219
Reset Errors From Error Page
02:37
220
Display Error Page for API Errors
10:30
221
Clarify Issue
00:36
222
Sentry Setup - Part 1
10:57
223
Sentry Setup - Part 2
07:37
224
Add Sentry to Error Boundary
09:08
225
Add Sentry Breadcrumbs
06:42
226
Add Slack to Sentry
09:24
227
Test Slack with Sentry
03:37
228
Set Sentry for Production
03:32
229
Merge Sentry Pull Request
04:25
230
Section Introduction
00:49
231
Docker
05:16
232
Dockerfile
05:56
233
Create Dockerfile
11:58
234
Add CircleCI Docker Job - Part 1
08:59
235
Add CircleCI Docker Job - Part 2
09:05
236
Add Docker Job to Workflow
03:01
237
Merge Docker Pull Request
07:32
238
Run Docker Image with no Env. Variables
07:19
239
Set Env. Variables in Dockerfile
08:49
240
Run Docker Image with Env. Variables
03:38
Unlock unlimited learning

Get instant access to all 239 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription