Recipe App submission for AWS Amplify Fullstack Typescript Challenge

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

I am proud to submit my first ever DEV challenge entry! As a busy mom, this was a challenging but enjoying week+ where I got to combine my two favorite passions - coding and cooking. I have previously before tried to build applications using AWS Amplify but never got a chance to get one deployed. For this challenge, I built a recipe app with AWS Amplify that lets a user create a new profile, login, create a recipe and have those recipes display on the users personal page.

Demo and Code

Here is the AWS Amplify Link to the live site

The source code can be found on GitHub

Here are some images taking you thru the flow of the app.

Integrations

*AWS Cognito
*
For Application authentication I integrated AWS Cognito and the Amplify UI Authenticator into the app which handles creating the user, sending a confirmation email and sign in. I customized the authentication in two ways.

First, I added a user attribute property when defining my authentication that allows a user to enter a preferred username.

Second, in order to tie users to their recipes I created a post confirmation trigger when the user confirms the account.

*AWS Data
*
To manage CRUD operations for recipes and the user profile I integrated AWS Data which let me define my data models then use those same models to read the data from the client. One of the challenges I faced was in trying to read the User Profile information which was tied to the user authenticating with Cognito. I wanted to be able to have a user login, then grab details like username and recipes. In the original tutorial to create a user profile a profileOwner is created with the sub or username. However, I was unable to get that specific user with the profileOwner. I ended up tweaking the confirmation trigger which created the user profile using graphql and created two input variables of email and originally profileOwner. I was able to change profileOwner to id and add other attributes to my user profile and that solved the issue.

*AWS Lambda Function
*
As previously mentioned this was used to trigger the post confirmation create user profile.

Connected Components and/or Feature Full

This application uses AWS for data, authentication and a serverless function. In addition, since I was already using the AWS UI authenticator component, it became easy to integrate the rest of AWS components into my app.

Thank you for reading! I learned so much from this experience and would be happy to go into more detail or answer any questions for you if you're working on your own AWS Amplify app.