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

Installing and Configuring Amplify
1 Installing the Amplify CLI
2 Configuring the Amplify CLI

Creating our React app
3 Creating our React app
4 Initialising AWS Amplify
5 Deploying our React website using AWS Amplify Console
6 Creating a CICD to our React App using Amplify
7 Testing our CICD pipeline for React

Creating Authentication on AWS and enforcing it on our React app
8 Creating a deploying a Authentication backend in AWS using Coginito
9 Installing React modules and configuring AWS Amplify in React
10 Creating the SignUp, SignIn, SignOut and Reset Password pages

Creating a Graphql API using Amplify
11 Creating the Graphql API in the backend using Amplify
12 Creating our Graphql Model
13 Creating our first Query and First Mutation
14 Querying our Graphql in AppSync from our React app

Making our Amplify App look amazing with Semantic-UI
15 Adding Semantic UI React to our project and creating a new Main Header
16 Create a Lists component to group our lists
17 Creating Items and Items groups with Semantic-UI React
18 Adding out page into a Container and adding Image and date to our list

Creating a floating button like on Material UI
19 Creating a floating action button in React

Creating a Modal using Semantic-UI
20 Creating a new modal using Semantic-UI
21 Adding all the fields on our modal

Managing the Modal State using React Hooks
22 Manage the state using useReducer

Creating a Graphql Mutations
23 Graphql mutation, add a new item to AppSync

Creating a Grahql Subscription
24 Graphql subscription, subscribing to real time updates in graphql

Some code Refactoring before continue
25 Refactoring the code, moving the modal status to the reducer
26 Cleaning up the subscription in useEffect

Creating a Graphql deletion and subscription
27 Deleting an item while calling dispatch from another component
28 Deleting a list from Graphql
29 Subscribing to onDelete mutation in AppSync

Creating the reusable editing modal
30 Create the Edit button, dispatch and reducer
31 Opening the edit modal
32 Creating a reusable modal

Updating the lists and creating a Subscription to update it
33 Updating the list
34 Subscribing to onUpdate subscription
35 Updating the values received on the subscription

Real Time Update is already here
36 Surprise, this app is already updating in real time

Creating our S3 bucket to store our images
37 Creating a S3 Bucket to keep our files
38 Creating an Upload Image Component to upload images to S3 Bucket

Retouching the UI and Refactoring the code
39 Making our new component look good using useRef to hide the input

Creating a Image Preview and uploading it to S3
40 Showing an image preview before update the image
41 Uploadind a Image to the S3 Bucket

Updating our Graphql model
42 Updating our Graphql database to have the imagekey

Creating a React Custom Hook to help with S3
43 Creating a custom Hook to upload to S3 Bucket
44 Using our React Custom Hook in our Modal
45 Checking the values in our DynamoDB and S3 Bucket

Loading our images from S3 on AWS
46 Loading our Image from S3

Enhancing our App with a Spinning loader
47 Adding a Spinning Loader while we load our Images
48 Stopping the spinner loaders once the image has loaded

Searchable models with Elastic Search
49 Understand why do we need to make our model searchable
50 Making the model searchable

Updating Amplify (if you need it)
51 Updating Amplify to the latest version

More about searchable queries and elastic search
52 Understand the searchable query and updating our lists

Creating new routes for our app using react-router and react-router-dom
53 Installing React Router Dom and creating a new Root Route
54 Adding a new Route on the React Router Dom
55 Creating Dynamic Routers and passing values to the new components
56 Adding Link from React Router Dom on your lists

New Header for the new route
57 Creating a Header for the List Page

Creating new list items using the GraphQl interface in AWS Amplify console
58 Crating some list items and our search query

Small Refectory
59 Refactoring the code to include all the routers inside main

Integrating our List and out List Component
60 Passing our list details to the list item component
61 Querying the app-sync for the list items using searchable

Searchable vs No Searchable
62 Understanding the difference between a searchable and a not searchable models
63 Creating our searchable query

Creating a custom query using GraphQl in App-Sync
64 Creating a app-sync custom query
65 Displaying our list items

Adding authentication and authorisation the the different end point
66 Adding auth to our GraphQl endpoints