Full Stack TypeScript Web App Tutorial - Build a Meme Generator App

Memes Generator API: https://rapidapi.com/meme-generator-api-meme-generator-api-default/api/meme-generator?utm_source=AHSAN-AYAZ&utm_medium=DevRel&utm_campaign=DevRel In this video, you're going to learn how to build a full-stack web application using Angular, NestJS, Tailwind CSS, and Rapid API. We're going to use the Meme Generator API from Rapid API to get and generate some memes. We're also going to deploy this to Heroku so we can run the app over the internet, and share this with our friends too. The topics covered in this tutorial include, but are not limited to: - Using an API from the Rapid API Hub - Creating a Monorepo with NX - Working with Angular and Nest JS in an NX project - Setting up Tailwind CSS in an NX project - Creating API endpoints in a Nest JS, and using Insomnia for checking them - Caching data using files - Working with Reactive Forms in Angular - Deploying NodeJS apps to Heroku for production - Rate limiting the API calls to avoid misuse 👉🏽 Code: https://github.com/AhsanAyaz/sigma-memer ♥️ Thanks to Rapid API for sponsoring this video ♥️ 📚 FREE COURSES at https://codewithahsan.dev/courses 🎥🎤📷 GEAR for Content Creation (contains affiliate links) 🎥🎤📷: https://ahsanayaz.com/gear 👉 Blazing fast SEO with Prerender.io https://prerender.io/?fpr=muhammad-ahsan77 ❤️❤️ Become a Supporter at Patron (because you're awesome): https://patreon.com/muhd_ahsanayaz ❤️ Support the CodeWithAhsan community One-Time-Only: https://buymeacoffee.com/codewithahsan 🎥 Live Streams / Free sessions: https://twitch.tv/CodeWithAhsan 👉 Socials: https://bio.link/muhd_ahsanayaz Timeline: 00:00:00 Introduction 00:01:31 Creating NX based Monorepo for Angular and NestJS 00:23:35 Understanding the entire data flow 00:24:23 Understanding how the Meme Generator API works from Rapid API Hub 00:27:07 Using Rapid API Host and Key in environment variables 00:28:22 Implementing images list API call with caching 00:41:25 Limiting responses for the GET images API call 00:44:25 Implementing Generate Meme API call 00:55:06 Implementing Rate Limiting to the API calls 01:00:42 Frontend (Angular App) Overview 01:02:41 Creating the Meme Generator Module 01:05:23 Implementing lazy loading modules 01:13:24 Adding a Font and setting up Tailwind CSS 01:18:04 Implementing the app's background image 01:19:38 Creating the Angular Service to talk to the backend API 01:20:42 Getting the Memes List from the Backend 01:25:54 Implementing selection of a meme image 01:36:19 Implementing Meme Image Search Query 01:47:05 Implementing Meme Generation Flow 02:22:58 Deploying the app to Heroku