Prototype Fullstack Apps without an AWS Account using AWS Amplify
Published: 2021-11-22 12:43:56

The less prerequisites you need before building an app the less resitance you will feel to build it. Sometimes you just want to build stuff. You don’t want to worry about the friction that comes with setting up an infrastructure. 

I write a lot of UI code every day and sometimes I just want to add some data to bring it to life. But I don’t want to set up a server yet. [Amplify Admin UI Sandbox](https://sandbox.amplifyapp.com/) has been a super useful tool for me in the past few weeks to build full featured, data-backed frontend without setting up a server.


## Amplify Admin UI

[Amplify Admin UI](https://console.aws.amazon.com/amplify/home?#/deploy-backend) is one of the tools in the AWS Amplify toolbox. You have two options for creating and managing an Amplify backend:


1. A CLI + Schema file combo
2. Admin UI

With the CLI and Schema file option you set up a backend using a CLI command, then design a schema for your data, auth, relationship, etc using a schema file. This option is preferred for automation but tedious and error prone.

Admin UI is a UI version of the first option. Instad of using the CLI and editing a file, you use a UI with visual guides to set up an Amplify backend.

Here is a screenshot of adding two models to your database


![](https://paper-attachments.dropbox.com/s_2B456157E4CAFB6E1C9054522DAC76E59E7B8E0DD266AE2BEA06DC706C0EBC2B_1637529989814_image.png)


And here is how to create a relationship between them


![](https://paper-attachments.dropbox.com/s_2B456157E4CAFB6E1C9054522DAC76E59E7B8E0DD266AE2BEA06DC706C0EBC2B_1637529977383_image.png)



## Amplify Admin UI Sandbox

To use Admin UI, you need an account. If you want to use your models locally without setting up an account, then you need the Admin UI Sandbox.

The Admin UI Sandbox allows you the same feature as the Admin UI but with zero account set up. You can model your data and start using the model on a local project.

The reason this works is because of Amplify Datastore which has a local-first data persistence strategy. Your data is stored in the browser’s Index DB first before it is synched to the cloud. Since synching is optional, you can use the local data for building and testing.


![](https://paper-attachments.dropbox.com/s_2B456157E4CAFB6E1C9054522DAC76E59E7B8E0DD266AE2BEA06DC706C0EBC2B_1637530374521_CleanShot+2021-11-22+at+01.31.452x.png)



## Setup a Project with Sandbox

Head to https://sandbox.amplifyapp.com/getting-started and click the **Get Started** button on the *Create an app backend* card


![](https://paper-attachments.dropbox.com/s_2B456157E4CAFB6E1C9054522DAC76E59E7B8E0DD266AE2BEA06DC706C0EBC2B_1637530499539_CleanShot+2021-11-22+at+01.34.372x.png)


On the next page, click the **Data** card


![](https://paper-attachments.dropbox.com/s_2B456157E4CAFB6E1C9054522DAC76E59E7B8E0DD266AE2BEA06DC706C0EBC2B_1637530540055_CleanShot+2021-11-22+at+01.35.112x.png)


Leave the default To-do list schema as the starter schema and click **Create new schema**


![](https://paper-attachments.dropbox.com/s_2B456157E4CAFB6E1C9054522DAC76E59E7B8E0DD266AE2BEA06DC706C0EBC2B_1637530601401_CleanShot+2021-11-22+at+01.36.142x.png)


If you look at the browser URL, it looks like this:

```
https://sandbox.amplifyapp.com/schema-design/6d3c7f99-5f64-46e5-bedb-7b3b894792bb
```

`6d3c7f99-5f64-46e5-bedb-7b3b894792bb` is the unique ID of your sandbox.

That’s all it takes to create a Sandbox. 


## Model Your Data

You can add more models (tables) to your database by clicking the **Add model** button


![](https://paper-attachments.dropbox.com/s_2B456157E4CAFB6E1C9054522DAC76E59E7B8E0DD266AE2BEA06DC706C0EBC2B_1637530829580_CleanShot+2021-11-22+at+01.39.422x.png)


I am just going to leave it to be a simple single todo model so we can move on to building the UI


## Create a React App

Create a new React app using `create-react-app`

```sh
npx create-react-app zero-cloud
cd zero-cloud
```

Install the Amplify CLI command and pull the Sandbox into your React project:

```sh
## Install CLI command
npm install -g @aws-amplify/cli

## Pull sandbox into project
amplify pull --sandboxId <Sandbox ID> # eg 6d3c7f99-5f64-46e5-bedb-7b3b894792bb
```

Replace the `<Sandbox ID>` with your sandbox ID which you can find in your URL.

Install the JS Amplify library in your React project:

```sh
npm install aws-amplify 
```

Configure Amplify in your `src/index.js` file:

```js
import Amplify from 'aws-amplify'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)
```

## Creating Data

You can start adding data to your todo model and Amplify will store the data in your browser’s Index DB. 

Add a form to the App component in `src/App.js`:

```js
import { DataStore } from "@aws-amplify/datastore";
import React from "react";
import { Todo } from "./models";
function App() {
  const [todo, setTodo] = React.useState("");
  async function saveTodo(todo) {
    await DataStore.save(
      new Todo({
        name: todo,
      })
    );
  }
  return (
    <div className="App">
      <form
        onSubmit={(e) => {
          e.preventDefault();
          saveTodo(todo);
        }}
      >
        <input
          type="text"
          placeholder="Todo"
          onChange={(e) => setTodo(e.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}
export default App;
```

When you submit the form, it calls the `saveTodo` function which calls `DataStore.save` to save the todo item in Amplify DataStore.

If you look in your Index DB, you will find the todo item you just created.


## Reading Data

You can also read data using the `DataStore` module. In the example below, I am calling the `Datastore.query` method after the component renders for the first time.

```js
import { DataStore } from "@aws-amplify/datastore";
import React from "react";
import { Todo } from "./models";
function App() {
  //...
  const [todos, setTodos] = React.useState([]);
  async function saveTodo(todo) {
    //...
    setTodos([...todos, saved]);
  }
  async function fetchTodos() {
    const todos = await DataStore.query(Todo);
    setTodos(todos);
  }
  React.useEffect(() => {
    fetchTodos();
  }, []);
  return (
    <div className="App">
      // ...
      <ul>
        {todos.map((t) => (
          <li key={t.id}>{t.name}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;
```


## Conclusion

Learn more about Admin UI and Admin UI Sandbox:


- [Admin UI docs](https://docs.amplify.aws/console/adminui/start/)