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

25h 45m 21s
English
Paid

Course description

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, which means the whole course is structured around building a web application and the different concepts will be explained detailedly as they are introduced.

Read more about the course

What's this course about?

This course is about React, Redux, Hooks, Continous Intergration/Delivery, AWS S3, CloudFront, Slack, GitHub, Docker. Dive deep into these topics by building a real application and have your React app live on the web.

What Technology You'll Use

Because we are building a React app with Continuous integration/delivery and automatic deployment, we'll use a variety of technologies.

  • React

  • Redux

  • AWS S3 and CloudFront

  • Slack

  • Docker

  • Github

  • Sentry for Monitoring

  • CircleCI for CI/CD

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, you'll be able

  • Build a complete React App

  • Setup CI/CD Pipeline

  • Setup Automatic Deployment

  • Integrate Technologies like Slack, Sentry and Docker

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

  • Use GitHub w/ CircleCI

  • Use Feature Branches on GitHub

  • Use CSS Grid

  • Create Custom React Components

  • Setup Redux

  • Write CI/CD Configurations

  • And More...

Requirements:
  • HTML + CSS + Javascript is required (at least the fundamentals)
  • No prior React knowledge is required
Who this course is for:
  • Suitable for both beginners and intermediate React developers
  • Anyone who wants to learn React by building a real world application
  • Anyone who wants to learn how to setup a continuous integration/delivery pipeline
  • Developers that wants to learn how to use AWS S3 and CloudFront services

What you'll learn:

  • Build an amazing React app
  • Setup Continuous Integration/Delivery Pipeline
  • Use AWS S3 and CloudFront for Storing and Distributing React Apps
  • Create Docker Images for Your React app
  • Integrate Slack in the CI/CD Pipeline
  • Setup Online Dev, Staging and Production Environments
  • Setup Sentry for Monitoring
  • Create Custom React Components
  • Use CSS Grid
  • Setup Automatic Deployment
  • Integrate GitHub with CircleCI
  • Create, Use and Merge Feature Branches

Watch Online

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

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Django with React | An Ecommerce Website

Django with React | An Ecommerce Website

Sources: Brad Traversy
Build an eCommerce platform from the ground up with React, Redux, Django & Postgres. In this course, we will build a completely customized eCommerce / shopping cart application ...
18 hours 6 minutes 7 seconds
Master Full-Stack Web Development | Node, SQL, React, & More

Master Full-Stack Web Development | Node, SQL, React, & More

Sources: udemy
Build a fullstack project with Node.js, PostgreSQL, SQL, React, Redux and more! Covers APIs, authentication, and beyond!
18 hours 36 minutes 51 seconds
React Js A-Z With Laravel - For Beginner to Advanced Level

React Js A-Z With Laravel - For Beginner to Advanced Level

Sources: udemy
This React Js A-Z With Laravel Course will help you to become a Full Stack Web Developer. React has rapidly become one of the most powerful tools for building W
68 hours 1 minute 33 seconds
React Query

React Query

Sources: ui.dev (ex. Tyler McGinnis)
Learn React Query with the official React Query course. WANT TO SKIP THE DOCS? There’s an easier way to master React Query. Our linear course is like having a smart, experienced...
7 hours 1 minute 30 seconds