Recently, I’ve enjoyed using mood tracking apps as a quick and easy way to journal at any time of the day. My main issue is that every mood tracking app I try isn’t perfect for my use case. Because of this, I decided to develop my own mood tracking app.

For this app I decided to use AWS to host the app’s backend. Eventually, I learned about AWS Amplify and how easy it made connecting my app’s UI to a backend hosted in AWS.

For this article, I will walk through what I did to get my app working.

First you have to install and configure the Amplify CLI itself. I suggest you follow the official docs for this process.

Once we’ve configured the Amplify CLI we will create a new React project.

After creating the project we will go into our moodtrack directory and run the command

The CLI will ask us some basic questions about our app. For the first question select the name of the editor you use. When the CLI asks what type of app you’re building select JavaScript and select React as the framework. For the source directory, distribution directory, start command, and build command press enter to get the default value.

Now lets add authentication into our app by running the command

Press enter to use the default configuration. Now we will add a GraphQL API to our app using the command

Select GraphQL as the API type and give it any name you’d like. Pick Cognito user pool as the authentication type (we created a Cogntio user pool in the previous step). Say no to having an annotated schema and answer yes to guided schema creation. Choose the first option for a “todo” app.

Create the resources in the cloud by using this command

Answer yes to all the questions it asks. Resources will be created in AWS and Amplify will generate code for all possible queries, mutations, and subscriptions.

If you look at amplfy/backend/api/moodtrack/schema.graphql you will notice the following schema was automatically generated by amplify.

While this schema is perfect for a todo app, we need something different. Delete that schema and replace it with this one.

The ‘auth(rules: [{ allow: owner}])’ line makes it so that a user can only see the ‘moods’ that they created.

Run amplify push again and allow it to generate new code for our new schema.

Now that all of our parts are in place we can integrate them. First we will add in authentication. To do this we will have to add the following packages to our app.

We can implement authentication into our app using a higher order component. You can add the following 2 lines to your app.js file to implement authentication.

Now what do we do with the queries and mutations that Amplify generated for us?

While I will not walk through every possibility, here is an example of a basic add mood form.

As you can see, AWS Amplify makes connecting all of these services together so easy that it feels like you just used a cheat code to skip the tedious parts of web development.

Thanks for reading this article. If you have any questions feel free to reach out to me on twitter.