# Build a Full Stack React Application



|  |  | 
| --- |--- |
|  **AWS experience**  |  Beginner   | 
|  **Time to complete**  |  30 minutes   | 
|  **Cost to complete**  |  [Free Tier](https://aws.amazon.com/free) eligible   | 
|  **Services used**  |  [AWS Amplify](https://aws.amazon.com/amplify)   | 
|  **Last updated**  |  July 25, 2024   | 

## Overview


In this tutorial, you will learn how to create a simple full-stack web application using AWS Amplify. Amplify offers a Git-based CI/CD workflow for building, deploying, and hosting single-page web applications or static sites with serverless backends. 

## What you will accomplish


In this tutorial, you will: 
+ Build and host a React application on AWS 
+ Use Amplify to add authentication, data & storage solutions to the app 
+ Start a cloud sandbox environment that provides an isolated development space to rapidly build, test, and iterate on a fullstack app 
+ Implement the frontend code to enable users to create, update, and delete notes 

## Prerequisites


Before starting this tutorial, verify that you have the following prerequisites completed: 
+ **An AWS account:** If you don't already have one, follow the [Setup Your Environment](https://docs.aws.amazon.com/hands-on/latest/setup-environment/) tutorial. 
+ **Configured** your AWS profile [for local development](https://docs.amplify.aws/react/start/account-setup/). 
+ **Installed** on your environment: [Nodejs](https://nodejs.org/en/download) and [npm](https://www.npmjs.com/). 
+ **Familiarity** with git and a [GitHub](https://github.com) account. 

## Tasks


This tutorial is divided into four tasks. You must complete each task in order before moving to the next one. 

1. [Task 1: Deploy and Host a React App](module-one.md) (10 minutes): Create a React app, then deploy and host it using AWS Amplify. 

1. [Task 2: Initialize a Local Amplify App](module-two.md) (10 minutes): Initialize a cloud backend that include authentication, a database, and storage. 

1. [Task 3: Build the Frontend](module-three.md) (10 minutes): Implement the frontend code to connect to the authorization, data and storage backend enabling users to create, update, and delete notes. 

1. [Task 4: Clean up resources](module-four.md) (2 minutes): Clean up the resources used in this tutorial.