AWS Amplify Studio Masterclass - Visually Build UI & Backend

Explore Amplify, a toolset for building web and mobile apps with data storage and authentication, plus Amplify CLI and Amplify Studio for visual full-stack development.

Discover Amplify Studio's visual back end builder that works with Figma to convert UI designs into components. Bind interfaces to data, access app back end, and collaborate with teammates visually.

Understand Amplify Studio pricing: you’re charged for background services your app uses. The studio itself is free, with build time, hosting costs, and you can check the price calculator.

Begin by setting up your development environment, installing development tools and libraries, and configuring Amplify. Create or confirm your ADA account to access Amplify Studio and proceed to hands-on work.

Install Node.js and Visual Studio Code to set up a development environment, verify installations, and prepare your Mac or Windows machine to build scalable server apps and APIs.

Learn to install and configure the Amplify CLI, sign in to your AWS account, set the region, and create an IAM user with access keys for local development.

Explore Amplify Studio basics by launching a sandbox, creating a to-do data model, and testing it locally in a React app using Amplify CLI and GraphQL schema.

Create and manage to-do items using amplify datastore in a React app, including setting up the model, importing datastore, and implementing an add to-do function with async calls.

Query and show todos in a React app with an async function and a show todos button, inspecting models with unique IDs, while Amplify provisions the backend and data models.

Update a todo in the AWS Amplify datastore by copying the immutable model with copyOf, retrieving by id, modifying the title, and saving the updated object.

Practice deleting a todo item in Amplify Studio, including calling delete, refreshing the model, and deploying to sync data with the cloud, while navigating the sandbox login requirement.

Get started with Amplify Studio basics to build a full stack React app backed by a database, using Amplify Console, a data model, Figma UI design, hosting, and GitHub.

Create and clone a git repository for your Amplify Studio project. Set up locally with git, a code editor, and the command line using git clone.

Master essential git basics by practicing status, add, commit, and push to track changes in a project like Amplify Pet Store, then push to the main branch for hosting readiness.

Create a fullstack app with Amplify Studio by designing a pet data model, adding fields (id, name, age, breed, about, image, color), deploying the backend, and seeding sample data.

Explore how to use Figma within Amplify Studio to design a front end and export those designs as React components. Test and configure the UI components in your React app.

Learn to pair Figma with AWS Amplify Studio by duplicating the Amplify Figma file, logging in, and syncing primitives and components into Amplify's React UI, then pull updated components.

Bind the user interface to the data model in Amplify Studio to create a dynamic component that updates when data changes, such as pet name and image, with a preview.

Create a pet collection in AWS Amplify Studio, convert it to React components, enable search, pagination, and sorting; then bootstrap a React app and pull UI components into your project.

Showcase building a pet collection UI with AWS Amplify Studio, importing components, and rendering a searchable React UI. Sync with Figma, pull updates, and auto-generate UI components from data.

Explore component properties in studio by examining the PAT component bound to the PAT data model, practice props, concatenation, and modifiers to test UI and data in the web app.

Explore editing and adding properties to components in Amplify Studio, binding UI elements to a data model, configuring on-click actions, and concatenating properties to drive dynamic, URL-based navigation.

Customize a pet profile card in AWS Amplify Studio using Figma, add labels and actions (delete, preview, update), and bind name, breed, age, and about with live user interface sync.

Configure an on click delete action in studio to remove a Pat item by deleting its ID, then see the UI update in real time.

Add a navbar and footer to the app, customize the bar and footer in Figma, pull Amplify updates, and test the updated UI in the React app.

Learn how to use props to control component width, setting navbar and footer to 100% width for full horizontal space, and customize UI elements through props.

Learn how to extend generated React components in AWS Amplify Studio by using props to customize UI and behavior, while avoiding edits to auto-generated code that gets overwritten.

Learn to pass props to customize components in AWS Amplify Studio, using the style prop with curly braces, and control pagination, items per page, and the current page.

Learn how to override UI elements in AWS Amplify Studio by using the overrides prop and an overrides object to customize components like pet profile, changing breed color to blue.

Override generated components with the overrides prop to customize each item in a list, adding on click handlers that expose item IDs, names, and images.

Bind the nav bar image by setting the image source to a url, paste the logo link, and pull changes to update the ui with the new logo.

Override the nav bar image source in code by using the nav bar overrides object to swap the logo URL, demonstrating changing from a dog to a cat logo.

Implement an on click action for the add pet element in AWS Amplify Studio, update cursor styling to pointer, and show an alert as a prep for a pet-adding form.

Create a pet form using Figma, customize the UI with buttons and images, and bind data to all fields while wiring click listeners to save the pet to the database.

Create an add pet form in Figma by repurposing edit profile components, adding fields for name, age, color, and image URL, and preparing a React component with save and update.

Learn to left-align a centered form in AWS Amplify Studio Masterclass by applying a style block, setting text align to left, and adding margins around the form component.

Learn to hide and show a form with a state toggle using useState, toggling a show form boolean on ad part clicks to render the ad part component.

learn to visually bind form fields to a pet model in AWS Amplify Studio, and configure the save action to create a pet with name, age, breed, about, and image.

Configure the add pet form in Amplify Studio by setting image sources and overrides, then close the form by toggling the show form boolean on click.

Design the pet details UI in Figma, set up the profile button with its on click event, and pull changes to test that everything works.

Reuse a Figma review card to build a pat details pop-up, bind image and pet attributes to the database, and render a dynamic pet profile in React.

Toggle the pet details card by clicking a profile, pulling selected item from pets collection into a pat object, and showing or hiding the details with a boolean state.

Set up a details close button by wiring an on click event to hide the pet details panel, and apply pointer cursor styling with show details set to false.