Quote Image Generator

I wanted to expand my AWS cloud skills, so I decided to build a quote generator web app that would fetch quotes from an API and turn them into shareable images. The goal was to use AWS serverless technologies like Lambda, DynamoDB, AppSync and Amplify.
Tech Stack: Next.js, TypeScript, Tailwind CSS, styled-components, ZenQuotes API, GraphQL, AWS Lambda, AWS DynamoDB, AWS AppSync, AWS Amplify

The app needed to get random quotes from the ZenQuotes API, so I set up a Lambda function to make the external API call. To generate the quote images, I wrote a Node script in the Lambda that uses the canvas API to draw text on an image.

Storing data is where DynamoDB came in. I created a table to keep track of all the quotes fetched by users for analytics. The Lambda writes the quote data to DynamoDB each time an image is generated.

For the API layer, I implemented a GraphQL API with AWS AppSync. This allowed me to connect the Lambda and database through a flexible schema. AppSync made it simple to perform CRUD operations on the DynamoDB table.

On the frontend, I built the app in Next.js and TypeScript. Styling was done with Tailwind and styled-components. The app queries the GraphQL API to get quotes and save analytics.

Finally, I used AWS Amplify to deploy the React app and configure the backend services. Connecting everything through the Amplify CLI simplified the setup immensely. I did run into some CI/CD pipeline bugs that took time to debug the build settings.

In the end, I was really happy with how the quote generator app turned out. It gave me valuable experience using Lambda, DynamoDB, AppSync, Amplify and other AWS tools to build a full stack serverless application. The project helped grow my skills in leveraging cloud services for app development.