🔴 React.js Clones by PAPA React - 🔴 Let’s build a AI Image Generator with REACT.JS! (ChatGPT, Next.js 13.2, Microsoft Azure, TS)

❗️ Sign up to get the Code for FREE here (Form must be submitted, not skipped!): https://aka.ms/Sonny 🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course 🫂 Join my Community, "University of Code" for FREE: https://www.universityofcode.com 🔴 LOOKING FOR THE CODE? 🛠️ https://links.papareact.com/github Join me as show you how to build a AI Image Generator app with Next.js 13. You'll learn the following in this build: 👉 How to use the DALL·E 2.0 API to generate Art with input prompts! 👉 Set up & Deploy your own Microsoft Azure Functions to the cloud! 👉 How to upload/download images to & from Microsoft Azure Blob Storage securely! 👉 How to use the ChatGPT API to create suggestion prompt's for your AI Art! 👉 Create API endpoints in your Next.js 13.2 app to securely manage requests 👉 How to build a fully responsive site with Tailwind CSS 👉 Leverage the power of Server components in Next.js 13 (and how to use client components alongside them correctly!) 👉 How to use the new App folder structure in Next.js 13! 👉 Dynamic page routing in Next.js 13 👉 Add Heroicons to level up your app's UI! 👉 How to use TypeScript to reduce the overall number of Bugs and Errors 👉 How to deploy the final build on Vercel! + So Much More! 🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST? Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter 👇🏻 FOLLOW ME HERE: Instagram: https://links.papareact.com/instagram Facebook: https://links.papareact.com/facebook LinkedIn: https://links.papareact.com/linkedin Twitter: https://links.papareact.com/twitter Discord: https://links.papareact.com/discord 💰 WANT TO SUPPORT THE CHANNEL? Donate here: https://links.papareact.com/donate Grab some PAPA Merch: https://links.papareact.com/merch 🕐 TIMESTAMPS: 00:00 Introduction 01:04 Build Showcase 03:09 Free Code for this Build 05:30 Build Tech 06:13 Microsoft Azure Sponsorship 07:56 Setting up Microsoft Azure Functions 09:19 Trying to Set Up Next.js & Tailwind CSS 12:34 Setting up Next.js from Scratch 14:25 Setting up Tailwind CSS 18:41 Initialising the Build 21:51 Recommended VS Code Extensions 23:00 Build Layout 24:43 Building the Header Component 27:24 Building the Left Side of the Header Component 31:38 Building the Right Side of the Header Component 36:41 Building the Prompt Input Component (1/2) 45:46 Setting up OpenAI API Keys 51:53 Setting up an API Endpoint (1/2) 1:00:09 Implementing useSWR 1:04:53 Implementing Microsoft Azure Functions 1:19:12 Using the Node Version Manager Library 1:20:15 Live Debugging 1:21:47 Implementing Microsoft Azure Blob Storage 1:25:28 Implementing the Chat GPT Prompt Suggestion Functionality 1:43:21 Setting up the Rest of the API Endpoints (2/2) 1:46:43 Implementing DALL·E 2 Generate Image Functionality (1/2) 1:52:00 Setting up a SAS Token with Microsoft Azure 1:59:44 Implementing DALL·E 2 Generate Image Functionality (2/2) 2:12:37 Implementing the Generate Image & Use / New Suggestion Functionality 2:33:30 Building the Images Component 2:53:07 Building the Prompt Input Component (2/2) 2:56:59 Creating the Client Provider Component 2:59:30 Implementing React Hot Toast Library for Notifications 3:04:23 Deploying the Azure Functions 3:14:39 Deploying to Vercel 3:19:19 Final Deployed Build Demo 3:22:39 Build Summary 3:23:13 Outro Let’s get it PAPAFAM 🔥. DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with ChatGPT, DALL·E, OpenAI or/and any of its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes. #chatgpt #dalle2 #nextjs #javascript #openai #javascript #tailwindcss #tutorial #android #reactjs #ai #gpt4