A job seeker journal application built with AWS Amplify Gen 2

#devchallenge #awschallenge #amplify #fullstack

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

What I Built

I am excited to present you with a job seeker journal application. The app helps users keep track of the jobs they have applied for, and store different CVs and Cover letters connected with jobs.
It leverages AWS Amplify authentication, data, file storage, serverless functions, the AWS Amplify UI React library, and AWS Bedrock with the Mistral:7B model to generate cover letter text.

Demo and Code

The code is available on my personal GitHub repository
The repository is connected to the Amplify console. the example app

Demo gif
Too big for dev.to/cloudinary (also available on GitHub repo Readme page)
Gif

Demo screenshot

Integrations

The diagram above represents the technologies used in the challenge

Authentication

Cognito: Behind the scenes, Amplify creates a Cognito user pool to store all user information and manage authentication for this application. However one of the two Lambda functions uses an IAM authentication function to store some data in a database.

Data

AppSync: Amplify creates an AppSync GraphQL API, enabling us to execute CRUD operations. The frontend app uses the generated client's model methods for get one, get many, create, update, and delete operations. One of the Lambda functions uses the generated client's graphql method and autogenerated GraphQL functions for storing into the database extracted text from the file.

DynamoDB: The Data module in the Amplify project, AppSync uses DynamoDB as the database to persist all information in this NoSQL database.

Serverless functions

Lambda Function: I used the function module in Amplify to trigger extracting text from the uploaded file. The second function is triggered when the user clicks the "Generate Cover Letter" button. It uses the provided data and a special prompt and utilizes AWS Bedrock and the Mistral:7B model to generate a cover letter.

File storage

S3 Bucket: I used an S3 bucket to store Curriculum Vitae files. At the moment, only .docx files are allowed since the third-party library for parsing PDFs fails to do so on Lambda runtime while working fine on a local machine (seems like a CommonJS to ESM issue, or Worker API issue).

Connected Components and/or Feature Full

I created a feature-full app utilizing authentication, data, storage, and functions. Additionally, AWS Bedrock AI is used as an extra feature within one of the functions.

The repository was initiated with the AWS Amplify Gen 2 React Vite template. I used Connected Components such as Authenticator and AccountSettings.ChangePassword. I also utilized many other UI components, including Button, Flex, Input, Label, Alert, View, Link, Table, TableBody, TableCell, TableHead, TableRow, Text, Heading, Grid, Icon, Radio, RadioGroupField, and TextAreaField.

I also decided to use the @mui library for 2 components to expedite development: a NavBar (just copypasted from mui docs) and a SnackBar toast component to improve UX (popup toast after an item is created/updated/deleted or if an error occurs).

Conclusion

I used to work with Azure and Google Cloud, but never with AWS services. I was surprised by how effortless it is to build a full-stack app on AWS Amplify. However, the Amplify Gen 2 documentation wasn't sufficient for me. I had to use DynamoDB, AppSync, and Amplify Gen 1 docs to figure out some things. Still, I was able to build a full-stack app with authentication, S3, data, and even AI in less than 5 days. Nice experience.

The price is fair enough. I spent USD 0.63 for 12 deployments.