Build a Modern React and Redux App with CircleCI CI/CD & AWS

Build a Modern React and Redux App with CircleCI CI/CD & AWS

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 22 Hours | 9.98 GB

Build and deploy a real world app using React, Redux, Github, CircleCI, AWS S3, Cloudfront, Slack, Docker and Sentry.

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.

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…

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
Table of Contents

Introduction with Demo
1 Course Introduction
2 Course App Demo
3 Project Structure Demo
4 Project Github Repo Description
5 CircleCI Project Pipelines
6 AWS Services
7 About CICD

Project Setup
8 Github Project Repo
9 Install Tools
10 Create React App
11 Gihub Branching
12 Create Github Project
13 Create Github Project Branches

Setup CircleCI
14 Add Github Project to CircleCI
15 Fetch Develop Branch Locally

Amazon Web Services
16 AWS Intro
17 AWS IAM User
18 Add AWS Region to CircleCI Environment Variables
19 Create AWS S3 Dev Bucket
20 Add Bucket Policy
21 Create AWS S3 Staging and Production Buckets
22 Add AWS Cloudfront Distribution
23 Show Staging and Production S3 Buckets

Setup CircleCI Jobs
24 Section Introduction
25 Deploy to Staging
26 Format Config FIle
27 Description of Important CircleCI Concepts
28 Add Build Job to CircleCI Config
29 Add Install Command to Build Job
30 AWS S3 CircleCI Job – Part 1
31 AWS S3 CircleCI Job – Part 2
32 AWS Cloudfront CircleCI Job
33 Create CircleCI Jobs Workflow
34 Deploy First App Changes

Setup Deployment to Heroku (Optional)
35 Section Introduction
36 Deploy App to Staging and Production on Heroku
37 Section Conclusion
38 CircleCI Heroku Configuration Code
39 Section Information
40 Create Heroku Apps
41 Deploy to Heroku Job – Part 1
42 Deploy to Heroku Job – Part 2
43 Deploy App Dev App to Heroku
44 Add Express Server Configuration
45 Deploy Express Server Changes

Setup Linting and Prettier CircleCI Jobs
46 Section Introduction
47 Install Eslint
48 Run Linting Command
49 Add Linting CircleCI Job (Optional)
50 Deploy Linting Job
51 Add Prettier and EditorConfig
52 Deploy Prettier Job
53 Show Prettier Job

Slack Integration with CircleCI
54 Section Integration
55 Slack Github Feature Branch
56 Setup Slack Workspace
57 Add Slack to CircleCI Environment Variables
58 CircleCI Orbs
59 Add Slack Orbs
60 Add Slack to CircleCI Workflow
61 Upgrade Slack Sentry Integration

Redux Setup and Integration
62 Section Introduction
63 Redux Setup Github Feature Branch
64 Install Redux
65 Setup Redux Store
66 Add React Redux Provider
67 Add Reducer Files
68 Merge Pull Request

Header Component
69 Header Section Introduction
70 Merge Header Feature to Dev Branch
71 Merge Dev Branch to Staging for Header Feature
72 Header Component Github Feature Branch
73 Install node Sass
74 Create Header Component
75 Header Component Divs
76 Header Component Styles
77 Add Menu Toggle
78 Add List Item
79 Header Logo

Slideshow Corousel Component
80 Section Introduction
81 Slideshow Arrows Functionality – Part 3
82 Auto Move Slideshow
83 Add Slideshow Props
84 Add Slideshow Prop Types
85 Deploy Slideshow Component
86 Slideshow Component Github Feature Branch
87 Add Main Component
88 Main Content Component Styles
89 Create Slideshow Component
90 Add Slideshow Arrows
91 Slideshow Indicators
92 Slideshow Arrows Functionality – Part 1
93 Slideshow Arrows Functionality – Part 2

Paginate Component
94 Section Introduction
95 Paginate Component Github Feature Branch
96 Create Paginate Component
97 Paginate Component Styles
98 Paginate Buttons Function
99 Add Prop Types
100 Merge Paginate Feature

Grid Component
101 Section Introduction
102 Add Rating Prop Types
103 Create Grid Component Pull Request
104 Grid Component Github Feature Branch
105 Create Grid Component
106 Grid Cell Styles
107 Style Grid Button
108 Grid Cell Details
109 Add Styles to Star Rating
110 Display Stars with Props
111 Calculate Star Percentage

API Service and Request
112 Section Introduction
113 Display Slideshow Images from Redux Store
114 Display Images on Grid
115 Load More Movies Redux Action
116 Main Component OnScroll Method
117 Fetch More Data
118 Import Main SCSS File
119 Lazy Load Images – Part 1
120 Lazy Load Images – Part 2
121 Set Movie Type – Part 1
122 Set Movie Type – Part 2
123 API Service Github Feature Branch
124 Add Active Class to Header List
125 Refactor Set Move Type Method
126 Fix Load More Issue
127 Add Paginate Functionality
128 API Service Feature Pull Request
129 Get Movie API
130 Create Movie Service
131 Get Movies Redux Action Method
132 Use Get Movies Redux Action method
133 Add Page and Total Pages Number to Redux Store
134 Get Random Images For Slideshow
135 Loading Spinner

Search Component
136 Section Introduction
137 Search Component Github Feature Branch
138 Search Movie Redux Action
139 Create Search Movies Feature Branch
140 Create Search Result Component
141 Add Search Result Component to Main
142 onSearch Change Method
143 Fix Empty Search Result Cell
144 Search Component Pull Request

Details Component
145 Section Introduction
146 Media Component
147 Reviews Component
148 Details Page Link
149 Merge Details Component Pull Request
150 Details Component Github Feature Branch
151 Add react-router-dom Module
152 Details Component HTML
153 Details Component Styles
154 Create Tabs- Part 1
155 Create Tabs- Part 2
156 Overview Component
157 Crew Component

Details API Service
158 Section Introduction
159 Display Media Data
160 Dsiplay Reviews Data
161 Hide Search Input
162 Create Details API Service Pull Request
163 Details API Service Github Feature Branch
164 Details API Service Methods
165 Details Redux Action Method
166 Use Movie Details Redux Action Method
167 Display Details Info – Part 1
168 Display Details Info – Part 2
169 Display Overview Data
170 Display Crew Data

Error Component
171 Section Introduction – Part 1
172 Merge Error Component Pull Request
173 Deploy to Staging and Production
174 Error Component Github Feature Branch
175 Section Introduction – Part 2
176 Create Error Page
177 Error Page HTML
178 Style Error Page
179 Fix 404 Error in AWS S3 Bucket
180 Fix AWS Cloudfront Access Denied Error
181 Add Spinner to Details Page

CircleCI Test Job
182 Section Introduction
183 CircleCI Test Job Github Feature Branch
184 Add Spinner Test – Part 1
185 Add Spinner Test – Part 2
186 Add CircleCI Test Job
187 Run Test Job

Sentry for App Error Monitoring
188 Section Introduction
189 Sentry Integration Github Feature Branch
190 Create Sentry Feature Branch
191 Create Error Boundary Component
192 Use ClearState Redux Action
193 Move Provider to Index
194 Use Error Boundary Component
195 Add Routes to Redux Store
196 Add Path and Url to Redux Store
197 Add Details Path to Store
198 Use Path and Url in Header Component
199 Create Error Action Method
200 Reset Errors From Error Page
201 Display Error Page for API Errors
202 Clarify Issue
203 Sentry Setup – Part 1
204 Sentry Setup – Part 2
205 Add Sentry to Error Boundary
206 Add Sentry Breadcrumbs
207 Add Slack to Sentry
208 Test Slack with Sentry
209 Set Sentry for Production
210 Merge Sentry Pull Request

Dockerize APP (Optional)
211 Section Introduction
212 Docker Integration Github Feature Branch
213 Docker
214 Dockerfile
215 Create Dockerfile
216 Add CircleCI Docker Job – Part 1
217 Add CircleCI Docker Job – Part 2
218 Add Docker Job to Workflow
219 Merge Docker Pull Request
220 Run Docker Image with no Env. Variables
221 Set Env. Variables in Dockerfile
222 Run Docker Image with Env. Variables