Task 3: Build the Frontend

In this step, you will update the src/App.jsx to configure the Amplify library with the client configuration file ( amplify_outputs.json ). Then, it will generate a data client using the generateClient() function. The code uses the Amplify Authenticator component to scaffold out an entire user authentication flow allowing users to sign up, sign in, reset their password, and confirm sign-in for multifactor authentication (MFA).

Additionally, the code contains the following:

createNote - Get the data from the form and use the data client to create a new note if the user selects an image. Then, the function will upload this image to Amplify storage and associate it with the new note.

deleteNote - Use the data client to delete the selected note.

Update the Amplify Authenticator component

On your local machine, navigate to the notesapp/src/App.jsx file, and update it with the following code.

import { useState, useEffect } from "react";
import {
  Authenticator,
  Button,
  Text,
  TextField,
  Heading,
  Flex,
  View,
  Image,
  Grid,
  Divider,
} from "@aws-amplify/ui-react";
import { Amplify } from "aws-amplify";
import "@aws-amplify/ui-react/styles.css";
import { getUrl } from "aws-amplify/storage";
import { uploadData } from "aws-amplify/storage";
import { generateClient } from "aws-amplify/data";
import outputs from "../amplify_outputs.json";
 * @type {import('aws-amplify/data').Client<import('../amplify/data/resource').Schema>}
Amplify.configure(outputs);
const client = generateClient({
  authMode: "userPool",
export default function App() {
  const [notes, setNotes] = useState([]);
  useEffect(() => {
    fetchNotes();
  }, []);
  async function fetchNotes() {
    const { data: notes } = await client.models.Note.list();
    await Promise.all(
      notes.map(async (note) => {
        if (note.image) {
          const linkToStorageFile = await getUrl({
            path: ({ identityId }) => `media/${identityId}/${note.image}`,
          console.log(linkToStorageFile.url);
          note.image = linkToStorageFile.url;
        return note;
    console.log(notes);
    setNotes(notes);
  async function createNote(event) {
    event.preventDefault();
    const form = new FormData(event.target);
    console.log(form.get("image").name);
    const { data: newNote } = await client.models.Note.create({
      name: form.get("name"),
      description: form.get("description"),
      image: form.get("image").name,
    console.log(newNote);
    if (newNote.image)
      if (newNote.image)
        await uploadData({
          path: ({ identityId }) => `media/${identityId}/${newNote.image}`,
          data: form.get("image"),
        }).result;
    fetchNotes();
    event.target.reset();
  async function deleteNote({ id }) {
    const toBeDeletedNote = {
      id: id,
    const { data: deletedNote } = await client.models.Note.delete(
      toBeDeletedNote
    console.log(deletedNote);
    fetchNotes();
  return (
    <Authenticator>
      {({ signOut }) => (
          className="App"
          justifyContent="center"
          alignItems="center"
          direction="column"
          width="70%"
          margin="0 auto"
          <Heading level={1}>My Notes App</Heading>
          <View as="form" margin="3rem 0" onSubmit={createNote}>
              direction="column"
              justifyContent="center"
              gap="2rem"
              padding="2rem"
              <TextField
                name="name"
                placeholder="Note Name"
                label="Note Name"
                labelHidden
                variation="quiet"
                required
              <TextField
                name="description"
                placeholder="Note Description"
                label="Note Description"
                labelHidden
                variation="quiet"
                required
                name="image"
                as="input"
                type="file"
                alignSelf={"end"}
                accept="image/png, image/jpeg"
              <Button type="submit" variation="primary">
                Create Note
              </Button>
            </Flex>
          </View>
          <Divider />
          <Heading level={2}>Current Notes</Heading>
            margin="3rem 0"
            autoFlow="column"
            justifyContent="center"
            gap="2rem"
            alignContent="center"
            {notes.map((note) => (
                key={note.id || note.name}
                direction="column"
                justifyContent="center"
                alignItems="center"
                gap="2rem"
                border="1px solid #ccc"
                padding="2rem"
                borderRadius="5%"
                className="box"
                  <Heading level="3">{note.name}</Heading>
                </View>
                <Text fontStyle="italic">{note.description}</Text>
                {note.image && (
                  <Image
                    src={note.image}
                    alt={`visual aid for ${notes.name}`}
                    style={{ width: 400 }}
                <Button
                  variation="destructive"
                  onClick={() => deleteNote(note)}
                  Delete note
                </Button>
              </Flex>
          </Grid>
          <Button onClick={signOut}>Sign Out</Button>
        </Flex>
    </Authenticator>
      
Create an account
Choose the Create Account tab,
      and use the authentication flow to create a new user by entering
      your email address and a
      password. Then, choose
      Create Account.
      
Get verification code
You will get a verification code sent to your email. Enter the
      verification code to log in to
      the app. When signed in, you can start creating notes and delete
      them.
      
Sign into the console
Sign in to the AWS Management Console in a new browser window, and
    open the AWS Amplify console at
    https://console.aws.amazon.com/amplify/apps.
      
View your web app
AWS Amplify automatically builds your source code and deployed
      your app at https://...amplifyapp.com, and on every git push your
      deployment instance will update. Select the
      Visit deployed URL button to
      see your web app up and running live.