Build a React & Redux App w CircleCI CICD, AWS & Terraform
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...
- HTML + CSS + Javascript is required (at least the fundamentals)
- No prior React knowledge is required
- 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
# | 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 |