Visual Design of UI & Backends with AWS Amplify Studio

Visual Design of UI & Backends with AWS Amplify Studio

by Paulo Dichone
Released September 2024
Publisher(s): Packt Publishing
ISBN: 9781836647799

Watch it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

Dive into the world of full-stack development with AWS Amplify Studio, a powerful toolset that simplifies the process of building robust applications. This course starts by introducing you to the fundamentals of Amplify, covering its advantages and how it fits into the modern development workflow. You will set up your development environment and learn how to use the Amplify CLI to manage backend services.

As you progress, the course will guide you through hands-on projects, such as building a React-based Petstore app. You will explore how to create data models, connect them to UI components, and utilize Figma for designing stunning interfaces. You will also implement complex features like CRUD operations, user authentication, and authorization rules, making your applications both functional and secure. By integrating AWS services for storage and content management, you will learn to handle files and media effectively.

Towards the end, you will deploy and host your application using AWS Amplify Hosting. The course concludes with a cleanup and final review, ensuring you have a clear understanding of the next steps to continue your learning journey. By completing this course, you will have the skills to design and develop full-stack applications with AWS Amplify Studio, ready to tackle real-world projects with confidence.

What you will learn

  • Build full-stack apps with AWS Amplify Studio and React.
  • Design interactive UIs with Figma and bind them to data models.
  • Implement secure authentication and authorization in apps.
  • Use Amplify CLI for backend services and API management.
  • Deploy apps with AWS Amplify Hosting and continuous deployment.
  • Integrate AWS storage solutions for secure file management.

Audience

This course is designed for web developers and designers looking to enhance their skills in creating full-stack applications using AWS Amplify Studio. A basic understanding of JavaScript and React is recommended.

About the Author

Paulo Dichone: Paulo Dichone, a dedicated developer and educator in Android, Java, and Flutter, has empowered over 80,000 students globally with both soft and technical skills through his platform, Build Apps with Paulo. Holding a Computer Science degree and with extensive experience in mobile and web development, Paulo's passion lies in guiding learners to become proficient developers. Beyond his 5 years of online teaching, he cherishes family time, music, and travel, aiming to make impactful developers irrespective of their background.

Table of contents

  1. Chapter 1 : Introduction
    1. Course Introduction
    2. About Instructor
    3. Course Prerequisites
  2. Chapter 2 : Amplify Studio and Amplify CLI - Introduction
    1. What's Amplify and Amplify Studio and And Amplify CLI
    2. Amplify Studio Advantages and Capabilities
    3. Amplify Studio Pricing
  3. Chapter 3 : Development Environment Setup
    1. Setup Development Environment - Overview
    2. Development Tools Setup
    3. Setting up Amplify CLI
  4. Chapter 4 : The Launch Sandbox for Amplify Studio
    1. Launch Sandbox - Setting up a Sandbox Data model and React App
    2. Setup React - Create Todo
    3. Querying and Showing Todos
    4. Update a Todo
    5. Delete a Todo
  5. Chapter 5 : AWS Amplify Studio - Build a Fullstack React App
    1. Getting Started with the Fullstack App - Petstore
    2. Setup Git Repo
    3. [Optional] Git Basics
    4. Creating our Fullstack app with Amplify Studio - Creating and Seeding Data Model
    5. Figma and React Components
    6. Setting up Figma and Editing a Component and Syncing
    7. Binding UI to Data Model
    8. Setup React App and Pull Components
    9. Showing our Pet Collection and Updating the Component
  6. Chapter 6 : UI Component Properties Event Handlers
    1. Component Properties - Overview
    2. Editing and Adding Properties to the Components
    3. Customize PetProfile Component
    4. Adding Delete Event via Studio - Delete Item
  7. Chapter 7 : The Navbar and Footer - Hands-On
    1. Adding a Navbar and Footer
    2. Adding Props - Width - to Navbar and Footer Components
    3. Extending Generated Component Code
    4. Passing React Props to Components
    5. Override Props
    6. Extending Generated Components via Overrides Prop - Adding Event In Code
    7. Adding Logo Image in Amplify Studio
    8. Adding Logo Image in Code
    9. Add Style and Action to AddPet
  8. Chapter 8 : Add Pet Form
    1. Add Pet Form - Overview
    2. Creating the Add Pet Form
    3. Styling the Form
    4. Hiding and Showing Form
    5. Setup Fields with Data and Save a Pet
    6. Closing the AddPet Form
  9. Chapter 9 : Pet Details
    1. Pet Details - Overview
    2. Setup Pet Details Rendering it in the App
    3. Show Pet Data on the Details Card
    4. Setting up the Details Close Button
  10. Chapter 10 : Update Pet
    1. Update Pet - Overview
    2. Setting up Update UI
    3. Updating the Pet
  11. Chapter 11 : Authentication with AWS Amplify Studio
    1. Authentication - Overview
    2. Setup the Signout Button in the Navbar
    3. Adding Authentication to our App
    4. Adding Signout and Showing User Profile Image
    5. Add Username to Navbar - Exercise
    6. Solution: Adding Username to Navbar
  12. Chapter 12 : Authorization in AWS Amplify Studio
    1. Authorization Overview
    2. Set Owner Authorization Rules
    3. Set Authorization Mode to Cognito User Pool and Check DynamoDB for Owner Field
    4. Set a Private Authorization Rule
    5. Create Group and Set a Group Authorization Rule
    6. Set Public Authorization Rule
  13. Chapter 13 : Storage with AWS Amplify Studio
    1. File Storage with AWS Amplify Studio
  14. Chapter 14 : AWS Amplify Studio Content Management
    1. Content Management - Overview
    2. Content Management
  15. Chapter 15 : Amplify Hosting - Hosting our App
    1. Hosting our App with Amplify Hosting
  16. Chapter 16 : Clean up
    1. Clean up
  17. Chapter 17 : Next Steps
    1. Next Steps

Product information

  • Title: Visual Design of UI & Backends with AWS Amplify Studio
  • Author(s): Paulo Dichone
  • Release date: September 2024
  • Publisher(s): Packt Publishing
  • ISBN: 9781836647799