> Canonical URL: https://codingcat.dev/podcast/cwcc-0-8-amplify-ui

# Live Coding with the Amplify UI team

🎧 Podcast EpisodeAugust 19, 2022[![](/logos/amplify/amplify.svg)![](/logos/amplify/amplify.svg)AWS Amplify](/topic/amplify)

# Live Coding with the Amplify UI team

![](https://cdn.sanity.io/images/hfh83o0w/production/91553c5a23390467ddeff3b49326b8bffee905f1-1920x1080.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Erik Hanchett](https://cdn.sanity.io/images/hfh83o0w/production/a0343d7b1b3a9df7807a0affe5302caab16f0a28-352x352.jpg?w=96&h=96&q=82&fit=max&auto=format)Erik Hanchett](/guest/erik-hanchett)[![Scott Rees](https://cdn.sanity.io/images/hfh83o0w/production/7d0c8440a9c84d142b4014620a30824de6466cbf-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Scott Rees](/guest/scott-rees)[![Heather Buchel](https://cdn.sanity.io/images/hfh83o0w/production/024716658cd5ebec11629edc7b2c84e7a918a4da-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Heather Buchel](/guest/heather-buchel)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/7GHcA9NywWSuVcJsViAuux)[Apple](https://podcasts.apple.com/us/podcast/code-with-codingcat-dev-live-coding-with-the-amplify-ui-team/id1491655542?i=1000660668914)[YouTube](https://youtu.be/weT3YwBZt-k)[Pocket Casts](https://pca.st/episode/0d249f4f-e44c-43b1-9ed9-3b142e9ec105)[Castbox](https://castbox.fm/episode/id2508485-id715152591)[Castro](https://castro.fm/episode/9gtFav)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)✏️ Visual Architecture Diagram

## how this episode connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Live Coding with the Amplify UI team✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Live Coding with the Amplify UI team: start with Erik Hanchett, implement Scott Rees, and ship to production.AAA Contrast Verified

## AWS Amplify UI: Build UI Fast with Amplify on React

[AWS Amplify UI](https://ui.docs.amplify.aws/) is a set of React components that make it easy to build beautiful and responsive user interfaces. The components are built on top of the Amplify framework, which provides a unified way to connect your app to backend services.

Amplify UI is designed to be easy to use, even for beginners. The components are well-documented and there are plenty of examples to help you get started.

In this blog post, we'll show you how to use Amplify UI to build a simple todo app.

## Getting Started

The first step is to install Amplify UI. You can do this with the following command:

Copied! 🐾

```
npm install @aws-amplify/ui
```

Once Amplify UI is installed, you can start using the components in your app.

## Creating a Todo List

To create a todo list, we'll use the following components:

- `AmplifyCard`: This component is used to create a card that displays a todo item.
- `AmplifyInput`: This component is used to create a text input field.
- `AmplifyButton`: This component is used to create a button.

Here's the code for our todo list:

Copied! 🐾

```
import React from 'react';
import { AmplifyCard, AmplifyInput, AmplifyButton } from '@aws-amplify/ui';

const TodoList = () => {
	const [todos, setTodos] = useState([]);

	const addTodo = () => {
		const newTodo = {
			text: e.target.value
		};

		setTodos([...todos, newTodo]);
	};

	return (

## Todo List

					{todos.map((todo, index) => (

- {todo.text} setTodos(todos.filter((t) => t.id !== todo.id))}> Delete
					))}

			 addTodo()} />

	);
};

export default TodoList;
```

This code will create a todo list with a text input field and a button. When you enter a todo item in the text input field and click the button, the item will be added to the list.

## What is next?

[AWS Amplify UI](https://ui.docs.amplify.aws/) is a powerful tool that can help you build beautiful and responsive user interfaces. The components are easy to use and well-documented, making them a great choice for beginners and experienced developers alike.

If you're looking for a way to build user interfaces quickly and easily, then [AWS Amplify UI](https://ui.docs.amplify.aws/) is a great option.

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Live Coding with the Amplify UI team Full Video](https://www.youtube.com/watch?v=weT3YwBZt-k) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- [**Erik Hanchett Guest Profile & Episodes on CodingCat.dev**](/guest/erik-hanchett)
- [**Erik Hanchett on GitHub**](https://github.com/ErikCH)
- [**Scott Rees Guest Profile & Episodes on CodingCat.dev**](/guest/scott-rees)
- [**Heather Buchel Guest Profile & Episodes on CodingCat.dev**](/guest/heather-buchel)
- [**React Official Reference:**](https://react.dev/reference/react) Hooks, Server Components, and UI state patterns
- [**AWS Documentation & Builder Center:**](https://docs.aws.amazon.com/) Cloud architecture, serverless compute, IAM, and managed services
- [**OWASP Top 10 & Application Security Guides:**](https://owasp.org/www-project-top-ten/) Vulnerability mitigation, authentication hardening, and CVE defense

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**AWS Amplify with Nader Dabit**](/podcast/0-10-amplify-with-nader-dabit): Talking with Nader Dabit all about AWS Amplify. How AWS Amplify fits into your web development process.
- [**AWS Amplify Video**](/post/aws-amplify-video): How to easily add Video for Livestreaming or Video on Demand to your next Amplify project.
- [**Live Coding Clerk, into Next.js with James Perkins**](/podcast/cwcc-0-9-clerk-with-appwrite): James walks Alex through how to use Clerk in Next.js

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Live Coding with the Amplify UI team?

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud. How to use AWS Amplify React components for an accessible themed site: 90 minutes of coding up an AWS Amplify's new components. AWS Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud. AWS Amplify UI components are built with plain React and CSS to provide a solid foundation for building Throughout this podcast, Erik Hanchett and Scott Rees and Heather Buchel breaks down real-world implementation details for React, AWS, Security so developers can apply these patterns directly in production.

### How do you implement React best practices in production?

When adopting React and AWS in a production stack, start by validating your configuration against the [**React Official Reference**](https://react.dev/reference/react) (Hooks, Server Components, and UI state patterns). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

### Where can I watch the full Live Coding with the Amplify UI team walkthrough and find related code resources?

You can watch the complete video session for [**Live Coding with the Amplify UI team**](https://www.youtube.com/watch?v=weT3YwBZt-k) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into React, check out our related guide: [**AWS Amplify with Nader Dabit**](/podcast/0-10-amplify-with-nader-dabit).

## ✏️ Episode Summary

How to use AWS Amplify React components for an accessible themed site: 90 minutes of coding up an AWS Amplify's new components.

AWS Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.

AWS Amplify UI components are built with plain React and CSS to provide a solid foundation for building

## recent episodes.

[All Episodes→](/podcasts)[![GenAI for Engineers, What](https://cdn.sanity.io/images/hfh83o0w/production/3e48f44739be2aabf3aaa805e51b3a6328979153-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)November 19, 2025[AI & MCP Agents](/topic/ai)

### [GenAI for Engineers, What's Real, What's Not and What's Coming](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)

Curious about GenAI for engineers? Learn what's real, what's not, and what's next in AI.

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Balki Kodarapu](https://cdn.sanity.io/images/hfh83o0w/production/25fd44884e232394eb74b776fcec7e8d13330ca0-1060x794.png?rect=133,0,794,794&w=96&h=96&q=82&fit=max&auto=format)Balki Kodarapu](/guest/balki-kodarapu)[![How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](https://cdn.sanity.io/images/hfh83o0w/production/0beb99900f4c24e284df2dee3e2d740062c6ce96-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)November 4, 2025[AI & MCP Agents](/topic/ai)

### [How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)

Curious about OAuth, MCP servers, and building cool ChatGPT apps? Hear from Max of Stytch as we dive deep, break down the tech, and build a Tamagotchi together!

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Max Gerber](https://cdn.sanity.io/images/hfh83o0w/production/4497bb7ada0e39b4cd13b0e3ca00c930389dab02-1292x1088.png?rect=102,0,1088,1088&w=96&h=96&q=82&fit=max&auto=format)Max Gerber](/guest/max-gerber)