A job seeker journal application built with AWS Amplify Gen 2
Tags: devchallenge, awschallenge, amplify, fullstack
Published: 2024-05-25 15:00:43

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

## 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
<!-- Share a link to your Amplify App and source code. Include some screenshots as well. -->
- The code is available on my personal GitHub [repository](https://github.com/samvimes01/amplify-job-search-diary)
- The repository is connected to the Amplify console. [the example app](https://main.d3sbabnt1mitvg.amplifyapp.com/)

**Demo gif**
Too big for dev.to/cloudinary (also available on GitHub repo Readme page)
[Gif](https://postimg.cc/LJPH3f4x)

**Demo screenshot**
![Add job page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3znnjxaexm81ex7she2r.png)

## Integrations
<!-- Tell us which qualifying technologies you integrated, and how you used them. -->

![AWS diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6drdwnxxarz4wtwxo61.png)

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


<!-- Reminder: Qualifying technologies are data, authentication, serverless functions, and file storage as outlined in the guidelines -->

**Connected Components and/or Feature Full**

<!-- Let us know if you developed UI using Amplify connected components for UX patterns, and/or if your project includes all four integrations to qualify for the additional prize categories. -->

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

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

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

<!-- Thanks for participating! -->