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

🔴 LOOKING FOR THE CODE? 🛠️

👉 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
👉 How to build a fully responsive site with Tailwind CSS
👉 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?

👇🏻 FOLLOW ME HERE:

💰 WANT TO SUPPORT THE CHANNEL?

🕐 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
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

[dongyuexu]

This ChatGPT messenger app tutorial is so amazing! The tech stacks used are also fantastic. Truly appreciate!

[InfraiNFORM]

For those getting stuck at 2:48:00 and finding the app not returning the answers from the openai api. Sonny used next 12 in this tutorial and in latest next 13 version routing/route handlers have been changed so the await fetch("api/askQuestion") in the chatInput component in this video no longer works. Anyone who tries to do this tut on Next 13 will get stuck here unless they opt out of using the recommended /app and use /pages instead. I might do a solution video on my channel using next 13 if enough people want to see the fix, like this comment if you want to see it.

[serial_coder]

I love the way you put music on the background. I am starting to build this. Love from 🇳🇵

[SimonLohmann-fxqf]

Nice, had huge Fun building this and learned a lot ! Sonny, you are the best ! Looking forward to new Builds 😎

[JoelFunk]

Definitely here for more AI tutorials. Great video as always, Sonny!

[rajuraman]

hey guys can anybody help me with this, i'm getting ChatGPT was unable to find an answer for that! (Error: Request failed with status code 401)

[VishantNShah]

after connecting api to firebase it is showing error: ChatGpt was unable to generate the response! (Error:Request failed with status code 429)...can anyone help with this

[KaruturiEswarGowthamBEC]

I really like your content. Can you please help me with this error 'yarn' is not recognized as an internal or external command,
operable program or batch file.

[sonlam]

May I ask if you apply transformer architecture to gpt chat messages?

[macgill-xr]

Hello, I needed some help with the server set up
it seems the server is processing my request but is not sending the response to the
saying hat the document path is incorect

[jessehahka]

Great video. I paid for your Github access. When do I get access?

[cristianbits]

Someone knows the name of songs played in this video ?

[dangaMaus]

im gonna be so happy when typescript fades away into dust

[tylertaewook]

Has anybody had issues with setting up firebase security rules? Not sure why normal security rules are not working for his example

[jsovando]

Sonny, how are you? Here Simon from Chile. I work as a concierge and since 2021 I have been enduring mistreatment and bosses who seek to solve their problems at my expense, the last month and a half I am already directly ill (psychically, physically and financially), so I have been studying for a while to be a frontend developer and change my life. A few months ago I found your YouTube channel and I must say that it blew my mind. I am immensely grateful for what you do, from your project-based courses, clones of well-known platforms, and even the music you use in your videos (which I didn't know, and in these difficult times, songs like "Honesty" or "You Blow My Mind" by Hallman help me feel better). Somehow I wanted to thank you and let you know that there are people you are helping to see the light at the end of the tunnel. I hope you are well, greetings!

[hemantwasthere]

This app doesn't seem to be work now, I made it along with you on the live stream it was working when, but now suddenly it crashes when chatgpt did something with openai API key configuration ig

Can you please make video about that, its now working now or is it just me whose app is not working?

[amadeusocean]

Just finished the build myself and deployed it to Vercel. It works! Now, I've got an awesome place to host my own fine-tuned OpenAI models. I trained it with rap-lyrics and made OpenAI slur like a drunk sailor. Thank you so much, Sonny. <3

[almostdaylight]

I'm stuck at the access:denied for google auth part. I've tried everything(create new credentials, cleared browser cache and still nothing. Please can anyone help out. thanks

[skylakefreak]

Those who aren't getting any response at 2:48:00 is due to OPENAI has stopped giving free access to API'S.
Solution: Just setup a payment method for your API and Tie it with limit so you don't overexceed the cost you can't bear, for example like $2.
After doing this things your API will work And generate Response. And you will get your query resolved.

[stidi]

On 2:48:21 I'm always getting "ChatGPT was unable to find an answer to that! (Error: Request failed with status code 429)" 😟 Anyone know how to fix? It never worked even with first request and I havent sent any request before this point.