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

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

Created by Uzochukwu Eddie Odozi
Language English

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

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

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

Created by Uzochukwu Eddie Odozi
Language English
01. Introduction with Demo
  • 1. Course Introduction 00:03:28
  • 2. Course App Demo 00:05:26
  • 3. Project Structure Demo 00:07:12
  • 4. Project Github Repo Description 00:03:12
  • 5. CircleCI Project Pipelines 00:07:03
  • 6. AWS Services 00:04:53
  • 7. About CICD 00:05:17
02. Project Setup
  • 1. Github Project Repo .html
  • 2. Install Tools 00:05:53
  • 3. Create React App 00:05:59
  • 4. Gihub Branching 00:06:43
  • 5. Create Github Project 00:04:41
  • 6. Create Github Project Branches 00:05:42
  • 7. Quiz .html
03. Setup CircleCI
  • 1. Add Github Project to CircleCI 00:08:25
  • 2. Fetch Develop Branch Locally 00:03:48
  • 3. Quiz .html
04. Amazon Web Services
  • 1. AWS Intro 00:06:05
  • 2. AWS IAM User 00:07:53
  • 3. Add AWS Region to CircleCI Environment Variables 00:01:38
  • 4. Create AWS S3 Dev Bucket 00:08:17
  • 5. Add Bucket Policy 00:04:24
  • 5.1 policy .json
  • 6. Create AWS S3 Staging and Production Buckets 00:04:03
  • 7. Add AWS Cloudfront Distribution 00:13:28
  • 8. Show Staging and Production S3 Buckets 00:02:01
  • 9. Quiz .html
05. Setup CircleCI Jobs
  • 1. Section Introduction 00:01:02
  • 2. Description of Important CircleCI Concepts 00:10:49
  • 2.1 CircleCI Getting Started Docs .html
  • 3. Add Build Job to CircleCI Config 00:12:29
  • 4. Add Install Command to Build Job 00:02:58
  • 5. AWS S3 CircleCI Job - Part 1 00:09:13
  • 6. AWS S3 CircleCI Job - Part 2 00:08:18
  • 7. AWS Cloudfront CircleCI Job 00:06:02
  • 8. Create CircleCI Jobs Workflow 00:05:36
  • 9. Deploy First App Changes 00:10:04
  • 10. Deploy to Staging 00:03:55
  • 11. Format Config FIle 00:08:54
  • 12. Quiz .html
06. Setup Linting and Prettier CircleCI Jobs
  • 1. Section Introduction 00:01:09
  • 2. Install Eslint 00:05:48
  • 2.1 eslintrc .json
  • 3. Run Linting Command 00:05:26
  • 4. Add Linting CircleCI Job (Optional) 00:05:36
  • 5. Deploy Linting Job 00:02:32
  • 6. Add Prettier and EditorConfig 00:07:37
  • 6.1 editorconfig .json
  • 7. Deploy Prettier Job 00:06:08
  • 8. Show Prettier Job 00:00:37
07. Slack Integration with CircleCI
  • 1. Section Integration 00:00:55
  • 2. Slack Github Feature Branch .html
  • 3. Setup Slack Workspace 00:07:04
  • 4. Add Slack to CircleCI Environment Variables 00:02:48
  • 5. CircleCI Orbs 00:03:24
  • 5.1 CircleCI Orbs .html
  • 6. Add Slack Orbs 00:11:24
  • 7. Add Slack to CircleCI Workflow 00:09:16
08. Redux Setup and Integration
  • 1. Section Introduction 00:00:56
  • 2. Redux Setup Github Feature Branch .html
  • 3. Install Redux 00:04:48
  • 4. Setup Redux Store 00:09:01
  • 5. Add React Redux Provider 00:04:58
  • 6. Add Reducer Files 00:07:40
  • 7. Merge Pull Request 00:04:55
  • 8. Quiz .html
09. Header Component
  • 1. Header Section Introduction 00:00:52
  • 2. Header Component Github Feature Branch .html
  • 3. Install node Sass 00:03:19
  • 4. Create Header Component 00:07:52
  • 5. Header Component Divs 00:08:26
  • 6. Header Component Styles 00:12:48
  • 6.1 links .html
  • 6.2 Header .css
  • 7. Add Menu Toggle 00:10:33
  • 8. Add List Item 00:07:24
  • 9. Header Logo 00:02:32
  • 9.1 cinema-logo .svg
  • 10. Merge Header Feature to Dev Branch 00:02:27
  • 11. Merge Dev Branch to Staging for Header Feature 00:03:16
10. Slideshow Corousel Component
  • 1. Section Introduction 00:01:08
  • 2. Slideshow Component Github Feature Branch .html
  • 3. Add Main Component 00:05:57
  • 4. Main Content Component Styles 00:09:28
  • 5. Create Slideshow Component 00:06:52
  • 5.1 Slideshow .css
  • 6. Add Slideshow Arrows 00:04:23
  • 7. Slideshow Indicators 00:08:57
  • 8. Slideshow Arrows Functionality - Part 1 00:10:20
  • 9. Slideshow Arrows Functionality - Part 2 00:07:08
  • 10. Slideshow Arrows Functionality - Part 3 00:02:57
  • 11. Auto Move Slideshow 00:08:46
  • 12. Add Slideshow Props 00:06:02
  • 13. Add Slideshow Prop Types 00:07:24
  • 14. Deploy Slideshow Component 00:04:30
11. Paginate Component
  • 1. Section Introduction 00:01:25
  • 2. Paginate Component Github Feature Branch .html
  • 3. Create Paginate Component 00:05:32
  • 4. Paginate Component Styles 00:04:58
  • 5. Paginate Buttons Function 00:10:45
  • 6. Add Prop Types 00:05:56
  • 7. Merge Paginate Feature 00:04:26
12. Grid Component
  • 1. Section Introduction 00:00:56
  • 2. Grid Component Github Feature Branch .html
  • 3. Create Grid Component 00:09:46
  • 4. Grid Cell Styles 00:09:34
  • 5. Style Grid Button 00:08:29
  • 6. Grid Cell Details 00:09:00
  • 7. Add Styles to Star Rating 00:07:34
  • 8. Display Stars with Props 00:10:23
  • 9. Calculate Star Percentage 00:06:47
  • 10. Add Rating Prop Types 00:03:48
  • 11. Create Grid Component Pull Request 00:02:05
13. API Service and Request
  • 1. Section Introduction 00:01:26
  • 2. API Service Github Feature Branch .html
  • 3. Get Movie API 00:10:17
  • 4. Create Movie Service 00:14:08
  • 5. Get Movies Redux Action Method 00:11:17
  • 6. Use Get Movies Redux Action method 00:11:05
  • 7. Add Page and Total Pages Number to Redux Store 00:05:03
  • 8. Get Random Images For Slideshow 00:12:04
  • 9. Loading Spinner 00:11:43
  • 10. Display Slideshow Images from Redux Store 00:03:24
  • 11. Display Images on Grid 00:09:17
  • 12. Load More Movies Redux Action 00:06:55
  • 13. Main Component OnScroll Method 00:10:20
  • 14. Fetch More Data 00:07:40
  • 15. Import Main SCSS File 00:03:03
  • 16. Lazy Load Images - Part 1 00:11:20
  • 17. Lazy Load Images - Part 2 00:10:36
  • 18. Set Movie Type - Part 1 00:08:54
  • 19. Set Movie Type - Part 2 00:05:29
  • 20. Add Active Class to Header List 00:02:37
  • 21. Refactor Set Move Type Method 00:08:33
  • 22. Fix Load More Issue 00:07:58
  • 23. Add Paginate Functionality 00:08:44
  • 24. API Service Feature Pull Request 00:04:37
14. Search Component
  • 1. Section Introduction 00:01:16
  • 2. Search Component Github Feature Branch .html
  • 3. Search Movie Redux Action 00:10:37
  • 4. Create Search Movies Feature Branch 00:05:23
  • 5. Create Search Result Component 00:09:42
  • 6. Add Search Result Component to Main 00:04:40
  • 7. onSearch Change Method 00:06:26
  • 8. Fix Empty Search Result Cell 00:04:49
  • 9. Search Component Pull Request 00:05:14
15. Details Component
  • 1. Section Introduction 00:00:53
  • 2. Details Component Github Feature Branch .html
  • 3. Add react-router-dom Module 00:10:18
  • 4. Details Component HTML 00:09:37
  • 5. Details Component Styles 00:07:13
  • 5.1 Details .css
  • 6. Create Tabs- Part 1 00:09:39
  • 7. Create Tabs- Part 2 00:11:10
  • 7.1 Tabs .css
  • 8. Overview Component 00:09:44
  • 8.1 overview-file .js
  • 9. Crew Component 00:01:59
  • 9.1 crew-file .js
  • 10. Media Component 00:03:57
  • 10.1 media-file .js
  • 11. Reviews Component 00:02:37
  • 11.1 reviews-file .js
  • 12. Details Page Link 00:08:21
  • 13. Merge Details Component Pull Request 00:05:46
16. Details API Service
  • 1. Section Introduction 00:01:22
  • 2. Details API Service Github Feature Branch .html
  • 3. Details API Service Methods 00:08:45
  • 4. Details Redux Action Method 00:12:23
  • 5. Use Movie Details Redux Action Method 00:09:07
  • 6. Display Details Info - Part 1 00:10:21
  • 7. Display Details Info - Part 2 00:04:16
  • 8. Display Overview Data 00:14:37
  • 9. Display Crew Data 00:03:31
  • 10. Display Media Data 00:07:19
  • 11. Dsiplay Reviews Data 00:06:44
  • 12. Hide Search Input 00:09:39
  • 13. Create Details API Service Pull Request 00:03:20
17. Error Component
  • 1. Section Introduction - Part 1 00:00:56
  • 2. Error Component Github Feature Branch .html
  • 3. Section Introduction - Part 2 00:00:39
  • 4. Create Error Page 00:09:14
  • 5. Error Page HTML 00:02:48
  • 6. Style Error Page 00:04:48
  • 7. Fix 404 Error in AWS S3 Bucket 00:04:37
  • 8. Fix AWS Cloudfront Access Denied Error 00:05:20
  • 9. Add Spinner to Details Page 00:01:53
  • 10. Merge Error Component Pull Request 00:02:53
  • 11. Deploy to Staging and Production 00:11:30
18. CircleCI Test Job
  • 1. Section Introduction 00:00:58
  • 2. CircleCI Test Job Github Feature Branch .html
  • 3. Add Spinner Test - Part 1 00:11:38
  • 4. Add Spinner Test - Part 2 00:04:33
  • 5. Add CircleCI Test Job 00:05:02
  • 6. Run Test Job 00:04:27
19. Sentry for App Error Monitoring
  • 1. Section Introduction 00:01:38
  • 2. Sentry Integration Github Feature Branch .html
  • 3. Create Sentry Feature Branch 00:10:53
  • 4. Create Error Boundary Component 00:08:09
  • 5. Use ClearState Redux Action 00:04:25
  • 6. Move Provider to Index 00:05:18
  • 7. Use Error Boundary Component 00:05:18
  • 8. Add Routes to Redux Store 00:09:22
  • 9. Add Path and Url to Redux Store 00:08:35
  • 10. Add Details Path to Store 00:03:37
  • 11. Use Path and Url in Header Component 00:11:39
  • 12. Create Error Action Method 00:09:44
  • 13. Reset Errors From Error Page 00:02:36
  • 14. Display Error Page for API Errors 00:10:29
  • 15. Clarify Issue 00:00:35
  • 16. Sentry Setup - Part 1 00:10:56
  • 17. Sentry Setup - Part 2 00:07:36
  • 18. Add Sentry to Error Boundary 00:09:07
  • 19. Add Sentry Breadcrumbs 00:06:41
  • 20. Add Slack to Sentry 00:09:23
  • 21. Test Slack with Sentry 00:03:36
  • 22. Set Sentry for Production 00:03:31
  • 23. Merge Sentry Pull Request 00:04:24
20. Dockerize APP (Optional)
  • 1. Section Introduction 00:00:48
  • 2. Docker Integration Github Feature Branch .html
  • 3. Docker 00:05:15
  • 4. Dockerfile 00:05:55
  • 5. Create Dockerfile 00:11:57
  • 6. Add CircleCI Docker Job - Part 1 00:08:58
  • 7. Add CircleCI Docker Job - Part 2 00:09:04
  • 8. Add Docker Job to Workflow 00:03:00
  • 9. Merge Docker Pull Request 00:07:31
  • 10. Run Docker Image with no Env. Variables 00:07:18
  • 11. Set Env. Variables in Dockerfile 00:08:48
  • 12. Run Docker Image with Env. Variables 00:03:37