AWS Amplify Studio Masterclass – Visually Build UI & Backend

Course Curriculum

Chapter 1: Introduction

Lecture 1: Course Introduction

Lecture 2: About Instructor

Lecture 3: Course Prerequisites

Chapter 2: Download Source code and Resources

Lecture 1: Download source code

Lecture 2: Image Links

Chapter 3: Amplify Studio and Amplify CLI – Introduction

Lecture 1: What's Amplify and Amplify Studio and And Amplify CLI

Lecture 2: Amplify Studio Advantages and Capabilities

Lecture 3: Amplify Studio Pricing

Chapter 4: Development Environment Setup

Lecture 1: IMPORTANT – Read This!

Lecture 2: Setup Development Environment – Overview

Lecture 3: Development Tools Setup

Lecture 4: Setting up Amplify CLI

Chapter 5: The Launch Sandbox for Amplify Studio

Lecture 1: Launch Sandbox – Setting up a Sandbox Data model and React App

Lecture 2: Setup React – Create Todo

Lecture 3: Querying and Showing Todos

Lecture 4: Update a Todo

Lecture 5: Delete a Todo

Chapter 6: AWS Amplify Studio – Build a Fullstack React App

Lecture 1: Getting Started with the Fullstack App – Petstore

Lecture 2: Setup Git Repo

Lecture 3: [Optional] Git Basics

Lecture 4: Creating our Fullstack app with Amplify Studio – Creating and Seeding Data Model

Lecture 5: Figma and React Components

Lecture 6: Setting up Figma and Editing a Component and Syncing

Lecture 7: Binding UI to Data Model

Lecture 8: Setup React App and Pull Components

Lecture 9: Showing our Pet Collection and Updating the Component

Chapter 7: UI Component Properties & Event Handlers

Lecture 1: Component Properties – Overview

Lecture 2: Editing and Adding Properties to the Components

Lecture 3: Customize PetProfile Component

Lecture 4: Adding onClick Delete Event via Studio – Delete Item

Chapter 8: The Navbar and Footer – Hands-On

Lecture 1: Adding a Navbar and Footer

Lecture 2: Adding Props – Width – to Navbar and Footer Components

Lecture 3: Extending Generated Component Code

Lecture 4: Passing React Props to Components

Lecture 5: Override Props

Lecture 6: Extending Generated Components via Overrides Prop – Adding onClick Event In Code

Lecture 7: Adding Logo Image in Amplify Studio

Lecture 8: Adding Logo Image in Code

Lecture 9: Add Style and Onclick Action to AddPet

Chapter 9: Add Pet Form

Lecture 1: Add Pet Form – Overview

Lecture 2: Creating the Add Pet Form in Figma

Lecture 3: Styling the Form

Lecture 4: Hiding and Showing Form

Lecture 5: Setup Fields with Data and Save a Pet

Lecture 6: Closing the AddPet Form

Chapter 10: Pet Details

Lecture 1: Pet Details – Overview

Lecture 2: Setup Pet Details Rendering it in the App

Lecture 3: Show Pet Data on the Details Card

Lecture 4: Setting up the Details Close Button

Chapter 11: Update Pet

Lecture 1: Update Pet – Overview

Lecture 2: Setting up Update UI

Lecture 3: Updating the Pet

Chapter 12: Authentication with AWS Amplify Studio

Lecture 1: Authentication – Overview

Lecture 2: Setup the Signout Button in the Navbar

Lecture 3: Adding Authentication to our App

Lecture 4: Adding Signout and Showing User Profile Image

Lecture 5: Add Username to Navbar – Exercise

Lecture 6: Solution: Adding Username to Navbar

Chapter 13: Authorization in AWS Amplify Studio

Lecture 1: Authorization Overview

Lecture 2: Set Owner Authorization Rules

Lecture 3: Set Authorization Mode to Cognito User Pool and Check DynamoDB for Owner Field

Lecture 4: Set a Private Authorization Rule

Lecture 5: Create Group and set a Group Authorization Rule

Lecture 6: Set Public Authorization Rule

Chapter 14: Storage with AWS Amplify Studio

Lecture 1: File Storage with AWS Amplify Studio

Chapter 15: AWS Amplify Studio Content Management

Lecture 1: Content Management – Overview

Lecture 2: Content Management

Chapter 16: Amplify Hosting – Hosting our App

Lecture 1: Hosting our App with Amplify Hosting

Chapter 17: Clean up

Lecture 1: Clean up

Chapter 18: Next Steps

Lecture 1: Next Steps

Chapter 19: Bonus

Lecture 1: More Courses From Me