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:
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:
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.
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.
