🔴 Let’s build a DALL·E Image Generator with REACT.JS! (Chat GPT, 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

📩 Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges

Join me as show you how to build a DALL·E 2 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