How to Design Almost Any Backend and Deploy It to AWS with No Code
Tags: aws, awsamplify, backend
Published: 2020-12-18 19:42:48

---
title: How to Design Almost Any Backend and Deploy It to AWS with No Code
published: True
description: With the Amplify Sandbox, it is really easy to model and think through any app backend scenario
tags: AWS, AWSAmplify, Backend
slug: design-and-deploy-backend-with-amplify-sandbox
canonical_url: https://www.freecodecamp.org/news/design-and-deploy-backend-with-amplify-sandbox/
---

<div class="post-content">
<p>In this post I'll show you how to design four different example apps - a SimpleNote clone, a Twitter clone, a Slack clone, and an E-commerce store. And we'll do it with the coolest new toy released at AWS re:Invent 2020.</p><h2 id="introducing-the-amplify-sandbox">Introducing the Amplify Sandbox</h2><p><a href="https://aws.amazon.com/blogs/aws/aws-amplify-admin-ui-helps-you-develop-app-backends-no-cloud-experience-required/">Amplify Admin UI</a> is a new low-code interface for building app backends that doesn't require any AWS expertise. However, what many people may miss is that Amplify Admin also includes <a href="https://sandbox.amplifyapp.com/">a wonderful new Sandbox</a> which lets you get started without an AWS account. </p><p>This Sandbox is a publicly sharable version of the Amplify Admin UI where you can create and prototype your data models without even logging in to an AWS account! </p><p>Currently only <a href="https://sandbox.amplifyapp.com/start#datastore">the Data sandbox</a> is built out, but over time the other AWS Amplify categories will be made available as well. </p><p>When you first enter a Sandbox, you are dropped into a visual builder where you can add your <a href="https://docs.aws.amazon.com/appsync/latest/devguide/designing-your-schema.html">models, enums, and custom types</a>. Mostly, you'll just be creating models. </p><p>You can name models, add fields, and specify types (including whether they are optional or array fields), and even add one-to-one, one-to-many, or many-to-many relationships <em>between</em> models.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2020/12/image-147.png" class="kg-image" alt="" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2020/12/image-147.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2020/12/image-147.png 1000w, https://www.freecodecamp.org/news/content/images/size/w1600/2020/12/image-147.png 1600w, https://www.freecodecamp.org/news/content/images/2020/12/image-147.png 1790w" sizes="(min-width: 1200px) 1200px"></figure><p>Further, it even lets you <em>share </em>the data models you create! This means you don’t have to start from scratch each time you create a project, and <strong>you can share your data schemas like you share code gists</strong>.</p><h2 id="our-four-sample-sandboxes">Our Four Sample Sandboxes</h2><p><br>I thought it would be a great idea to demonstrate how powerful this is by sketching out four example sandboxes that you can use:</p><ul><li>A <strong>notes</strong> app (inspired by the free note-taking app <a href="https://simplenote.com/">SimpleNote</a>)</li><li>A <strong>chat</strong> app (inspired by Slack)</li><li>A <strong>social media </strong>app (inspired by Twitter)</li><li>An <strong>ecommerce</strong> backend (inspired by every shopping experience)</li></ul><h2 id="how-to-create-entity-relationship-diagrams">How to Create Entity Relationship Diagrams</h2><p>Amplify Admin UI makes it easy to get going, but it is worth doing some planning before we start. </p><p>The time-tested way to do this is to draw <a href="https://www.youtube.com/watch?v=QpdhBUYk7Kk">entity relationship diagrams</a>. We chose to <a href="https://lucid.app/lucidchart/invitations/accept/563dc191-6613-44f5-aef0-24224ad5fbe1">use Lucidcharts for ours</a>, but you can use any diagramming tool to do this.</p>


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h7y34275luztd0fctvvj.png)

<h2 id="the-notes-app">The Notes App</h2><p>This is a minimal app that I personally use every day, so I like it for its simplicity. We have two models: Notes and Tags, and only one many-to-many relationship between them for easy querying. </p><p>You could extend this by offering collaborative, role based editing, which is available once you deploy this model. You should also make use of the <a href="https://docs.amplify.aws/lib/datastore/getting-started/q/platform/js#datastore-with-amplify">client-side DataStore libraries</a> to make sure your notes work offline.<br><br>You can see the Sandbox here: <a href="https://sandbox.amplifyapp.com/schema-design/1c782f02-1fe7-4785-9a02-22a27cc96d0d/clone">https://sandbox.amplifyapp.com/schema-design/1c782f02-1fe7-4785-9a02-22a27cc96d0d/clone</a>. Note that we use a bidirectional <strong>many to many </strong>relationship here between the models, as notes can have zero or more tags and vice versa.</p>


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/auformx6karwwplydg77.png)


<h2 id="the-slack-clone">The Slack Clone</h2><p>Many of us use chat apps for work, so we are familiar with this app use case from the user side. </p><p>The new nuances here are that every Message belongs to a Channel and a User, and that each User can both create Channels and join them. So there is an interesting three way relationship between the three primary models.<br><br>You can see the Sandbox here: <a href="https://sandbox.amplifyapp.com/schema-design/5f863684-fd1e-41b4-bca1-36c2271e21a1/clone">https://sandbox.amplifyapp.com/schema-design/5f863684-fd1e-41b4-bca1-36c2271e21a1/clone</a>. <strong>Channel</strong> is the most complex model here – notice how we fully utilize all the relationship types available in the Sandbox:</p><ul><li>Channels can have <strong>many</strong> Users, and Users can join <strong>many</strong> Channels</li><li>Channels can only be created by <strong>one</strong> User, and there is no requirement to keep track of what channels any particular user has created</li><li>Channels can have <strong>many</strong> Messages, but each Message can only belong to <strong>one</strong> Channel</li></ul>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qjlv1vv2no8kr23vp178.png)


<h2 id="the-twitter-clone">The Twitter Clone</h2><p>Social media is often one of the most complex data models to model. We implement the minimum viable social media app – a Tweet and a User model is all we offer. </p><p>However the Tweet itself has a complex set of relationships. It has an author User, and a set of likes, replies, and quotes that need to be modeled. </p><p>Other modifications you can consider for this app: offering other types of tweets, including polls, images, and videos, building in advertisements, and direct messages.<br><br>You can see the Sandbox here: <a href="https://sandbox.amplifyapp.com/schema-design/ad5b5b7e-f207-42d1-92b1-0ccef056a26b/clone">https://sandbox.amplifyapp.com/schema-design/ad5b5b7e-f207-42d1-92b1-0ccef056a26b/clone</a>. Note that recursion is implemented here by modeling likes, replies, and quotes as an <strong>array </strong>of the respective User and Tweet ID's.</p>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jhucoh235ji51lus9651.png)



<h2 id="the-ecommerce-store">The Ecommerce Store</h2><p>The stakes are higher when there is money involved. Keeping track of orders and ensuring a great customer experience is paramount. </p><p>We model a typical ecommerce backend by ensuring that we have separate models for Suppliers, Products, Orders, and Customers. To get into the nuances of a typical ordering experience, we also include the ability to specify product quantities in a single order, as well as to apply coupons. </p><p>Since there are infinitely many variations on the ecommerce experience, we can’t possibly model them all, but I hope that this serves as a good enough starting point. Share your own if you have twists on this concept!<br><br>You can see the Sandbox here: <a href="https://sandbox.amplifyapp.com/schema-design/aa0e7a61-aa72-4b27-b6db-ea8e2031f95e/clone">https://sandbox.amplifyapp.com/schema-design/aa0e7a61-aa72-4b27-b6db-ea8e2031f95e/clone</a>. Note the sheer complexity of this model is easily handled by the Sandbox's features. One Order can only have one Customer, but a Customer can have many Orders. </p><p>When you set this up on the Customer model, the Sandbox is smart enough to automatically set up a corresponding customerID field as a "<strong>Relationship Source</strong>" on the Order model. This will be very handy for GraphQL queries down the road.</p>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q5iuc8ybnrl380qh4apw.png)


<h2 id="how-to-deploy-the-model-to-aws">How to Deploy the Model to AWS</h2><p>Once you are done with your model, the Sandbox prompts you to test locally by downloading it with the <a href="https://docs.amplify.aws/cli">Amplify CLI</a>. However, if you just want to get it live on AWS, you can skip that and head straight to the "Deploy to AWS" stage:</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2020/12/image-142.png" class="kg-image" alt="" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2020/12/image-142.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2020/12/image-142.png 1000w, https://www.freecodecamp.org/news/content/images/2020/12/image-142.png 1248w" sizes="(min-width: 1200px) 1200px"></figure><p>Once you hit "Login to deploy to AWS", you're done! Imagine that – you've just created an actual backend data model <strong>without writing any code</strong> and deployed it straight to AWS. 🤯</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2020/12/image-143.png" class="kg-image" alt="" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2020/12/image-143.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2020/12/image-143.png 1000w, https://www.freecodecamp.org/news/content/images/size/w1600/2020/12/image-143.png 1600w, https://www.freecodecamp.org/news/content/images/2020/12/image-143.png 1654w" sizes="(min-width: 1200px) 1200px"></figure><p>From here you can set up further customization, including adding authentication, inviting users and assigning roles, adding authorization rules on each model, creating content with our WYSIWYG editor, and more. </p><p>If you want to learn more, <a href="https://welearncode.com/intro-amplify-admin-ui/">Ali Spittel did a great blogpost</a> on how powerful the Amplify Admin UI becomes after you deploy it, whereas this article has been about the no-account-needed Sandbox environment <em>before</em> deploying. </p><p>Nader Dabit also wrote about <a href="https://acloudguru.com/blog/engineering/10-exciting-features-of-the-new-amplify-admin-ui">10 other features you may be keen to try</a>.</p><p>With the Amplify Sandbox, it is really easy to model and think through any app backend scenario, so hopefully these examples jog your creativity. If you have any requests or submissions, <a href="https://twitter.com/swyx">please let me know</a>!</p>
                </div>