Recipe App submission for AWS Amplify Fullstack Typescript Challenge
Tags: devchallenge, awschallenge, amplify, fullstack
Published: 2024-05-27 03:54:03

This is a submission for the [The AWS Amplify Fullstack TypeScript Challenge ](https://dev.to/challenges/awschallenge)*

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](https://master.dnza87n9su44c.amplifyapp.com/) is the AWS Amplify Link to the live site 

The source code can be found on [GitHub](https://github.com/katvengo/recipe-app/tree/master/frontend)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t43ywpnjjwor5il1rs89.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkan25y6s1wuoaods455.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/srj5g3jy3822aym1iu33.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f42wix81w734chtcmsgi.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzmz8ecg89hd97mhotml.png)

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