Recipe App submission for AWS Amplify Fullstack Typescript Challenge

Kat Vengoechea — Mon, 27 May 2024 03:54:03 +0000

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.

Lets try to build a Next.js App on AWS Amplify

Kat Vengoechea — Fri, 17 May 2024 15:20:37 +0000

I've tried building an app on AWS Amplify before. Years ago, to gain experience with React Native I began working on a recipe app using AWS backend services - DynamoDB, Cognito, s3. I wasn't able to fully flesh out the app and ended up abandoning it. I tried going back to make changes but by then some of the dependencies were deprecated and packages had been changed.

Since then I've grown as a developer and have always wanted to circle back to my app idea - this time using Next.js.

An opportunity has presented itself with the AWS Amplify Fullstack TypeScript challenge! The goal over the next nine days will be to build a rudimentary recipe app that incorporates data, authentication, serverless functions and file storage. This application will be created using AWS Amplify for Next.js Gen 2.

Come join me as I document my progress and discuss key challenges I face!

#help with using a google domain for heroku

Kat Vengoechea — Wed, 05 Jun 2019 23:56:49 +0000

I created a google domain today and then deployed my personal site to Heroku and set up the synthetic records and custom records. When I try to see if it works the browser says it can't provide a secure connection. Do I just need to wait a bit for it to work? How long does it take?

DEV Community: Kat Vengoechea

Recipe App submission for AWS Amplify Fullstack Typescript Challenge

Demo and Code

Integrations

Lets try to build a Next.js App on AWS Amplify

#help with using a google domain for heroku