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

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

Learn how to use Next.js, TypeScript, and AWS Amplify to build a full stack inspirational quote generator app. You'll learn to use the ZenQuotes' API for fetching quotes and then you'll deep into state management, hooks, debugging, NoSQL database modeling, and much more.

✏️ Course created by @BrianHHough 

✏️ Live Site: https://prod.d162tlmsvnhy1m.amplifyapp.com/

⭐️ Contents ⭐️

⌨️ (0:00:00) 📱 Intro + Demo of App

⌨️ (0:07:17) 📂 Set up your GitHub Repository

⌨️ (0:10:53) 💻 Create a new Next.js + Styled Components project 

⌨️ (0:26:37) 🅰️ Add Google Fonts to the App

⌨️ (0:30:22) 🎑 Create a Dynamic Background

⌨️ (0:53:02) 📑 Create a Footer for our Database Data

⌨️ (1:04:16) 🚪 Create a Pop-Up with Material-UI Modal + Hype4Academy Glassomorphism

⌨️ (1:23:26) 🖼️ Write a Node.js Script to Generate Images in CodeSandbox

⌨️ (1:36:23) 📡 Use Node.js' fetch Function to Call ZenQuotes' API to Generate Images

⌨️ (2:04:33) ⚙️ Use the AWS Amplify CLI to Initialize the Project 

⌨️ (2:12:01) 🔄 Configure the App to Communicate with AWS Amplify

⌨️ (2:16:31) 🌐 Create a GraphQL API with AWS AppSync

⌨️ (2:26:12) 🔒 Add Authentication with Amazon Cognito and IAM

⌨️ (2:30:08) 🌩️ Add an AWS Lambda function to the AWS services stack

⌨️ (2:32:08) ☁️ Deploy our initial AWS CloudFormation stack to the cloud

⌨️ (2:38:00) 🛡️ Add Auth Directives to the GraphQL API

⌨️ (2:41:09) 📝 Write NoSQL Data to Amazon DynamoDB

⌨️ (2:44:34) ⏰ Write a Node.js Script to Generate AWSDateTime in CodeSandbox

⌨️ (2:51:45) 🔎 Query Amazon DynamoDB Data with AWS AppSync

⌨️ (3:11:48) 💬 Create the Quote Generator Pop-Up Modal with useState Hooks

⌨️ (3:35:15) ⏳ Create Loading States for when the API calls AWS Lambda 

⌨️ (4:02:26) 🌠 Create a Button with a Lottie Image

⌨️ (4:11:21) 📥 Write a Function to Download Images to your Device

⌨️ (4:15:22) 🔁 Write a useEffect Hook with Buffer to Decode Base64 Image Strings

⌨️ (4:21:18) 🧪 Test a Mock API Response with a Base64 Encoded String

⌨️ (4:33:49) 🔄 Deploy the Node.js Script to AWS Lambda with Access to Amazon DynamoDB

⌨️ (5:05:45) 🧪 Test the AWS Lambda Function & Debug with Amazon CloudWatch Logs

⌨️ (5:08:13) 🛠️ Modify Installation Script for Sharp to Work Inside of AWS Lambda

⌨️ (5:20:05) 📜 Write a Function to Retrieve Quotes via AWS Lambda, AWS AppSync, and IAM

⌨️ (5:39:18) 🖥️ Add App Hosting with a CI/CD Pipeline using AWS Amplify & GitHub

⌨️ (5:52:47) 🐞 Debug the CI/CD Pipeline by Modifying the AWS Amplify Build Settings

⌨️ (6:02:47) 🚀 Celebrate the Final Build! 

⌨️ (6:04:44) 🎉 Project Wrap Up

🎉 Thanks to our Champion and Sponsor supporters:

👾 davthecoder

👾 jedi-or-sith

👾 南宮千影

👾 Agustín Kussrow

👾 Nattira Maneerat

👾 Heather Wcislo

👾 Serhiy Kalinets

👾 Justin Hual

👾 Otis Morgan

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

Click Here to watch on YouTube: Full-Stack Next.js, TypeScript, and AWS Course – Code a Quote Generator

This video is first published on youtube via freecodecamp. If Video does not appear here, you can watch this on Youtube always.

Udemy Full-Stack Next.js, TypeScript, and AWS Course – Code a Quote Generator courses free download, Pluralsight Full-Stack Next.js, TypeScript, and AWS Course – Code a Quote Generator courses free download, Linda Full-Stack Next.js, TypeScript, and AWS Course – Code a Quote Generator courses free download, Coursera Full-Stack Next.js, TypeScript, and AWS Course – Code a Quote Generator course download free, Brad Hussey Udemy course free, free programming full course download, full course with project files, Download full project free, College major project download, CS major project idea, EC major project idea, clone projects download free