🔴 Let’s build an AI Chat Messenger with REACT.JS! (Next.js 13, Firebase, Tailwind, TypeScript)

🔥 Save 10% on Hostinger using code SONNY here 👉 https://www.hostinger.com/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 it with Next.js 13. You'll learn the following in this build: 👉 How to use the ChatGPT API to create your own AI chat bot! 👉 How to use different ChatGPT models when prompting the OpenAI API's 👉 Create API endpoints in your Next.js app to securely manage requests 👉 Connect Firebase v9 to your Next.js 13 application to create & store REALTIME chats with chatGPT 👉 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! 👉 How to connect the deployed domain name to a CUSTOM domain name with Hostinger 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:03 Build Showcase 06:01 Build Tech 08:35 Hostinger Sponsorship 09:50 Zero to Full Stack Hero & University of Code 11:08 Setting up OpenAI API Key (1/3) 13:00 Setting up Firebase 14:45 Setting up Next.js & Tailwind CSS 17:16 Implementing Next.js v13 Features 23:18 Build Layout 27:49 Building the Home Page (1/2) 31:57 Implementing Heroicons 33:59 Building the Home Page (1/2) 39:03 Building the Side Bar Component (1/5) 42:40 Building the New Chat Component 46:16 Building the Side Bar Component (2/5) 49:31 Implementing NextAuth Authentication with Firebase 1:04:23 Building the Login Screen & Functionality 1:14:01 Building the Side Bar Component (3/5) 1:18:01 Setting up & Implementing Cloud Firestore 1:23:34 Implementing Create New Chat Functionality 1:33:13 Connecting to the Cloud Firestore Database 1:37:43 Building the Chat Row Component 1:50:32 Building the Side Bar Component (4/5) 1:52:09 Implementing Delete Chat Functionality 1:55:11 Building the Chat Section of the Home Page 1:58:50 Building the Chat Component (1/3) 1:59:11 Building the Chat Input Component (1/2) 2:08:15 Implementing Messaging Functionality (1/2) 2:11:58 Setting up Type Definitions 2:12:27 Implementing Messaging Functionality (2/2) 2:13:48 Implementing React Hot Toast Library for Notifications 2:21:19 Setting up OpenAI API Key (2/3) 2:35:12 Setting up Firebase Admin 2:43:56 Setting up OpenAI API Key (3/3) 2:50:56 Building the Chat Component (2/3) 2:53:33 Building the Message Component 2:59:03 Building the Chat Component (3/3) 3:05:26 Creating the Model Selection Component 3:05:57 Explaining & Implementing useSWR 3:09:18 Implementing React Select Library 3:15:05 Building the Side Bar Component (5/5) 3:16:43 Building the Chat Input Component (1/2) 3:19:38 Testing Different ChatGPT Models 3:23:33 Deploying to Vercel 3:28:37 Final Build Demo 3:30:20 Implementing a Custom Domain Name using Hostinger 3:36:28 Build Summary 3:38:45 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, OpenAI or/and any of it's subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes. #chatgpt #reactjs #nextjs #javascript #openai #javascript #tailwindcss #tutorial #android #reactjs #ai