React & AWS Amplify build a complete serverless app w/ CI/CD

Course Curriculum

Chapter 1: Installing and Configuring Amplify

Lecture 1: Installing the Amplify CLI

Lecture 2: Configuring the Amplify CLI

Chapter 2: Creating our React app

Lecture 1: Creating our React app

Lecture 2: Initialising AWS Amplify

Lecture 3: Deploying our React website using AWS Amplify Console

Lecture 4: Creating a CI/CD to our React App using Amplify

Lecture 5: Testing our CI/CD pipeline for React

Chapter 3: Creating Authentication on AWS and enforcing it on our React app

Lecture 1: Creating a deploying a Authentication backend in AWS using Coginito

Lecture 2: Installing React modules and configuring AWS Amplify in React

Lecture 3: Creating the SignUp, SignIn, SignOut and Reset Password pages

Chapter 4: Creating a Graphql API using Amplify

Lecture 1: Creating the Graphql API in the backend using Amplify

Lecture 2: Creating our Graphql Model

Lecture 3: Creating our first Query and First Mutation

Lecture 4: Querying our Graphql in AppSync from our React app

Chapter 5: Making our Amplify App look amazing with Semantic-UI

Lecture 1: Adding Semantic UI React to our project and creating a new Main Header

Lecture 2: Create a Lists component to group our lists

Lecture 3: Creating Items and Items groups with Semantic-UI React

Lecture 4: Adding out page into a Container and adding Image and date to our list

Chapter 6: Creating a floating button like on Material UI

Lecture 1: Creating a floating action button in React

Chapter 7: Creating a Modal using Semantic-UI

Lecture 1: Creating a new modal using Semantic-UI

Lecture 2: Adding all the fields on our modal

Chapter 8: Managing the Modal State using React Hooks

Lecture 1: Manage the state using useReducer

Chapter 9: Creating a Graphql Mutations

Lecture 1: Graphql mutation, add a new item to AppSync

Chapter 10: Creating a Grahql Subscription

Lecture 1: Graphql subscription, subscribing to real time updates in graphql

Chapter 11: Some code Refactoring before continue

Lecture 1: Refactoring the code, moving the modal status to the reducer

Lecture 2: Cleaning up the subscription in useEffect

Chapter 12: Creating a Graphql deletion and subscription

Lecture 1: Deleting an item while calling dispatch from another component

Lecture 2: Deleting a list from Graphql

Lecture 3: Subscribing to onDelete mutation in AppSync

Chapter 13: Creating the reusable editing modal

Lecture 1: Create the Edit button, dispatch and reducer

Lecture 2: Opening the edit modal

Lecture 3: Creating a reusable modal

Chapter 14: Updating the lists and creating a Subscription to update it

Lecture 1: Updating the list

Lecture 2: Subscribing to onUpdate subscription

Lecture 3: Updating the values received on the subscription

Chapter 15: Real Time Update is already here

Lecture 1: Surprise, this app is already updating in real time

Chapter 16: Creating our S3 bucket to store our images

Lecture 1: Creating a S3 Bucket to keep our files

Lecture 2: Creating an Upload Image Component to upload images to S3 Bucket

Chapter 17: Retouching the UI and Refactoring the code

Lecture 1: Making our new component look good using useRef to hide the input

Chapter 18: Creating a Image Preview and uploading it to S3

Lecture 1: Showing an image preview before update the image

Lecture 2: Uploadind a Image to the S3 Bucket

Chapter 19: Updating our Graphql model

Lecture 1: Updating our Graphql database to have the imagekey

Chapter 20: Creating a React Custom Hook to help with S3

Lecture 1: Creating a custom Hook to upload to S3 Bucket

Lecture 2: Using our React Custom Hook in our Modal

Lecture 3: Checking the values in our DynamoDB and S3 Bucket

Chapter 21: Loading our images from S3 on AWS

Lecture 1: Loading our Image from S3

Chapter 22: Enhancing our App with a Spinning loader

Lecture 1: Adding a Spinning Loader while we load our Images

Lecture 2: Stopping the spinner loaders once the image has loaded

Chapter 23: Searchable models with Elastic Search

Lecture 1: Understand why do we need to make our model searchable

Lecture 2: Making the model searchable

Chapter 24: Updating Amplify (if you need it)

Lecture 1: Updating Amplify to the latest version

Chapter 25: More about searchable queries and elastic search

Lecture 1: Understand the searchable query and updating our lists

Chapter 26: Creating new routes for our app using react-router and react-router-dom

Lecture 1: Installing React Router Dom and creating a new Root Route

Lecture 2: Adding a new Route on the React Router Dom

Lecture 3: Creating Dynamic Routers and passing values to the new components

Lecture 4: Adding Link from React Router Dom on your lists

Chapter 27: New Header for the new route

Lecture 1: Creating a Header for the List Page

Chapter 28: Creating new list items using the GraphQl interface in AWS Amplify console

Lecture 1: Crating some list items and our search query

Chapter 29: Small Refectory

Lecture 1: Refactoring the code to include all the routers inside main

Chapter 30: Integrating our List and out List Component

Lecture 1: Passing our list details to the list item component

Lecture 2: Querying the app-sync for the list items using searchable

Chapter 31: Searchable vs No Searchable

Lecture 1: Understanding the difference between a searchable and a not searchable models

Lecture 2: Creating our searchable query

Chapter 32: Creating a custom query using GraphQl in App-Sync

Lecture 1: Creating a app-sync custom query

Lecture 2: Displaying our list items

Chapter 33: Adding authentication and authorisation the the different end point

Lecture 1: Adding auth to our GraphQl endpoints