DEV Community

Cover image for MelodyLink: A Social Media App for Music Producers
logarithmicspirals
logarithmicspirals

Posted on

1

MelodyLink: A Social Media App for Music Producers

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

What I Built

My app is a very simple social media app for music producers. Producers are able to post their tracks for others to see. Visitors can play the tracks and read what the artist has to say about them.

Demo and Code

The demo of my app is at https://main.d1evgv1d8mr3bs.amplifyapp.com.

The code for the app is at https://github.com/h93xV2/melody-link.

For convenience, here are some screenshots. This one is a view of the homepage as seen by an anonymous guest:

Homepage

This one shows a lists of posts from the perspective of a logged in user, note the additional "Delete" button not visible on the homepage:

Image description

The delete option is only available to the creator of a post.

Integrations

My app uses data, authentication, serverless functions, and file storage.

  • Posts are stored using the Amplify data API.
  • Users are able to login/logout via Amplify authentication. Anybody can view posts, but only authenticated users are able to upload and remove posts.
  • A serverless function is used to check whether or not a given username is already taken.
  • File storage is used for storing the tracks which are attached to posts.

Connected Components and/or Feature Full

My project used the Authenticator connected component to create a simple login/logout UX pattern; it also allowed me to give users the option for a preferred username. Additionally, I used the Storage Manager connected component for managing file uploads during post creation. See the following screenshot for a look at where the Storage Manager is used on the profile page.

New post tab of the profile page

My project is feature full because it uses all four integrations. One of the hardest parts of this for me was figuring out how to check whether or not a username was already taken. To do this successfully, I had to figure out how to allow a serverless Lambda function access to Cognito's UserPool user list.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay