Introducing Songzy: The Fun New Way to Share and Explore Music!

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

What I Built

Hey everyone! I’m excited to share my project Songzy with you!

Given the tight time window and only being able to work on this part-time, it’s obviously a work in progress, but I’m really proud of how it has come along. Songzy is an app where you can upload your own music and explore new tracks in an innovative way.

The explore page is my favorite part — there's a slider that lets you zoom out to see more songs, creating a giant, interactive grid of cover art. It’s a fun way to discover music, and I hope you’ll enjoy it!

Demo and Code

You can visit the deployed project here and the code here.

Here is a screenshot tour of the app so far:

1. Login

2. Upload a song with title, cover art, and audio file

3. See your songs

4. Explore others’ songs. Just hover (desktop) or click (mobile) on one to play it.

5. Drag the slider and see even more songs!

Integrations

Authentication

Amplify's Authenticator component made handling user login and sign-up processes incredibly simple.

Data

I utilized Amplify’s defineData function and schema creation to set up and manage the data models for Songzy. This approach allowed me to hook up the schema and generate queries effortlessly. Figuring out the authorization allowances took a bit of time, but once sorted, it provided a straightforward solution for managing access.

An Interesting Use Case

On the Explore Page, I needed to programmatically adjust my query as the slider is dragged. I enjoyed that Amplify’s querying syntax made it simple enough to:

• Filter out songs that did not belong to the user.
• Limit the number of results based on a calculation of how many songs could fit on the screen given the screen size and slider position.
• Use the nextToken to avoid repeating song retrieval in the query.

Functions

• Image Compression Function: I configured my storage access to allow a function called compressImage to create and read files triggered by the onUpload event. Initially, I faced several challenges with image compression libraries in the function, but I eventually found a solution using a combination of the jimp and jpeg-autorotate libraries (the latter prevented unwanted image rotation). Additionally, I encountered an issue with the function running recursively due to replacing the same file key repeatedly. I solved this by using the Metadata property to mark compressed images and prevent the function from reprocessing them.

File Storage

For file storage, all images and music files are securely stored in Amazon S3:

• I used the StorageManager component in Amplify Forms to handle song uploads. This integration allowed me to connect a GraphQL query seamlessly, creating database entries and properly uploading files to S3. The S3 file link is tightly integrated with the database entry field for new songs.
• The StorageImage component made it easy to retrieve images from S3, and I used the getUrl function to handle the retrieval of audio files.

Thoughts

Overall, I loved how I didn't need to configure much in Amplify's UI, although I believe more documentation on the nuances and different possibilities of the code configuration would be beneficial.

I loved the sandbox - it made developing with a realistic backend so simple. Unfortunately, I was not able to determine if there’s a visual way to see the data and logs in the sandbox. I should have asked in the help thread. If this is not possible, that would be a great addition to the feature.

Lastly, the experience of having everything connected so seamlessly, including deploys tied in with Git, was awesome.

Connected Components

• Authenticator: This component made it super easy to handle user sign-ups and logins.
• Amplify Forms: To handle song creation.
• StorageManager: To manage file uploads.
• StorageImage: To display images stored in S3.

Feature Full

Songzy includes all four key integrations: data, authentication, serverless functions, and file storage.

Future Features

I wanted to add a section here to communicate my full vision since it’s been such a fun idea and project.

• Ability to like songs on Explore Page, and they show up in your Liked Songs Page.
• Ability to create your artist name (at first) and personalize your profile page (later).
• Optimize audio: Compress the audio files.
• Optimize images: Have the image compression function create images at different sizes so that the Explore Page set to the fullest will load songs faster.
• Optimize loading files in general: Use CloudFront in combination with S3.
• Have the explore page show songs completely at random, or at least ordered by newest to oldest.
• And lastly, the UI could use more work of course - unifying theming, adding proper routing, adding better loading placeholders for songs, ensuring that the explore page’s song modal shows up in the right place regardless of screen size and device, etc.

Conclusion

Leveraging AWS Amplify's powerful suite of tools made it possible to bring my vision to life quickly and efficiently. From handling user authentication and tightly coupling forms to data to file storage to functions, the experience was quick and efficient despite the occasional roadblock (usually caused by configuration issues that were difficult to find documentation on).

While there are still areas to improve and features to add, I'm excited about the foundation that's been laid with AWS Amplify Gen 2. I very much appreciate the code-first approach to architecture. This project has not only deepened my understanding of the AWS tech suite but also highlighted the potential of what can be achieved with the right tools.

Lastly, I invite you to explore Songzy. It would be so cool if everyone created accounts and uploaded songs with nice cover art to grow the Explore Page!

Your feedback and interaction will be invaluable in encouraging me to continue to refine and enhance the app.

Thanks for reading!
Jared