Introducing Quick Notes
Tags: react, aws, amplify, graphql
Published: 2019-08-27 22:50:48

---
title: Introducing Quick Notes
published: true
description: Deploy a full stack web app with AWS Amplify to help you organize your notes when you're on the go.
tags: react, aws, amplify, graphql
---

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2ja8yzlgstr2vc95a3ej.jpg)

**Deploy a full stack web app to help you organize your notes when you're on the go.**

The other day I released Journey, a bite sized app that helps you track your job listings when on the job hunt. I received a lot of positive feedback and figured I would put together some more examples of the types of things you can do with AWS Amplify and backing Amazon services.

That's why I built Quick Notes. It's a small enough app that it can be figured out relatively easily and it also serves a purpose that hopefully many will find useful, just like Journey.

## What It Does
Quick notes allows you to quickly take down and access notes and provides features like:

- 🎙 Record notes
- 🔈 Play notes back
- 📖 Read notes
- 👮‍ Authenticated
- 🔥 Serverless back end
- 🚀 GraphQL
- 💻 Deploy back end in minutes

## How It Works

The code for the app is located [here](https://github.com/kkemple/quick-notes).

This project uses Amazon ML services (Amazon Polly and Amazon Transcribe) and the Amplify `Predictions` category to [convert text to speech](https://github.com/kkemple/quick-notes/blob/master/src/components/Note.js#L68) for playing notes, and for [converting recorded notes to text](https://github.com/kkemple/quick-notes/blob/master/src/components/Record.js#L96) to store in AWS AppSync (GraphQL service).

In the project, you'll notice a folder named `amplify`. This folder contains the back end for the app that can be redeployed in anyone's account. In the `amplify` folder you'll see a `backend` folder. In this folder you'll see the configuration for the four main features:

* Authentication service (powered by Amazon Cognito)
* GraphQL API (built with AWS AppSync)
* Speech To Text Generation (built with Amazon Transcribe)
* Text to Speech Generation (built with Amazon Polly)

In the `backend/api` folder you'll see the GraphQL API configuration as well as the base [GraphQL Schema](https://github.com/kkemple/quick-notes/blob/master/amplify/backend/api/quicknotes/schema.graphql).

This is the base GraphQL Schema. You'll see that the base schema looks like this:

```graphql
type Note @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  title: String!
  text: String!
  createdAt: String
  updatedAt: String
}
```

If you've never worked with Amplify before you may not be aware of the `@model` and `@auth` directive. These are part of the [GraphQL Transform](https://aws-amplify.github.io/docs/cli-toolchain/graphql) library of the Amplify CLI.

**@model** - Decorate any base type with this directive to get CRUD and list query and mutation definitions, a DynamoDB table, and resolvers created for the GraphQL operations.

**@auth** - Decorate any base type or field with this directive to get granular authentication and authorization set up for protected data.

## Deploying the App

To automatically deploy the app, click the big orange button 👇

[![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/kkemple/quick-notes)

> If you wish to manually deploy the app, follow the instructions below.

### Deploy the back end and run the app

1. Clone the repo & install the dependencies

```sh
~ git clone https://github.com/kkemple/quick-notes.git
~ cd quick-notes
~ npm install
```

2. Initialize and deploy the Amplify project

```sh
~ amplify init
? Enter a name for the environment: dev (or whatever you would like to call this env)
? Choose your default editor: <YOUR_EDITOR_OF_CHOICE>
? Do you want to use an AWS profile? Y

~ amplify push
? Are you sure you want to continue? Y
? Do you want to generate code for your newly created GraphQL API? N
> We already have the GraphQL code generated for this project, so generating it here is not necessary.
```

3. Start the app and register a new user

```sh
~ yarn start
```

### Deploy the front end

1. Create a new repository with your git service of choice

2. Push the project to your new repository

```sh
~ git remote add origin <your_new_repository>
~ git push --set-upstream master
```

3. Connect to [AWS Amplify Console](https://console.aws.amazon.com/amplify/home) and wait for build to start. You will be given a production URL and you are ready to take some notes!

## Customizing the GraphQL schema

This schema can be edited. If you need additional fields, you can update the backend by doing the following:

Update the schema (located at amplify/backend/api/quicknotes/schema.graphql).

Redeploy the back end

```sh
amplify push
```

If you or anyone you know needs help getting up and running with this app, reach out to me on [Twitter](https://twitter.com/kurtiskemple), I'd be happy to help!