Getting Started with AWS

Build a Full-Stack React Application

Create a simple web application using AWS Amplify

Module 5: Add Storage

In this module, you will add storage and the ability to associate an image with the notes in your app

Overview

Now that we have the notes app working, let's add the ability to associate an image with each note. In this module, you will use the Amplify CLI and libraries to create a storage service using Amazon S3. You will then update the GraphQL schema you created in the previous module to associate an image with each note. Finally, you will update the React app to enable image uploading, fetching, and rendering.

What you will accomplish

In this module, you will:
  • Create a storage service
  • Update a GraphQL schema
  • Update your React app

Key concepts

Storage service - Storing and querying for files, such as images and videos, is a common requirement for most applications. One option to do this is to Base64 encode the file and send as a string to save in the database. This comes with disadvantages, such as the encoded file being larger than the original binary, the operation being computationally expensive, and the added complexity around encoding and decoding properly. Another option is to have a storage service specifically built and optimized for file storage. Storage services like Amazon S3 exist to make this as easy, performant, and inexpensive as possible.

 Time to complete

10 minutes

 Services used

Implementation

Conclusion

You have deployed a web application using AWS Amplify! You have added authentication to your app allowing users to sign up, sign in, and manage their account. The app also has a scalable GraphQL API configured with an Amazon DynamoDB database, allowing users to create and delete notes. You have also added file storage using Amazon S3 so that users can upload images and view them in their app.

Was this page helpful?

Congratulations!

You successfully built a web application on AWS! As a great next step, dive deeper into specific AWS technologies and take your application to the next level.