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

25h 45m 21s
English
Paid
November 21, 2023

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.

More

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 Build a React & Redux App w CircleCI CICD, AWS & Terraform

Join premium to watch
Go to premium
# Title Duration
1 Course Introduction 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

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

AWS Certified Developer - Associate

AWS Certified Developer - AssociateAdrian Cantrill

Duration 68 hours 8 minutes 48 seconds
AWS Certified DevOps Engineer - Professional
Discord Clone - Learn MERN Stack with WebRTC and SocketIO
Scale React Development with Nx

Scale React Development with Nxegghead

Duration 1 hour 34 minutes 10 seconds
React Query: Server State Management in React

React Query: Server State Management in Reactudemy

Duration 7 hours 39 minutes 49 seconds
Stripe Payments JavaScript Course

Stripe Payments JavaScript Coursefireship.io

Duration 1 hour 29 minutes 26 seconds
MERN Invoice Web App with Docker,NGINX and ReduxToolkit
Microservices with NodeJS, React, Typescript and Kubernetes
Master Full-Stack Web Development | Node, SQL, React, & More
Learn React 19 with Epic React v2

Learn React 19 with Epic React v2Kent C. Dodds

Duration 26 hours 51 minutes 3 seconds