Build a full-stack inspirational quote generator app using Next.js, TypeScript, and AWS Amplify in this comprehensive 6-hour course. Learn to integrate the ZenQuotes API, implement state management and hooks, model NoSQL databases, and deploy your application. Master key concepts including dynamic backgrounds, pop-up modals with Material-UI, Node.js scripting for image generation, AWS service configuration, GraphQL API creation with AppSync, authentication setup, and Lambda function deployment. Gain hands-on experience with database operations, useState hooks, loading states, and image downloading functionality. Explore advanced topics such as CI/CD pipelines, debugging techniques, and optimizing AWS Lambda installations. By the end of this course, you'll have created a fully functional quote generator with cloud hosting and a robust backend infrastructure.
Overview
Syllabus
⌨️ Intro + Demo of App
⌨️ Set up your GitHub Repository
⌨️ Create a new Next.js + Styled Components project
⌨️ ️ Add Google Fonts to the App
⌨️ Create a Dynamic Background
⌨️ Create a Footer for our Database Data
⌨️ Create a Pop-Up with Material-UI Modal + Hype4Academy Glassomorphism
⌨️ ️ Write a Node.js Script to Generate Images in CodeSandbox
⌨️ Use Node.js' fetch Function to Call ZenQuotes' API to Generate Images
⌨️ ⚙️ Use the AWS Amplify CLI to Initialize the Project
⌨️ Configure the App to Communicate with AWS Amplify
⌨️ Create a GraphQL API with AWS AppSync
⌨️ Add Authentication with Amazon Cognito and IAM
⌨️ ️ Add an AWS Lambda function to the AWS services stack
⌨️ ☁️ Deploy our initial AWS CloudFormation stack to the cloud
⌨️ ️ Add Auth Directives to the GraphQL API
⌨️ Write NoSQL Data to Amazon DynamoDB
⌨️ ⏰ Write a Node.js Script to Generate AWSDateTime in CodeSandbox
⌨️ Query Amazon DynamoDB Data with AWS AppSync
⌨️ Create the Quote Generator Pop-Up Modal with useState Hooks
⌨️ ⏳ Create Loading States for when the API calls AWS Lambda
⌨️ Create a Button with a Lottie Image
⌨️ Write a Function to Download Images to your Device
⌨️ Write a useEffect Hook with Buffer to Decode Base64 Image Strings
⌨️ Test a Mock API Response with a Base64 Encoded String
⌨️ Deploy the Node.js Script to AWS Lambda with Access to Amazon DynamoDB
⌨️ Test the AWS Lambda Function & Debug with Amazon CloudWatch Logs
⌨️ ️ Modify Installation Script for Sharp to Work Inside of AWS Lambda
⌨️ Write a Function to Retrieve Quotes via AWS Lambda, AWS AppSync, and IAM
⌨️ ️ Add App Hosting with a CI/CD Pipeline using AWS Amplify & GitHub
⌨️ Debug the CI/CD Pipeline by Modifying the AWS Amplify Build Settings
⌨️ Celebrate the Final Build!
⌨️ Project Wrap Up
Taught by
freeCodeCamp.org
Related Courses
-
Build a GraphQL API with AWS CDK and AppSync
-
Building Serverless Web Applications with React & AWS Amplify
-
Build a React App with Authorization and Authentication using AWS Amplify
-
Full Stack TypeScript with AWS Cloud Development Kit v2
-
Code a Reddit Clone with React, Next.js, Firebase v9, Chakra UI – Full Course
-
Up and Running with AWS Amplify Functions
