Bringing Voicemails Back to Life with Amplify Gen 2

This is a submission for the AWS Amplify Fullstack TypeScript Challenge.

What I Built

So the other day -- which might have been any point in time between a week and three years ago because you know, pandemic time warp -- I was on TikTok laughing out loud because of this video:

...mimicking how extra we used to be recording voicemail greeting messages back in the day.

I remember thinking, "there should be a revival app or something for this!" and when I saw the Amplify Gen 2 AWS Challenge, I thought this could be the perfect opportunity to build one. But, not only that, it gave me the excuse I was missing to start experimenting with Amplify.

For the past week, I’ve been learning a lot but most importantly, having a lot of fun trying things out. What I ended up building is a silly mix of voicemails + scrapbook (for the fellow Brazilians/Indians around here, think Orkut in the early days). I gave it some thought, and the technical requirements I settled on were:

• A user can record a greeting message to show on their profile.
• A user profile shows the user’s greeting message and their *public inbox messages.
• Other users can record and send voicemails to a user profile (and yes, once sent, there is no way back).

Demo

On the finished product, you can listen to a user's greeting message on their profile:

As well as a record and send a voicemail:

And lastly, on your own inbox, see the new ones separated from already opened messages, record a greeting message and manage your account:

You can give it a try yourself here by signing up and leaving me a voicemail. And finally the code can be found here.

IMPORTANT NOTES IN CASE YOU'RE ACTUALLY TRYING IT OUT:

• Once you sent a message, there is no way back, only the receiver can delete it
• Messages sent are public, anyone can listen to them :)
• Works better on desktop

Journey

A moment of oversharing: you probably don’t know (because you don't know me) but I was a backend engineer at Spotify for a bit over a year and got laid off back in December. Since then, I have been learning things for the sake of learning, in an attempt to make programming spark some joy for me again. I came to the conclusion that I want to become a fullstack web dev - I think. So off I went to learn modern frontend (aka React and friends). I’m very much in the beginning of this new journey, which you might notice when going through my code 👀 but yes, I’m excited to write code again!

Back to the app in this submission, the result is a Next.js 14 app to handle routing + tailwindcss and somewhat of a neubrutalism design.

Some learnings along the way:

• It’s kind of hard to find answers on the web with the differentiation of Amplify Gen 1 and Gen 2 sometimes. The docs are very thorough but once you want to try things that are not so explicit in there, you’ll find yourself doing Gen 1 things.
• …But as I said, the docs are very thorough, and a lot of the things I lost myself in google results, I found the actual answer back in the docs (I know, I know, classic).
• Because I couldn’t find a way to use Amplify SDK to list/query Cognito users directly, I introduced the username mapping table to make things easier for me, there are other ways to solve this, but that’s the route I took.
• At first, I wanted to add a lot more features, like the ability for the user to choose which messages go public and which stay private, or record several greetings and choose which one shows in the profile…but I was running out of time for the submission and it kind of felt like overkill.

Connected Components and/or Feature Full

I was able to create a feature-full app by integrating:

• Data -> DynamoDB to store both messages, greetings and a username mapping and AppSync GraphQL API.
• Storage -> S3 for the audio recordings of messages and greetings.
• Authentication -> Cognito with login through email and the use of auth Connected UI Components for the login/signup and account management.
• Functions -> Lambda functions to validate/handle usernames.

By using Amplify Gen 2 setting up and deploying all of these components becomes a very simple task.

That's a wrap

I’m extremely proud of what I built, I got to try out a whole bunch of new things and I now have an even longer list of React/Next.js things I need to dig deeper into. But overall, I’m mostly proud of myself for sticking with the plan throughout the whole week and being able to finish a for-fun project once again.

Amplify Gen 2 makes deploying apps on AWS so freaking simple that it feels like cheating. Once you comprehend what the possibilities are, it's really an incredible tool. I hope you get to send out some voicemails, let me know in the comments if (or should I say when) you find any bugs 🐛