ImmersiveAmbientModecolor: #16a47e (color 2)
Video Format : 22 (720p) openh264 ( https://github.com/cisco/openh264) mp4a.40.2 | 44100Hz
Audio Format: Opus - Normalized audio
PokeTubeEncryptID: 1875ab2cc51d6f8f3510c11c7291d29d21e93e4f93aa4773d2fa0afe9320d4ecefe7c4ec572c3fd80910f9b896c516e1
Proxy : eu-proxy.poketube.fun - refresh the page to change the proxy location
Date : 1715887492471 - unknown on Apple WebKit
Mystery text : VjZIcV9FWDJMTE0gaSAgbG92ICB1IGV1LXByb3h5LnBva2V0dWJlLmZ1bg==
143 : true
1,120,792 Views β’ Streamed live on Feb 7, 2023 β’ Click to toggle off description
π¨ 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
Views : 1,120,792
Genre: Education
Date of upload: Streamed live on Feb 7, 2023 ^^
Rating : 4.721 (521/6,937 LTDR)
RYD date created : 2024-05-16T11:32:13.135779Z
See in json
YouTube Comments - 426 Comments
Top Comments of this video!! :3
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.
37 |
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!!!
12 |
Nice, had huge Fun building this and learned a lot ! Sonny, you are the best ! Looking forward to new Builds π
1 |
I went through the whole thing and learned a lot. Thank you for the wonderful content!
|
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.
3 |
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.
15 |
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.
5 |
Great code along, thanks for sharing this. learning loads from your tutorials. Keep up the great work!
|
Sonny your channel is AWESOME π₯π₯π₯ This is my first time following your stream. Thank you so much!
|
One of your best Sonny! Loved it, keep up the great work <3
|
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!
|
Impressive and seamless tutorial Sonny. I'll be checking you out moving forward. Thanks for the incredible value π.
|
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..
1 |
This ChatGPT messenger app tutorial is so amazing! The tech stacks used are also fantastic. Truly appreciate!
2 |
Your passion and work are very impressive and it has been helping me a lot. Thx a lot.
|
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
1 |
This was a marvelous build. Thanks for sharing..
|
Brilliant! Love these builds!
|
Very much liked watching Steve Carell create this ChatGPT Messenger. Fantastic character!
1 |
@frontendsimon
1 year ago
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!
41 |