Full-Stack Next.js, TypeScript, and AWS Course – Code a Quote Generator

Full-Stack Next.js, TypeScript, and AWS Course – Code a Quote Generator

freeCodeCamp.org via freeCodeCamp Direct link

⌨️ 📱 Intro + Demo of App

1 of 33

1 of 33

⌨️ 📱 Intro + Demo of App

Class Central Classrooms beta

YouTube playlists curated by Class Central.

Classroom Contents

Full-Stack Next.js, TypeScript, and AWS Course – Code a Quote Generator

Automatically move to the next video in the Classroom when playback concludes

  1. 1 ⌨️ 📱 Intro + Demo of App
  2. 2 ⌨️ 📂 Set up your GitHub Repository
  3. 3 ⌨️ 💻 Create a new Next.js + Styled Components project
  4. 4 ⌨️ 🅰️ Add Google Fonts to the App
  5. 5 ⌨️ 🎑 Create a Dynamic Background
  6. 6 ⌨️ 📑 Create a Footer for our Database Data
  7. 7 ⌨️ 🚪 Create a Pop-Up with Material-UI Modal + Hype4Academy Glassomorphism
  8. 8 ⌨️ 🖼️ Write a Node.js Script to Generate Images in CodeSandbox
  9. 9 ⌨️ 📡 Use Node.js' fetch Function to Call ZenQuotes' API to Generate Images
  10. 10 ⌨️ ⚙️ Use the AWS Amplify CLI to Initialize the Project
  11. 11 ⌨️ 🔄 Configure the App to Communicate with AWS Amplify
  12. 12 ⌨️ 🌐 Create a GraphQL API with AWS AppSync
  13. 13 ⌨️ 🔒 Add Authentication with Amazon Cognito and IAM
  14. 14 ⌨️ 🌩️ Add an AWS Lambda function to the AWS services stack
  15. 15 ⌨️ ☁️ Deploy our initial AWS CloudFormation stack to the cloud
  16. 16 ⌨️ 🛡️ Add Auth Directives to the GraphQL API
  17. 17 ⌨️ 📝 Write NoSQL Data to Amazon DynamoDB
  18. 18 ⌨️ ⏰ Write a Node.js Script to Generate AWSDateTime in CodeSandbox
  19. 19 ⌨️ 🔎 Query Amazon DynamoDB Data with AWS AppSync
  20. 20 ⌨️ 💬 Create the Quote Generator Pop-Up Modal with useState Hooks
  21. 21 ⌨️ ⏳ Create Loading States for when the API calls AWS Lambda
  22. 22 ⌨️ 🌠 Create a Button with a Lottie Image
  23. 23 ⌨️ 📥 Write a Function to Download Images to your Device
  24. 24 ⌨️ 🔁 Write a useEffect Hook with Buffer to Decode Base64 Image Strings
  25. 25 ⌨️ 🧪 Test a Mock API Response with a Base64 Encoded String
  26. 26 ⌨️ 🔄 Deploy the Node.js Script to AWS Lambda with Access to Amazon DynamoDB
  27. 27 ⌨️ 🧪 Test the AWS Lambda Function & Debug with Amazon CloudWatch Logs
  28. 28 ⌨️ 🛠️ Modify Installation Script for Sharp to Work Inside of AWS Lambda
  29. 29 ⌨️ 📜 Write a Function to Retrieve Quotes via AWS Lambda, AWS AppSync, and IAM
  30. 30 ⌨️ 🖥️ Add App Hosting with a CI/CD Pipeline using AWS Amplify & GitHub
  31. 31 ⌨️ 🐞 Debug the CI/CD Pipeline by Modifying the AWS Amplify Build Settings
  32. 32 ⌨️ 🚀 Celebrate the Final Build!
  33. 33 ⌨️ 🎉 Project Wrap Up

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.