Building a Live Chat Box with AWS Amplify

This is my entry to the #AmplifyHashnode Hackathon!

From my previous post, I indicated that I wanted to build something similar to the TrollBox that I was a part of many years ago.

It was a fun place where people trading the same ticker symbols came together to talk about what they were trading and why they were doing so in a singular chat room.

This is how I built StreetBox, which is now available on the App Store.

The user interface is pretty simple, and I made it conform to as many iOS native features as I could. In the beginning, I wanted to add a tab bar navigator, but eventually ruled that out as something that diminishes from the live chat box experience.

When you first download StreetBox, you are met with a login page with a prompt to register your user or log back in. This uses Amplify's Authentication module that is linked to a user pool with Cognito. The app has "Forgot password" and "Change password" implemented in the deeper view controllers as well in case one of these situations arise - all out of the box!

IMG_1B1902889F75-1.jpeg

As seen below, this is what the main interface when you log in looks like.

IMG_B516B59E17FD-1.jpeg

As you can see, the navigation controls in this app are embedded inside the top navigation bar rather than a tab bar. This leaves the bottom portion of the screen for the user to focus on their message and text input.

To stream the chat messages, I used Amplify's API subscription function that is provided out of the box. Whenever a new "Message" is created in the backend, the publisher will pass the message on to all the instances that are subscribed to the Message model. This allows every user that has the app opened to receive every message that any user creates, thus creating the live chat-box feature.

IMG_458492BB1712-1.jpeg

In this app, I wanted to focus on the user's typing experience and wanted a beautiful interface for them to type on. I thought about what apps I really enjoyed typing on, and reddit came to mind. To make my own app's typing experience better, I made a derivative of Reddit's own chat box in their app and put it into mine.

Planning for future implementations, I also put the name of the chat room (in this case "Main Street") in the box to indicate where the user was going to be sending their message. Right now, everyone defaults to posting a message on "Main Street", but the model schema in the backend has been created for users to create their own chat rooms to subscribe to and chat about more specific topics in the future update!

If we navigate over to the search page, we can search for previous comments mentioned in case you were interested in a particular topic that was mentioned before. This uses Amplify's API with GraphQL that can return queries almost instantaneously using DynamoDB.

IMG_EE32B835C552-1.jpeg

Navigating to the profile page, we see a simple interface for users to see their past comments that they have made and the mentions that they have received in previous comments, in case they missed them. If you @ a user in the chat box, the user will be notified via push notification using AWS Pinpoint that a comment was made and they were mentioned in it.

IMG_72B608805096-1.jpeg

And of course, if we click deeper onto your account name, there are settings that the user can set, such as whether or not they want notifications, their app subscriptions (I included a premium version where the users can change the color of the app!), if they have a question for support, and of course to sign out.

IMG_D0EDB5FCBD03-1.jpeg

Finally, to top off the MVP of the app, I implemented an "Invite Code" feature with the help of the DynamoDB table to keep track of user invites. I got inspiration from Clubhouse's amazing marketing through invite codes and wanted to build out a similar feature. People need to have an invite code to use the app. Although this may prevent new users from joining, it may also help with marketing the app to more familiar audiences rather than random clusters of people. Someone with a friend on the app is probably more likely to stay on it than not.

IMG_5C3DEC077468-1.jpeg

That being said, please feel free to reach out to me to get an invite code if you are interested in trying the app out! Here are a few invite codes that you can try out if you download "StreetBox" on the iOS App Store. If they are already used, feel free to reach out to me to get new ones!

Invite Codes (Please only use 1): fe507728, 710fe518, 4eae0678, 1f10e578, e4780ea6, e11075f8, 707258ef, 75f702e8, 508f71e1, 028fe776, ae68704e, 8740ea6e, f185170e

I would like to thank the AWS Amplify team for creating such an amazing platform for app development - I'm working on making these apps built on Amplify life changing for everyone who uses my apps as well as myself.

Thank you!

No Comments Yet