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.

This project uses Amazon ML services (Amazon Polly and Amazon Transcribe) and the Amplify Predictions category to convert text to speech for playing notes, and for converting recorded notes to text 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.

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

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 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 👇

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

Deploy the back end and run the app

Clone the repo & install the dependencies

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

Initialize and deploy the Amplify project

~ 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.

Start the app and register a new user

~ yarn start

Deploy the front end

Create a new repository with your git service of choice
Push the project to your new repository

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

Connect to AWS Amplify Console 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

amplify push

If you or anyone you know needs help getting up and running with this app, reach out to me on Twitter, I'd be happy to help!

Introducing Quick Notes