Learn how to build a full-stack inspirational quote generator app using Next.js, TypeScript, and AWS Amplify. The course covers state management, hooks, debugging, NoSQL database modeling, and more. Students will acquire skills in setting up GitHub repositories, creating dynamic backgrounds, using APIs, deploying AWS services, and implementing authentication. The teaching method includes hands-on coding sessions and demonstrations. This course is intended for individuals interested in full-stack development and cloud computing.
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
-
Code a Reddit Clone with React, Next.js, Firebase v9, Chakra UI – Full Course
-
Full Stack TypeScript with AWS Cloud Development Kit v2
-
Build a React App with Authorization and Authentication using AWS Amplify
-
Next.js React Framework Course – Build and Deploy a Full Stack App From scratch
5.0 -
Building Serverless Web Applications with React & AWS Amplify
