πŸ”΄ Let’s build a ChatGPT Messenger with REACT.JS! (Next.js 13, Firebase, Tailwind CSS, TypeScript)

Sonny Sangha

πŸ”₯ 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

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

Join me as show you how to build a ChatGPT Messenger 2.0 app 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