A designer built a React app on AWS Amplify

O Park
4 min readFeb 7, 2020

--

After running the Goodnight Journal that I built on WordPress 7 years ago, I finally decided to rebuild it from scratch on a new platform to make it a better app for personal journaling.

In this blog article, I wanted to share my experience of building a React app on AWS Amplify.

GoodnightJournal.com homepage

I decided to use React and AWS because I used them on a couple of projects recently and they have a good size of the community that offers great resources to utilize.

My workflow

Since I’m the only one building the app with a couple of developers on a contract basis, I was able to make the workflow very flexible in a way that is most effective to me. Coming from a designer background, it made things easier for me to get the entire UI first and build things on top of it.

I started with a bunch of sketches from writing down all ideas to wireframes and came up with the final wireframes of the app.

From the wireframes, I coded up the entire user interface on the top of the create react app. I used the placeholder JSON data to create all the UIs with properly formatted data in the app. From there, I moved on to replacing the all placeholder JSON to actual data from the database and connecting the React app with Amplify.

Pros

I liked the documentation and simplicity. I used AWS mobile hub before and it helped me to understand how things work a little bit. It was very simple and easy to set up the backend with Amplify because Amplify takes care of a lot of small things in the background that you will need to set up manually otherwise. All I have to do is run amplify init then set up the backend API and schema.graphql file to set up the all backend functions and database properly.

It was super nice that I no longer have to hassle through setting up Lambda functions and connect them with Gateway API and DynamoDB. AWS Amplify takes care of all that and gives you the queries and mutations that you can use right away. It was easy and cut out a lot of manual setups that I have to do.

Cons

amplify push seems a bit unstable and takes a long time to execute. I know that it does many things in the background but still very annoying for me to wait and just hoping to be finished without any error messages.

Coming from AWS Mobile, Amplify console does not really represent what’s going on in the backend. It will be nice to see the visual representation of what’s in the backend in the console like rather than just what backends are connected to your Github branches.

The product is not quite mature and still improving. Many developers who I worked with told me that AWS Amplify is not mature enough to be used on real-world applications and I saw why they said that while I was working on my app. Just for one example. My app needed a query that shows all public journals to everyone who visits the site without any authentication. In order for me to do that, I have to utilize the key and value from the database to assign proper auth privileges that only show the data contains value “Public” can be queried by unauthorized users and all other data are still protected by AWS Auth. While I was working on the app, AWS released the public auth for AWS Auth. However, I don’t think it’s still possible to do it with AWS Amplify without setting up a custom Lambda function to take care of that.

It still carries the limitation from all child services. I can’t really say that it’s Amplify’s limitation but you still have to deal with them. For example, changing username base authentication to email-based won’t be easy since that’s how it works on Cognito.

Overall thoughts

The cons and pros that I mentioned here are probably not much different from all the others pointed out for AWS Amplify. However, these are the things that I really noticed while I was working on my app. It took quite a while for me to finally launch the app but I did it and it’s currently running on AWS Amplify.

I think it’s a great technology for quick prototyping. I can see how fast you can build an app if the app is simple enough and you have some basic knowledge of AWS Amplify. However, it definitely requires some learning curve and understanding of some fundamentals such as schema structure that I didn’t really have before I start the project.

I will use AWS Amplify again for future projects as I know it can save lots of time for me even with all the things I mentioned for cons.

Here’s the app I built with AWS Amplify and React called GoodnightJournal.com that is serving over 100,000 members to write private journals and public journals to share in the community.

--

--