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

1,091,538
0
Published 2023-02-07
πŸ”₯ Save 10% on Hostinger using code SONNY here πŸ‘‰ www.hostinger.com/sonny

🚨 Upgrade your coding skills by joining the world’s BEST developer community & course β€œZero to Full Stack Hero”: www.papareact.com/course

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

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!

πŸ”΄ LOOKING FOR THE CODE? πŸ› οΈ
links.papareact.com/github

🎡 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)
  • 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!
  • @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.
  • @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.
  • 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
  • @dongyuexu4823
    This ChatGPT messenger app tutorial is so amazing! The tech stacks used are also fantastic. Truly appreciate!
  • @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..
  • 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!
  • 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!!!
  • @basb6230
    Very much liked watching Steve Carell create this ChatGPT Messenger. Fantastic character!
  • +1 for Solidity and Ethereum based tutorials (ethersjs, wagmi, rainbowkit). Huge fan of videos showcasing projects start to finish. Til the next one!
  • @SimonLohmann-fx2qf
    Nice, had huge Fun building this and learned a lot ! Sonny, you are the best ! Looking forward to new Builds 😎
  • @mildforward
    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
  • @JoelFunk
    Definitely here for more AI tutorials. Great video as always, Sonny!
  • @ErlWable
    I had forgotten why I was watching your videos, but what a reminder on who you are!!!
    BLASTED!!!!
  • @joc414
    Sonny your channel is AWESOME πŸ”₯πŸ”₯πŸ”₯ This is my first time following your stream. Thank you so much!
  • @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!
  • @willowPAPA
    One of your best Sonny! Loved it, keep up the great work <3
  • @TheJonChristie
    Impressive and seamless tutorial Sonny. I'll be checking you out moving forward. Thanks for the incredible value πŸ‘.