Build an Inspirational Quote Generator (AWS, NextJS, TypeScript, NodeJS) - 6 HOUR CLOUD PROJECT!
In this epic build, we're going to create a completely serverless quote generator using AWS as our cloud back-end and NextJS/TypeScript as our front-end.
📩 SIGN UP FOR MY NEWSLETTER: https://www.techstackplaybook.com/signup
👨💻 GET THE PROJECT CODE: https://www.techstackplaybook.com/resources
The most epic part is...we're going to be generating images in a server without any expensive software or hardware.
What you'll learn in this build is how to:
👨💻 Build a ~cool~ front-end for a quote generator
💡 Write a script to fetch a random inspirational quote from ZenQuotes' API
🌩 Use AWS to generate a quote graphic for you in the cloud & then let you download the file
🔥 Deploy live
This build combines ZenQuotes' amazing API for fetching quotes, AWS Amplify for framework deployment and hosting, NextJS and Typescript for our front-end, styled-components to handle our styling, and some spicy backend scripting 🌶 Let me know where you're tuning in from below and how you like this build! ️
Time stamps:
00:00:00 Welcome!
00:05:12 Preview Demo + Solution Architecture of the build
00:15:51 NextJS + TypeScript + GitHub setup
00:26:20 Configure the Styled Components framework
00:35:57 Build the front-end and styles
01:19:37 Initialize AWS Amplify and deploy to AWS
01:29:39 Write a NodeJS script for image generation in Replit
01:39:15 Intro to using APIs in Node.js with ZenQuotes + Debugging
02:20:08 Debugging 101 Reflection
02:21:58 Final NodeJS script walkthrough
02:33:54 Add a Lambda Function via the Amplify CLI
02:40:04 Create a client-side function to run AWS Lambda
02:49:48 Write a GraphQL schema for a public query of Lambda + DynamoDB
03:03:28 Update our AppSync API's default authorization method to IAM
03:17:40 Create a DynamoDB object to track the number of quotes generated
03:18:43 Use OpenAI's ChatGPT to generate AWSDateTime strings for DynamoDB
03:21:40 Write a function to query a DynamoDB object's Global Secondary Index
03:34:36 Create a pop-up to handle the loading of/response from AWS Lambda
04:18:09 Refactor our NodeJS script from Replit to run in AWS Lambda
04:37:10 Update AWS Lambda to export a Base64 encoded string
04:47:39 How to switch careers to become a front-end developer
04:52:58 The difference between a front-end framework and library
05:01:19 Testing AWS Lambda in the AWS Management Console
05:11:36 Update the authentication configuration with the Amplify CLI
05:19:13 Wrap our AWS configuration around our application
05:22:15 Testing the DynamoDB updates via AWS Lambda invocations
05:24:40 Create blobUrls to visualize each Base64 string with TypeScript/Buffer
05:29:43 Add a download image function to save the file to our computer
05:39:37 Final demo + architecture walkthrough of the finished app 🚀
Let me know if you found this post helpful! And if you haven't yet, make sure to check out these free resources below:
Sign up for my newsletter: Email List
Follow my Instagram for more: @BrianHHough
Watch my latest YouTube videos for more
Listen to my Podcast on Apple Podcasts and Spotify
