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

1,115,934
487
Published 2023-02-07
🔥 Save 10% on Hostinger using code SONNY here 👉 www.hostinger.com/sonny

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course

🫂 Join my Community, "University of Code" for FREE: www.universityofcode.com/

🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github

📩 Want coding problems (with solutions!) delivered to your inbox daily? 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 👉 links.papareact.com/newsletter

👇🏻 FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord

💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: 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

All Comments (21)
  • @frontendsimon
    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!
  • @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.
  • 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.
  • @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.
  • 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
  • @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.
  • @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..
  • @rohanbiswas8487
    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.
  • 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!!!
  • Nice, had huge Fun building this and learned a lot ! Sonny, you are the best ! Looking forward to new Builds 😎
  • @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
  • @dongyuexu4823
    This ChatGPT messenger app tutorial is so amazing! The tech stacks used are also fantastic. Truly appreciate!
  • @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!
  • @basb6230
    Very much liked watching Steve Carell create this ChatGPT Messenger. Fantastic character!
  • @ErlWable
    I had forgotten why I was watching your videos, but what a reminder on who you are!!! BLASTED!!!!
  • 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!
  • @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
  • 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 !!