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

foreign welcome to another Banger of a video I'm excited for this one I've been wanting to do this for a while but it's the chat GPT Messenger 2.0 this thing is absolutely nuts it has so much Tekken I am super super excited to teach you guys literally like one of my best biggest builds one of my biggest builds period I'm gonna say it right now let me know what you're watching from right now don't forget to smash the Thumbs Up Button share this video if you're watching the replay enjoy the timestamps and as always guys it's going to be one hell of a live stream so absolutely go crazy in the chat I want to see everyone light you out right now Egypt in the house we've got UK Canada oh this is so cool this is so cool Philippines in the house that's what I'm talking about without further Ado let's go ahead and give you a absolutely amazing demo of the chat GPT clone check this out guys boom we have the chat GPT messenger let's go ahead and sign in firstly because as we can do that we have Google authentication I'm going to go ahead and sign in with my Google account because we've absolutely you know we have to have proper authentication in here now look at that look at how clean that is you would think that's the real thing is it the real thing no it's not it's the absolutely amazing clone that we have right now the chat is popping off welcome everyone watching if you're new make sure you subscribe enjoy the live stream as you guys can see this is not a normal boring build we have the ability to choose from all the different available models over at chat GPT we can go ahead and create our own little chat so let's go ahead and create a new chat right now we've got Dynamic brewing in next year 13. let's go ahead and click on the joke right here so tell me a joke or write an essay about it that's one example of a chat let's checking out another one uh write a story about a coder who learned to code from YouTube tutorials and I said here are you a human right and let's go ahead and test this for ourselves to see if it actually works because that's why you're all here right you want to make a chat GPT clone so right now go ahead and give me a question right now give me a question right everyone think are you creating your own prompt we have the ability we're actually connected to the opening API prompt this is going to be open API API right so open AI API wow okay crazy let's go ahead and explain what JavaScript is right same with JavaScript is enter chat GPT is thinking guys we've got live react hot toaster notifications in so clean so so clean right we've got um look at that JavaScript is a programming language that is used to make web pages interactive as a lightweight flexible language oh that's just that's just so beautiful right so so beautiful make sure you smash Thumbs Up Button already over 200 likes that's what I'm talking about let's get to 300 wow look at the chat popping off we've got France we've got Brazil we've got India Sarasota Florida Ethiopia Tanzania Tanzania Iraq Pakistan Czech Republic India Haiti wow it's popping off Somalia in the house UK that's what I'm talking about Rwanda in the house I see you guys Romania Ghana RC which is international now right so let's go ahead and break down this app right and bear in mind you know I don't do things half fast right look at this fully responsive fully fully responsive and all of these chats I'm going to go ahead and demonstrate what the hell is happening right now so we are going ahead and using chat uh firestore to go ahead and install these chats um check this out Uganda turkey I see you guys I see see you all right so look at this we have inside of here the users then I have the users so in this case I've got my two accounts proper react and sunny I'm logged into sunny and you can see I've got chats over here so here's a bunch of chats I've gone ahead and I've had a bunch of test ones as well as you can see but let's go ahead and type in something like let me go ahead and create a new chat new chat and let's go and see you see it create a new chat let's go ahead and look at what's going on here and let's go ahead and type in hello world enter and as you can see what this will do is it will start a collection of messages inside of it so I need to refresh that right now let's just go inside messages and as you can see what is happening here is absolutely mind-blowing so I'm going to explain the flow of what's happening right now and I'm going to show you remember you're going to learn all of this in this video for absolutely free so buckle up because it's a lot to take in right we are using a real-time database right now now check out what's happening here if I go ahead and say explain JavaScript to me right and I go ahead and hit enter so it just entered in my question now what's happening is on the back end we're connecting to Firebase admin API which is then connecting to open AI API which is then formulating a response from chat GPT which then fills out a response and then we have a real-time connection to our web app just like that just like that and all of that is built with next year 13. tell lindsayer says all that good stuff and we're using things like use SWR so we've got caching we've got server components we've got client components we've got Dynamic page viewing hot toes notifications everything you can think of is in this build so I you can see why I'm excited now right we have literally over 300 people across different platforms watching all I ask is that you take a second and destroy that thumbs up on for what you're about to learn for absolutely free on the internet right so enjoy this build it's going to be so amazing the code is already in the papa GitHub repo so if you want to go ahead and check it out you know where to go otherwise build along with me that's it simple as right let's dive into the tech stack of today's build all right so I'm going to go ahead and get my little pen up on the screen so I'm going to say screen brush there we go loads of you asked me that question all the time it's actually called screen brushes that's what I'm using when I'm drawing on the screen right so let's go ahead and dive into this right now is my screen sticking there we are okay so we have typescript under the hood yes we have typescript right we have next js13 which obviously is powered by react so you're going to learn all about react we have a Firebase right so Firebase and lots of things about Firebase we have Firebase firestore we have Firebase oh no oops oops okay I've lost it we have typescript we have react what am I doing now right react we have next js13 don't worry about it no I'm not 13 not 14 there we go we have Tailwind TSS we have gpt's API so tons of stuff you're learning in today's video we even have next author authentication which is connected to Firebase auth so we have Firebase Google authentication so not only are you getting authentication you're getting like learning about typescript all this good stuff and on top of that we've made it super performant we're using things like use SWR for efficient data fetching right amongst different components all this kind of cool stuff and if you see this right here this is actually pulling from the chat GPT models list so this is actually going to go ahead and pull all of the available models from chat GPT so not only are you going to be able to use the DaVinci model but you can use any model that open AI delivers and because it's frequently being updated it will fetch the most recent list and then it will feed that into the open API open AI API I'm gonna get that messed up so many times today so forgive me right so much is gonna happen in this video right so we have all of this happening you're going to learn about react Firebase Hooks and how you can get this real-time connection going on you're going to learn all about server components right so all the the brand new you know the new and exciting thing going on in xgs right now server components you're going to learn all about that and um we're going to talk about Firebase admin which I haven't done in a long time right so Firebase admin and how we can leverage this on the back end to do administrative things such as allow our server to directly right into our database so that requires a little configuration and I'm going to make it seem like it's easy because it is going to be easy following the steps I'm going to show you okay so buckle up get excited smash that like button we have literally over 300 people we just smashed over 300 likes I'm I'm absolutely Blown Away by your support today this is incredible I see all of your chat it's so so cool all right so so cool um and let's go ahead and jump in now before we jump in I'm going to show you how to actually deploy this app in the end of it so most of you are going to want to add this to your portfolio I'm going to show you how to deploy this onto the cell afterwards and thanks to our friends over at hostinger this video will was possible today which means that not only are you going to learn to deploy it you're going to have a shiny little brand new domain name which says like sunnysanga.com of your own right for absolutely an incredible deal so in this case if you want to go ahead and benefit from that check out hosting his website because they have a limited time off for right now right which means that you can go ahead and get your custom domain name so that when we deploy our website you have a nice beautiful domain name all you have to do is simply click add to cart head to the bottom go ahead and Chuck in the coupon code Sunny because you know your boy is always trying to help you out so simply head to the bottom coupon code sunny and Bam just like that I've slashed 575 pounds down to 111 if you want to get your own domain name thank you thank me later it's you're welcome I do this for you okay so make sure you go ahead and do that that's the plan I'd recommend but we're going to go ahead and explain all of the things that hostinger provides sooner later on okay well you know what I mean we're gonna cover it later on okay so make sure you go ahead and check it out without further Ado let's go ahead and jump into today's build now I do mention always that I do like to go at a pace which assumes that you have some knowledge however if you're an absolute beginner and you want to go ahead and take your skill set even further I do highly recommend you check out our course over at zero to full stack hero feel free check it out see for yourself we have loads of the papa Farm in the actual chat right now so ask questions do what you want to do and go watch this video it's going to show you the members inside we're actually touching a thousand members which is nuts right we have a thousand students in zero to forsakero and our students are absolutely loving my most recent Edition the University of code so check out all that we have to offer papareact.com forward slash course Papa react.com forward slash University of code to go ahead and get the best of everything we have to offer okay and again you don't need any of this stuff it's just gonna help you elevate and it's going to help you become a developer in a much shorter time because I'm going to showcase all of my secrets inside there but I'm gonna give you as much as I can possibly right now okay there's only so much I can do okay but whoa facade thank you dude 40 pound donation he goes I work for Microsoft Azure open AI this is so cool great work dude that's a huge donation thank you so much absolutely incredible right so let's go ahead and dive into this build without further Ado so jumping into things man tell me if you'll enjoy this music you can get in the link in the description right so we're going to go ahead and firstly get our key to open AI now if you don't know what that whole chat GPT is it's an incredibly powerful AI chat bot and basically what you can do is you can talk to it and ask it any question and it's trained on so much data across the Internet it's not live connected to the internet but the model has been trained on a huge amount of data so you can ask it things like coding questions you can ask it things like natural language questions you can ask it anything and it pretty much will give you a solid answer depending on if you give it a good prompt or not and I'm going to show you how to add that into your own apps so you can build the next Brazilian dollar app right and and make yourself famous right do whatever you want to do with that I don't care but it's cool all right so in this case we're going to go to openai.com I've logged in right so you'll you'll be able to hit this screen once you log in guys we're so close to 400 likes just destroy it for me please that's all I ask And subscribe so many of you are watching an answer subscribed it's crazy right so in this case all you need to do head over to personal on the top right click on view API keys and a lot of you always ask a question is it free you know do I have to pay for this no it's absolutely free you can do this right now so this whole tutorial is free right even the keys all that kind of stuff for free don't worry about it right so API Keys all you want to do is click on create new secret key so I'm going to click that right now bam and I'm going to hide the screen because it's created me one and then I'm going to click on copy and I'm going to click OK and then I'm going to hide it and as you can see now I have a key I have a second key so in this case you can create as many keys as you want if your key gets compromised you can go ahead and revoke the key and so forth okay so I've got a test key that I'm going to keep on here while we go ahead and get things working and then I'll show you how we basically come back but this is going to be the key that allows us to connect to chat gpt's API so it's very important that you get that key so that's the first step okay first step out the way second step is we're gonna have to go ahead and create a Firebase project right so all you want to do head over to firebase.google.com now Firebase is an amazing Suite of tools they allow you to have things like real-time databases the firestore databases which we're going to use today and it makes things like authentication so simple okay so it brings it down so that we as a developer can just enjoy what we want to do which is build the damn app as opposed to hmm I don't know how to make my my authentication work the perfect way and stuff like it just handles it right that's what we want so in this case we're going to go ahead and go into my correct account before I go ahead and do something I don't want to do right and then we are going to click on go to console okay now we're gonna go ahead and head over to add project so you want to go ahead and create a new project right now so click on ADD project and here we're going to go ahead and say chat GPT messenger I'm going to say YouTube okay so you can call it whatever you want really it doesn't matter Okay click continue I'm going to disable Google analytics and we're going to create the project now it's worth mentioning that I have no connection to open AI chat GPT any of those Services I am literally just teaching you how to interact with their apis for purely entertained entertainment and educational purposes all right so that is it that's all it is educational purposes right now we're just trying to help you interact with their services because they already have over 100 million users on their platform that's the fastest app to ever get that by the way right so let's go ahead and click continue and then let's go ahead and firstly head over to actually we can pause here this is good all right so now we've got our Firebase set up and then we've got our API key done cool now the next step is we're going to go ahead and initialize our first ever project right so in this case we're going to be using Tailwind with next.js and we're going to use this lovely little template over on the Tailwind website and all you have to do is go ahead and copy this MPX create next app uh Dash e with Tailwind CSS my project okay and then we're going to go ahead and copy that so first things first open up my terminal nice we're gonna go ahead and make this massive because I always get comments I can't see what you're writing there you go hopefully that's good all right and then I'm gonna go ahead and put in my documents I like to just put in somewhere like documents builds I don't like to throw this everywhere right so you can put whatever you want right but now you want to go ahead and pop it in and then you basically just want to change this final um final sort of command argument so this one is going to be the project name so in this case I want to say chat GPT messenger YouTube hit enter this code is available on the papa GitHub repo right so definitely if you want to check it out you get stuck what I would recommend is try code along with me it's completely free that's the best way or you can go ahead and get access to not only this code but every single build I've ever made on YouTube it's all in the public GitHub repo the link is in the description feel free to go grab it okay so and everyone always asks why do you charge for your GitHub repo because too many people just copy it and they don't put in the work and that is honestly why I get so angry with the like new upcoming developers put in the work and I'm giving it for free so put in the work and make it happen or just just buy the repo that's it simple ads right it's a way to stop you I'm actually trying to help you out when I do that okay so in this case we're going to go into CD into chat GPT uh messenger Dash YouTube bam and then we're going to go ahead oops no okay don't do that I'm going to type in CD there we go and then I'm going to go ahead and put in code dot bam okay and then this will open up our vs code now if you try to do this command code Dot and it didn't work the reason why it didn't work is simple the only reason why it didn't work is because you haven't got this command set up so command shift p and I'm going to type in install and then at that point you'll see install code command in path I have code inside this because I use the beta but in this case just to install code command import and it will work then you might have to restart your terminal but then you'll have that ability to do what I just did if not just go ahead and click on file open and open your workspace okay that's simple as but now we have our next js13 app right now you're probably wondering this ain't next year is 13 because we have a page directory here right it doesn't look like the new app directory Sunny well we have to go and set it up and tell it that we want to use the new nexgs 13 features now if you haven't ever touched next year's 13 but you've worked with nextges before I highly recommend you check out my next JS tutorial where I run through the entire sort of conversion over to nextges 13 from next gs12 I gave loads of different coding examples if you're watching the replay the video will be coming up around now otherwise Jay will pop a link in the chat right now which is going to go ahead and show you that video I obviously wouldn't recommend watching it now enjoy this video but otherwise if you get stuck at any point with any of the things I'm talking about around next year's 13 then that's how you go ahead and do it okay so in this case what we're going to do is head over to my next config and we have to tell it that we basically want to go ahead and use tell me if the screen's good I think that's better as well right so now I'm going to go ahead and type in experimental and I'm going to give it an object and inside of here I'm going to say the app directory is going to be true okay and then what I want to do is command J to open up my terminal now I'm going to go ahead and just cut my old app right because it was running as well and what you're going to do is command J opens up your terminal now here you want to go ahead and type in yarn run Dev okay I'm using yarn as you can see I've got a yarn lock file if you have npm or package log file then you'll be using npm if you want to switch that is fine all you need to do is then use the opposite command like if I had package lock I use yarn but then I'll delete my package lock and then run yarn and then I'll get a nice yarn lock and so forth you just swap it over right but make sure you just stick consistent with the one that you want okay so in this case yarn run Dev bam and what this will do is it will start up the application on our localhost 3000 right so I'm going to go ahead and open this up right now and what I like to do is set up my coding environment so we're going to push my code over here I'm going to go ahead and pop my other app over here and then we're going to go ahead and do the following I'm going to localhost 3 1000 okay and what you should be saying is this beautiful screen right here this is going to be your starter template next.js13 starter template what we're going to do is basically TR kind of like translate this from next.js 12 to next.js 13 very quickly and I'll show you how well next year 13 uses the new app directory the app directory basically allows us to have loads of things uh no everything in the app directory is basically a server component by default right so in this case we're going to use the new server components and in this case we're going to create an index page and there is a certain file structure we have to use there is a reserved word called page.tsx and in this case this will create our first page our index page so I'm going to type in rfce right and if you're wondering how the hell did you just do that well first I'm going to rename that and secondly I'm going to show you how I did that so the what you need to install is es7 react Redux Snippets just to install that you can get those nice little things I just did okay so let's go ahead and do that now and then oops okay keep opening this up uh but um you know it's crazy I first started doing this when it was like a million that's crazy nice seven million I hope I had some impact on that right so we're gonna go ahead and remove that right now guys we're about to break 400 likes keep smashing that like button let's get over a thousand likes in this live stream right so just destroy it for me and enjoy the video all right and again hit the Subscribe if you haven't already I really really want to just grow this channel to a million plus and that's the way we're gonna go there right uh Rahul Kalia what is up dude good to see you in the house all right so in this print we have the page right now this obviously isn't going to work because we have nothing attached to it right so in this case I'm going to show you how we can change this which is located in our Pages index we go from this page to this page instead now I'll show you how we do it firstly we can delete the odd page that's fine get rid of it don't need it right and then we're going to go ahead and type in H1 chat GPT messenger bam hit save and then I'm going to go ahead and do command J now at this point I'm going to cut myself as a Ctrl C and then I'm going to do yawn run Dev now watch the magic that happens now whoa firstly it said it contains a typescript version okay so I'm going to click on allow fine then I'm going to refresh my page and then look how it creates random files me right well explain what the hell that is so firstly we've got the layout file this is where we have our layout constraints of our components right so in this case all the pages are going to basically be injected into the children property here so at each level right so we have loads of different ways of doing this facade I'm so sorry you're absolutely awesome I don't know why not but just did that but I love you dude so my bad nightbot gets a bit crazy guys sometimes so don't take it personally if you get if you get like timed out right um and so at this point and then we can inject anything that we want in the head for example the title so in this case I'm going to type in chat GPT clone right hit enter or save sorry and then we're going to refresh and then you can see we change the title so super easy okay and then we're going to go ahead and hit page now at this point we have our page but you can see this is not Tailwind this is some like old school you know font that we just don't want to associate with right so at this point we need to go to uh layout and then what we need to do is take and still this where we have our style this is basically where we import our Tailwind magic so I'm going to go ahead and copy that head over to my layout and I'm going to go ahead and hit uh paste all right hit save and then what we should see is Boom like that that's nice right so what this is doing is this is basically going ahead and stripping all of the styles from us because we want to go ahead and whenever we're using 101 we want a blank canvas okay so if you don't know what Tailwind is go check out tailwindcss.com what are you doing because it's absolutely a banger way of writing your CSS it's my favorite way and it's the way that I'm doing it in my builds okay so that's why we start off with an empty like styled uh H1 like that now we we can get into the magic now okay so you don't actually need the app to TSX file you can get rid of that if you want I'm just gonna keep it for now but in this case we have a starting point so what I like to do is Mark things up okay so what I'm going to do is I'm going to open up my old app I'm going to run it on a different port so I'm going to run it on like 3001 for example right and it probably won't work because I just realized something so if I do 3001 it's probably not going to work with my authentication I have a feeling you want yeah oh no okay I mean we get this far that's fine I can do this okay I can use this as a rough draft right so we need to get from this to this right and we're going to do it in about three or four hours right so it's gonna be crazy all I want you to do is destroy that thumbs up we're almost at 500 likes absolutely amazing right so how the hell do we get from this to this well firstly just take it in steps right so take it in nice little chunks okay now what we're going to do is we're going to essentially have things like the sidebar and this and like this bit basically we're gonna have that in the layout file because that's going to be a part of every page right but this right here the chat GPT part this is going to be the page that gets rendered out so this is going to be where I'll basically have in page.tsx I'll have the code for this and then here I'll have a sidebar component inside of my layout.tsx okay so let's do that right now so heading over to layout in this case and you're gonna see why it's really nice once we understand the new way of doing things why it's so cool to be doing it like this right so in this case I'm going to pop open this right here and I'm going to put in a div I'm going to say the children go inside the div simple ones right then we're going to have a comment for the sidebar so this means I need to build a sidebar there right and I recommend you do this honestly it's going to help you out a lot right and then we have the content down here and I'm going to wrap the content in a div okay so we're gonna have the sidebar here we're gonna have um something called a client provider here and what this will do is this is going to be for the notification so those nice little chat GPT is thinking notifications that you saw earlier that is all going to be inside the client provider so we are using something called react hot toast notifications and that gives us this nice Dynamic sort of chat GPT is thinking and then that way the user isn't sitting there thinking what the hell is going on this thing's crap right so it works but it's a nice way of kind of you know giving it a little bit of feedback somebody says are you live yes I am live my friend right so in this point we've got the sidebar the client provider and yeah we're good okay so I think we should firstly do this part because this gives us the the most kind of like I can see something back from it right so I can see the response right so I can see like something being built so in this case I'm just going to start styling things out now you're probably going to wonder how has he got all of these autocompletes well if you go over to Tailwind extensions and then you type in Tailwind CSS I have tons as you can see right you can go Tailwind CSS intellisense install it thank me later all right I promise you it's going to be a game changer all right so install that that's how you get all these nice little fancy extensions now once we're here we're going to go ahead and type in BG BG stands for background color at this point we're going to go ahead and say a custom color now it's custom color we are going to use a bit you know throughout the build but this is going to be somewhat of the background that we're going to be in considering ourselves with so in this case I can add that in and you can see I've changed the background color there right then I'm going to type in Flex one okay now the reason why I'm going to do Flex one is because the div in which surrounds everything is going to be a flexbox okay it's gonna be a black spots and eventually the sidebar is going to be you like kind of working against this Flex box as well and this all this cool stuff is going to happen Okay but this is where we move over to the actual chart now this is the layout and then we go to the page right so inside the page and remember we actually go over this all so so in depth inside of zero to full stack hero so if you really want to just become a pro at this stuff and you want to skip all the I want to watch all the tutorials and kind of you know figure it out then you can go ahead and join zero to full stack hero right we have two memberships platinum diamond and our members are absolutely loving it and they are so sick as react developers it's incredible right so let's do this um you should use the Stream True in the opening oh wow dude facade that is sick he goes something you should use to Stream True in the open AP open AI API cool so you get the type right I was wondering that dude okay okay maybe maybe I'll do that I might try that as a somebody remind me at the end and I'll try and add that in right but that's so cool I was wondering how that thank you see clutch members in the community are absolutely awesome all right so this point we're going to build the page that you see here this part here okay so we've got a bunch of icons a bunch of different styling that kind of stuff a bit of a warm-up exercise to get us ready for the main event right so in this case we're gonna have a H1 and in this H1 I'm going to change this to just say chat GPT hit save and let's start styling out so this is going to be a text 5xl it's going to be font mode and it's going to have a margin bottom of 20. okay hit save and you can see that's already a lot bigger a lot nicer now for the class name I'm going to go ahead and say this should have text white so everything inside I want it to be of white text So eventually we're going to get to this right so this is how we start getting to that process now in terms of the actual layout this is going to be a flex box and again if you want to know more about flexbox definitely check out my flexbox froggy video if you're watching the replay somewhere around here right now otherwise J is going to come in clutch and pop it in the chat right now okay so in this case Flex Flex column and then we're going to say items should be aligned in the center right and that gives it a nice little Central axis now if we do justify Center what you'll find here is that this will go ahead and Center it on the y-axis as well but you can see it did nothing that's because we have to set the height to be of the screen that means it will use up the full amount of the screen and it's just nicer to do that right then we want padding on the x-axis of two so that way once the screen gets small enough it's not going to touch the sides right we won't have a little bit of breathing room so hence I've added a little bit of padding okay good stuff now we're going to open up a div and this is where we have the interesting portion so now we've got this which basically what we're going to do is we're going to have a container around these and then inside we're going to have a container we'll basically can encapsulate this and this same for this same for this and then we're going to go ahead and pop these in right so you've got the explainer to me and all these kind of things right so I'll go ahead and make it easy for you don't worry okay so first things first we're gonna go ahead and pop in a P tag which says explain something to me what is the difference between a dog and a cat and then oh actually before we do any of that I need to actually go ahead and pop in the icon itself so we're going to do it in sort of like lines we'll do this line first then this line then this line okay so the first line is going to be a um inside of it we're gonna have another div and then this one's gonna have a another div because it's going to resemble the icon so we need the sun icon and then we need the H2 which says examples okay and then the sun icon how do we get that right well we'll touch on that in just a second but after that we're gonna go outside of here and we're gonna have a div and then here we're gonna have three p tags and I'm using Emmett to make our life a little bit easier now I'm going to save us a bit of time and just copy in the following so I'm going to put some text in here and add a class name bam right so all I've done is added the info text class name and I'll show you that info text does nothing at the moment that info text does nothing at the moment that's a custom utility class name which we have yet to create okay now these are two closely bundled up so I'm going to go ahead and space them out so space y of two bam hit save and we're almost at 500 likes guys absolutely mind-blowing considering that the video is only half an hour in I honestly believe this video is going to be my next million view video so smash that like and let's get there right Hunter em says hey dude what's up developable pool what's up good uh what's up dude all right my brain is mush sometimes right so case we've got the examples and then we're going to go ahead and start that out and I actually don't have a style so it's pretty simple and then for this one we're going to go ahead and give it a flexbox flex column so this is the one with the icon in items are going to be aligned in the center axis justify in the center as well with a margin bottom of five bam right so that's how we're kind of getting along the lines of this now so you can see it's going to be basically very close to this very shortly okay so the next natural thing that we need to do is go ahead and get access to icons so I'm going to go ahead and do that right now and I'm I stupidly just minimize my code there we go so how do we do that we use something called hero icons now hero icons is super cool it's built in built by the guys over at tailwind and it's just so easy to use so what I like to do is keep this open to go ahead and search for different icons and then I click through the documentation and I simply install now here you can see npm install I'm going to do yarn add right so in this case let's go back to our code we can actually close that right now to make life a bit easier come on Jay I'm going to open up a new terminal while my old one is running and I'm going to say yawn add hero icons react ing on okay killer tool says hello from Greece what's up dude good to see you I mean Mook says hey love this build I love the pop fam that's probably Angie good that's what I'm talking about whereas we've installed it that's amazing and now I need to use it so in this case let's just start with an example copy the first example and I like to show you this because it makes your life a little bit easier when you're watching it back right so if you're doing this on your own this is the way I'd recommend it copy the example copy the use case example and then pop it in and just see how it behaves see how it acts right so that gave us a blue Beaker icon now in this case I don't want a beaker icon I want a sun icon right so we have two options we have solid variants and we have outline variants okay so in this case if I go ahead and you can see we've got solid and outline I'm going to use outline and what I need is something called the sun icon okay now I found that by going into the search directory here and typing in Sun and I just typed in Sun in here and then you can see it starts autocorrect like Auto kind of filling things out right so Sun icon is the name for it I'm going to replace this over here like so true love Kenya says wow thank you so much to Tender says so much learning happening love from Zimbabwe what's up dude right so go ahead save now you can see we've got a nice little sunshine example nice all right and I'm gonna do eight and eight so cover that eight and eight and then text blue 500 just get rid of it because what it does is it sees icons as text which means I made the parent text white which means all my icons are going to be naturally right okay so you can see we're playing again there right it's slowly getting there now we've got we've given this like info text here to a few different areas right now what I'm going to do is create a custom utility class so I'm going to go into Styles globals.css and in here I can create my own custom CSS utility classes for Tailwind right and basically this allows me to prevent me writing out the same lines of utility classes again and again and again right it makes it a lot easier to go ahead and repeat and reuse what I want to do faizo says drop in and say hi what's up dude Sama says hi love every build very interesting and so close to 500. five likes away from 500. let's go I'm hyped guys we're almost at where we got over 300 people watching on different platforms right now so how do we create a custom utility class so firstly we go ahead and we say at layer components right and then here what we do is we basically inject our own like kind of Uh custom classes so here I say info text and then I say at apply that's the keyword that's like the way that we basically that we have to write this for Tailwind to basically accept it right so in this case that's how we do it okay now basically what I'm going to do is as I start applying these what you'll see is that padding of four you see how all of them got paddinger four nice right and Bam just like that 511 likes guys a thousand let's get to a thousand come on the energy is so sick wow um this is so crazy top G says hey you're helping a lot of people understand and you are the realtor just keep going thanks a lot dude thank you for watching I appreciate you man right so padding of four now what we're going to do is go ahead and say background gray 700 and then we're going to give it a 50 opacity right I'm gonna round Corners by saying rounded LG I'm going to give each one a Max width of a set of custom value of 300 pixels right now as you can see boom look at that like look how it just snapped together right look at that boom and because we're using flexbox this whole starter it's all working the way it should bam that's really nice okay so at this point what we can do is we can now copy what we have here right so what I'm now going to do is basically take the div at this point right so I'm going to take this div I'm going to copy it right and as you can see what I'm going to do is paste it again paste it again so now I have three of these things right and I'm going to change each one to how I need it so the next one is going to be a boat icon right and then I'm going to do control spacebar and you can see it automatically Imports but icon for me and then I'm gonna go down to the exclamation triangle icon okay again import it at the top here he says been watching videos for the last year you have taught me so many tricks thanks for the teaching Kpop amazing world thank you so much dude I appreciate you pop up fam that's what we're talking about guys the energy is killing it today and as you can see look we've got the new examples and then I'm going to change the boat example to capabilities and then the exclamation triangle to limitations okay so there you go we've got limitations capabilities and then I'm just going to Simply change the text of each of those ones right so all I'm doing here is basically replacing these P tags so I'm getting rid of them and I'm popping in key tags with different bits of text in okay so you can feel free at this point to really add whatever text you want again I'm just doing this more for the UI right so I'm going to remove these three p tags and I'm popping in my own three p tags and that's it okay now you can see this is not being laid out correctly right it's not nice it doesn't look good don't try and convince me it doesn't I'm this I'm not accepting this right this looks horrible so at this point we now need to make the surrounding div so the surrounding div encapsulating all of those three that we just copied we're going to go ahead and say class name make it a flexbox by default when I hit save they go into a row okay then we say space them out with a value of 2 between the x-axis now you can see we've got a bit of breathing room between them and then as a parent component I'm going to say all the children within should have text centrally aligned and just like that pow now sir hat says using grid instead of flex doesn't bear for isn't better isn't it better for this you can you can definitely do it I'm just showing you flexbox here but feel free change it up however you want right you can actually use like a column a grid of three as you get into a mobile view change to a grid of one feel free remember there's a hundred different ways to do the same thing when you're doing this kind of stuff right so that's looking damn good okay now I think we should build a sidebar right so the sidebar is the next element that we're going to tackle so in this case this is our final burn I need to have that cool look inside bar over there right so let's go ahead and do that right so in this case I'm gonna go ahead and pop open the layout like so and then inside of here I'm going to create a sidebar so now what I'm going to do is I'm going to go ahead and create a new component folder so in this case we've got the app and then I'm going to go into package.json at that level and I'm going to create a folder called components okay and now inside of the components folder I'm going to go ahead and create a new file and I'm going to create a sidebar.tsx now inside of here I'm going to do rfce bam I now get my nice little snippet I'm going to cut that we don't need that anymore in the latest versions of react on xjs uh guys we're so close to 600 likes wow this is insane sidebar goes here that's what I'm going to write for now okay now at this point we've got uh and this we've got go to the layout I'm not going to repeat what someone just said but it's not I'm not doing that right at this point we're going to say sidebar and then I'm going to close it right and now what you're going to to see is look the sidebar goes here right so you should be able to get that at this point remember at the top level they're just Flex so they're basically sitting next to each other right so at this point you've basically just got two children so if I was able to get rid of this like two children this div and this sidebar and then their Flex next to each other which is why I've seen it like this okay so now let's go let's add some jazz to that sidebar so it starts looking good and this sidebar is going to play a very important uh aspect to this entire build right so it's gonna have a lot of functionality inside this sidebar so first things first let's go ahead and start this out let's go ahead and say a panning of two it's a flex box it's going to be a column Direction flexbox and it needs to be the height of the screen okay that's a little bit breathing room there is better okay some more about and then we're gonna go ahead and get rid of this like so okay and um oh wow I like absolutely crazy the India in the house what's up guys all right so at this point now we're gonna have another div boom all right and in the final build you can see here we've got a new chat button right so we're actually going to create a new chat button and then we're gonna have like you know these different chats and all that kind of stuff so there's lots of different components here lots of different ways to kind of get this right but the first thing I'm going to do is create a class name and I'm going to say Flex one sorry Flex one and then in here I'm going to have a I'm going to start doing my little comment magic I'm going to say a new chat needs to go here right it's a new chat and firstly inside of this Flex one div I'm gonna have another div with the new giant side of it okay so we've got the new chat that's going to be a component and then we're going to have a div with the model selection inside so in the inside here we're gonna have model selection so this is going to be like for selecting the different models there's going to be a component of its own um and then we've got this one for new chat awesome stuff and then we've got these individual chats all right so then we're going to go ahead and have the chat rows right so then here we're going to map through the chat rows whoa Mr Frank is in the house member yo Papa fam tier member for five months dude yo OG you got Sunny GPT AI based sunny next yes because let's go Franklin OG has been here for a long time if anyone wants that little like green badge of honor like Frank has all you have to do is click the little join button uh but Frank Og man I love and see I love seeing you man all right so in this case chat Rose I completely fudged that one up my chat Rose okay whoa map through there what am I doing with my I need chat GPT to help me out swelling right so at this point that's pretty good and then we're gonna have you know the the picture down here so that kind of stuff we're gonna pause on because we need to kind of have things like Firebase set up in order to go ahead and continue those right but before we kind of you know call it on that one I'm actually gonna firstly have a new chat button which I think we can go ahead and actually Implement right now so let's go ahead and say new chat all right we're just gonna make a bit of a dummy button and then we're going to go ahead and create this component so inside of my components I'm going to say new chat dot TSX neutral DSX there we go bam rfce like so oh my God okay rfce so sometimes that happens right it gets pretty annoying to rfce my Snippets don't work so one idea is I just copy this paste it um get rid of that and then I have a new component I just rename this to new chat how right and now we have the new chat inside of my new chat I'm gonna go ahead and simply have a plus icon and a new chat parrot P tag so in this case I'm going to have a div with a P tag inside and I'm going to have a plus icon um here with a outline or you know we're gonna have the solid variant here so I'm going to do is I'm just going to import that I'm going to change this to a solid variant because I want the solid one right and then we'll say class name and there's going to be a height and width of four so height and width of four boom and inside the P tag I'm going to say new chat simple as right it's a new chat now let's go back over here import it so we can see our new chat component right so there you go new chat cool uh is everyone with me so in this case we're going to say div and now I'm gonna go ahead and style this up and I'm going to make this look a lot more like the chat GPT new chat button right so it's going to look a lot nicer in that sense so first things first I'm going to say border should be Gray 700 right then I'm gonna say the that there should be a border in the first place the items should be centrally aligned and it should be justified Center okay boom and in fact that's not gonna work because I don't think it's Flex oh yeah I got another so in this case sorry we don't do that I'm going to add in a something called a chat row and I'm going to create a custom style for this right so chat row so Now command P allows us to go ahead and quickly search for file I'm going to type in Styles globals.tss you can see over here but that command p is a very nice trick yeah you should make sure you definitely benefit from it in terms of speed now here we're going to go ahead and say chat row so we're getting a new custom Tailwind utility class now here I'm going to say we're going to round the corners rounded LG I'm going to say padding X of five and I'm going to keep hitting save so you can see the difference right padding y of three so it gives a little Breathing Room text should be small I like that Flex items Center justify Center as well that looks a bit better Caden says what's up what's up man and then we're gonna say Space X F2 so Space X of two and then we can say when we hover over it on the hover state to change the background to a nice gray of 700 with a slightly darker opacity right so a little bit more opaque I'm gonna say cursor should be a pointer so that means when I hover over it it's like that then I'm going to say the text should be gray with a value of 300 transitions right so I'm going to add a transition here now I'll show you actually what we're going to do here so firstly if you see this so that's kind of what we're going for right now um I need the overall background to be the right color so I'll change that in just a second but you can see that that's got the same what kind of nice effect I want right then I'm going to say transition and you can choose different ones here right the opacity and all that I'm just gonna just for the laziness I'm gonna go and say uh transitional um duration two and I'm gonna do ease out okay now you can see that I get a nice little animation like oh smooth all right 200 milliseconds right and also applies to the other stuff on that bit right so it's fine now we've got that in I'm gonna go to my sidebar and I want to have the sidebar um actually colored so what I'm going to do is go over to my um app layout right and where I've got my sidebar I'm going to wrap it in a div okay I'm gonna wrap it in the div and here I'm going to go ahead and say I want a specific background color and they don't have it in the Tailwind default style so I found a nice color to match I think is the exact one from chat GPT themselves so we're going to go ahead and pop that in and then we're going to type in on the so basically I'm going to make it a responsive style right so firstly the max width I want it to be extra small right so I only want to ever have that maximum width so firstly the colors in looks much nicer I want to have it if it ever goes past the point that you can see I want to say that the height should be maximum the screen okay so I'm just going to say the highest set to a value of the screen and if it ever overflows then I'm going to say y should be a overflow y scroll okay and then what we're going to do is on a mobile view I want to basically go ahead so you can see right here look that's pretty cool now on a um overflow white Auto sorry auto there we go so only if it needs it okay and then I'm going to say on a also these are all applied on mobile view because Tailwind is mobile first right so what I can do is I can say when we hit a medium screen or above I want to change the minimum width to be a little bit bigger at 20 REM right if you want to hover over you can see the values that it will equate to now you can see what will happen is when it hits a medium screen I get a little bit more of a bigger minimum width and that's because I just wanted to breathe a bit more I don't want to be so so cramped up after it hits at some point so that's pretty good so far I like that right so that's looking pretty nice and that's exactly where I want it okay so with this bit said we're gonna have a quick War break absolutely destroying it guys nearly a 600 likes and not even 48 minutes into the Stream I'll be amazed if we don't hit a thousand likes today right so let's just destroy that like button if you're watching I appreciate every single one of you and make sure you keep having your water breaks as well it's a little like Papa Farm signature that is all right so we've got the sidebar we've got the children all good right so next thing I want to do is I actually want to go ahead and start implementing the let's go ahead and put a new chat which is great right I actually want to I want to do the authentication now you're probably wondering why do you want to handle authentication right now whoa firstly I need this session for a few areas right so I need the session in a different like a bunch of different areas in this project and secondly I actually need to decision to create the correct structure in the database so in firestore database so I'm going to need to have the login flow down right and then then we can actually build out the rest fairly straightforward right or it's going to be a lot easier than you think okay and by the way I forgot to mention we are creating your own custom API endpoint in today's builds we're going to create two one for getting the models and one for asking chat GPT a question and getting the appropriate response back so loads of content coming right in one video crazy I know um so at this point we're gonna go ahead and install next or so rather than do this every time what I'm going to do is move this over here like so that's my new friend and we're going to type in next auth bam now next thought is the authentication provider we are going to use to go ahead and get started you can see there's a bunch of documentation here but I'm just going to explain and you can go ahead and copy me if you want to go ahead and do this one right so yarn add next auth let's go ahead and add that to our project right come on J boom add that in now while that's going ahead and installing head over to Firebase head over to our project and I want you to go into build and at this point I want you to go into authentication okay and then um we've got Kika says I love your work amazing stuff uh coding streams are much better than those gaming ones it obviously is because you're learning so much as well right so in this case we're going to go ahead and do authentication get started and we're going to start in test mode but I do highly recommend that you go ahead and implement or sorry I'm talking about the Firebase The Firestorm so anyway right we're going to click on Google authentication provider we're going to enable it and then you need to go ahead and give an email so we're going to do that click on save so this enables Google as a provider for our authentication okay so there's a few steps we're gonna have to do this is one of them cool Next Step we're going to go ahead and click on edit configuration we're going to go down to White uh I'm sorry web SDK configuration now what I'm going to do is I'm just going to hide this for a second because what you're going to see on the screen is going to be the following now what I'm going to do just quickly is actually cut something out right so here there will be a secret key right so I've just removed it there'll be a secret key where I'm putting my cursor right you need to copy the secret key and you need to copy the client ID okay so I've removed it so everyone can't just go crazy on my machine right so what I'm going to do is I'm going to copy my key right now so I'm just popping this in right so I've got those values and then I'm going to go ahead and click on Save uh Mr Frank says this is an awesome build 10 donation thank you so much man because um made a little demo using OPI text DaVinci chat but wanted to save the prompts and replies to Firebase got stuck because open AI streams token via adjacent object where I this Frank will answer your questions and I'm not using the stream functionality doing a straight so it just pops in but yeah you can do it a few different ways but I will actually get to that right so um let's go ahead and do I love what beaches comments because my reading document skills have improved a lot thanks to Sunny for walking through I really I appreciate that that comment thank you all right so we've got those two variables now what I'm going to do is go over to my code and I'm going to create something called an environment file so at the package Jason level I'm going to create a file I'm going to call this Dot m.local and this is where we store our environment variables okay now inside of the um GitHub repo I have got an example file here so you will find that as well but in this case I'm going to do the following I'm going to say the first one should be the Google ID okay so I'm going to get that in a second the second one is called the Google secret right now these two values are the ones that I had on the screen previously okay so in this case I'm going to go back to my provider click on edit configuration click on web SDK and what I'm going to do is I'm going to copy those two values into my code and then I'm going to close this file okay so that's exactly what I'm going to do I'm going to open this web SDK configuration copy the two values the ID and the other one and copy it here and then I'm going to save the file and close it okay so um someone because I hear my PC tokens like what the hell you started early so I didn't style this on time um so I'm going to hide my screen for a sec while I do this so I'm copying the client ID right now I am pasting the client ID into Google ID I am copying the client Secret I'm going to Google secret and I'm copy pasting it in there right now I'm closing my environment file alright so hopefully that made sense so now inside my environment local file I have those two values so I'm just going to go back to my authentication so you can't see it there we go okay we're golden now at this point we have to set up our API for our authentication okay so let's go ahead and do so and also one thing I do want to mention is what's really nice is you notice that I didn't write next public Google ID next public Google um secret because they don't need to be public this is one benefit of using the new apps app directories we have server components so we can actually protect our variables in an easier way now in most use cases right so in a lot of cases you don't need to be right and that's public because then you're exposing your keys especially don't be doing that with your secret Keys okay so at this point now I'm going to go ahead and add in two more things one is going to be something called the next auth URL so just bear with me one second I'm just gonna hide something on the screen right now so that way it goes ahead and makes life a little bit easier so I'll tell you what I'll do I'm just gonna go ahead and save this let's say secret key so that way no one can do it okay that will do a trick okay so check this out so I'm gonna go ahead and do a next auth oops um uh okay what was that no I'm gonna go ahead and do a next author URL so this point next door to URL and then I'm going to say next auth secret okay so now the next little secret really don't matter right you can change this up I'm just going to say this is a super secret authentication auth right so this one is basically our keyword for our own next auth right so you can make this unique to whatever you want they give you a nice little terminal command you can actually run in your tablet to generate a nice little key from it all right that's the one that you saw pop up on the screen so I'm going to go ahead and save and I'm going to close this right now so I'm going to go ahead and put my Google secret back and then close this right now okay so um my Google secret was I believe that so I'm gonna pop it in and I'm gonna close there we go okay so we're good on the environment variable front now if we go over to our terminal running things you'll see that it reloads the environment file when I hit save okay so this is built in now so we don't have to shut the server down but you just want to make sure that it actually did that right so that's Gucci we're good now we're gonna move over to the uh setting up the back end authentication right so in this case let's go over to Nextdoor and here this is how we basically do it so yes we're using the new app directory in xgs 13 but oh and guys bam we just beat over 600 likes that's what I'm talking about that's so cool man and with that I'm going to go ahead and put on one of the new jams on my playlist which is absolutely Banger so vibey right so we're gonna go ahead and implement the API authentication back-end portion okay now this still uses the Pages directory so for now we are going to go ahead and um implement the page so for now any API is back-end endpoints are in the pages folder still until they change it okay so just know that so heading into Pages folder we're going to go ahead into the API folder and you can see we've got a dummy endpoint here called hello right what I'm going to do is I'm going to create a new folder inside of it called auth right now inside of here I'm going to create a new file called with square brackets dot dot dot next auth just like that has to be sorry with lowercase a right dot t s okay and then you can find this over here next auth right so this is the one I'm doing right now okay then what I'm going to do is I'm going to basically take this right so in this case what I've done is I've taken this and I'll show you how to rename it into what we need okay so I'm gonna I've gone ahead and I'll pop this in now we're not using GitHub so we're going to be changing this to like a Google provider okay and this is going to be from providers to Google we're going to change it okay and then here you can see we've got client ID client secret which needs to change right so in this case process.id.github it's not the one that we want we're going to change it to go ahead and get our Google ID from our um environment variables and notice how I do exclamation one because I'm saying it's going to be there right I'm making sure that it's going to be there you can have a safety check before which says you know oops you need to go ahead and have your authentication but I'm just going to assume that you were you did this part right so Google secret we're going to change here as well we're going to promise that it's there okay DPAC thank you so much for the donation I appreciate you dude right so now we've got our Google authentication set up right so we've got our auth options which we're going to need later on and then we've got the next slot itself so let's go ahead and hit save right so now we've got our authentication portion down pretty nice so what we can now do is head over to our layout okay so opening up the app folder into a layout and at this point guys well oh my God the lights are flying let's get to a thousand likes come on all right so at this point now what I need to do is get this session provided so a session provider essentially wraps our app so if you go down here what you'll find is they actually have a session provider but the only problem is is that how do we get the session to pass into the um into the the provider that they give us because we're using Nexus 13 so I'll show you how we can do this okay so what I'm going to do is import session Provider from um oops and we need to create a session provider that's right right so inside of the body okay um inside of the body I'm going to go ahead and type in session provider session provider oops provider okay and then notice how it's complaining because we don't have something called session provider which is fine right it's fine I'm gonna create it so I'm going to go into my components I'm going to create a session provider.tsx okay and the session provider will look something like this well firstly it's going to be using it's going to be something called a client-side component which is why we need to say use client okay now in the app directory or in the new Nexus 13 way components are also server components by default this means things like action handlers this means things like use effects you stay anything that requires a window or some local state needs to be a client object right so in this case we're going to say that the session provider is a client-side component then what I'm going to do is import the following I'm going to import this session and I'm going to import session provider as and I'm going to rename it as provider here okay so we're importing a few things that we need and then I'm going to go ahead and say export function session provider and basically this is nothing different to a regular old functional component okay and what it's going to do is it's going to go ahead and actually have this syntax so we're going to get rid of this for now just to make it very simple and you can see it it's a provider we're passing in the provider from nextstource react and we're wrapping our children okay very simple all the children means is that basically this right here would be considered the children of this now that means that we have to pass it as a prop so children comes in as a prop and then we also have the session come in as a problem and we're going to create these type definitions now okay so in typescript to the way we did this is we say type the pro type of props is that we get the children which is a react node and then we have session which is of type session or no now this session right here is from next auth okay so we're saying we're expecting a session from next auth and we're expecting some children which is just going to be child react nodes right so in this case and then all we're doing is we're basically just injecting our children we're basically powering them up we're wrapping them with the extra functionality of the session stuff right so in this case I can close that and I can import my session Provider from our components object and as you can see it's freaking out because we are missing the session the children's not freaking out because the children is coming into it okay um Joey says stani sunny thank you so much for these builds I'm a better developer because of you thank you so much dude all I ask is that if anyone's watching this right now and they're not subscribed just hit the Subscribe button and hit the like button it helps send this video to as many people as possible and I want this video to hit a million developers right mark my words it will it will it will I don't give up right in this case we've got a session right here now how do I get the session okay how do I know like how do I actually get the session I'm trying to go ahead and inject into my session provider well the way we do it is we simply go into we import get server session from next auth now in my old video you might have seen that this was actually unstable now it's no longer unstable right don't get me wrong it still has like a bit of jankiness to it but it's pretty good right Deepak says I got my better job I got better on my job because of Sunny thanks bro I appreciate man so here we're going to say concession equals a weight get server session you're probably wondering did he just use an await in a functional component what because we can do that instead of components right but I'll explain that in a second so we also need to put in the auth options from our API so in this case auth options was the stuff that we basically said where the providers were and all that kind of stuff okay and then your weight so in this case because it's a bio default Remember by default their server components server components can definitely be asynchronous functions but if you have a client component that cannot be an asynchronous function okay so now what we're doing is we're injecting the session now what we've essentially done is we've powered up our app so everything inside of our apps or any other children have the ability to share the session State the session essentially just means once I'm logged in there will be a session present once I log out there will be no session okay so that's how we're basically doing things right uh Muhammad says hello I hope you read this because of you I've got a next year's internship all because of you thank you man your birds are amazing a lot from them thanks again I appreciate you guys and that's awesome man that's sick right wow the positivity is mind-blowing all right so at this point we've got the session in so we can now Implement something like a login right so what I'm gonna do here is I'm gonna have a little bit of a ternary operator and what this means is I'm gonna render out the following based on if a condition is true and we have the session right here so what I'm gonna do is I'm gonna say if there is no session then what I want to do is render out something else I want to render out this okay so I'm gonna say if there is a session then this should happen otherwise I want to render out something called the login component okay and we don't have a login component so let's go ahead and create this right now login.tsx rfce yes it worked and then go ahead and pop this in like so and if I show this on the screen when I hit save what we should see once I go back to my layout and hit import save what we should see is I get a login okay now if I refresh you'll see I'm getting a login screen now boom this is good because we don't have a session right so if we don't have a session you should be seeing the login command otherwise you should be seeing this and yes there are so many ways you can write this you can have a return statement up here you can have those different things going on right Egypt in the house what's up guys oh this music is so sick I actually love my own playlist I swear I add to this thing so much it's so good all right so at this point this is actually what I told you by the way right so um we're going to create a login component so heading over to login.tsx now that we've done all the prep work it's actually a lot easier than you might think okay so this is going to be a client component now the rule of thumb is you want to try and basically keep your components to be uh server components and only client Heights so I only make the components that you want client-side to um to be smaller components right that way you kind of keep this other component benefits right without kind of losing everything right can we get the playlist please yes it's in the description just simply sign up to newsletter it gets sent out to you right so at this point we're going to go ahead and import the following so I need to import the sign in function and the image component from next image and then we're going to go ahead and have the following now bear in mind in the layout right what we were having previously was the um and body okay it's cool that's fine I I just realized something that I made a mistake on my old one I'm actually going to change that now so I don't mess this up one second guys with me okay that's better pet peeve don't worry you never knew anything just happened right so at this point I've got an image component and this image is going to be for the chat GPT logo so I've actually saved you a bunch of time I've made my own little link to a neat little logo so before I hit save I'm going to add a button and that button will say sign in to use chat GPT and hit save now what we're gonna see is we're gonna get an error and this is because whenever we use the image component what we're essentially doing is we need to go ahead and image component handles a lot of optimizations it basically condenses the image it delivers it in a certain way it makes it more efficient a lot of this kind of stuff happens right and what we may need to make sure we do is white list only the domains that we trust so if we go into our next config next config and here what I'm going to do is I'm going to type in images domains are we pass in an array of characters here and you see the host name is the one that we need to go ahead and copy so I'm going to copy that into it right now then hit save and then do a comma and then we're going to close them and because I done a big change in my next JS config you have to restart your server okay so let's go ahead and control C to cut this out yarn run Dev and if you're enjoying this honestly just see what it's like inside zero to full stackers so this is the vibe we have all the time in the coaching course weekly coaching calls links in the description if you want to check it out so let's hit refresh and just like this wait for it there we go sign into chat GPT and boom we have a logo all right so that's good now I want to basically style this out so I'm going to say the background color and I've already got the nice little color of chat GPT to save us a little bit of time so let's go ahead and pop this in right now so pop in that in like so so I'm gonna get rid of our little rocket situation put that in so it should be the height of the screen I want it to be a flex box right I want to be Flex in the column Direction I want it to be the items should be centrally aligned so it should be centrally online and I'm going to justify in the center so I'm centering on the X and the Y axes okay and I want the text to be Center as well hit save and boom we get a nice Central axis right so this is looking good oh this song's sick right so at this point this is looking pretty good and now for this button I'm going to go ahead and style it out so it's going to be a text White font should be bold text should be 3XL and I'm going to make it animate posts so this will give a nice little animation to it so boom sign in to you chat GPT is clickable as well right but we just don't do anything on the click now you see we pull in this sign in method from next auth now the the good thing about next author is once you get over all of that headache of the setting things up and you know the messy stuff that we just dealt with the actual implementation of signing in is actually fairly straightforward so all we need to do now is call this function so on click we do an arrow function and we just say sign in right and then here what I can do is if I do this this will take me to a provider screen where you'll have all the different options of providers but I only have one provider here so I'm going to pass in a string and this you see we get all complete for the different ones I want to pass in Google so it's going to try and straight away log me into Google Okay so let's go ahead and give this a try so I'm going to go ahead and click on sign in to use chat GPT and we get redirected to Google now this is what we want to see since this account is blocked the apps request is invalid and we get redirect URI mismatch now this is because over on Google side Google's like whoa whoa whoa who the hell are you we don't trust you you ain't logging into this app so we have to go into the Google Cloud platform and basically say this is safe to go ahead and do it and we also have to repeat this step when we deploy and make sure that that domain that we end up buying from hostinger or the one that we get from the cell is also whitelisted in the process right so what we need to do is go over to console we need to go to Google Cloud Google Cloud right and I'm going to go into so all you want to do is type in Google cloud and what I'm going to do is just hide the screen for a second because I have a few things that are going to pop up so go to console.cloud dot Google .com and then well you should see is The Following on the screen okay you should see this Google contour.cloud.google.com all right and then I'm going to change my account to purple react so give me one second I'm just gonna wait until that loads cool and now what I'm gonna do is I have a few different projects here so I'm going to go into charge gbt clone and I'm going to go to the most recent one so chat GPT and this is the most recent one so it's chat GPT messenger YouTube so I'm going to click on that and now you can see it goes and takes me to that now all I need to do is go into navigation menu go into apis and services and go into credentials okay then we need to basically go ahead and configure our oauth 2 endpoint so all those two client IDs click on this and one shot at this point we now need to go ahead and white list so essentially we have the localhost 3 5000 here we need to whitelist localhost 3000 that's the first thing the second thing is this URL right here right so in this case we need a special callback URL and then what the one thing I didn't see that was basically usually it gives us a nice callback URL in this case um I can get rid of that one second where is my nice little demo of on is it here where's my code so firstly I'm in 3000 here so three thousand well I'm in three thousand one so if I try and log in so view developers see error details here we are right so you need to click on error details and you see request details redirect URI so you want to copy this redirect URI because this is the one that is trying to use and we have to essentially go to add URI and we're saying this is okay we trust it okay and hit save now what we've done is we've told Google it's safe right we've said it's safe to go ahead and do this um okay so at this point now what we do is we go back to our app we simply head over to Locos 3000 and we try again so English music 2020 says sunny what's up dude okay so now I'm going to click on sign in to use chat GPT and boom we have a permission to use it okay so I'm gonna go ahead and hit my name right here so I'm logging in and then this is perfect this is what we want to see so now we have Google authentication and now I have a session which means I get through the past the layout screen right so at this point heading over to layout.tsx you can now see I have a session so bypass login and now we get this and if I refresh you can see we don't get a little stutter it straight away goes to this screen which is banging perfect because it's doing on the server it knows on the server side if this person from their request was authenticated or not okay amazing stuff so now that we have the session we can actually go ahead and log this out and I'll show you what we actually get so if we console.log the session here you can now see that we get the user's information here right so I get the user's details their name their email and their profile picture so we can go ahead and use that information throughout our build and that's provided by the session provider throughout the children components right so amazing stuff John Fitness is sunny is the best thank you so much this is Rwanda let's go what's up dude good to see you here okay so next up we have the sidebar so sidebar what I want to do is firstly I'm going to have a nice little little picture of me at the bottom let's just miss the start simple right so what I can do is I can get the session object we don't have to prop here we don't have to pass things through we can instead use the user session variable so at this point I can go ahead and say const and then I can say equals use session now what I do is I import the the U session hook and we need to make our sidebar client side because I'm using hooks now okay so use clients so this means that we've now converted our sidebar to be a client-side component and you can go ahead and refactor as much as you want but yeah and at this point I'm going to destructure here called control spacebar tells me that this data and Status here but we're going to rename the data to be the session variable okay so that has the same information I showed you previously and now what we can do is at the bottom of the screen so at the bottom of the underneath this div I can now say okay if you have a session then I'm going to go ahead and I'm just putting safe measures in here like if if there is a session because it can be Corner cases where you know it might not be logged in or you might catch it and you don't need to bug out so I'm just in a little bit of a precaution there saying if there's a session we're gonna say show me the user's image all right and we're going to force that the images there otherwise you could go ahead and have a fullback image there right if you wanted to but I'm just going to Foster the images there uh Taco says will this build be uploaded after live yes all my bills are always uploaded after live and also we are so close to 700 likes to destroy that like button right so hit save and now you can see we get a nice image now you're probably wondering Sunny why is that not an image component that you're using because sometimes the image that we get back from the URL could might not be in the format we it might not be from a trusted URL right it might be from a different Google URL in which case nextges is going to freak out and be like no you haven't whitelisted that so in this case I'm just using this for now okay but um here you can give it a profile picture and so forth okay so then we're going to style this up so here I'm going to say that it has a class name and then we're going to say height and width of 12. we'll say oops all right a width of 12. rounded four cursor should be a pointer and then we're gonna say margin X Auto to center it margin bottom of Two And when I hover over it I want the opacity to go to a nice little 50 Gap right so 50 gives a nice little effect right so now you see when I hover over it look at that oh nice and we're gonna use that as a log out button okay so making that logo button is so easy all we have to do is simply go ahead import the sign out function from nextstour's react go into our image component say on click of this button we're just going to implement the sign now and then we need to do a little arrow here to get around typescript sign out and just like this guys let's go ahead and try out our authentication so I'm going to sign out and just like that I am signed out I go ahead and sign in I now I'm initializing a session object through Google authentication and Bam we just get the nice forward screen right so this is exactly what we wanted amazing stuff we have all authentication now we can proceed to Firebase because now we have all the items that we need to go ahead and actually populate the database we have the user we have the input foldable setup in a sec but we're going to go ahead and do all of this right now but the first thing I want to do is have the abilities that way when I click a new chat it creates a new chat Row for me and then it will take me to that chat so forward slash chat forward slash you know the chat ID okay so oh my God so close to 700 likes wow let's go guys all right so at this point we're moving at an amazing Pace as well so we're gonna go over to the sidebar let's go over to my sidebar let's just make this a little bit more neater let's head over to the sidebar right now and then what we're going to do is we are going to set up the collection so okay so now we need to make a connection to Firebase so we need to go to our Firebase so we're gonna close this we're gonna go to Firebase and then we're gonna go to build and then we're going to prepare our firestore database and this is going to be our real-time database which is going to store all of our chats and this is not just a normal UI for chat GPD it's actually going to store chats and when you switch users it literally shows you the chats that that user user has so it's literally like the actual charge GPT uh platform so we're going to click on create database we are going to start in test mode however I highly recommend afterwards you change the production mode then add in security rules so click and start and we're going to click on enable we don't care about location for now set it to wherever you are near you it might help you out cool and now we are going to do we're going to enable cool now this is our collection so this is a nosql style database right so previously we had I don't know if it's there oh okay so that's fine I'll show you anyway so we're going to have a user's collection the user's email address which is unique then we're going to have the messages collection then we're going to have the chat sorry collection and then we're going to have the messages inside of it okay so it's going to be that kind of structure and that's going to allow us to go ahead and have the outcome that we need okay so let's go ahead and firstly I don't need this taking up room so you can get rid of that right now cool okay so I need to create a connection from my app to my Firebase how the hell do we do that well first things first is we're going to create something called a firebase.ts file so we're gonna go to my packages and create a Firebase dot TS file there we go 687 likes oh this is crazy still trying to make two likes oh we're getting there we're getting there right Firebase and now what I need to do is I need to install Firebase right so you can do this in a bunch of easy ways but the quickest way I want to show you is Firebase yeah uh sorry um Firebase I just want to show you the actual documentation so v9 you just type in yarn add Firebase but I want to show you the actual documentation itself um because you should just you should see that right so in this case upgrade guide you can do it here npm install okay it's fine I'm just going to show you that my way but yeah you can go to the home page and then get started and basically read through the docs but here it's a very good place to get started right so you should check that out but I'm going to show you how to do it anyway so here we go into our Contour yarn add Firebase like so that's going to install Firebase Version 9 700 plus likes let's go quick wall break is deserved after that oh my days this is crazy this video is gonna bang I'm telling you it's going to be a big one it's getting the momentum on YouTube back guys this is so sick okay let's go so Firebase has been installed and now what I need to do is basically import the dependencies that I need okay so I'm gonna import the things that I need so in this case boom we're going to pop this in um and then you can see here we've got get app get apps initialize app and get firestore okay so I'm gonna have the Firebase config set up so the way we get this is we go to our Cog project settings we go down here to this right and then we type in um chat GPT messenger YouTube don't matter too much we don't need Firebase hosting because we're deploying on the cell and then we can go ahead and we've already done that install tag and this is what we need next right so this is public information it's fine right so in this case I can pop this in we've got our initialize app core we can get rid of those I've already done it for us okay so that's our configuration of it now this is fine in a react app okay because you're you're not going to have several instances that it could be occurring but what we need to do is do it in the next JS approach because there could be the possibility that we already have enough the initialized right so in this case we say const app equals get apps and this will tell us all the initialized apps right so an arena only array of all initialized apps and all we're gonna say if the length is present right so this basically says if it's truthy so oops okay dot length Okay then we're gonna say if it has a you know if it's already initialized then we're going to get the current APP that's initialized okay else I'm going to initialize a new app all right so I also initialize a new app and this is going to be a bit passing in the Firebase config and this is called a Singleton pattern encoding okay so this is known as a Singleton pattern encoding okay so it means that we only want a single instance now from that we're going to go ahead and get our database object okay so we're going to go ahead and use the get file so this is a modular Version 9 approach and then we're going to export the database object because we don't care about the actual app right now we don't really must like worry about that it's just going to be DB right so in this case that stands for our database hit save and now we're going to go ahead and close that so our Firebase config is now done okay so now what I want to do is in the sidebar where we have new chat right so remember in sidebar we have the new chat button so what I'm going to show you is the really nice part about this is very a very like kind of decoupled right which is what our good program practices should be like it's D cupboard it's a lot cleaner and working that way okay so what we're now going to do is we're going to have um this new chat have should have the functionality to go ahead and add a document right so I need to add a chat create a chat if anything okay so at this point we're going to go ahead and create a function called create new chat so const crit new chat and this is going to be an asynchronous function so it's going to be an asynchronous function it's going to be an arrow function and then what we're going to do is if you click on this div so on click of the div we're going to go ahead and say it should create a new chat okay so passing the signature in well listen says let's go let's go guys next year is 13 on Firebase version nine right so at this point what I'm gonna do is I'm gonna create a basically I'm gonna go ahead and create a new chat right so the way I do this is I simply go ahead and I firstly need the user's information before we can do that so I'm going to pull the user's information from the session so previously we described this over here we import it we rename the data variable with the colon syntax to session all right so that's what that does if you're wondering okay and then we also need the router because we're going to need to direct them to a new screen afterwards now when you're using nexjs12 please please be careful that when you go ahead and use like router and all that kind of stuff you don't make this mistake you see how I import it from next router no no no you want to import from next navigation okay and this is also going to be a client component okay so when we're using the next js13 like sort of stuff we don't want to do next River we use next navigation so it's a very easy mistake you can make but it will screw you up and you'll be there for ages trying to figure out what's going on okay so at this point we're going to say const and basically what I'm going to do here is I'm going to push something into the firestore database all right so I'm going to push something into our firestore database so click on continue to console file store database I'm literally gonna from our application when I click it I am pushing a value here right and I'll show you what value we're doing so and then the response will be the document that I've actually pushed in so we're going to say equals a weight right now the way that you do this is this modular approach so it's going to be ad Dock and that is how I'm going to be importing things okay and then what I do is I simply I basically have to specify the collection so the way you do this is I say it's a collection and then what that does is it takes in firstly the database so see how it takes in firestore as a first augment so that's going to be the database and I'm going to import that from our Firebase locally alright so that's my config then we pass in the path so this is gonna take the approach of it's going to be essentially um the path document so it's going to be collection document collection document which is a nosql style structure okay so here we're going to say users then we're going to say session dot user dot email right and I'm going to basically say that it's always there which is hence the um exclamation mark and then I'm gonna basically pop in a new chat okay and then I'm going to close it off now we've made a mistake somewhere wherever I made a mistake it's uh argument for data was not provided um collection a dark um yes and then we need to go ahead and oh yeah and then we need to pass in the data object itself so the first argument is basically the path right and then the second argument after all of that is going to be the data itself okay so that's going to be outside of this right here so the data itself right so notice how it's after so there's two arguments right the first argument first argument and then the second argument is the data so the first argument is that collection group and the second is going to be this basically what I want to push into that document so in this case I'm going to say it's going to have a messages array which is going to be a basically like a an array of messages right so there's going to be a collection in there we're going to say the user ID will be stored and this user ID will be the session user email okay and then we're also going to pop in a created app so a timestamp because you should be passing in timestamps when you're doing this now you don't want to use your local timestamp now the reason why you don't use your local timestamp is that I'm in Dubai right now and you could be anywhere in the world we have worldwide viewers here now if you use your timestamp your message will technically be ahead of me or before me which it's going to mess everything up right so how do they figure this out so all you need to do is use the servers timestamp that way no matter who is doing it we all get the same time stamp okay we get the service times done so in this point what we do is we go ahead and we import our server timestamp function we pop it in and we invoke it and this will give us a service timestamp simple as okay so then what we want to do is redirect the user to the chat screen so what I want to do is this will give me back the document ID I'm going to do some string interpolation so sorry um router.push I'm going to do some string interpolation here to say forward slash chat forward slash doc ID okay so in this case forward slash chat forward slash doc ID we don't have that page yet but that's what I want to do so when I click on new chat it should create a new chat and then take me to that new chat okay so let's go ahead and hit save and what I want to do here is I'm going to set this up in a demo way okay so what we should see now is I've got my database on the left and on my right hand side I've got the new chat so I'm going to click on new chat and I've clicked it now because we haven't got anything here it's not going to show just yet right so you can see it actually took me to the new chat screen with a valid document ID so you can see it actually took me to forward slash chat forward slash a document ID so in this case if I go ahead and refresh um okay so please guys don't spam the shot don't spam it okay so at this point now um we are gonna go ahead and you can see here we've got users we've got my email and then we've got chat right so chats and inside of there we've got the messages itself right so this is going to be the actual so I want to show you here is this the layout right so we've got users my name and then we've got the list of chats so these are going to be all the different chats that I will be having with chat GPT and they'll be listed out here that's the document ID so we got directed to and then you can see inside of here we've got created that messages and user ID okay in fact we don't actually end up using messages so we can actually get rid of that all we care about is the user ID and create app okay so um yeah so I don't think we actually care about this one we actually use the collection instead for that one okay so let's go ahead and get rid of that cool so at this point that's looking pretty clean so we don't actually need that so we actually want to have that in the outcome so you can get rid of that okay so now what we need to do is create this page okay so what I'm going to do is just test it out one more time and go back here and then what you should see is if I click on create new chap we should see another one in the second pop-up oh there we go all right so create the chat it redirected me to the chat awesome right so now we need to go ahead and actually build out this Dynamic page so the route for that page is forward slash chat forward slash a random ID so that is known as Dynamic Roots right so I need to go ahead and create a dynamic route so I'm going to go into my app folder and using the new Nexus 13 photo structure the way we do it is we essentially draft out the root in the folders so here I say the next route will be forward slash chat and then inside of there it's going to be a random ID right so in this case we're gonna have a wild card and I'm just gonna give it the chat ID so in this case it's going to be ID and inside of the ID folder we're going to have page.tsx because remember page head layout they're all reserved keywords okay so here now what I do is I say rfce and this is going to to be for the chat page okay so in this case I'm just going to rename this to chat page get rid of this and then now we have our chat page so if I was to click on new chat now what you should see is we should get redirected to the chat page which is awesome it worked and if you're wondering whoa how did we keep the layout right that's pretty cool how did that stay around well that's because remember we have the new layout component which is actually responsible for staying in the overall structure or layout of your website okay and I actually show you loads of little tricks in this in the next year's tutorial on the channel if you're watching the replay it'll be on the screen right now somewhere okay so at this point now that's going to be pretty cool to do so in this case we've got a layout already there and you can see now we've got this nice kind of you know we all we care about is the the view of this chat page right so it keeps everything very relatively clean right now before we do this I'm going to address two things the first one is we need to show the chats here the second one we need to build out the chat page and then eventually what we're going to do is have the open API AI integration part so that we can talk with chat GPT right so it's going to be a lot of fun and then that's going to interact with Firebase administ Decay we got so much good stuff coming guys smash that like button we're almost at a thousand likes so let's cross over 800 guys we're going strong so at this point we've got that looking pretty good so I'm just going to put that text back so we know it's on the chat page okay and um what I'm gonna now do is head over to my sidebar so components sidebar okay and then I'm going to expand this out so first things first is in the sidebar we are going to go ahead and actually connect to the uh Firebase database so I need a real-time connection to my Firebase database so I'm going to go ahead and make a real-time connection to this database that you see right here okay give me one second I'm just rearranging my screens I've got everything everywhere right now there we go cool so I need a real-time connection here okay so how do we do this in a nice fashion well easy way of doing this is we can go ahead and use something called react Firebase hooks okay lovely little library and it is actually a really kind of a clean way of actually connecting to our Firebase database and they've already done the hard work of creating all these reusable hooks for us okay and it works with Firebase version nine so we're going to install that reactive yarn add rat Firebase hooks so go into your terminal you're gonna add rack Firebase hooks that will install that into our project and now we can go down and you can see Cloud firestore hooks so inside of here they teach you how to go ahead and connect to the back end and you can get a real-time list now by using syntax like this right so I'm going to now show you so firstly I showed you that because I want to show you where it comes from now I'll show you how to implement it right so firstly you get these three array destruction values the value loading and error so what I'm going to do is I'm going to go ahead and say const I'm going to call it charts instead of value loading an error I don't actually use the arrow here but you can actually use it if you want to use it I'm going to say use collection okay and then what I'm going to do is import this from react Firebase hooks right so in this case it's not autocompleting so I'm going to show you it off top of my head there we go boom and then inside of here we have to pass in the actual directory that we're going for now it's dependent on the session because I am going to be using the email to find that collection so I need to go and say firstly the session has to exist that's the main thing then secondly we're going to do connect to a Firebase collection we're going to go ahead and import our database from our local Firebase files and then we basically spell out the route okay so now I'm trying to get the chat so what I'm going to do is I'm going to use this I'm going to go to the session.user.email with exclamation mark to go ahead and say that the email will be there then I'm going to grab the chats okay so now what I'm doing is I'm essentially pointing towards this right here so I'm pointing right towards so you see we've gone through the users gone through the email I'm pointing now at the chats okay so this is what I'm getting back now so I want to get this list right here and I want to real time listen to that okay so this right here gives us that okay so now we have this amazingly powerful chat right here okay so if I was to log out chats you'll now see and this is a client-side um uh component so I can actually check the client logs and I should see three items in my log right so in this case you can see right here if I was to go ahead and log this up we get undefined and then we get the actual example of the data back right so this is exactly what we wanted um in this case you can't see it but you see in docs we've got three Docs right so in this case if we see dock changes it's actually got three docks in there okay so I'll show you how we can access this properly okay so now we need to map through so where I've got map through the chat rows we're going to say chat and it could be undefined which is why I'm going to protect it I'm going to say docs map through every single chat and return the following right return the following and then this is where I need to make something called a chat row and whenever you map through you should always pass a key which is in like a unique key so we're going to give the chat ID that value and then I'm going to pass in the ID of the chat here as well so chat.id okay so this is going to be the information I passed through so we need to create a chat row and this chat row will symbolize this right here so I'm going to log into my old example right now so I'm just logging into my old testing examples I can show you uh the reason why it's not working is because I haven't got it white listed on localhost 3001 I believe um that's why it might not work okay it's working that's fine um so in this case you see when I have a new chat right so in this case oh I've gone back to 3000 oh okay I see what's happening here that's fine so in this case if I do I don't know I'm gonna be logging into town okay so it's not gonna show me that's fine I'll show you how we do it so I'm gonna have the new chats here right so the chat row is going to be these little chats boxes that are going to pop up here so we're going to implement that right now so chat row dot TSX the retention is absolutely nuts thank you so much guys I appreciate you guys smash that like button let's get to 800 likes and let me know if is everyone focused right now because everyone is over 300 people watching and the chat is like super intense Jay's back that's it that's what I'm talking about all right so let's go ahead and we've got the chat row here so I've got the I'm going to go ahead and pop in so right now you can see if I pop open the sidebar you can see the key is basically to make sure that react efficiently optimizes the list the next prop that I care about is the ID okay so in this case I'm gonna go ahead and pop in the ID over here so in this case I've got the new chat and the props come through here so I'm going to say ID and this takes in props like so okay and then I'm gonna Define what my props will be in this case it's very simple okay so in this point we've got the ID and the ID I expect to get through is a string Now typescript is really important because it allows us to prevent the number of bugs and problems that causes that are causing that app so I recommend it's worth learning it it's going to allow you to become more valuable as a developer and then that's what we're going to do okay so um ID there we go boom and now once we've got this in we're now gonna go ahead and get the chats rendered on the screen so actually one minute guys I've completely screwed up it's not this one it's not this one my brain was everywhere it's gonna be inside of the chat row so did I create the chat row chat row yeah there we go chat row this one my bad so ID and then these are gonna be props okay so type props ID string okay um cool and in this case we're now going to go ahead and create chat row so I need a bunch of different things here to be on this video I actually need sort of um I need to determine if the chat is active I need to determine uh the actual layout the design of it and all that kind of stuff but we're going to do it right now so firstly these are going to be next link components which are going to allow us to iterate through the different URLs easier so it's going to be a href and this will take us to forward slash the chat ID okay inside of here we're going to have a chat bubble so chat bubble left icon so left icon and this one is going to be for um it's gonna be an outline okay so left icon outline cool and in this case I'm going to go ahead and do class name height and width of five I am with the five so hit save so uh we've got that yeah I don't know if you're gonna see it yet because in the sidebar if I import it like so we might be able to start seeing it being popped out now so in the sidebar let's let's log in now as I logged in I messed it up a little bit okay so we got the chat bubble left and then we should see oh yeah there we go chat hey there we go nice and then uh I've got a P tag and then the pizza okay so I'm gonna do something pretty cool here I'm gonna have a trash icon afterwards which is going to be for if you want to basically delete it all right so it's going to be the outline variant and I want to have the class name of this to be this is going to be a hate height and width of five um text should be Gray text should be gray of 700 and the hover State when you hover over I want it to become a red bin because it's going to be the delete button oh that's why I needed to kind of get the energy up all right so now if I hover over this um button you see that nice right cool now um for the P tag here I'm gonna go ahead and say the following so we need to firstly get that um that message right so I'm not gonna include this right here because what we need to do is we're going to pull information from the chat afterwards right so in this case this right now we'll just say new chat okay so we've got a new chat for now and eventually it will say the text in which your last text that you had with the chat GPT the last message it will say that eventually okay um go ahead and drop a little fire Emoji if you're still watching right now right in the comments or in the live chat okay so in this case chat ID so now what we're gonna do is style out the outline so this overall link okay so class name I'm gonna go and say it should be firstly we're gonna do string interpolation because I'm going to use the active State what we haven't defined yet but I'll show you afterwards so firstly this is going to be of type chat row so notice how chat row automatically kicked in really nicely then we're going to say justify Center okay so now you can see like chat row looking pretty good okay and then for the P tag this one is going to take in Flex one so Flex one it's going to be hidden on the mobile view on the medium screens and above it's going to show and then I'm going to truncate if um oops on a trunk it if not okay oh I see that's why okay so my stream uh oh that's it so the messages are over there I was wondering I was like what the where the heck is the messages where's everyone's so quiet it wasn't that it was just because my um my chat was a bit weird right that's why we're good oh there we are there we are nice I don't know what happened there I don't know why I didn't show what's up Mr Frank's in the house everyone's here okay I was wondering I was like is everyone's a super intensely focused my bad that's it yeah all right so now you can see on the medium screens it will show new chat [Music] uh truncate oh nice there we go Bastian I appreciate you dude there we go it's a new chat and the trunk it will basically mean it'll do dot dot dot if it gets too big tagara says we out here that's what I'm talking about all right so this is sick so now we've got the chats over here cool and then we've got a new chat so see if I add a new chat it pops in this is looking good okay so I'm now gonna go ahead and set up everything that I need so we're gonna need a few different things inside of here firstly right we're gonna need a path name because I want to basically have it so if I'm in this chat I want this to be highlighted if I'm in this chat I want this to be highlighted and so forth right so in this case I'm going to say const path name equals use path name from next navigation right not next router next part there we go and then I'm going to say const Rooter with curl it we're closing in on 800 likes guys so equals use router and we're gonna pull this and you see this this do not make this mistake right next navigation is the one you want for next 13. we need the session so I'm going to go ahead and pull this in so session equals data session use session um like so and then we need um an active State okay so this one I'm gonna end up making a use effect if you don't know what a use effect is please check out my user fat tutorial it's got over 100 000 views now because people are finding it so useful so check that out come back if you're confused and then carry on okay so this is going to be a piece of State and again the state as well I've done a tutorial on that as well okay so first things first if I if this chat that I'm in is active so I also need the messages so we need well let's just do it now right so I need the messages which is going to be a cool to use collection so I'm gonna say const messages and remember you get the loading and error and so forth but in this case I don't care about the loading and error I just care about that we're gonna have the use collection from here and then I'm going to go ahead and say it's going to be a query now because basically I want to do what I did before so I have a collection but I need to order it by the Creator that date so that way it's always in the sequential time and date order right so in this case what I do is I pull in the query from firestore and then we basically make a like a a combined query right so in this case the first one is going to be the collection itself so this is going to be the collection from firesource connection to include that um the day the database there we go and then it's going to be the path so in this case users it's going to be session oops sorry session dot user Dot email and then it's going to be making sure that it says that it's always there so that's why we got the exclamation mark and there's gonna be chats forward slash the chat ID which we have inside of here because of the oops sorry wall a bit not because of the ID we get passed through here Romania in the house what's up yeah and then we're going to go into the messages themselves okay it says the messages collection within okay so that's that bit then what I want to do is comma over here so if you see here this is a Commerce it's like the second argument of the query right we're gonna say order buy from firestore and this one is going to be the created app field which is the one basically the timestamp and we're going to do ascending okay so what this will do now is it makes like an aggregate query so basically it queries the collection for here gives me a real-time list now but it orders it before it returns it so this way the messages are always going to be in time order ascending okay so now if I hit save what we can nicely see now is uh those messages will be and the reason why I need that message by the way we don't actually need to order it here to be fair I don't think yeah we don't actually need it here um I need the exclamation mark because otherwise it will say you know that the session user email might not be there right but in this case we logged in with a Gmail account which means we always have an email so I'm going to say that it's always there right um vetri thank you so much for the donation he goes hey Sonic big fan of your bills can you do more Builds on blockchain using and web3 stuff I sure can right I have amazing uh partnership that we're working with so I sure can do that I hear you dude all right so at this point now what we're gonna do is um one second all right so um so so in this case what we're now going to do is um sorry I've gone bit blank so we've got the yes the messages so the reason why I did that right there was because I actually so in this case I didn't actually need to order it I don't think yeah it's fine uh it's fine yeah okay it's okay cool um so in this case we can go to the actual message so I want to basically get the so this is deleting oh no sorry I need the text so I need the actual text of the thing I'm calling so in this case messages docs right and then what I'm going to do is I'm going to get the lens some messages dot docs and this is could be undefined dot length minus one and then I will say data text right and I'll explain this or it'll say new chat so basically what this is doing is I want it to basically pull the last bit of text from that chat okay so pull the last bit of text from that that chat itself or just say new chart okay so in this case it hasn't got any messages there so it has nothing to say but that's essentially what we just did okay so now also notice how if I click into these it changes the URL to that link so every time I click on it it changes the URL right so the next step is to have a user fact which determines if we are active or not so in this case um I'm going to say use effect and then we've got our Syntax for use effect with our dependency array and then I'm going to say if there is no path name I'm going to return from this function because we're going to protective we're defensively programming otherwise I'm going to set active and I'm going to basically say if the path name includes the ID it's a very simple check okay and then basically as we have a variable inside of here we have to include it in the dependency array okay so path name here now what we can see is that the active will now get set based on this Fair of this matter so what we can do here is I can actually go ahead and apply a conditional styling by saying the following I can go ahead and say um active and that means only if it's active should you change the background to a slightly different shade of Grace that way I know that that's the one okay there we go guys look at that active so if I click this one now Mom that's active if I click this one now bam that's active Okay this one now bam and then what if I click a new chat notice how it creates a new chat and then it makes that the active one so so good right so so good in fact what I didn't do correctly and uh which I made the mistake on as I should maybe order these in the um the other one so in this case the query call that I've got here maybe we should be applying it over here which I think would be a nicer version to do okay so what I'm going to do is I'm going to pop this open on the side and I'll show you what I'm doing is I'm simply just moving this right so I don't need the query here I need the query over here someone say query I'm going to wrap my collection like so and then I'm also going to pass in the order by create there we go create that ascending and now I'm going to pass in the query I'm gonna pass in order by hit save oops my prettier is dying here there we go and now this one will basically query and this one I actually didn't need to query it I just realized I didn't actually need to do that so that's better okay so now what I just did guys was I basically said that on the sidebar the most recent one should come at the top of bottom I can't remember but basically if I click new chat there we go so the new chat now will come to the bottom so you see that if I click new Jack boom there we go and it automatically selects it because it that is now being highlighted based on if the root matches so you might actually find that massively useful because a lot of you always ask me how do I now go ahead and do that so somebody says why not use use path name instead of user fact um use I think you can actually use path name I did use path name over here guys so if you look inside of chat row I use use path name to get the path name and then we have a use effect to determine if the path name that I got from use path name was the one I wanted or not or is it the active one currently in state right so the next thing I want to do is the ability to delete a chat okay so I'm going to create a function called const remove chat oh my the whoa ten dollar donation as the song's about to drop holy crap dude thank you so much you just wrote a thank you on it massive appreciation that's huge this chat is this stream is popping off today like this is actually mad I'm gonna remove chat it's gonna be an asynchronous function so sick thank you so much guys right and then here we're going to say a weight and this is going to be a delete dock call right now think about what's happening right because I'm gonna call this method and we have a real-time listener rendering out things in the sidebar sorry I've real-time listener rendering this out so as I delete documents they're going to get real time affected in the back end and it's gonna go and show this right so it's going to have a lot of stuff going on 800 likes as well banging let's get to a thousand guys come on I know we can do this so I'm gonna open up the dock right now and I'm gonna pull in the database which I believe I have already yep I've done it and then I'm going to say we're gonna go into the users we're gonna go into the session dot user dot email with it make sure it's there then we're going to go to the charts then we're going to go into the ID and then we're going to go ahead and basically yeah so we're just deleting that document so basically deleting that chat right there because look it's a chat with the ID of something right so that's essentially what we've done and then what I'm going to do is I'm going to push the user from that screen or we can actually replace the user URL because they shouldn't be able to technically go back to a screen that's deleted right so in this case now remove chat is assigned here and then what I want to do is hook up the trash icon to this button so now when you click that it'll remove that chat and because we have a real time listener connected in well this should work flawlessly so if I go ahead and do this boom how boom boom boom we can add new chats delete them add new chats and if I wait a second it will redirect me to that chat oh it's just so beautiful look at that if I delete that one it will change to the home screen oh it's amazing if I delete that one it will change to the home screen look at that guys I can add like five chats at a time delete as many as I want and it just does it and then Firebase in the back end this is all happening so if I go into you over here now you'll see that there's there's Madness over here right look so look at this chats right here delete delete delete delete oh it's just it's a beautiful look three Chance by my mom oh it's just so nice all right so really nice really really nice okay now we have the chat functionality we have the ability to create and delete chats so now we're gonna go ahead and no flashing UI while deleting I know it's beautiful it's just so Masterpiece right so this point we're gonna go over here Holly says how cool is that I know right it's so sick all right so now inside the chat so over here now this is where the it gets really interesting right so this is where we're gonna essentially go into chat gbt stuff okay so get ready for this so at this point we have um firstly we need to go to the page itself and inside of here we're gonna have two main elements okay so the first one is going to be the chat window right it's the actual chat the second one is going to be the chat input and these are going to be decoupled elements right this is why I'm creating two separate elements Rd says Vibe song is honestly it's really cool right so here we're gonna say that this one's gonna be a flexbox flex column height of screen and then we're going to say overflow hidden right so the reason why I want to have overflow hidden is because I want to have it scrollable right so once I'm in this chat screen I actually want to have it like a scrollable I don't want it to ever the whole page scroll down I want it to be a set height and then I want to have the inside chat only that to be scrollable okay so now what we need to create a chat component so chat.tsx to rfce get rid of this this is going to be my chat screen so now if I go to my ID screen so my ID screen right here and I go ahead and I get rid of this so I can say chat now I popped in my chat component and then here you can see over here I can go and say let's chat boom so that's the chat component awesome stuff right and then right alongside that if I go back into the chat I can go ahead and create the chat input as well while we're here all right so let's go ahead and just do two bars one stone let's go ahead and create a chat imprint on my components folder so chat input.tsx rfce boom go up here delete and now over inside the page.tsx so over here I'm going to go ahead and import this like so okay now we've got the chat and the chatting but so we're going to change this into what we want Newt Buxton whoa what's up dude you're Sweden in the house so Sweden says sick man okay so at this point now we've got the chat page okay now the chat page itself I do need something from this um I'm just determining what I need so at this point um from this page okay so I can get this ID because this is a page route okay so this right here is a page route okay which means that page Roots automatically so anything at the top level not a component a page route anything at the top level gets from props and when you have a dynamic value like this rather than doing use path name and cutting it up and like that you don't have to do that right instead you just go ahead and do if you've got props like so you can control log your props and look what we get inside and notice how this is a server component hence why it's going to be listed out in my server logs so in this case you can see params so you see how the ID is in there so what I'm going to do is I'm going to extract this but I'm going to do it in a safe way with typescript so I'm going to say I'm going to enforce the props prospers right and then I'm going to say params are inside I didn't care about the other ones all I care about is a string there we go and then I'm going to enforce it so I'm going to say that this is params and I'm doing some inner destructuring work here so destructure it and the props there we go right and uh Sunny what have you done oops my bad props there we go cool now inside of here I'm going to pass these in so I'm going to pass the ID down here and I'm going to pass the ID down here so only one layer of drilling in airlite props someone's someone someone inside is like why are you doing this why are you passing ID in it's okay right it's fine and here I'm going to rename this as well to chat idea so let's rename this to chat ID boom and then in my chat I'm chatting input I'm going to update these accordingly so let's go ahead and import this right now so firstly I'm going to have a types uh my prop type definitions like so then I've got my chat ID with the props Okay so we've got this updated and then we've got my my chat I see how we stop complaining I'm gonna do the same thing for this so we've got the same um props being passed in here so chat ID drops and then we're gonna say type props charity string okay so now we've got this looking pretty pretty nice so now we've got our props being entered in so the first thing is let's do either the chat or the chat input really don't make a difference uh track this too fast okay so actually let's do the chat input first because then I can actually enter messages in and then we can display the messages all right so let's do that makes a more logical sense so the chat input is actually the bottom one so I'm clicking into that command click and then we've got the chat input so let's get the magic done here guys all right so first things first let's get the UI in so we've got a form right the reason I've got a form is because I want to have this like type in hit enter functionality right so here I've got the input it's going to be typed text um and then I'm going to have mapping it to the state now there's many ways you can map your text and get it out of an input field okay I know this you can do it with the ref you can do it with state I'm going to do it with state today but you can do it whatever way you want graph State whatever I'm doing State because I want to disable it um if there's no session but yeah you can do it whatever you want to read them it's just several ways you can use react to its form yeah there's so many ways you can do this right so here I'm going to say type your message here this is when I got my Tesla in my Vlog this uh this is that soundtrack all right last name P5 SpaceX five Flex one nice and now you can see we've got a little input forming up at the top we're gonna have a submit button and this one is gonna have a paper airplane icon okay so inside of this button it's just gonna be a paper airplane icon and that's gonna be a solid I believe yep solid so in this case we've got a paper airplane icon there we go somewhere there so we're going to make that look really nice don't worry and then after that we're gonna have a outside of my form we're gonna have oh God that's horrible outside the form we're gonna have a div and then here eventually we'll have modal selection as well model selection right so basically eventually I'm gonna have a drop down here which allows me to select the model or I'm going to have a drop down at the bottom which lets me if I'm in mobile view it's going to show up right so I'll show you how that works afterwards but I'm just writing a little reference here so that way we don't forget to do it okay so the button here should be type submit because that's what I'm going to automatically submit the form when we have when we do that okay and then now what we need to do is basically have a piece of State hooked up to our form so quickest way to do this is you have a value you hook this up to a piece of state so in this case I'm going to call a piece of State prompt okay I'm going to create my piece of state now so we say prompt um set prompt and it's going to be a string value so in this case we don't need to cast it I'm going to give it a blank string to begin with that's fine and I'm unchanged this means as I type in an event is going to get fired off all I'm simply doing is updating the text here to be set prompt oops what is that um set prompt to be e.target.values as the user types in it will update the state right so that's fine and at this point you can see we're using stay inside of a component which is a server component big No-No so at this point you have to tell it and say you are a client side component Daniel or acrossey says thank you very much and you've been a blessing to my web Development Career hashtag popular thank you dude I love messages like that and I appreciate you so thank you so much for tuning in eight time and time again to support Channel and I'm glad I had a good effect on you dude that's why we're here right and if you all I ask is that you guys smash that Thumbs Up Button we are not nearly at 900 or so close to a thousand it's so close to a thousand I haven't made my day if we get a thousand likes it all right so we're looking good so far right so on the outer div I'm gonna start styling this up and by the way to test this all you gotta do is type in if you see yourself typing in and it works you've mapped it correctly if you don't type in your mapping is off you need to check these two lines occur with this okay so that's good so now uh for the class name I'm gonna say the background should be gray 700 so background should be gray of 700 uh with a 50 opacity text should be gray of 400. I'm going to round the corners surrounded LG the text should be small uh focus should be outlined so focus should be outline none so basically I don't want to have this nasty outline outline none so when I'm focused uh to be fair I don't even need Focus you just do outline none there you go there's the outline yeah ring none no ring zero no ring no active okay I'm sure it's focused yeah focus online then okay um that's fine okay um so now what I'm going to do is for the input oh so it's the input that's one listen to me all right this does nothing all right it's the input all right so over here do I have a class name and this is where we style it so we say background should be transparent let's skip the song background should be transparent um focus here is where it's outlined none I was wondering why I wasn't doing anything because there's no bloody thing there like sitting here so we say Flex one I wanted to use up the majority of the space look how it firstly that looks beautiful right and then secondly the uh this shouldn't be Flex it should be Flex that's my bad yeah so now you can see now we'll take up the majority of the space over there right so that's much better okay and um guys you've been incredible in this stream honestly the energy everything staying with me this long it's incredible I'm gonna say if it's disabled this can say casts are not allowed and then it's also going to have grayed out text if it's disabled okay of 300 okay and when is it disabled right I'm gonna say it's disabled if there is no session and I'm going to get the session by doing what we typically did previously by basically going and doing this right so we pop in our session like so so if there's no session I want to activate that but to be honest you won't even be on the screen right so I'm just going ahead and doing a protective block there but you shouldn't even be on that screen yeah so it was more so when I was doing it before but for the button I don't want to submit anything if there is no prompt or if there is no session right so this is an or statement so if you if you haven't typed anything in it should be kind of grayed out right so in this case good that looks all right but I do want to style the button class right so in this case the class name and I'm going to do string interpolation here so backticks because I'm going to be using uh actually I'm not going to be using it so I don't need string there we go so I'm going to say background should be someone says I literally can't leave the stream Pali that's what I'm talking about dude that's the energy I want that's what I'm talking about I hope in Greens like in Greens every last minute of you would do that's what I'm talking about man how over opacity make it 50 opacity and now you can see look that looks good man so look when I hover over it like oh nice okay so we want it to be a background color like that but we're going to say text should be white um and then the font should be bold okay I wanted to do padding on the y-axis uh firstly why is it so small that's right yeah okay so padding on the x-axis of four depending on the y axis of two rounded on around the corners look at that oh nice looks good all right and then the prompt right here we have no prompt so why is it not disabling this okay that's oh yeah my bad my God I'm making silly mistakes to disabled if it's disabled we have to style that someone say background should be gray 300 to resemble that it's disabled and I'm also going to say the cursor should not be allowed so now if you see here it's going to be grayed out with a cursor not allowed symbol so if I go ahead and type in boom look at that so nice all right let's support the proper fam like And subscribe but Patty that is what I'm talking about yes if you want to support the channel like subscribe that's what I'm talking about most of you are watching right now you're not actually subscribed alright so just subscribe it helps this channel grow massively you have no idea right so that's awesome I think we've done the chat correctly this is exactly what I wanted um the the actual chat window itself will push this to the bottom okay so that's what's going to give it that nice finishing effect and I can prove to you that they will do that by going over to chat right now and I'm just going to add in the flex one over here right so this is basically going to say use up the majority of the space that you have so the chat will use up this space in which case you can see it pushes it down the reason why this works guys is because remember both sibling components so these two are in a flexbox flex column so this one's saying Flex one so use up all the space the chat input is then forced to be at the bottom of the screen nice that's what we want right naturally that is exactly the UI we want okay so heading over to chat input now let's have the functionalities that way when I type in hit enter it's going to go ahead and push this into the database and then we're going to start doing some chat GPD stuff right so we got some cool stuff happening there someone says where to get a repo link of this project it's in the description down below so you can feel free to get the code over on that side okay so what we're going to do now is we've got the data we've got the session I'm going to go ahead and get a reference to the um we don't have that let's just that's fine I'm gonna go ahead and have you generate a response so basically I need to have a sort of add so this is I'm going to call it generate response right but really it's kind of like send message so this just makes sense I think send message makes it a lot easier to understand what's going on so asynchronous and now what you'll find is a form has a specific event that it fires off when it submits right so what we're going to do now is I'm going to show you a nice little trick so you say on submit and then we need to send the message on submit right now what you're going to find is here you're going to have an event that gets fired off but you're never going to know what type it is and then you're going to be like how the hell do I know what type it is oh my God so here's a little hack okay so you just need to go ahead and do e forward slash City and arrow function and then you get the form event here copy that punch that in do a little import from react get rid of that and just like that typescript hacks all right so that helps you out a lot right Exiles I subscribe just by your videos types of projects my first time on stream much love thank you for giving us free content of course this I appreciate you thank you so much for tuning in right so in this case we've got the same message so this now we can go e dot prevent default you see how it automatically fills in because it's exactly the form element that we need so that's how you get the type definition correct every time all right so what I'm now going to do is I'm going to get the input from The Prompt firstly what I want to do is I want to trim it when I want to say input firstly we'll do some defensive programmers say if there is no input no prompt return right so firstly defensiveness and then we say if there is an emperor we simply want to do prompt dot trim so I'm going to get rid of any white space at the end because that can mess up your prompts then all I'm going to do is set the prompt to blank right so I'm doing is I'm storing it in a local variable and then I'm doing a set prompt trim okay so in this case that Returns the string as well cool and then what we're going to do is we're going to create a message that is going to be stored in the back all right and again we're not showing the project source code it is in the um uh it's in the GitHub repo J hasn't updated the text yet but it's in the GitHub repo yes uh Jay just right on slack if you confirm that yeah um so we're going to say we're going to create a message all right so we're going to create a custom type which is a message okay now message will go ahead and I'll show you what it is but in this case we're going to say text input we're going to have a created app and this is going to be the server timestamp so it's not this wherever that is This Server time stamp from Firebase firestore and then we're going to go ahead and do the following yeah okay cool I see you Jay and then we're going to go ahead and see you say user and then the user is going to have the underscore oops it's going to say underscore ID and the underscore ID is going to be the user's email we're going to have the name of the user and we're going to have the Avatar of the user okay now what we're going to do is if they don't have a URL I'm simply going to give them access to a picture which is basically just this cool little API service which you basically pass in their name and then it creates like a little UI app all it does is basically say SS right it's kind of cool if you have a one like a need for that there you go right so in this case message now this message we're going to create a custom type definition so I'm going to show you where we're going to do it so at package.json I'm going to say typings dot d dot t s okay and now inside of here I'm going to create a interface message and you can use this in an approach whereby we're basically creating any sort of types that we want to use throughout our project we can go ahead and pop it in here right so in that case spam hit save and now you'll notice it automatically pulls that in right so it's kind of a nice little cool hack as well right if you didn't know so now we've got a message that we're going to go ahead and eventually push to the database but how the hell do we do this right what's the next step so what we do now is we basically go ahead and we add the document to the database right so I can go ahead and do this so I can go ahead and say await add doc collection and then what I do is I basically need to specify the collection so firstly import all of the required dependencies that we need so in this case I need the add dock I need the collection I need my database object so you see I've imported All Above and then I'm going to go ahead and say that we have the users the session dot user dot email with making sure it's there then we have the um chats chat ID messages and then yep and then the second argument is the so I'm going to make this very simple for you a lot sorry I'm gonna do so basically think of it like that so first argument is the collection second argument is the message all right so typically you pass the message in like an object in this case I built the object above and we're simply passing in so this what will now what this will now do is it will go ahead and actually um add it into the database so when I type in and enter a message it adds it into Firebase okay um press start to tell us something what's up dude right so now add in then next thing we're going to do is a toaster notification rest we'll add that in afterwards all right so toaster notification and then what we're going to do is create a fetch method to the back end which will then go ahead and start basically communicating with our own API so I'm going to say await fetch okay and then here what I'm going to do is I'm going to say forward slash API which is our API and then we're going to say ask a question okay so we're going to create an API endpoint and then this is going to be a post method I'm going to pass headers of content Json for the application because what we're doing is we're passing in Json data so this is all going to be in the form of Json and then we're going to pass in the body and what I'm doing here is I'm stringifying a bunch of information now I need to send a few things to the back where basically I need that information the first one is going to be the prompt right and that is going to be the input that we specified earlier and we trimmed the second one is going to be the chat ID the third one is going to be the model that we're going to use and I'll show you why we haven't got model right now I'll show you how we get that model and the final one is going to be the session itself okay so these are all going to be things that we're going to need now for the model the reason why we don't have a model yet is because we need to go ahead and eventually Implement use SWR to go ahead and efficiently get the model so I'm going to show you how we do that afterwards but I'm going to say use SWR to get the model as far as listening to me sometimes use SWR to get model and then here I'm going to say const just for now it's just going to be the text DaVinci model so these are a bunch of different models but for now I'm just going to have this but I'm going to replace this with that so to do use that story that's an extension by the way right so in this case and you can watch my top 10 extensions videos to go ahead and find out which one that is so in this case we've got the following going to the back end okay so now what we should find is that this will go ahead and do what we need it to do we need to obviously create this but after that's done we're going to go to the then block all right and if it's successful what we're going to do is that then is always on the successful execution event we're now going to go ahead and say the toast notification um to say successful okay um to say loading all right so we need we've got a few things that we need to do right so that's to Do's that we need to go ahead and Implement all right so first up let's go ahead and do the uh toast notification so that way we can get that in uh ASAP and then we'll test it to see if it pushes the message into Firebase and then we will create our API endpoint so three game plan right and then we'll do use SW afterwards so react toast so um react hot toast let's go ahead and do it right now removing a good speed guys smash that Thumbs Up Button almost at 900 likes documentation we're gonna do a yarn add react hot toast and this is amazing for this what you see right here okay so going into my second terminal bam yarn add rack top toast and now what we need to do is we need to import it into our app at the top level but uh we're using nextges 13. that's not a simple to do in this situation so we have the layout okay but in this case the layout is a server component what we're trying to do here is definitely a client-side component functionality right so the way you do this is you can create something called a client provider okay so client provider and what we can do here is we can use this pattern to basically push anything that needs the client at the top level we can inject it at this level okay so I'm going to go ahead and create a client provider component dot TSX so rfce oops rfce so sometimes I get this and it's super annoying it doesn't allow me to do it that's fine what I'll do is I'll show you guys what I need instead so I'm gonna have a client provider that's fine and this will return the following right so this will return a basically a fract fragment and it's just gonna have a toaster inside of it right so a toaster and the position of all of my toasts is going to be the top right so you can go and specify a bunch of different ones like all of these directions and you customize even further I'm just gonna keep it very simple for now this is going to be a user client so it's gonna be a client component right now think about the magic that I just did here so imagine if I had loads of different comp client libraries so client library number one client number two client number number three so they're all going to get injected and all of them are going to use by default they're going to get rendered in a client basically a wrapper right so that's gonna basically tell an extra these these things are client components right then what we do is we simply inject it over here and now just like that we have it at the top level so that's how you do a replacement for that in an extra 13 if you're wondering smash that Thumbs Up Button because that was very useful information if you're coding in nexgs 13 okay so now we can go ahead and actually make calls to the toast API okay because inside of our app we have access to it so let's go down to we're so close to 900 lives we're like two likes away wow all right um that's absolutely nuts I'm going to change the song so let's do now inside of um chat chat input right so chat input there we go boom okay so toast notification to say loading so I'm gonna show you how we do this now 900 likes let's go guys that's crazy oh my God 900 likes already a thousand likes come on we can do this this video is going to hit a million views I'm telling you when you watch this back it's gonna hit a million views at some point I'm telling you it's gonna blow out this video I'm it's gonna be my next Uber which is a million view video so at this point let's go and say cons notification I just know it right so this one we basically say toast Dot and basically we import this from react toast at the top okay toast dot loading and then what I say is I say chat GPT is thinking okay it's thinking ooh okay and then basically it gets assigned an ID of notification right so in this case we trigger it off so it's gonna basically pop up saying it's thinking it's doing something and then once it posts to our API right when it comes back with a success response then I want to say that the toast was successful right so the way you do this is you basically go ahead and say chat GPT has responded and then your second argument is basically going to be attached to the ID of the notification of the first one so this one will basically be there and then this one will replace it so that's why we passed in the ID facade says one million views by March the first I'm calling it hey dude if you if you get it I'm gonna give you something I'll tell you like it'll give you some present this is amazing I almost definitely gonna watch you when I get home that's what I'm talking about but make sure you subscribe so you don't miss any of these videos right uh guys a thousand likes let's just do it let's destroy it right so in this case chat GPS is running so let's give it a try right let's see if this actually does any well actually it will get stuck I'm telling you it'll say if I type in test boom so see how it says chat GPT has responded because it just basically it hit this endpoint it didn't do anything right so believe it or not it didn't work the way we wanted right so I know it might seem like it but I didn't do what we wanted because right now we don't have this endpoint okay so what we need to do now is basically go over to and you do get the response if you ever do want to do anything with it by the way right so now what we need to do is create an API endpoint for asking the question okay so now what I'm going to do is I'm going to go to my pages API hello right so at this point where you've got hello what I would do I'll just copy this right the reason why this is good is because this you can actually use this as like a template for your starting portion right so if we had to go ahead and even copy that and then I was to go ahead and type in our endpoint so now I want to do a ask question remember this is actually going to be the API endpoint root so do not mess it up it should be a TSM and we paste the end so this is going to be our room so let's go ahead and get this set up the way we wanted firstly the response type of data right so in this case we can Define the response type here so we're going to send back an answer and this is where we basically start doing the magic to go ahead and communicate with chat GPT so if you're excited for that this is what you've been waiting for all right so in this case we got the answer right here so I'm going to make this an asynchronous function because this is going to be um yeah it's going to be an asynchronous call and then we're going to basically strip out all of the things that we sent over so think of it this way right when I have my chat input so let's go over to my chat input where's it on uh chat input and you can see what happened is I sent over the four things in the body right so what I'm doing is I'm essentially reversing it now and I'm getting them out right so what I do is I say const and I start getting out the things I sent along so prompt chat ID model session all these things I'm going to go ahead and get out of the request body so I'm de-structuring them right then what I'm gonna do is I'm gonna do a few safe so I basically want a return of 400 status if you don't pass in a prompt and if you don't pass in the chat ID so this is basically like an API we're building right now so if we don't have a prompt I'm going to say please provide a prompt and return the status of 400 like an error and the same with 400 that's basically saying like you're missing some data you know you need to return something okay then what I'm going to do if not I'm going to do a chat GPT query so this is where the magic happens guys this is the Moment of Truth this is why I'm going to do it I'm going to say const response equals a weight query and we're going to create this query function and I'm going to pass in the prompt the chat ID and the model okay so we need to create this query function so what I'm going to do is in the top level of my code I'm going to go ahead and create a new folder called lib all right so you can call it lib or util or whatever you want to do I like to call it sort of like all my utility stuff lib so in this case I'm going to go ahead and type in uh query API dot yes it's like a helpful file right and inside of here is where I'm going to have the magic that goes ahead and connects to chat GPT so I need to create a new file as well called chat GPT in fact we'll just do a lowercase chat GPT and I need to then install the open AI Library okay so in this case I need to go ahead and type in yarn add open AI so now we are installing the open AI modules and libraries that kind of stuff right guys we're so close to a Thousand Nights it's absolutely nuts all right so we've got the chat GPT Library installed and this is where I need you to go ahead and get your API key so we need to install the following oops install the following configuration and open API modules from open API open AI wow I keep messing it up right thank you so much Akash for the donation I appreciate you um and now what we need to do is basically get into it right so remember in the beginning why I went to here my platform open API and then we have the API key section so I've already got an API key right so you need to create a new key so you just simply go to open API or openai.com personal and then you should see view API Keys click on create a new secret key and your key will pop up right so I've already got a key so I'm going to show you how to import your key or how to do how to add your keyword to add it so next thing you want to do is environment local so I'm going to hide my screen for a second you guys thought I was gonna slip right you guys thought I was gonna slip all right so now I'm trying to see what was my hide come on I always forget um that's great all right so at this point I'm gonna go ahead and just do [Music] okay so there we go okay so in this case we're in my environment file and then for you guys what I need you to do is you need to have your open API key here so basically that value that you just saw on the other screen paste it here so paste it here right okay so now what I'm going to do is I'm going to paste my value and I'm going to come back to this I'm going to save the file and I'm going to close this okay so I'm about to paste my value put in my Google secret obviously and then close this file so we're going to do that right now so I'm pasting my open API key I am pasting in my Google secret once again I'm closing my environment file cool um there we go uh Tina yes you can do that I teach insertful Tech girl but I can't teach you on the call right now wow our viewers just spiked oh my God this is nuts what is up guys welcome to the Stream okay this is so sick all right so in this case we've got um now I've got what I need so chat GPT I need to basically create a configuration to it so we are back in chat GPT lands to the farm and now we're going to say const configuration configuration equals new configuration and we pass in an object right and then here I pass in the API key so API key and I say process Dot N dot open AI API key right nice uh Pedro Costa hi from Brazil what's up dude and this will basically connect to my API so now I need to connect to open API right open AI okay forgive me open AI wow open AI equals new open AI it's a proper tongue twister right and I pass in the configuration and this basically is like a key to access my open AI API right and then what I'm going to do is I'm going to export the default open AI huh nice so now what I can do is I can essentially use this Singleton object um Singleton we use this config object which has a connection to the open AI API and basically make my chat GPT calls right so we're going really strong trust me we're actually going very very strong right now now going over to the query API we can actually use that stuff right so I'm going to import my open AI from my openai file okay oh sorry from chat GPS what am I doing okay then I'm going to create a query so const query equals this is a helper function async I think there we go and it's going to take in a prompt chat and model and uh the prompt is going to have a string value so this is our type 3 values I'm just gonna async async yeah the chat ID is going to be a string and the model is going to be a string as well okay uh come on Jay someone said that what I literally said Jay um so then now what I'm going to do right is I'm gonna make a call to open AI now so this is basically where I do I pass in what the user types in I'm going to make a request to chat GPT right now okay so basically what we call this is a completion so I'm passing in the information at this point and then it's going to go ahead and uh and do and do that so Frank says is there a way to make the chats public instead of having them tied to only your account um yes you can you just you just change the structure of your database so initially I had that and then I made it more interesting by having like a signed in sort of thing but yes you could you just get rid of the user's email collection root and you just have it on a on a flat chat collection if that makes sense right so you don't really need authentication then right oh you can but yeah you just you that's how you do it all right so at this point now we go ahead and say const res so the response equals a weight open AI Dot and then you can see here we've got openai dot create completion so you see we've got loads create image create completion open AI is incredible and if you want me to do more videos on all of these things just destroy the like button and I'll literally work out how to do this stuff and I'll teach you all right so now we've got the create completion and now what we do is we have to parsen up a few things okay so the first thing is the model now the model remember I have the text DaVinci you know that thing put me in passed in so model I'm passing in through our value here that's going to be the text eventually okay um and then what we do is just automate the area okay they could get expensive yeah you're right exactly yeah and then we've got the prompt right so this is what the user has typed in so the prompt and then and bear in mind this is actually a value that they expect so you see if I do control spacebar you can see all these different values and then you've got a few different okay so these this is quite important here right so in the docs I'm not going to go too far into it but you have something called the temperature and the top p and what you do is by manipulating these values you are basically telling your chat GPT or open AI bot that you want it to be more creative or more logical right so by having a 0.9 I believe on the temperature it's more of a creative answer so you can come out with different angles sometimes if you say write me an essay and you had that value super low it would be very like direct where it's creative if you want to inspire the creativity of the model or 0.9 is a good value right so you can go ahead and mess around with that yourself but in this case I'm going to give it a temperature value of 0.9 Max tokens is the same actually was we're limiting the number of tokens that this one call can do I'm going to pass a thousand in at once right and I'm gonna say the top p is one so these two values are the ones right so you can manipulate these they'll give you different responses from your model and then you have something called a frequency penalty and you have a presence penalty I'm not gonna lie I don't know what they fully do these two so feel free to research them I just left them on zero for now I'm just being totally honest with you I would have to look up at this right but um rdn says can you do a live like this by by Dali yes I can who wants to do a dally build let me know in the comments right now and smash the like button I will do a daily build yeah curious as holy cow you're awesome keep up thank you dear I appreciate it man so at this point once it's done what we do is we say then we get the response back and I'll show you what happens right so inside of response you see we get all of this back right so we get the data back and then you can see we actually get all the type definitions because we've used the open AI Library so in this case we get the choices and then we're just gonna pick the first text from the the first choice that comes back that text because what can happen is it can return like maybe three choices right but we're just gonna get the first one we're gonna pass the text and if there is an error right what I'm gonna do is I'm going to get the error and instead of just Contour logging it I'm going to do an implicit return right I'm going to implicitly return and I'm going to say chat GPT was unable to find an answer for that with the error message right now the reason why I find that this is particularly handy guys is because what I found was sometimes it would actually error out because you'd be rate limited right so you get a 429 error code which means that there's too many requests and that can happen quite frequently especially if you're spamming the hell out of it like I was right so you want to make sure you catch that and then that way you can go ahead and forward it through and do the same thing okay I love your videos saying from one time my first time watching you live oh awesome what's up man yeah so um there we go so um Forza says something's sharing his API I didn't share my API key if I slipped I'm changing that key right return res and then what I'm gonna do is I'm gonna export default query so now we've got our helper function to essentially carry out the the the prompt to chat GPT and what's really cool about this guys is that firstly we didn't use the chat ID so that can actually get rid of this right so we actually need this the reason why I included that is because what you could do is make a call at this point to get all the previous messages of your chat and build your prompt up on that so that way you have contextual chat so that's if you're if you're wondering how to do that that's how you would do it um but yeah that's that's actually how you would do it right you could do it that way um but I don't want to go too crazy on them but yeah okay so at this point now what's really cool is that if I change the model of the input here it will go ahead and use different models so once we get that bit set up it will just literally click and play into this right so now we've got a query done so we can go back to our ask and we can go ahead and import our query helper from our library all right so now we've imported it from our library now we can go ahead and build up the rest of or um I think um so if I catch you spamming with 42 it's definitely J yeah you can blame Jay Amy so this one we've got last question so Akash thank you so much he goes build like can you do a live stream uh with ubereats with AWS amplifier I'll consider it uh I'm not big on AWS amplifier but I'll consider it thank you yeah um so at this point we've got the I'm going to create a message now some message and the reason why I'm doing this is that way I keep it consistent with the previous message I made all right so at this point we're going to go ahead and say that the text is going to be the response or it's going to say chat GPT could not find an answer for that right so text or Japanese for that if there was no available thing to come back and now this is the important part okay so I need to get the admin right so I need the admins firestore details because what I'm gonna need to do now is from the back end I need to basically create a a document right so I need to go ahead and add in a a document into the messages collection but from the server end which means I need a special admin privilege right so in order to do this I'm going to show you exactly how and this is very powerful right so listen very carefully so at this point I am going to pause it at this and I need to set up Firebase admin because we need the uh timestamp and a bunch of other things so I'm going to go into Firebase is I'm going to create another one called Firebase admin and this is a different Library so it's a Firebase admin API right so in this case now what we're going to do is we're going to install Firebase admin into our project so command J uh yarn add come on Firebase admin there we go and then once this is up and looking good um guys the return oh my God you got you are incredible like literally a thousand likes isn't so close and the retention is so nuts today over 300 people across platforms I really appreciate you guys I just want to say it you know thank you so much for tuning in again right so I'm gonna do my import so very similar approach where we have the get apps and we you know we import it so same similar thing except now we need something called a service account key right so let's head over to our Firebase so over here and then I want to go into our Firebase it was um authentication yeah Authentication and Now settings um okay so I've completely gone blank here but let's find it don't worry about it let's find it together so it's called firestore database um usage for install rules where is my admin stuff I forgot I've completely gone blank um I think it is an authentication right oh no sorry it's in here project settings there we go so project settings then you want to go to service accounts yeah so at this point you can go ahead and click in create service account so here we've created a service account and then I want to go ahead and do node right and we need to generate a new private key so this is the the code that they give you I'm going to show you a better way to do this but we're going to generate a new private key right now I'm going to click on generate and what's going to happen is I'm gonna download a file so I just clicked it it's just downloaded a file for me so I'm going to show you the different approaches that we can take to getting this the way we want it right so I've just moved that off the screen because I had something in there so it's downloaded um the file that we want and then what I recommend you do is you take the file they gonna they went ahead and gave you so I'm going to go back to my screen right now you take that file and you copy you just drag it over here right so right now I've got this now what I'm going to do is I'm going to rename this to Simply my service account key right but you see right now so this is good in my local Dev environment but how do I do this when I go ahead and get right so it's a nasty trade how to hide the screen you don't never know right you never know I I could have something there I don't know right I didn't even know myself so at this point if I was to go ahead and um I don't have anything right um if I was to go ahead and like deploy this I don't have I can't just give this to an environment variable right so there is a way of doing that though so what I want you to do is I'll Ctrl a copy this right copy this I'm going to show you a trick now right so locally this will work with a react app but when you want to deploy it it's a little bit different right so I'm going to show you how you can actually include this in a environment variable right so yes you can do that right so what I want you to do is head over to I've got it here just to help out actually so you want to head over to this website right now so text fixer.com forward slash tools forward slash remove line breaks right then you want to go down and paste in your um your your your block right so Mr Franco what's up man he goes can you refund a country if there's only aw amplifier is bad we can build something better I love that that's so jokes thank you Frank wow he got shots being fired between everyone it's so funny right so at this point we're gonna give you um go back to my service account key copy this go back over to my uh this one and paste it and you see what all I need to do now is remove the line bricks so remove line breaks and you'll get this okay so you want to copy this and again this is actually all in um all in the the public GitHub repo in the example environment file okay so basically you want to grab this copy this and now I'm going to show you something else just blow your mind I I was like whoa that actually worked like holy crap when I found this one out yeah so now rather than using this service account because again you don't want to commit you don't want to push this file right you absolutely don't want to push that file public right that's a private file which means that I should I should get ignore that which I will in a second right um somebody remind me so at this point now in my environment file I'm going to hide for a second I'm going to hide my keys for a second as well so I'm gonna take this key away I'm going to take this key away okay and then what I want to do is come back to my screen and then now I want to type in Firebase service account key equals right and what I'll do is I'll just advise you I just pop it down there okay and then I'll show you how we do this so that value that we copied earlier uh I just I copied it in my clipboard I'm just going to grab it now so you copy the value that I talked about the massive one and you just paste it in guys like that's literally it you just paste the end all right I kid you not you paste it in right and we can do this when we deploy as well right so you have to do that line break cleanup otherwise it won't work as an environment variable but that's how you do it so I'm going to go ahead and put back with these environment variables save the file and then close it okay so I'm doing this now so I'm gonna go ahead and just pop these values back in um I'm gonna go ahead and pop in this value right now as well boom and now we have our value okay so this is good so going back to Firebase so at this point what we could have done before is if you want to keep your Json account in your directory you can do it right you can do it with this call but again as I mentioned you don't want to commit that right you really don't want to commit that to your code otherwise every somebody can see your service account key um so I wouldn't do that right so firstly what you should be doing is if you are going to go that route is get ignore it so service account key should be then grayed out so that's good so you want to add to your ignore file but we want to do it from our environment files that way we can do some cooler stuff with it right so now what I want to do is you basically rebuild it from your Json so you say service account equals json.pass and then you get your account key from your environment file and then you do as string right for that says presence penalty is a number between minus two and two positive value is penalized in tokens based on whether they're paying the text so far increasing the models likelihood to talk about the top oh wow that's cool and frequency penalty as well oh thank you dude okay that's awesome um facade I would love if you can actually talk about this more in 0 to full stack era we can do like a talk in it inside the course uh that would be awesome right let me know if you're interested so at this point Firebase admin um yeah there we have it so we've got the service account rebuilt out basically and now what I do is I say if there is no get apps uh dot links right so no again absolute length right then what I'm gonna do is I'm going to say admin dot initialize app okay and this is a Singleton pattern and we say credential sure admin certificate service account so basically we rebuilt it back from this environment variable and then we initialize the app with it and then what I'm going to do is I'm going to say admin DB equals admin Dot firestore and then what I do is I export my admin database and now what I can do is I can make admin calls from my backend to manipulate the database with zero uh permission so I remember admins this is why you have to hide that key admins do not need permission level requirements they can just go in and just delete everything right so you have to be careful with this okay um Liz Myers I I can't answer that on the stream I don't know from your example right now um you'd have to join our community or something like that because I can't I can't debug your issue right now on the stream right so in this case we've got this here so now I'm going to ask questions and we're basically we're going to go into our code and start doing the uh finish off our API query okay so now where I have I need to get the timestamp from the admin database right from the database basically but this is on the node.js this is a backend this is a server level right so let's say created app and then I go ahead and say admin dot firestore.timestamp dot now okay so I don't know like that right and then I basically have this oops no yeah and then I say user I'm gonna pass in a user object my user object is gonna have an ID of chat GPT so it's gonna be chat GPT the um name is going to be chat GPT and the Avatar in this case I've actually got an avatar of chat GPT that I've saved feel free to use it there you go and then we have it okay cool use it at your own risk basically I'm not I'm not I don't own that all right it's just a logo I I don't know if you see my ownership or whatever I'm trying to spread love something you have to say these things now guys we're also 13 likes away from a thousand which is nuts all right crazy so now we've got the message ready I'm gonna go ahead and do the install so I'm gonna say I wait and I add to the database if I say await admin DB dot collection right so I need the admin DB firstly or someone import admin dot collection and now this follows the old approach right so I don't know if you've done this before but this will follow the old V8 approach that we were used to back in the day so it'll be session dot um so okay so all I'm gonna do is I'm just going to write this one out for you so it's a bit easier for you to just understand otherwise I'm just going to fluff it a bit when I explain it so I wait so collection uses doc session collection chats doc chat ID collection messages add message right add message into this collection that's what we're doing now you can go ahead and specify this in a single doc string but I want to just do it like this right um so that's pretty cool um okay so Tina oh I I'm looking into doing new builds yes so collection I'm going to add it there right so at this point now that will actually do what we want so rest don't stay as Json I'm going to send back the answer and the answer will be the message dot text because we already have it right so if all of this goes to plan what we are doing here is we are from our chat input there's loads of stuff happening right from my chatting but we are making a API call so basically we are adding to Firebase firstly from the client the client then queries our own API right so you can't even shift this if you want to the back end but it's fine right so then what we do is we make a request to our API our API will then go ahead and hit our own name ask questions endpoint then we hit this point we strip out all the values that we pass through we then go ahead and say we check to make sure we've got all the details we need we then query chat GPT will then give us back a message right so the response we've packages up into a message we then add this from the admin to the back end into the firestore database right and then what we do is we return the answer as a bit of text okay and then because it's all connected uh in a real-time Fashion on the front end already we should see that being updated okay so let's go ahead and refresh and see what the hell is going on so firstly I've got an issue going on here what is happening um so server error at this point what I would do is just we've installed a bunch of stuff close the server run it again and let's just see what's happening um okay so oh no it's please I should have spotted that when I seen it maybe it would have been oh there we go thank God I was thinking damn I was like yes I so at this point now if I was to go ahead and click into these cool and then what I want to do is I want to bring out my um Firebase database where is it going let's just pull it out here so I'm gonna pull this over here so we can see it so I'm gonna go to my five store database and let's go ahead and type in a message into one of these so you can see here that these have the IDS at the top right so we've got wo this one is dzt right so dzt in chats let's go to dzt dzt this one and then you can see we have no messages right now so if I type in hello world enter right it will say Chad GPT is thinking so remember our loading has punched off let messages it went ahead and added in our message of hello world now it's asked oh now I added in chat GPT and then from the admin it added in the response which was some some yeah some some Chinese text I guess well I'm not sure what that is but yeah so at this point let's go ahead and say what is the color of the sky and let's see what happens right so look I client-side added it we then make a request to our back end and then the back end says the color of the sky can vary depending on the time of the day on the weather but it's usually a light blue boom let's freaking go guys that's crazy probably says Japanese my bad yeah I had no idea I was guessing well that is so amazingly powerful right this is so cool all right this is so cool yeah so you guys can see that that is literally pulling it in and you see the way it's doing it is nuts right it's doing it for my back end it's just so so good right now we can now we've got the messages we can go ahead and do the front end so let's go ahead and keep the momentum up because we still got quite a bit to build right but it's all going to plug and play now I promise you I'm gonna use SWR for the model selection as well so now we've got the chat so we've done if we go to our a chat page page or TSX over here we've got the chat input which is pretty much done and then we've got the chat now what I love about this build is that we aren't connected to anything so chat input it's completely independent of chat which is so nice right guys we also three likes away from a thousand likes I'm about to lose my mind if we've hit that let me let me go ahead and find that that's the song because I I just need to I need to do this the way that we have to and then we will finish this strong guys two likes away come on who's gonna who's gonna do it on the drop oh no someone's playing games someone's unlike it I just smash that Thumbs Up Button then we're gonna hit a thousand likes and that is what I'm talking about and we're gonna carry on building up the chat screen right now that's it making my day man Mr Franco Sunny GPT let's go let's go man so it's a thousand likes let's go Jay a thousand likes on this build that's what I'm talking about guys listen share this video as much as you can I get this video as many people as you want it's so such a powerful build it's so good so so fun thank you so much Papa fam we are not finished yet but we're going strong right we're not finished yet but absolutely Banger of a topic right now let's get the chat done in wow that's so cool man hey man I said show the nasty directory that's so funny all right let's go ahead and do the chat directly around all right so firstly we need the session so we need the day as this bit it's a breeze now because we've done this before right so we need the news session [Music] amazing stuff guys this is what the papa Farm is about it's a family of developers absolutely crushing it right that's what I'm talking about react contact is unavailable in server components yes because chat needs to be a client component there we go amazing stuff let's get back into the focus mode but absolutely love and appreciate every single one of you watching right now if you if you like this energy just imagine zero full stack hero is this all the time every week in coaching course this is what we do right and whoever's in zero to full second right now papicha any of you guys in there just go ahead and you know you can you can sell it for yourself but absolutely this is a built a community that's all fun and we learn together all right so we've got the chat there we go bam and now what I'm gonna do is I'm gonna go ahead and map the uh the items from the uh collection right so in this case we're gonna get the messages remember you get the loading and the error State as well we don't care about the error and the loading for now we're just going to use collection uh not use collection yeah use collection there we go and then I'm gonna go ahead and say if the session exists and uh query so now we're going to have a like an aggregate query remember how we do this we say firstly we say the collection uh that's actually spawn with what I wanted yes that is correct and then message is yes and then the second argument would be order by created app so I need to firstly pop in order by collection so this is very similar to what we did before guys I import all of the things I need use as a session email chat chat ID messages and so forth right but this case we're just double checking the session exists before we go ahead and do that right hashtag proper Prime is strong that's what I'm talking about literally Frank's been here from day one that's that's amazing right crazy it's stronger than ever dude that's literally it right now we're gonna go ahead and map out the messages here so in this case we're going to go ahead and say messages docs.map out for every single message I want to map out a message item so message and we're going to pass through the key firstly the key is going to be the oops message dot ID remember you should always use a key when you're mapping through right and the most are going to pass through the message and this is going to be the message.data from Firebase which is going to be the contents of that message now what I'm going to do is go ahead and create a message component so here I'm going to say message dot TSX and then here rfce message like so and inside of here we get the actual message itself so the message contents and we can we actually get the type definition from this from Firebase which is documents so in this case I can say type props equals message equals document data and then here I can say we get the message come back through like so and I can map it to the props right and just like that we now have the perfect type definitions mapped in this one's freaking out because message only refers to a type but it's not being used to its time um oh I see you see so uh that's a problem because we don't want to have that oh yes I'm not actually that's my bad I haven't imported it what we're doing uh there you go yeah and now what we should see on our message hey look at that messages are coming through yeah so if I type in like a hello world you'll see that now you just see like another hello world and then while it's thinking it will basically wait for it and pop in the other next one yeah so um lost and used to say I want to thank you for your greater content that's our website working on five months ago on your videos it's helped me a lot thanks to you I found a job please never ever stop J screenshot that that is amazing thank you so much for sharing that man Mr Frank says before day one fam yeah man Frank I take it back you've been before day one dude you've been an OG from day like literally day minus 50 000 dude even there forever it's sick man so at this point we've got the div now I'm going to have a div and inside of it I'm gonna have a P tag and here we're going to have the message text so the message dot text and wait for it I'm not going to hit save yet I'm not going to hit save I'm gonna wait for it right so the source here I'm going to say message dot user dot Avatar yeah and then we're gonna style this up a little bit so I'm not hitting save I'm not hitting save I'm trying to I'm going to show you how it pops in then there's going to be that whoa moment right so the class name uh pt1 text should be small and then the div on the outside should be a flex container space along the x-axis of five depending on the x-axis of 10 Max width of 2 XL and margin X of Auto and then obviously we have the outer one but before I do that I'm gonna hit save now three two one boom oh look at that look at that guys look at that it's so cool it's coming in so let's go ahead and do the finishing touch on this we're gonna say uh we're gonna do a string interpolation because we're going to use a bit of a uh we're gonna check a variable here it's going to say panning y of five there we go a bit Breathing Room text should be white and you can obviously add in dark mode do all that good stuff right let's say it is chat GPT is chat GPT so firstly I need to determine if I'm chat GPT and the way I do that is very simple right the only way you're going to be like you're going to know if it's a robot is because it's the admin added there their message name will always be chat GPT otherwise it'll be your email address so we can safely confirm by using this variable here by saying it's chat GPT and and then we say BG and then we basically pass in the color of the one that I want so I'm going to actually have that described approach that they have and then three four three two one pow oh my goodness look at that like Oh my days that is so clean all right so now if I type in um what is a YouTuber I'm waiting for it GPT is thinking wait for it wait for it wait for it wait for it wait for it come on come on sometimes it will bug out and I'll say 49. YouTubers individual creation uploads video content they're sharing also YouTube oh this is so cool if I go into another one here new chat you will see and also look at the last words coming in right and here if I say um explain what coding is right and wait for this take this out Kung caught asked a question we answer that kind of stuff in Azure full Sakura dude um look at that facade says if these messages are probably about to lose my mind yeah dude it's so sick right look at that look um are you a human and look at this thinking wait for it wait for it wait for it no I'm not human oh it's just it's so cool man so cool and look you can go ahead and go through the different you know things and all that kind of stuff but yeah this is absolutely amazing and you can go ahead and delete old stuff and you can go and click through and look it takes us back to the home screen if you delete amazing amazing stuff right so this is so clean right now obviously we still got some UI stuff we still got the model selection to do we still have a few areas that we need to fix right so let's go ahead and go into uh let's carry on while we're going strong right so firstly absolutely amazing progress so far um what we now need to do is go into where am I called out let's see so we'll go into page.tsx and we have overflow hidden here but in here I believe we want to add uh overflow scroll yeah so here's what I wanted to do so Flex one but I wanted to say overflow y of scroll that way if it ever got too big it would be the scroll right you can do auto as well right so only if it goes past that point it will go ahead and pop in and you can say overflow X is hidden yeah well because we're actually wrapping around anyway so this works really nicely uh who is Papa react ask chat GPT I don't I don't even know if I'll ask this right who is Papa react who knows right if it does that I'm gonna blow I'm gonna lose my mind right so if someone says who is proper ad um let's see I I'm nervous I don't know it's gonna say probably as educational organization it helps provide resources oh wow apparent office right itself is such an online course still the focus on front of us yo that's three that's pretty crazy I think that's I think that's fun I think it is right we are an educational organization right I guess I'm an education organization they forget about Jay you're hating on it but it's that's amazing that's so cool um wow so uh at this point this is so this is a really cool build you see what I mean right so we've got this down and now what I do want to do is I want to say if there is no messages I actually want to um have a little sort of like a nice little prompt right someone say messages um Dot empty and then what I'm going to do is I'm going to save us a bit of time here by just popping in what I need so I'm going to go pop that in and I'm just going to pop in a fragment with an arrow down Circle icon all right and what this will do is I'm actually going to have an outline so now what we'll do is basically if there is no message Watch What Happens now it's a new chat takes me to a new chat wait for it type in a prompt below to get started hey look at that that's so sick right you're so famous to even open the eye I heard about you I see it's pretty cool right you found me um so at this point even if we delete it you see how it will take me back to the home screen but this is what I'm saying like you're actually getting different messages right which is absolutely incredible you're literally getting the different messages you're getting new messages um it's it's really quite powerful right like what's happening here and you see like the last thing so the last message here hello world population educational organization this is amazing right so um just want to type in test once I just want to see something uh this one for some reason is it's only showing the top one which is strange but yeah it should show the last message on here um wait for it okay but let's let's move on because I don't want to get stuck here um mess around with this but you see how they're even though the Overflow comes in when any when it's needed so um sometimes if you can't figure it out it'll say chat GP has no answer for that or you know how we did it okay so at this point now let's do the model selection while we're going hop let's do model selection so now what we're going to do is react select so react select okay so react select let's keep going strong we're going to use this to create a select right so first things first I need to make an API call which will allow us to get all of the engine so I'm actually going to save us time now and do that right now so inside of our API we're going to go ahead and create a API called chord um get engines get engines.ts right and what this API is going to do is essentially we're going to go ahead and pull in a bunch of stuff from so in this case I'm popping this and I'll explain everything so this is no different to our previous API call layout right so the same layout is is what we're dealing with except we have firstly on a type of options which is going to be what we end up returning in the select field so that's why I've created the type options here is the return type and what we're doing is we're simply returning a type of model options which is option array right so this is the reason why it's because you have those little select drop down Fields the way they expect data is in a value label pairs so what I've done is I made a type definition for that value which is called option value label pairs it's an array so model options is basically they're going to be the drop down options then what we're doing is we're basically making a call to open AI we're saying list all the models and we're simply passing the data from it right and there's data.data because inside the data block is is inside of dot inside of data is literally what we wanted right first I said ask who is Sunny who is Sunny Sanger popular YouTuber let me actually do that I'm actually going to try it um in the background I know I'm getting distracted I'm only gonna do this one thing oh wow oh my God that gave a big prompt um as you want to do this I want to see you guys like uh who is popular at YouTuber while he does that let's go and do it so then uh current things on we're then mapping things out so that way we're basically extracting the data that gets returned and we're just lab we're mapping it into what the the thing that we need so all we cared about was the ID that came back so the ideas and each one was like text DaVinci Da Vinci had the the other other models and those kind of ones loads of models and then we're simply returning it in a statement right as in returning it in the response okay sunny Sangha papa is a popular British YouTuber and uh reaction videos okay he has over 800 45 000. okay so we traveled forward in time uh over 120 million views since you've been uploading in 2014. I mean it's somewhat there I will get there we'll get there and reaction videos maybe who knows all right there's so jokes okay let's stay focused now um so we've got this get engines available and now what I want to do is I'm going to make a call to my get engine so what I need to do now is I'm going to go to my um my sidebar and where we had modal selection right so here so what we're going to do inside the sidebar guys is we're actually going to go ahead and say all right this sidebar by the way is going to be so I don't I want to hide it here I want to have the model selection at the bottom on Mobile screen and I want to show it there on the big screen so what I say is I say hidden for mobile and show on small screens and above right so small screens and above inline it and then what I'm going to do here is create a new component called modal selection right and this model selection is going to be our special thing that we have access to so it's basically going to be the one that we I mean this is going to be really powerful and it uses use SWR so stay tuned right so we're going to create a new component called modal selection.tsx RFC either and um and then we're going to do import it like so okay and now what we should see is you see we've got the modal selection on their big screen but it hides on that screen that's perfect right and I'll show you why we did it that way because I want this to be a pretty flexible in how we use it right now okay so next thing I need is use SWR now if you have no idea what use SWR is it's basically I'll handle react select afterwards it's react hooks for data fetching by the guys over at the cell now the reason why we want to do this is because it allows us to fetch data in a really efficient way because now we're fetching it based on cached key value pairs which means that it doesn't matter which component I'm on that we're in we don't even need a global data layer like Redux or recall we can just do it with something like use SWR right and it handles it really well when we're doing things like data fetching okay um this is so sick uh Chad uh Frank goes everyone subscribes to chat GPT comes to you let's go and say guys let's go um let's keep going strong so we're gonna go ahead and install this so SWR so if you click on get started you can see yarn as the SWR and then they've got their sort of explanation and I'll explain it briefly as to how it works but it's actually really really powerful in that way it can do uh we do go over it and they're at full stack hero so I'm going to do yarn at SWR hide this and then what I'm going to do is go into um my yeah there we go and here you can see so basically what we do is we basically say that we we provide a key so this doesn't actually have to be the endpoint if it's just any key it can be anything and then we have a fetcher the fetcher is basically what we do to get the information and then we have all the three states we have error is loading and data stay and then you can do like refetching refresh from click loads and stuff like that so what we will do is we will go ahead and make a client side um you a component so this will be a used client okay and then we're going to go ahead and pop in the following we'll say import use SWR from SWR and now what I'm going to do is rather than make a simple fetcher function like this I'm going to have something called Fetch modals right so I'm going to create a helper function here called fetch modals fetch models models what am I doing models I get so caught up right and this will be a function which goes ahead and just returns simply um it's an implicit returns we don't actually need this we can just go ahead and say fetch and we're going to make a call to our own API and this one is remember we made an API endpoint called get engines all right so I'm calling it engines but really it's uh I guess there's models where I get models get engines you can rename it and then we're going to pass the Json response right so get engines all right and now what we can do is we can say const uh data well uh we're gonna rename the data to models and then we're going to say uh is loading I don't care about the error State that's fine and then we say use SWR oh Mario's is in the house what's up dude I remember the key so this key doesn't have to so a lot of people what they'll do is they'll make the key like the the route you actually ended up calling right but you can actually make this key anything that's the really cool thing about this right so what I'm going to do is I'm just going to call this key models right and that's a lot of the time when I teach this they actually get pretty confused but you put the function for fetching the information as a second argument so this is the fetcher and then we have the fetching like so right so now what we can do is this will fetch the information for us and um and then what I'm going to do is actually have rather than a piece of state to keep track of what the user selects in the drop down list we're going to have another cached value um in using use SWR and then we're going to share that between different components really powerful I promise you I'll show you how we do this so next things up we're going to import this react selector we're going to install it's a really good library for handling um drop down that kind of thing I'll make a little rinse scram real on it or YouTube shot on it it's actually pretty cool it's very nice and they're searchable as well as you can say like let's just type in like red for example you see how it's searchable it's very nice um they show you like that's the when I was talking about the type definition uh making sure it was in this format and we mapped through it that's what we did on the back end right so we made sure it was in this format so now I'm going to go ahead and pop this into our code like so so I'm going to pop this over there and now I'm going to use it so over in my div I'm going to say select like so and this is self-closing component so something like this and then we're gonna go ahead and do the following so class name here margin top of two very simple the default value is going to be the modals right the model the model we don't have a model yet right so we don't have a default value yet so I'm going to do afterwards we're going to say is searchable is true okay it's loading it's going to be attached to the Loading and what this does is it gives a really nice UI it shows actually how things work uh for Delta I've never used just to realize it's interesting swi is so powerful I have so many coaching calls inside of zero to full stack here on it I highly recommend you check those out because it is is really good right it's only really good and I will make videos on YouTube about this as well because I I it just kind of came to my mind now I should do that menu position is going to be fixed okay and then we have class names and this one is going to be basically the way you do this right is you have in here you have something called control and the control allows us to basically have the state so is it being in hovered right now is it was it doing so if I'd have an estate dot you see it we can say like is it disabled is it focused is it kind of whatever in this case we don't really care about any of that we just want to go ahead and say that I want the inner styling to be a color that I want rather than your color so I'm going to customize it to have its own colors right but that means that that doesn't play an effect and then we go ahead and actually oh you can leave that in there yeah and then we have the placeholder which is going to be the modal as well um which we don't have yet so I'm gonna go ahead and just comment that out as well and then we have on change which is for the modal and then we have options which is the actual options for selecting so first thing we have is the models and then remember inside of the response it was called Model options right so model options and then we are going to prepare another piece of tape but in this time we're not going to have a fetch right so you don't have to use SWR when you're data fetching externally you can actually use it as a lot of many people don't know this but you can use it as a like a local uh way to transfer like rather than having a global store you can just use it as a way to kind of use it between your components right so it's pretty cool you can have a mutate function and this we're going to rename to set model and then I'm going to say use SWR and in this case I'm just going to say Moto or module why do I keep saying mod my God sorry guys model model that's it yeah and then here what we do is we say fullback data and this is basically the way you say it so fall back um one second why is that being weird all back data equals text DaVinci zero zero three okay and now what I'm doing is I'm basically setting this is like very similar to a um uh very similar to like a used state right cool so now what we can do is we can go ahead and give these default values and default placeholders and then the set model we can go ahead and use on the on change right so here we can say on change an event gets fired off and we just use the E dot value to set the model and we're doing the exact same thing and it's super cool Tina so something I'm using SWR with react Nave and it's making that blazingly fast with caching exactly because it caches the value so if it makes this call here and we request it in another component it doesn't need to make the the same fetch request again unless you can say Obviously refresh intervals and that kind of stuff but it's so good in that sense so imagine you have loads of different requests being made it just reduces the number of requests in your app right so absolutely incredible so now let's go ahead and have a look what's happening so let's look inside of our sidebar and we have our model so let me go ahead oh look at that nice and oh look at that guys it got it our API is working text DaVinci Ada Babbage these are all coming from the back end that is amazing right text DaVinci cool the only thing I see here not being cool and not working the way I want it is um class names so this is not looking the way I like it so that's it that's why I don't know why that wasn't doing what I wanted but in this case if we did like had a da Vinci I think this is because I did text white maybe was it no okay no I'm not sure be honest there you go that's better text why I didn't really do anything there we go yeah okay so that's it it just took a little bit of refreshing right so save and refresh and then you're good all right so I think my my Tailwind is being a bit buggy there you go cool so text DaVinci 003 and then you can see we pop it out nice right and then on a small screen it's hidden right that's cool and obviously there's a bit of a spacing issue here that I'm not liking um so firstly let's make this a margin top two uh that's nice and then secondly let's go out of here and do it in our sidebar I believe it's here that uh is what I'm having a problem with um so in the loading so what we have are chats being looped through uh it was actually here so it was Dev this will go inside of here and then we have a class name I would say Flex Flex column uh space y of Two and a margin y of two right so that's going to give us a bit more breathing that's better there you go now so yeah and then if it's loading the chats I'm gonna say it's loading the chat so here on this one just while we're coming back here I can get rid of the console log we don't want console logs in production um I can go ahead and say loading uh and and and then I've got a nice little bit of text that will pop out here to see if it's loading cool okay now what we've got here is you'll see it's gonna load on here as well as well as here the loading chat and then here you get the nice little what I love about this is we passed in loadings you see it's loading and then bam oh so clean so clean guys right Gabriel says it looks like I'm late don't worry dude it's gonna be up afterwards uh just smash that like button if you're coming in late to enjoy the video right so now what I want us to do is we've got this down which is looking awesome I now need to feed this through right so obviously I'm not sure what the color is glitching out there but it's fine but I need to feed this through and firstly I need to make it pop under here as well so chat input let's also do that one so chat input I will show you where we're going to put it inside the chat input so remember I had a model selection down here the reason why this is genius right is because now what I can do is I can make the chat input appear over here if it's on a certain screen and appear here if it's on the other screen so now all you do is you wrap your component in a div so for example in this case a model selection will go here and we just do the opposite in uh Tailwind we just say on the medium screens it's hidden and now look at that guys look at that so on the on this screen is there and on the um smaller screens it's the lovely all right look at that so on a mobile view you can actually select your model underneath and it works now how do we feed it into the house glasses alive yes um how do we feed this into the actual prompt right so where we actually did the chat input now model was being used up here right so remember the to do we left it saying use SWR to get the model so this is fairly straightforward now all we have to do is we match up the use SWR with the previous user SWR that we had so in this case where we had the um the component for modal selection look at this right so I'm going to pop this over to one side and I'm going to explain a little concept here so rather than doing this right which is rubbish we're going to basically do this so I'm going to go ahead and get the same um the same amount of code here so the the users of your model so in this case I can go ahead and get the access to it here so we're going to say data modal use SWR and the only thing you need to make sure that you do right here is actually go ahead that's the import though is actually go ahead and use the same key so the same key is being used here notice how the same key the fullback data Remains the Same that's fine the text is fine we can go ahead and get rid of this and we're not actually using the set model or the mutation so we can actually get rid of that as well just to be a bit safer and now what you can see is is and I'm going to prove there's a point here right so here if I change this to DaVinci if I go over here now notice how it's DaVinci if I change this to Babbage similarity and I go over here now notice how it's uh Babbage also I've actually messed that one up sorry um text DaVinci publishing all right so I messed this one up a little bit I think I haven't saved it or something but yeah that does work right just just trust me it does work okay so at this point now we will text DaVinci my my react slack box is bugging out as well I don't know what's going on but anyway yeah so the point is that this box now I can actually get access to it okay so that's the main thing I'm trying to point prove or point to and the way that I can show you this is basically if I was to go ahead um we're building chat GPT in this right uh to chase babe um so at this point now um we're gonna go ahead and show you something so text DaVinci is quite smart it's the smartest chat GPT model it's the one that the one that you're using on the playground is probably that one so if I go ahead now and type in explain what programming is all right now you can see chat GPT will think and it will give me pretty good answer right unless it errors out for whatever reason it can happen don't worry about it right so Clayton says amazing problem look at that programming is a process of creating instructions for computer blah blah now if I change the model to something like Ada and I asked the same question right now because remember all I'm doing with the chat input is feeding in the modal into the prompt right so imagine you remember the initial problem that's the one that's going in so now all I'm doing is I'm using the same thing explain what programming is but I'm dealing with Adder now okay to me and everyone else by the author sleepy bear it doesn't make sense right so Ada's not as good as understanding right and then also you've got certain ones for coding so there was like another one called DaVinci I think there's another one code Vinci so if I type in codevent gw2 I said write some write a while loop right so in code DaVinci 002 let's see this wait for it a while loop and now you will see it will give me some kind of while loop that will come back I guess right for it chat DPS one okay so to go through five questions code number of questions oh it gave me like tons right but if I was to go to like text DaVinci right a while live obviously my prompt could also be better I could say why a while loop in JavaScript right in this case it hasn't starts to draw and ends where it reaches so yeah you can see text DaVinci is by far much more of a better model right so it's the best train model at the moment but the point is is it works it actually works right and you can prove it by logging it out on the server and see what for yourself what is calling but this actually works you can change model and it works okay so that's beautiful everything was great um for some reason the color I'm not sure why that keeps happening yeah I guess it's just whenever I save it it's hot reloading it in but that will be in the final build in that color right so that's really beautiful guys who's enjoying this so far right so I think at that point we've actually completed everything that we needed so we have the ability to create new chat we have the ability to go back to the main screen we have the ability to go ahead and put these in SWR someone asking is a way of fetching um it's data fetching react hooks for the affection but by the guys of reversal so I recommend you read this and have a look for yourself right so in this case that's great all right so somebody says don't understand what is around after that's my log out button Liz is asking so I was lazy all right that's the truth that's just a long album if I click here you'll see I log out yeah that's that was me being lazy um now we've got the deployment right deployment to for sale and then we're going to go ahead and map it to our own custom domain name that's what I'm talking about right so now I'm gonna go ahead and do so many seconds I'm gonna log into my account and we should see all of the chats that I previously had so look loading chats bam just like that we have it and if I was in my other account the other one you'll see that there won't be any chats right so if we go ahead and log into that one so let's log into proper react and then we're gonna deploy here yes that's what I'm talking about we're gonna deploy it to the cell all right so operate our team we got loading chats oh there's no chat right so we've got a new chat let's go ahead and click new chat now we're in the odd chat and let's go ahead and type in hello world and then let's see if it comes back with something and notice how we're completely different so these chats are the ones that are inside of Papa react with his image and all that kind of stuff and then in the other account we've got the messages from the other one so you can see it actually works right so I'm going to show you how to deploy let's go guys right so now what I want to do is I'm going to make this super easy for you right so firstly click into your environment local font I'm gonna hide it for a second okay so I wanna I want you to click into it I'm going to do the following so I'm going to just hide a key here and hide a key here just for a second right so once you're in here what I want you to do is control and cop command C right so I want you to grab this and command C right now you don't actually need the next URL right so this one you can actually probably leave it uses the when you deploy to ourselves you can basically copy everything else I copy it all and obviously you have your keys in here right so I'm going to go ahead and put the keys back and I'm going to copy it okay so copy everything and yep so we're going to copy it all and now what I'm going to do is I'm going to close it okay so I'm going to copy everything and then I'm gonna close it okay so copy everything close it and now what we're going to do is command J and you're going to type in you need to make sure you've installed the vessel CLI so I'm going to do it through the CLI and I have a whole video explaining how to deploy from the CLI right so in this case all we need to do is install it so you can do it with any of these I've already done this command so I don't need to do it and then you can type in the cell and if you aren't logged in it will go ahead and log you in right thank you so much Liz Miles for tuning in I see you I'm heading to purchase access to repo go for it honestly we have so much code in there right go ahead and type in Versa if you're not logged in at this point it'll prompt you to log in otherwise it will say set up and deploy so we're going to click on yes and then we're going to say which scope and in this case I'm logged into Sunny Sango I'm going to hit enter link to an existing project enter for no what's your project name I'm going to hit enter for the default and watch for which directory is your code located this one okay and then it's going to upload the code now what you'll find is this will actually want to modify the settings if we say no I'll deploy right so this will obviously break the reason why this will break is because um we don't actually have environment variables set up here so I'm going to click into inspect on the link it gives me and then it will take me I need to log in and it will take me here at this point I go to chat GPT messenger YouTube I go to settings and I go to my environment variables okay and what's so amazing right about this is that you probably didn't know this right I saw it from Lee Robbins one of his uh you Twitter feeds if you have watched this well done dude that's awesome feature and thank you for sharing it you just go ahead and Ctrl V you paste so if I go ahead and paste right now boom look at that that's so sick so I go ahead and I do it no environment where I was created okay so I made a mistake here oops um environment rails okay let's do it again oh yeah here so production preview development save there we go and now I've gone ahead and created it I know I just exposed it it's fine it's the end of the video right so in this case boom you do that and then what I'm going to do is I'm going to go ahead and I need to invalidate my key afterwards J so remind me um so now we've gone ahead and deployed these and so now we've got the correct keys so I go into my code and I simply go ahead and do the cell dash dash prod so I'm going to do another deployment but to production right so now we're almost there guys almost there right we're gonna have another issue that's going to pop up and we're going to fix that and this is going to be related to more so um the Google authentication being allowed to we need to whitelist it but after that's done that's pretty much it guys so I need to go ahead and just double check this so let's go ahead and do this so and then we're going to map it to our domain name with hostinger all right so I'm going to explain why you need to do that and why is it's an amazing time actually to do that right so it's probably the cheapest offer you're actually going to get in order to go ahead and do that so at this point it's gone ahead and deployed so you can see I've got a domain name here so I'm going to copy that just for now visit right and now you can see if I go to this URL sign in to use chat gbt if I click it we should get a I probably get an error now yeah there you are so see error details we have the redirect Uris you want to copy this URI and remember if you want to buy your domain name you're also going to need to repeat this step but you're going to copy that now you're going to go over to your Google Cloud so Google Cloud console okay so I'm going to go over to my Google Cloud credentials so I'm going to go over to my Google Cloud I'm going to log into my correct account and I'm going to go into my API credentials okay so here so now I'm going to go into my chat gbt messenger going to my oauth 2 client credentials and then I'm going to go ahead and firstly pop in the redirect URI and secondly I'm going to add in this so the first part of the URL so you need to repeat this if you deploy and change your domain name all right then we go ahead and click on save so this one get rid of that sorry and then save and now let's go to our deployed URL so let's go to our resell app sign in to use chat GPT boom look at that oh my days then we go to Sony's anger and then hopefully hopefully it works on the back end let's see sorry I see all my chats and let's go ahead and say hello um explain what explain the meaning of life enter right and then we see Chad GPT is thinking firstly it posted it which is good let's see if the Firebase admin key actually that it worked it worked amazing amazing and I actually didn't even test that before I went live right so that was actually I didn't know if it was going to work live in stream right now I'm not gonna I thought it might run into history but that is so cool deployed and live right that is live right now right so you can actually feel free to try out and I'm going to invalidate the key afterwards because it's going to go nuts all right so I'll show you how to do that as well because I'm gonna do it right now so to basically invalidate it all you have to do is generate a new key and then you basically okay so that's a bit exposed but that's fine and then I just go ahead and revoke the o key and just like that now you'll see the old one will stop working so if I want to go ahead and type in hello world now that API key this one will post but it will say chat GPT is thinking and then it will basically yeah so console log oh I mean maybe it takes that time I guess to and to carry on um okay I mean anyway that's how you do it right so um let me quickly my iPad's about to die no it can't end like this so I'm gonna quickly one minute there we go all right I'm charging we're good okay so with that said we're now done now how do you map this to your custom domain name right so let's go over to our um our deployment so at this point if you want to map it to your custom domain name all you have to do is this is where you've got to definitely check out the offer that we have going on right now with our sponsorship over at hosting all right so hostinger is an amazing platform guys I highly recommend it if you are looking to get your own domain name so obviously you make these cool apps you make all this cool stuff like this chat GPT clone you really want to go ahead and put it up on your own portfolio in which case you want to go ahead and have a nice custom professional domain name like sunnysanga.com or like you know it could be frank mrfrank.com or however you want to do it right so in this case what I definitely recommend is check out hostinger they're unique selling what is their price ratio it's so good value for money right and I really do recommend you get your SSL certificate you get 24 7 chat support I've used them personally and they have something called the H panel which I'm going to show you in just a second it's really really good and they have extremely fast service so I've never had an issue with them I highly recommend it so you check out your package simply click add to cart in this case and I'm not joking you're saving so much money is crazy when you do this right so go to hostinger go down to obviously select your plan this is probably the best value right here and then you want to go ahead and type in have a coupon code and your boys hooked you up with a coupon code bam hit save and you're going to get even more off of your final price now again this is a limited time though they have going on right now but it's really handy to have your own custom domain name I promise you it's probably if you don't have one I highly recommend you at least get one for your portfolio so that way you know on your CVS not some janky Versa URL it's an actual URL and then off of that you can have all of your portfolio builds it looks really professional and I highly do recommend it so we need to do is apply the coupon codes only it also supports the papa farm so thank you and yeah this is highly what I'd recommend you're going to save 10 off your annual plans so check it out because this is something you do not want to miss out on and um even facade says hostinger is probably the best web hosting company company I've ever worked with so yeah I honestly agree even since I've been working with they're really awesome right and then every time I got stuck they'd help me out so once you've done that all you need to do is click on the login button so I've actually got my account so I'm going to go ahead and log in right now and I'm going to show you myself as to the H panel now the HP panel is where you go ahead and actually get everything set up so your cname your your CNS records all that good stuff so I'm just going to log into my account right now and then I'm going to go ahead and show you how the hpanel works so you can go ahead and map it to your websites on for sale right we've got credit says phenomenal work so thanks for sharing you're absolutely welcome dude and I'm glad I could help you out right so in this case I'm just gonna I think I've got my details a bit mixed up uh give me one second guys I'm just going to find my login details I'm a little bit messed up right now I need to quickly find my stuff give me one second so I'm just logging into the hpanel right now and uh somebody says make sure the module works okay it does work um so I'm logging in to the age panel so let me go ahead and find my I've got so many different accounts right that's the problem that's why I need to find out which one I'm actually logged into so I went to the front page and I clicked login and now all you have to do it's very simple yep over here so this is an example of the H panel right so all you need to do is once you've got your domain you simply go down to your domain so again this is again another reason why I really like it because it's so easy to use right and even have a 30-day money-back guarantee so my recommendation is try them out see if you like it and if you don't like it you know you can always get your money back but I do recommend I think you'll personally like it well especially once you've got your work of art on there like your portfolio is something to be proud of right you pay it once you've got it for like five years right so click on manage and then you've got your DNS record so this is going to be the very important part so in this case you want to go to your DNS name service and here is where you can add and modify your records okay so what I would recommend is you go to your um let's go to for example our settings let's go to our domains and now you can go ahead and actually add in a custom domain so imagine if I bought a domain called sunny.com okay I clicked on add in this case I'm going to cover www.sony.com and sony.com so let's click on ADD and then what it would do is it will give me some domain records to add so all I have to do at this point is copy these domain records go into here you see type a name points to add record very simple I do the same thing for cname right so right here I do the same thing I change this to cname bam I put in the name Target add record now that is as simple as it takes right I've already done this actually so I've actually done this inside of for sunnysanga.com um so let me go ahead and get rid of this one right now I've actually done this for my other um directory so in this case we can get rid of this one get rid of this one and I could do sunnysanga.com and I've already added in some domain records for this so it should actually approve you can see move domain I already had a portfolio on there and I can go ahead and move it here and that will do it right so it's very simple and you see you can even move your domains around if you've got multiple deployments and just like that you have your custom domain name from hostinger and you've got your beautiful chat GPT clone so like I said head over to hostinger.com and go ahead and check it out right so they just got a limited time offer do check it out right and use code Sunny is going to help us out so let's dive through what we did today right let's go through what we did did today let's dive through the ins and outs and we're gonna wrap up in just a short second so um yeah somebody said how many projects can I add to yourself free I'm actually sure on the cell limit but you can always map them to your own custom domain which I do recommend yeah so diving through today's video right let me go ahead and just put a good song on when we wrap up we've got to do this right the energy was incredible today right so today we went ahead and built out a fully functional chat GPT clone right so this was a fully functional chat GBC clone it had a Google authentication you get authenticated with next auth it went ahead and loaded in your chat and then you can go you've got the ability to go ahead and you know speak with chat GPT it had all of the amazing things like this right so in this case we've got all of this good beautiful things going on we've got our you know our API working over here in this case I've got a little bug there I'm sure we'll figure that one out yeah we can go and debug it all that good stuff I can go and delete different chats it's absolutely incredible what you can do right lots of people saying more react native tours I would definitely do that guys don't worry um thanks so much I don't know so much uh probably says very intense build learn a lot of new things let's talk about some of the tech we learned right we learned we we obviously learned more about our react.js skills we learned about react Firebase Firebase is firestore we use Firebase admin SDK we use the open AI API by open AI API right he's next auth with Google authentication we learned more about typescript we use the react select Library we used Dynamic pagering use SWR we did Firebase react Firebase Hooks and we did react hot toast notifications I'm probably missing so much as well right and we also learned all about the Nexus 13 folder structure server components client components how you use it all together it was an absolute incredible build I hope you enjoyed it and just alone seeing that we hit 1.1 K likes which we're literally just like 10 away from absolutely incredible stuff thank you so much for tuning in with me guys this has been your boy Papa react and I'm gonna wrap up the only way I know to rap out which is why the papa fam song Deepak says I'm gonna read out the comments for the last few sections right so last few seconds the deepest so he deserves the best educator award thank you so much guys uh Divas thank you for teaching uh Mr Franks is hosting even except cryptos you have no excuse exactly awesome stuff credit says phenomenal work sir thanks for sharing facade you've been awesome as well thank you for tuning in if I can say you all William says I've learned a lot from you sonny when you come to Kenya Safari is on me dude I'm calling you out on that I'm ready for that thank you so much for tuning in guys as always you guys have been absolutely phenomenal we've had over 10 000 views already it's absolutely nuts we're just about to break 1.1 K live I don't know you can't make this stuff up I've seen us let me know by dropping a comment now into the actual video if you want me to go ahead and actually build more AI tutorials like Dali like you know all these kind of cool things Mr Frank coming in again with donation thank you so much our tips is a great job selling their first weekly lives yes I am trying uh one says I've watched 90 of your builds amazing stuff last year says thanks for all regards from Chile zip versus Tuesday weekly lives I will try my best guys as always it's your boy purple react and I will see you in the next one peace [Music]

Channel: Sonny Sangha

Views: 911,868

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: V6Hq_EX2LLM

Length: 219min 50sec (13190 seconds)

Published: Tue Feb 07 2023