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

[@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 KZbin 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!

[@SonnySangha]

This is an incredibly powerful message - thank you for sharing your story and I’m grateful I was able to positively impact your life 🙏🏽 Keep growing brother!!! 🔥 #PAPAFAM

[@Dr-dyrane]

This is so true!!! Thanks a lot Sonny!!!

[@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.

[@tejaswavhal2626]

I am using page directory for api then also i am facing the same error. please provide a solution

[@InfraiNFORM]

@@tejaswavhal2626 which next version?

[@tejaswavhal2626]

@@InfraiNFORM i am using 13.3.4, can you please give me your code

[@dancrha5978]

Can you please make a video on how to fix it or share your code repository? I spent my whole day doing this just for it to fail 🤦‍♂️😂

[@hacun3jr]

please do a video

[@amadeusocean1201]

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.

[@024ashish5]

Your github link please

[@tntextreme1965]

Fake. Show your GitHub profile to prove lol. Just another spam text

[@kedarvyas7134]

typescript is used or firebase is used in this video for backend?? please answer !!

[@beastnighttv]

@@kedarvyas7134 both are different

[@BizInsightHub1]

can u share please ur github repo link i want to check some code error that i am facing

[@RobShocks]

Wow, wow, wow. I have never enjoyed a tutorial as much as this. The energy and vibe is unreal from Sonny it felt like a live hackathon. How he manages to do this live for 3 hours along with keeping the stream pumped is next level. Can't wait for more.

[@SonnySangha]

Thank you I’m glad you liked it!!!

[@TaderSalahEddine]

Wow, Sonny, your course on building a blog with Next.js, Sanity, TypeScript, Tailwind CSS, Auth, CMS, and Preview Mode was truly amazing! I just finished it and I'm blown away by the knowledge and expertise you shared. Your passion for web development shines through in every aspect of the course. From morocco I am grateful for the opportunity to learn from you. I am now planning to connect Sanity with ChatGPT to generate content more efficiently. I stumbled upon your channel and found this video and I just had to leave a comment to express my gratitude. Keep up the fantastic work, Sonny! You are an inspiration to us all.

[@SonnySangha]

Thank you so much for the kind words! Keep crushing, Sanity x ChatGPT sounds like an awesome combo!!! 🔥 #PAPAFAM

[@kedarvyas7134]

typescript is used or firebase is used in this video for backend?? please answer !!

[@rajfekar4839]

@@kedarvyas7134 firebase

[@cgescape]

This thing is crazy... actually giving me realistic busisness insights... tried its advice.. and actually givin profit.. feels like ive unleashed the genie outta the bottle..

[@jackmullin8962]

1100 likes in 4 hours! Sonny you are smashing it lad!!! Dubai style lol 😎 just landed my first react native developer interview cause of you! I owe you man. Been hard work grafted did your deliveoo but added way more features and design style spent ages on it. Learnt / learned so much. Thanks bro!

[@jackmullin8962]

Already got a degree but finding your channel has really helped me. Your a legend 👏 🙌

[@SonnySangha]

This made my day thank you for sharing dude! #PAPAFAM

[@jackmullin8962]

@@SonnySangha I owe you!!! You are epic! Don't get me wrong still plenty plenty of hard work and effort for me to do but last 4-5 months been cool. I love coding again. ♥️

[@SonnySangha]

@@jackmullin8962 you’ve already repaid me by smashing it in your career dude, keep growing! 💪🏽🔥

[@abdulfaridolakunle9304]

@@jackmullin8962 I am very happy for you, How can I get in contact with you. I'm also a reactjs developer, I will like to have a chat with you. Hoping for your positive response

[@dongyuexu4823]

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

[@SonnySangha]

Thank you I’m glad you enjoyed it!!!

[@maxbettinelli9025]

+1 for Solidity and Ethereum based tutorials (ethersjs, wagmi, rainbowkit). Huge fan of videos showcasing projects start to finish. Til the next one!

[@kedarvyas7134]

typescript is used or firebase is used in this video for backend?? please answer !!

[@maxbettinelli9025]

@@kedarvyas7134 typescript is used but also fire base for backend

[@basb6230]

Very much liked watching Steve Carell create this ChatGPT Messenger. Fantastic character!

[@harishvithal584]

You are great sir, your way of explanation while coding is just amazing, this channel will get millions of subscribers definitely! alot of wishes for you just keep getting more and more success and keep shining and keep making this type of content for us... really thankfull to you from bottom of my heart!!!

[@ErlWable]

I had forgotten why I was watching your videos, but what a reminder on who you are!!! BLASTED!!!!

[@SonnySangha]

I appreciate that & I’m glad you’re enjoying the content!!! #PAPAFAM 🔥

[@skylakefreak3665]

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.

[@Rantalytics]

sonny would loveeee you to go deeper on models and AI based projects. Thank you so so much for your time and effort. You're doing incredible work and i'm grateful to have found this channel! much love

[@kedarvyas7134]

typescript is used or firebase is used in this video for backend?? please answer !!

[@SimonLohmann-fx2qf]

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

[@youngwolf1009]

This tutorial looks really interesting, im definitely gonna come back after learning typescript.

[@kedarvyas7134]

typescript is used or firebase is used in this video for backend?? please answer !!

[@CMNDSAUDIO]

76 thousand views and only 2.5 thousand likes. kinda fucked up considering this is super dope content as far as tutorials go, its modern, useful, and high energy. Def deserves more love.

[@SuperPompey77]

Because this is my favorite channel on the whole internet, I'm going to get the best membership there is and I'm going to come out to Dubai and give it to Sunny personally. Maybe in the spring. Got to go to England anyway so might as well take a detour to Dubai.

[@serial_coder]

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

[@SonnySangha]

Thank you so much 😀🙏🏽🔥

[@joc414]

Sonny your channel is AWESOME 🔥🔥🔥 This is my first time following your stream. Thank you so much!

[@JoelFunk]

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

[@kedarvyas7134]

typescript is used or firebase is used in this video for backend?? please answer !!

[@tokyodynamite6497]

plus, you did get me my job as a Junior Full Stack Engineer. so ty for that as well.

[@50shadesofgrade]

Off the chain😁

[@mayankughade3585]

This video gained you a subscriber, crazy build loved it !!!!!!!!

[@tylertaewook]

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

[@Lamsa_TV]

can't love you less Sonny, keep doing the amazing builds, you're really pushing our skills with more than the speed of light😄, can't be tired of referring you channel to others

[@024ashish5]

can u provide ur github link bhai

[@kedarvyas7134]

typescript is used or firebase is used in this video for backend?? please answer !!

[@rohansingla4270]

Sony bro, I really want to thank you for helping so much with ur livestreams and videos i learn a lot from you. Your teaching skills are amazing bro. You have taken my coding skills to a professional level. You are doing a Great job brother keep it up !!

[@kedarvyas7134]

typescript is used or firebase is used in this video for backend?? please answer !!

[@rohansingla4270]

@@kedarvyas7134 firebase as backend

[@thexarviz]

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.

[@thexarviz]

personal note: 2:48:12 is where i left.

[@rajuraman5773]

this is so sick build

[@TheJonChristie]

Impressive and seamless tutorial Sonny. I'll be checking you out moving forward. Thanks for the incredible value 👍.

[@AleksandrLubovskiy]

Thanks for tutorial, all feature is working from start to finish!

[@codewithtonny8176]

amazing indeed 💯🔥🔥

[@SonnySangha]

Thanks bruh! 🔥🤙🏽

[@Sebastian-fj1wn]

Again. The best course you can find. GRACIAS

[@Relaxwithpeter254]

I lov the way you enjoy what you do🔥

[@HenokGebresenbet]

great job papa react love from Ethiopia

[@willowPAPA]

One of your best Sonny! Loved it, keep up the great work

[@53strat55]

Nice, I want to learn a bit about backend and firebase so this is perfect.

[@SonnySangha]

Awesome!

[@pdovhomilja]

Thank you Sonny for your super amazing video. I love all that you do for developers. Every time I code with you I feel great energy and flow. Thank you once again, bro. Czechia is with you!

[@kedarvyas7134]

typescript is used or firebase is used in this video for backend?? please answer !!

[@pdovhomilja]

@@kedarvyas7134 This tutorial is TypeScript and FireBase. There is Next.JS which is FullStack = frontend+backend

[@chetanthakur8073]

Great man🎉

[@DigitalAlchemyst]

​ @InfraiNFORM So I actually made it a little further before I had problems, It wasnt until trying to bring the messages into the application durring the 2:53:33 Building the Message Component section I start to get the error at run time : Unhandled Runtime Error Error: Objects are not valid as a React child (found: object with keys {_id, name, avatar}). If you meant to render a collection of children, use an array instead. Up until this chapter everything worked as expected, the app will still run showing the front page, login logout, i can create new chats and navigate between chats, how ever if i send a message i get this error, if i attempt to navigate to any chat with a message history I get this error, and if i delete any chat that has a message history I get the error how ever the chat does delete and if i refresh the homepage it will be gone I have gone back from 1:23:34 Implementing Create New Chat Functionality and compared my code to sonnys twice, I could not find any differences the second run through , i have also been over multiple sections between these 2 time stamps several times I did have issues with the next auth api file being in the app directory I had to create a pages directory and place it in the same structure in there and things worked well, I have tried dropping the askQuestion api file into both /app/api and /pages/api; i hhave also tried calling that as /app/api/askQuestion /pages/api/askQuestion & /api/askQuestion with the file in both locations, I now believe that this is again due to the changes between next 12 and 13 furthermore 13.4 and I was able to get the toast notifications working where everyone else seems to be stuck at

[@harshshukla_5544]

hey im having some issues with this project from 2:48:00 minute also not able to fetch data from open ai api can you resolve those if you've made upto little further in this project ?

[@bLitzKinG20]

Same

[@abcoolguy]

Hey sonny. Great video as usual!!! After watching you video i created my own, hosted on vercel and its working perfectly. Your .env file tip was really helpfull. Thanks a lot and keep it coming!!!

[@zamandahar8530]

Would you please share your repo with me ? i need the code because sony sangha not providing the repo for free

[@abhinandangautam5583]

What I like about sonny is? that he guide in proper way Also paying for repo is good point otherwise people can just put these project inside there resume without implementing it.

[@jingli9232]

you're a gift!!!! learned so much from you

[@renatomignogna6895]

Great code along, thanks for sharing this. learning loads from your tutorials. Keep up the great work!

[@shivamshah6579]

I can't even explain how Papa React is changing the IT industry scene. I've been closely following him since the clever programmer days, Just completed building this app and deployed successfully. Sonny my Man, you have earn respect from us . ++Respect

[@Nn0W0nN]

You say “keep smashing that like button” but if I smash it twice it is as if I never smashed it all. So maybe something like “ if you have not already “ smash that like button now. … idk any thoughts? Thanks. 🙏 Please don’t take this the wrong way because I do think you are doing fantastic work!!!

[@raymondc.alvarezvelez5869]

I went through the whole thing and learned a lot. Thank you for the wonderful content!

[@user-gnwolmgkqpcn15829]

Your passion and work are very impressive and it has been helping me a lot. Thx a lot.

[@burhankhatib]

@SonnySangha you are with no doubt the best teacher out there! Is it possible to update the repo or create a new video where we can use GPT-4 instead of GPT-3 because its a bit out dated now after 2 months only 😅😂 Thank you so much bro !

[@gendev1105]

Hi From Tunisia ! This Is So Coool Sonny , I really like what you are doing , Keep it up Bro , and Thank You 💯

[@user-lb8bv6eo5o]

Maaaaan this is great. Thank you!

[@rennan9891]

Greetings from Brazil, esse cara é muito foda! O entusiasmo dele é contagiante.

[@SonnySangha]

🙏🏽🔥

[@hapidzfadli]

session always return undifined, why?

[@motivation2study_]

Hey Sonny! Your projects are extremely good! Pls make Telegram clone!

[@almostdaylight5929]

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

[@lok0878]

Same... did uh got the solution?

[@stidi9649]

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.

[@autoauto3021]

Same

[@autoauto3021]

Fix it?

[@stidi9649]

@@autoauto3021 No, I still get the same thing

[@adeolaadeniji2886]

Have you been able to fix this

[@Yorushinigamix]

Any fix on this one guys?

[@suniyamokipallo2571]

This is best tutorial ! Please build part 2 of this with more advanced features. Also include the capability to display images as output of BOT.

[@kedarvyas7134]

typescript is used or firebase is used in this video for backend?? please answer !!

[@toastrecon]

Amazing. Thanks, Sonny! You really should have 2-3x the subs that you do!

[@shuvamsantra4706]

I will be trying to make a react native app using your video as reference.. thanks for this video

[@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?

[@marcusbackendorf5360]

Just you

[@derekprieur5258]

This build is sick 📈🔥

[@eliuddyn]

Almost 200K 🔥🔥

[@beingwhale]

This was a marvelous build. Thanks for sharing..

[@manueldinisjunior]

beats slapss so haaaard

[@devprajapati14]

how to add a dark/light mode switcher in this?? i tried for hrs but failed

[@pvm239]

pretty excited for this...going to start it today.

[@SonnySangha]

You got this! It’s a lot of fun!

[@amadeusocean1201]

How did it go? I just finished mine and have found a few bugs. Was wondering how you solved them.

[@kawisofttechnologies6200]

I just love your intro 😄

[@parkerrex]

Got stuck on client IDs. Looks like your GCP had an autogenerated OAuth client ID that matches your firebase client ID. Mine didn't generate that -- tried creating new oAuthClientID in GCP then replacing the firebase one. Didn't work! Any tips?

[@parkerrex]

if youre running into this -- click the little question mark icon next to web SDK configuration in firebase google sign-in method.. then you click the blue link to GCP and itll get the autogenerated projects to show up

[@rohanbhardwaj9319]

@@parkerrex can't thank you enough bro. I was stuck in this error for about 2 days. Then i read your comment. Now this error is resolved.

[@nicolaaskoster122]

@@parkerrex Legend! Saved me a day worth of work at least! Thank you.

[@larsmichael6242]

just replace the old GOOGLE_ID and GOOGLE_SECRET in you .env file

[@franklinmayoyo]

This was massive 🔥🔥

[@rohanbhardwaj9319]

sonny you are the best. Great project.

[@lukeskywalker7029]

@Sonny Can you do a video on 404 and 500 error pages in app directory? Especially in context of nested dynamic routes for i18n routing :)

[@5canwalk]

Ingenious 🎉❤

[@chaddaking]

Keep smile and observe

[@vladyslavvideos]

Fantastic video! Thank you very much!!!

[@shubender]

Great job! Thank you a lot! My chat have problems with little bit complicated requests. If I ask distance from Earth to the Moon - it answers normally. But if I ask "Write VAST Tag using SIMID Framework" - I had no answer and 504 error. Usual ChatGPT give my correct answer without problems.

[@meditationmusic1118]

Uniquely beautiful content 🔥🔥🔥

[@rajuraman5773]

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)

[@adeolaadeniji2886]

Have you been able to solve it

[@rajuraman5773]

@@adeolaadeniji2886 yes

[@adeolaadeniji2886]

How did you solve it

[@harshitsahu1485]

@@rajuraman5773 how did you solved it ? please help.

[@erey2790]

Hello how did you solve this issue?

[@monkeywithlightning3140]

I love this man

[@gershommwansa4995]

Hey! 'SessionProvider ' cannot be used as used as a jsx component. It's return type 'void' is not a valid jsx element.

[@jesusdoungoupou4890]

From Russia I really like your videos

[@sushilchauhan7660]

Love your work, awesome

[@Magistrado1914]

Excellent course and video. 07/08/2023

[@srandlee4014]

OpenAI API doesn't work, always error code 429, but I havn't used this before....

[@jman5447]

This happened to me: 1:13:04 when I successfully login, the page still rendered the Login component. How can I solve this?

[@harshpatel1971]

Those who are facing an issue that is dont get response from chatGPT so just check 2 things 1st is check you openai key which is long key, i think morethan 32 words key which is provided by open ai.2nd check is that check you have return a res in query function. I made those 2 mistake which i explained them to you and it works well😊. I hope this comment help you guys

[@divamsrivastava897]

sir can you please help me the link of your repo , i can't see the response from chatgpt in firebase , please sir I need to show it as final year project

[@manueljesus3160]

Es going to be safe and applied for the reply from the other guy!

[@tokyodynamite6497]

ty for the tutorial

[@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

[@srandlee4014]

same problem, I think it's OpenAI API doesn't work.

[@akhror-oshie]

hello, I have the same issue, have you found any solution?

[@VishantNShah]

@@akhror-oshie nope :(

[@benjoquilario3777]

Thank you sonny

[@asbaqq]

This project able to create free

[@BehindTV]

has anyone updated it to use the new gpt-3.5-turbo?

[@o_oyash]

idk if this just an error for me but to use the OpenAI api I had to connect my credit card to my account. The error code I kept getting was 429 and going into the openai discord I searched up my error code and looked for solutions. Seems like the only solution.

[@vivekprakashiitkgp1815]

i am getting "chatGpt unable to find an answer for that! Request failed with status code 429" as response . can anyone tell me hoe to fix this?

[@bLitzKinG20]

same

[@vivekprakashiitkgp1815]

@@bLitzKinG20 my openAI api was expired. I made new one with different id then it was working. Try that maybe it's same for u too

[@divamsrivastava897]

@@vivekprakashiitkgp1815 please help anyone i am getting error 429 "ChatGPT was unable to find an answer for that! {Error: Request failed with status code 429}" with old api key (my account expired on 1 july) when i am creating with new account it is showin error 401.Please help quickly anyone i have to show it on 13th july

[@vivekprakashiitkgp1815]

@@divamsrivastava897 make a new id with new phone no. and then make new api key. That worked for me

[@divamsrivastava897]

​@@vivekprakashiitkgp1815thanks it worked

[@lawrencehilary4187]

Amazing content. Really educative.

[@SonnySangha]

Thank you so much! Enjoy!!

[@veejayjoe]

this is nuts

[@pandzior2801]

It says ChatGPT was unable to find an answer for that! (Error: Request failed with status code 401) why?

[@moinkhanpathan541]

did u resolve it?

[@TheJonChristie]

I have the same issue.... any solutions?

[@creed_27]

i got this error in firebase message collection how to fix them "ChatGPT was unable to find an answer for that! (Error: Request failed with status code 429)"

[@Lamsa_TV]

I guest it's a problem from your openAI API key, check your environment variables very well and check where you used the API key as well, I gotten the same error cause I misspelled a variable name ....check it clearly

[@rajuraman5773]

@@Lamsa_TV i got this ChatGPT was unable to find an answer for that! (Error: Request failed with status code 404)

[@ayushsrivastava3644]

@@rajuraman5773 how did you solve it ?

[@Mohd_Zaid_khan]

Commenting for better reach :)

[@SonnySangha]

Appreciate you!!! 🔥

[@SuperPompey77]

Brilliant! Love these builds!

[@peymanj3456]

Just a heads up for everyone, I followed the video along, only to notice that open ai API is not free! you only get a 3 month trial period, and mine had already expired (I never used the API but I'm assuming the trial starts when you sign up for chatGPT the first time), so now I would have to pay if I want to use the API.... sigh...

[@divamsrivastava897]

please help anyone i am getting error 429 "ChatGPT was unable to find an answer for that! {Error: Request failed with status code 429}" with old api key (my account expired on 1 july) when i am creating with new account it is showin error 401.Please help quickly anyone i have to show it on 13th july

[@syntheticquimera6642]

Amazing video Sonny, thank you. In firestore, the collections inside the document are not deleted, is there a way to do it?

[@syntheticquimera6642]

It is deleted only when there are no messages, but if there are messages the information persists.

[@manuelm1209]

Same here