🔴 Let’s build META Messenger 2.0 with Next.js 13 (Upstash, TypeScript, Redis, Tailwind, NextAuth)

let me feel your love again cause yo what's going on welcome to a huge build it's the meta Messenger 2.0 with next js13 yes my official first build ever with next year's 13 because it just came out so we got a lot of fun stuff to cover right now in this video let me know where you're watching from right now if you're watching the replay drop it in the comment down below I'd love to see who Everyone's Watching from but without further ado you guys have been waiting for this uh next year is their team build with up stash redis typescript oh my God let me just keep stacking things on we just kept stacking it on it's crazy all right guys with that said I can see everyone cheating in now that's what I want to see welcome to the next year 13 meta Messenger 2.0 enjoy the video check this out guys meta Messenger 2.0 look at that we have an incredible bit of tech today so there is so much going on with this trust me it may be confusing to understand what the hell is happening but I will break it all down and you're gonna learn so much in today's video so I just want to go ahead and show you what's happening right now so all of this is being powered by up stash and basically what we're what we're doing is we're loading server components and we're doing a bunch of cool stuff so let me go ahead and just type in so this is amazing that pushes to up stash which then goes to Pusher and then you see the guy over here gets the response right so I'm pretending to be two different people right now because I didn't have two Facebook accounts you can see if you're having a chat this is how it will look right really really clean and we're using the new nexjs 13 components so if I go ahead and refresh oh we have server components which introduces loading that's nice and then we can go ahead and also log into Facebook so I'm going to go ahead and sign myself out right now and it's going to try and log me in and as you can see now I'm signed out if I sign in it's going to come to this page if I click sign in with Facebook at that point it's going to go ahead and log me into Facebook now I've already logged into Facebook on the website so it's just throwing me straight in but you can see we even have um so he told us another chat I have jokes um we even have there's a server rendering issue just because I'm not I'm not logged in on this side I was trying to show you a little trick the point is is we have an absolutely jam-packed build today there is so much to cover I cannot wait and if you are excited all I ask is you smash and destroy that Thumbs Up Button okay so so much stuff is happening today let me go ahead and read the chat right now we got Norway Bangladesh UK Seattle India Slovenia New Hampshire USA what's up Lewis Ryan Romania Slovakia South Africa San Diego we've got India Bangladesh oh this is six South Africa Kenya in Saudi Arabia oh man International International right now all right guys without further Ado I'm going to dive into how we've gone ahead and built this out and what it's going to involve because do not let this deceive you this has a ton of tech underneath this wouldn't have been possible without upstash upstash is what we're using today to create a redis database so if you've been wanting to know about redis you don't know how to get it set up you want to go ahead and get a Kickstart in this area this is the video for you because redis makes it incredibly easy to go ahead and do just that not only have they got a guide so if we're using nextges today so you scroll down to the bottom they've got a guide on how you can get set up I'm going to show you anyway but it's also an amazing platform for going ahead and getting set up with some serverless data it works even if your app's not serverless and it works with next year's 13. my favorite part is they have a huge free tier which is absolutely incredible and they make setting up Reddit is so easy that was my number one thing that I didn't like about red is it wasn't as easy as something like Firebase I just wanted something which was quick enabled and it allowed me to have a serverless database in the form of a redist database now if you don't know what redis is it's an open source in-memory data store and it's really really fast the problem is that they don't essentially allow you to kind of have the data persisting whereas upstash came along and now now they allow us to go ahead and actually keep the data in a more robust fashion so you have your database in seconds it is super quick to set up and they have a global data sources so this is going to go ahead they're going to actually replicate your data to different regions so it's available it's quick to load and it's safe if any one place gets you know knocked out your data is not gone right so it's robust and it works off of all of our known favorite things like the cell like lambdas so it's going to work off of all of our serverless functions that's why they have an incredible rest API okay so there's a bunch of things to know about already about upstage which we're going to dive into today but the one thing I do want to mention is that I always get the question of Sonny but do I need my card details to get started with this build well no that's because they have a per request pricing which means your price is pretty much zero up until your first 10 000 you know requests which is absolutely huge right you have so much like space to develop with it and then you can go ahead and upgrade your plan so absolutely massive amount of stuff okay so this is something that I really want to focus on today and we're going to be pretty much setting up our first up stash database getting it working and you're going to have your own database and we're literally gonna I'm gonna show you how to add data to your radius database and then we're going to go ahead and make it real time by introducing a layer on top called push-up Pusher is going to allow us to have real-time messaging from each person so in this case as you saw when I was typing in a message it was popping up on the other users um on the other user screen so in this case if I show you a quick example and I said this is real time all right it doesn't matter if there's 20 000 people on this right now yeah it would say this is real time and then that's ping out to everyone and eventually on this side you're going to go ahead and get your message as I'm live right now it could be a little bit slow but that's the only point right but if I had this running on like 15 browsers in front of me every single person is going to get that message so here we have a real time Wicked scalable app right so I'm going to show you how we're going to go ahead and do that okay so without further Ado I'm going to be diving into next js13 today so if you haven't used an xgs 13 then this is the video for you I have done an incredibly in-depth video which took me a long time so please make sure you go check it out if you want to know about the basics of Nexus 13 how to use the app component all of that stuff I have dropped a video if you're watching a replay Jay's going to add it around about here uh so it's going to be circling around the screen somewhere but it's basically explaining all the breakdown of the new features but I'm never gonna skip there I'm going to show you today as well so we're going to jump into the new app directory the new server component streaming how we can have this beautiful loading state right and that's not the way that we traditionally did it that's actually using react streaming and server components to achieve that right I'm going to use the new nexjs image so we've got a lot of cool stuff to go ahead and dive into but the one thing I want to mention is under the hood next year's 13 is changes the way that we think the way that we build stuff we have to think in a slightly different way now the whole layout the page layout everything is different but it's really damn powerful and I'm excited to show you how we're going to go ahead and Crush that part of it today so smash the Thumbs Up Button we're already over 200 likes this is incredible right let's dive into today's video so first up I want to mention oh we are going to cover sdo SWR as well so if you haven't used SWR this is an amazing way which essentially can eliminate Redux I said it I said it it's dangerously there but it's a way to fetch data cache it and then efficiently update that information with mutates and so forth so we're going to be using that today to get really efficient updates when we're actually pushing messages to our database I'm also going to introduce something called optimistic updates which you've never used I'm going to show you today it's going to be a lot of fun okay and just worth mentioning if you want to know any of this or it's kind of going way over your head and you want to dive in or you want me to go ahead and explain this more in depth I've already done like three coaching calls on all of this stuff inside of our courses here at full stack hero and we're running an event right now so head over to Papa react.com forward slash course join us over there if you want to carry on and kind of you know you can't be asked to wait for my next video okay so let's go ahead and dive into today's video okay so first up I want to go ahead and start my app so I want you to go ahead and I've actually made this for reference so as I'm going to be shutting down my Local Host we've got some nice screenshots here and the reason why I've done this as well is because I want to take you on an approach where imagine we will had a freelancing gig right in this case we've got some screenshots to clients like yeah I want you to build this right I want you to build this entire thing out I'm going to show you how we can go ahead and actually do it just from screenshots with the next jsflow okay so a lot of people want that direct explanation I'm going to give you exactly what you want today okay so let's go ahead and start things off by clicking open our terminal now on my terminal I like to put things inside of my the documents and builds directory so I'm going to go into my documents into my builds directory and I'm just going to pop everything there okay and the first thing I want you to do is head over to next.js13 right now I'm going to be using no I'm not going to be upgrading a current directory I'm actually going to be using the next js13 with Tailwind um setup right so the reason why I like to show you this every time is not because I forgot right so you could be thinking is it because he forgot right but in this case it's just because I want to show you like honest to God a straightforward like approach as to how I would do it if I was to start from the absolute get-go right so in this case it's not actually here you can do it this way but this way I'm not a fan of I prefer using the one which was uh create next app so it's create next app with typescript and Tailwind so it's actually going to be this one right here so I think it'll be yeah there it is yeah so it's going to be this one so there is a really nice extension uh template that you can use this one here MPX create next app dash e with telling CSS my project and the reason why I show you that is I'm not trying to be the best coder in the planet I want to show you that I am a human being and this is honestly how I go ahead and find my templates when I'm starting things off so just trying to show you so you guys can do the exact same thing when you're on your own okay so now we're going to go ahead and pop that in and instead of my project I'm going to name this something like I'm going to say upstash meta messenger okay hit enter and it sometimes prompts you if you want to install the package so in this case let's go ahead and hit Y so I'll just enter it's good for me and this is going to go ahead and set up our next year's 13 app so it's going to initialize with an extra 13 and then it's going to go ahead and give us a nice starter template okay so this is going to be a nice way to set up in a really quick Manner and I'm going to show you how we can then go ahead and change the base of our app to go from the traditional nexgs 12 approach to the more modern Nexus 13 approach okay so there's lots of changes now we've got a new app directory which is a lot of fun I'm going to dive into that as well so CD up stash let's go ahead and say see here I've got lots of builds here you can see see upstash and I'm gonna go ahead and say I'm stash your meta messenger and then I'm going to do code dot to open up my code okay so that's nice let's go ahead and close out our Road Terminal and then let's use this as so so I'm going to go ahead and make my workspace nice and organized so we've got a nice way to reference our build as we build it out and then I'm going to go ahead and actually cut my my build that was running right here so I'm going to terminate that build and we're going to start from absolute scratch okay so first things first if we go into our app Pages directory you can see this is using the traditional nexjs12 approach okay so I want to take our time to then I want to get feedback from you guys to know am I going at a good pace is it going like in a way that you expect or one and just give me feedback and I can go ahead and adapt and change it as we need to okay so First Things First Command J it opens up our terminal and I'm going to go ahead and use yarn because we've got a yarn lock five I've got package lock then it's going to go ahead and use I'm going to use npm but you can switch really doesn't mean you're locked in right so I'm going to yarn run Dev now something I want to mention is when we go ahead and do this it's going to spin up on low cost 3000 so I'm going to go ahead and open up my localhost 3000 right now so localhost 3000 let's go ahead and pop this over here so we've got a nice little preview of our app next to us as we go ahead and build this up okay there we go so I've got my terminal up right now command J to hide my terminal all right so fresh clean start you can see this is using the next js12 approach right so this is by default in xjs12 if it's inside the pages uh holder it's going to be a client component so that's an important thing to mention a client component okay so now we're going to go ahead and introduce the new app directory which is the next js13 way and we're going to make our home page by default be a server component which means it's loaded on the server then it's thrown onto the page which takes a lot of the JavaScript away from the client onto the server which means that there's less JavaScript to be delivered to the client which gives you ton of bonuses right so in order to do that we need to go into our next config and the first thing I want to do and a lot of people asking is this going to be up on the screen afterwards uh yes it will be up on the stream up on YouTube afterwards so you can watch it afterwards yeah I made a little bit bigger as well so in this case we're going to go experimental and we're going to enable our app directory so I want to mention before we get started or before we move any like further forward forward this is in beta still which means that most likely at some point there's going to be some detail if you watch this back in the future that would have changed that is okay that is Tech it's not to go have a go at me or the cell or anyone else Tech adapts Tech evolves that means that from these tutorials take over take away those golden nuggets of information and don't always rely on the exact thing okay so what I want to mention here is that if there is a change don't freak out look at the documentation so next year's 13 documentation and actually go ahead and solve that problem yourself if you get stuck in it okay so don't always rely on tutorials exactly down to the green really really important next year's 13 is still using beta features right so it's not in beta next year 13 but it's using beta features Okay so we've got app directory true I don't know excuse if the whole thing's in better but anyway yeah you can see an extra 13 and the actual um blog page for this is a beta so you'll go to the next js13 in upgrade page and here you get a nice little dock and you'll know that you're in the right place because it'll be dark theme Here you go beta.nxjs right so as soon as you get this dark theme you know you're in the right place okay so now we've got the app directory enabled let's go ahead and create our new photo structure so we're going to create a app folder now inside of our app folder I'm just going to create a new page.tsx now as you can see we now have a new page layout so the new pages follow this new layout where there's a higher level page which it represents our index and then every single folder represents our route so if I have a folder called search inside of that I'll have page.tsx and that will resemble the page four four slash search you can have loads of dynamic Fields all that stuff I have that video before go check it out if you want I'm going to link it in the comment as well okay so I'm going to use our snippet from our handy Library over here so es7 let's go ahead and go check out our es7 Snippets so you want to make sure you've got these Snippets enabled these are really handy and this is what I'm going to be using Okay so let's go ahead and do rfce and let's type in home page okay now you can see nothing's happened that's fine as of yet and I will show you why so at first he got down to Tailwind config make sure that we have app here as well okay so by default now they introduce the app directory as well so that's a good sign okay then we're going to go ahead and actually get this kind of set up and running so in order to get this kind of kick started firstly we've got to delete our index.tsx our old one so that's gone and now we get 404 and then we need to restart our server because we've enabled a new experimental feature okay so I'm going to Kickstart our server so I'm going to cancel it all yarn run Dev and now you'll see we get loads of stuff just happened on the screen right so we detected scrap typescript in your project bam so I clicked allow and then we go down here and you'll see your page.tsx did not have a root layout so we created a loop root layout for you so the root layout is a really important part of next year's 13 is how we can actually enable the different layouts and we can have these different parts of our layout which I'm going to get re-rendered unnecessarily right so it introduces this new modular approach of re-rendering the page okay so at this point now what I want to do is look at our photos and we can see we've got this layout and as I'm going to give you just a quick breakdown of what's going on I'm not going to go so far into it because there's lots of next year's 13 videos out there but for this layout you can see here now we've got the HTML the air the head so you can add the title and stuff in there if you want and then we've got this body now there are loads of reserved files there's the layout the head the page but in this case the head right you can see it's actually going to go ahead and this is a reserved file name and this is for when we want to go ahead and actually pop in pop in different things different attributes inside of our head um element okay so in this case I can say rather than localhost 3000 I want to say meta messenger okay hit save and now if I refresh my page we get my messenger so you see how this nice little page structure and this is available at every single uh route so if we add a forward slash search you can have all of these reserved files right over there there's also loading there's also error is also a template I think it's called as well so there's a bunch of different ones right and they're all over here listed down below okay again if you want to know more about this I've done a whole coaching call inside of search full stack era right so we have this done now at this point the children is just going to be the page so every anything that's in the page basically gets pushed out here so what's really cool is you can have a header component and a bunch of other stuff and it'll get shown there now you're probably wondering that's not tell ncss so inside of our header now this is where we would have to go ahead and pop in our Tailwind so as you can see previously we resorted to this file the underscore app.tsx we can actually get rid of that but I want to make pay attention to this Top Line where we import the styles from our Global CSS this is where we pull in our Tailwind okay so at this point I'm going to copy that and then I'm going to go ahead and first I'm going to change the music because this is uh distracting as well okay so that's bad it's karma okay so at this point I'm gonna go ahead and copy that take it over here and paste right we don't actually need the underscore.tsx file anymore either bam it's gone okay hit save now notice something that you need to understand is that the API is still located inside of pages right so Pages four slash API then we still have our API endpoints there until the guy eyes over of a cell figure out a way to go ahead and push in the new structure okay they probably have a way already so now you can see I've got my Tailwind CSS and we can test that by simply going to page.tsx class name text for Excel and I should have bigger text there we go nice okay so now by default this is a server component which means if I have anything like state or a click Handler or any other sort of interactive element it won't work because by default anything in the app directory is a server component first and then if we want to change something it's recommended that you take that portion which is interactive and you just make a client component for the minimal amount you need to because remember we're trying to minimize the amount of JavaScript that's executed on the client okay so really great stuff we're already over 200 viewers and the likes are just flying and thank you so much guys absolutely incredible okay so at this point let's go ahead and template things out so first things first I want to build the header okay I want to have some kind of header and this header you can see is going to adapt it's going to have welcome to meta messenger if we are not signed in and if we are signed in it's going to have my Facebook information and it's going to have the meta logo on the right as well thank you sorry for the 100 donation appreciate you bro all right so at this point well we're gonna go ahead and do the following so from our home page I'm now going to go ahead and introduce uh for now the home page I'm just going to write H1 hello world all right so this is going to be our meta messenger let's just say um welcome to the messenger okay so I'm gonna scream that in front of us right then what I want to do is I want to go into my layout and what's cool here is I'm going to go ahead and introduce a header component okay now this header component doesn't exist yet so what I'm going to do is go ahead and make this its own component header.tsx now as you can see previously in Nexus 12 if I was to do that it would actually go ahead and cause the uh a route to be formed at header right for slash header button now in this case because we have our reserved file names like page.tsx it just looks at the folder route that you're in so we have this new root segment Leaf structure okay so that's what they're following okay so rfce and I'm going to say header and in this case let's just make it so okay I've got rid of my okay there we go scared me I've got let's go ahead and pop in the correct syntax there we go semantics Mata right and then I'm going to mess up and down the line watch someone's gonna call me out on that all right so at this point we've got the header and then I'm going to go ahead and pop in our left side which is going to be this bit right here and then our right side which is going to be our bit over here okay but firstly it's probably easier to do this one because we're not logged in so let's go ahead and have a logged out State first okay so this one is going to be fairly straightforward we're going to have a div with some stuff inside of it so inside of our div we're gonna have another div which is going to include these two components next to each other right so let's do that right now so inside there we're going to have our image component so we've got our our image component so firstly a div then we've got our image component and notice how this is going to be from next image okay so I'm going to go ahead and import that like so the source for that is actually going to be a link that I've saved you a bit of time I've shortened it to one of our links so let's go ahead and Pop That in right now and then you can see it's complaining now typescript it doesn't want us to not include it has to include the properties now in next year's 13 we have to have an old property okay so in this case I'm just going to call this the logo cool okay now after that we have to give it a height and width and then we also have to whitelist it so that way we don't allow some misuse of this optimization for the images okay so in this case I'm going to give it a height of 10. and I'm going to give it a width of 50. right so with the 50 hit save and you can see we still don't see anything that's because we haven't even pulled it in right so in this case if I go ahead and pop in the header we're probably going to get an error now saying whoa you need to whitelist it there we go all right so now we grab our hostname in this case make sure you trust that link okay so I'm going to go into my next config.js and I'm going to go into my object here and I'm simply going to type in images Dot and I'm going to oops images and then this is going to have a domains array inside of it now instead of this I'm going to pop in links.popriate.com this is because on the server it's going to do some optimizations to make sure that image is rendered at several different sizes and it only delivers the one that we actually need for the screen size and it converts it to webp a bunch of cool stuff actually happens on the vessel server okay so that's good let's go ahead and do that and close and then we're going to make sure that we actually go ahead and save ourselves the hassle because we because we change next config we have to reset start our server quick little water break right and this is amazing I see so many people tuning in oh wow yeah we hit 100 oh man we hit 180 000 subscribers that is crazy thank you papa fam absolutely amazing smash that like button for that one fact alone okay so at that point if we hit refresh this will now be whitelisted so we should see uh hydration failed okay that's that's okay for now it's because I actually had something else started so in this case what I want to do is open up my inspector disable my cache and I want to load it fresh okay so in this point I've got a few things happening here let's have a look this is because I had so much stuff running before okay so whenever I get this issue I had this happened to me before uh I'm gonna make sure I clear my cache and do a hard refresh I'm to the cache reload there we go okay that should have fixed it okay damn it I ran into this problem before and it caused me a little bit of a headache it was a temporary problem as well so let's go ahead and do yarn run Dev as well again I got stuck in this Loop last time okay so I'm gonna go ahead and open up a fresh window so localhost three thousand let's pop this over here okay all right it's debugging already that's fine we've got a hydration error let's go ahead and check this out so at this point now my header I believe is actually gonna be if I was to get rid of my head I want to see something quickly let's go ahead and refresh so it's not my so it's my header that's causing my shoe hey stranger okay so let's go into my layout and I just want to double check something so at this point I mean I could make my header just a client component okay so for this purpose I'm going to make a client component okay I don't want to make a clinical button that's the problem we've got my header inside of my header we've got the there we go okay interest let me check if it's my image tag so it's not that it's actually everything here so let's do a little bit of debugging let's jump into it see and it cannot appear as a child oh okay oops oops oh damn it I see okay that was not an error on just randomly happening this was because we had on HTML it has to be inside the body my bad my bad right that's actually yeah Lewis Ryan caught me out that's actually a good thing right so there we go first bit of debugging hey there we go nice right so do not quit because that was stressing me out a little bit but trust me when I say I will this has been happening for hours for the last few days because it's new tech right new Nexus 13 is new there's things that we slip up on that is one of them right so it has to be inside the body right so make sure you don't do that same mistake okay so now the head is there and then we're gonna go ahead and have our P tag next to it so firstly kudos to that we got past it like bloody video for that right the stressful moments I'm gonna say welcome to meta messenger there we go bam right and then we're going to do a p-tag class name and that's actually how I debug it right so you saw like I literally just check the console look back with this and see and then eventually I should have just checked the consoles that's just the truth all right so text blue 400 there we go bam and then I want to make this sort of next to each other so class name and we're going to make this a flex right and we're going to space the components a value of two right and I do want to center it there we go that should make it a little bit nicer for the div outside of it I'm going to make this a flex column and I'm going to do a flex firstly because you can't use flex without Flex file we can't use flex column without Flex come you know I mean my item Center then we're going to make space y of five because the child is not only this div we're going to have another thing underneath there and this is going to be a link which is going to be imported from next.js we don't actually need this react right so you don't actually need that anymore it just comes in that little template that I do and here I'm gonna have href and this href is going to go ahead and point towards our sign in now our sign in is going to use next or so our next auth points everything that where we're going to set it to point things towards auth forward slash sign in okay so we're going to go ahead and do that now so four slash auth forward slash sign in okay and there we go and that's not nice we're going to actually make sure we have a closing link and we're going to sign in now a quick little addition for an xjs13 previously you had to have in xjs12 a a tag inside of your link tags since next year's 13 what they're trying to do even with the image component is remove all this unnecessary wrappers right so now it's directly an ATAC itself and same with the image component it's directly an image component you don't have to mess around with these wrappers so good job good job next next year's team right vessel you guys are sick Lee all of them are pretty incredible right so uh they're doing they're doing good work of this so we've got the meta messenger looking pretty nice and then underneath all of that I think that's you know I think that's pretty good for now all right welcome to messenger the sign in looks terrible though okay so we don't have a sign in yeah so this is customize this with a little bit of styling I'm going to save us a bit of time I've got a few bit a little bit of styling here that I'm just going to pop in so as you can see I've got a background blue when I hover I want to go a little bit darker text should be white front bold padding on the y axis of two x of 4 and make it rounded okay so let's do that hit save and just like that bow look at that hover effects nice okay so at that point the header let's go ahead and make this stick to the top so if you noticed when I was scrolling this part was sticking to the top of the page right so you can see that this this area was kind of sticking so as I was even scrolling down that was actually sticking to the top now the way we do that is we go ahead and we I kind of like this screenshot approach it's kind of cool right um gamer distrust is fam that's what I'm talking about I'm gonna do sticky top zero okay I'm gonna set the music up I need to get me one guys all right top zero I'm gonna say Z50 right this is amazing guys 250 people across platform sick dead 50 I'm going to say background should be white just to prove to you that that's actually working background 500 and you can see there we have we actually have a background right so we need to make it white and we need to make a Z50 to make sure it goes over the elements as it Scrolls on top of it okay so looks good and then we're going to say is a flexbox justify the center and we're going to say items that should be Central that means I'm going to Center on the X and Y axes give it a padding of 10 and I want to give it a shadow very slightly very very slight Shadows you see that that's actually a super subtle Shadow All right but there you go we've got the top looking pretty pretty decent right now okay so just like that we kind of have this nice little trick that makes us lower when I click that it will take me to all to sign in which will set up in a bit okay I am going to go ahead and also make the other part right so that why not let's just go ahead and do this right now now I don't have a picture right now but I can go ahead and build the template of it and then we can have our option a conditional um change based on once we've implemented this session So eventually I will have a session here right and that session will be a value that we pull from our next auth session right so in that case for now I'm just going to say we do have a session right and if we have a session then I want to return the following instead I'm going to say return this instead right so it will only hit this if there's no session so if the user is logged out that's what I mean by session now at this point I'm gonna have a header right and it's probably it's pretty much the exact same header right so in this case GitHub copilot is getting a bit carried away let's go ahead and copy the header let's just take this out so we've got the exact same header and then inside of the body I'm going to go ahead and have a div and this div is actually the same as the other one so it's going to be a class with a flex a space on the x-axis of two and here I'm going to have an image tag Okay so we've got a self-closed image tag and the following attribute so this will actually be the user's image right So eventually we're going to point to that by using session.u session.user.image but right now we don't have that okay so at this point I can just grab a image off of the internet so in this case um oh okay let me grab it in let me grab a picture uh I could probably use my other one I'm trying to think okay um for now let's just use this one okay so I'm going to use a meta image just as a placeholder because that way we don't have to do anything else to it right easy days I'm lazy okay don't blame me I'm lazy for that all right and then what we're going to do is make it a rounded circle with an object contained margin X of two okay and underneath it I'm gonna have a div and we have two P tags right so P Times by two nice little image trick if you didn't know now you know and I'm gonna say logged in as and then we're gonna have the name so in this case I'll just be sunny Sango or whatever your Facebook name is because we are going to be implementing Facebook login remember So Meta login in this video let's go ahead and hit save so logged in as Sunny Sangha so in that case looks pretty nice um oh this is cool man uh you state says oh his name's you stay he goes guys if you're a new developer five months ago I didn't know anything about react with the help of YouTube videos like this I found a job two months ago don't only watch videos code along with it yes please code along with it and if you get stuck don't just quit it took me hours to build this like like it not even hours give me a few days to build this out trust me you get stuck and it feels like you want to explode but that's why I'm here to just be real about it right we're hitting this together that's why we have the community the bubble farm community make sure you join it if you want to be a part of something but you don't feel alone when those moments slap you because they do right let me know in the comments right now if you know what I'm talking about my SLP class name and then when that text blue 400 and then for this P tag I'm gonna go ahead and say font mode and text should be at large okay so hit save and Bam look at that oh it just popped in so sick right and then underneath that we're gonna have a log out button now the reason why I'm going to have a logout button component here is because this is a server component and when I click that button it's going to have an interactive element so when you have any interactive element it has to be a client component so like our click Handler or a piece of State in this case we have a little bit of a click handling when we click on this that's actually a log out button believe it or not I know I know I'm lazy right so at this point we're going to go ahead and make that logout button so log out button and I'm not going to go too far into photo structures today we're just going to keep it simple so I'm going to create a logout button like so logout button.tsx rfce bam we've got a logout button okay now at this point what I'm actually going to do is probably this maybe use the sign in button rather than that right because it might look nicer than what we have there so I'm going to take my sign in button that we have here I'm just going to pop that in over there in a second right so where we have that now I'm just going to go ahead and do I don't know I've got a it's not a link tag that I want to use I'm actually just going to have a uh a button okay and this is not going to have this it's just going to be a simple button that says uh sign out there we go all right and then this button is going to be yeah so let's go ahead and import it like so and if you're wondering how the how I do that click at the end Ctrl space bar and then you can get the auto at complete like I just did right nice now we've got the sign out okay pretty slick so as you can see now they're kind of stuck together I don't like that right I don't want it to be stuck together like that so in order to change the look of that the way we do it is we change it from justify Center to justify between and that means it's going to allocate some space between them accordingly so if we're on a huge screen allocates accordingly just like that now I've got a sign out button when I click it what should we want to do right I need a click Handler the minute I have a click Handler you're going to see the following error so if I had something like this just a quick little example console.log hello now you're gonna see whoa whoa whoa whoa whoa era wait for it wait for it oh Arrow something kicked off ouch right look at that see I told you it's gonna happen because we have event handlers cannot be passed to client component props right so natural thing that's gonna happen when you're using next year's 13 so the way we get rid of this is we use the directive use client at the top okay if I do that it tells nextges that that is a client component which means it sends that bit of JavaScript to the client to render out okay so at this point now we can have an on click Handler so all I need to do from there is eventually have this sign out so we're going to come back to that once I Implement next to auth okay so at this point damn good right so we've got the session in if I was to toggle our session from True to false you can see it's going to go ahead and change so once we connect our signing component that will look pretty damn nice okay moving on to this middle portion so I'm just going to create a template here to something like you know it's just gonna have a bit of information in there before and then we're going to connect dot redis but my main I'm going to quickly Breeze over the middle bit the message this and then we're going to build this input component so we can start pushing messages to upstash and then we can go ahead and start pulling them in okay so let's do that right now so first up let's go to our middle so let's head over to our page now this is a top level which means we are the index page okay so at the index page it's going to be very simple we're going to have a main so it's going to be very like uh and then what I like about this is that you separate your presentational logic look we have our main layout then we have the children which is rendered inside a page and you see how it's just it's simple it looks clean right so at this point we're going to have here we're going to have a chat input I can play it both ways it really don't matter I'm gonna have a message list right so these are two components right now oh we're getting into a nice Flow State right now all right so looking pretty sick we've got message list chat input and um we're gonna go ahead and start building out firstly let's build the message list component okay so first up we're gonna go ahead and pop in a message list all right and we're going to do the following I'm going to create this component like so so upside up in here we're going to create messagelist.tsx um rfce and that's going to be our messages so yeah let's just say messages go here save okay now with this bit we're gonna go ahead and import it bam hit save and as you can see we have our messages component nice next up we're going to do our chat input okay so that's just the template for that by the way where I'm gonna actually put some important stuff in there okay so let's imagine we had a message list and then inside of there we just had you know a bunch of uh P tags saying message blah blah blah and these are eventually going to be actual messages right so I'm just going to go and pop these in there we go nice little template now for chat input we're going to go ahead and do the following we're going to go ahead and say chat input like so and this is going to be something which is going to be fixed to the bottom of the screen so let's go ahead and do that right now so command B pop it in make a new file called chat input.tsx and just like that rfce chamber okay so this is where we're going to have the user input so all of the kind of stuff where you know this bit down here basically let's go over here so down here this beautiful little send it area and you can see it's actually uh we go ahead and disable it if it's not logged in for the user okay so let's head and do that right now so for the chat input it's simply going to be a form okay so that entire thing that you see at the bottom is a form and then I type in a enter it hits the send all right that means it's very simple we only have an input and a button done input and a bun done right now here we're gonna have a type of the button is gonna be submit it's going to be a submittable button here we're going to go ahead and say send right for the styling of the button let's keep it pretty fresh we've got that same bit of styling four that we had over at the uh the other button so pretty similar and you can you know refactor that into a custom class if you want but in this case background blue when we hover it goes slightly darker same bit of styling from before but when it's disabled the opacity goes to 50 and it's going to have a cursor saying you're not allowed to do that on that bit okay so this is oh we're about to break 300 likes let's go guys this is sick right so at this point now we are doing pretty well so let's go and see oops I've changed up my screen a little bit there we go let me just move it around nice okay so so we've got this here so now what I'm gonna do is I'm gonna go ahead and pop this on the side okay there we go someone just says 300 likes in hey damn just missed the 300 nice all right so at this point we're gonna go ahead and create the we're actually going to bring in the input form so we can see it all right so I'm going to import it here like so and again you don't need the react anymore that's old you don't actually need to say let's react right now that's actually an input film right there so I'm going to go ahead and pop something in so we can see a hot reload into shape here I'm going to style things out and I'd like to put it after there because we're going to have a bit of bulky news here so in this case for the class name I want to go ahead and pop in the following right so we're going to say firstly it's going to be Flex one but before I do that I'm going to give it a placeholder this placeholder is going to say enter a message right so enter a message here dot someone said is this really live yep it is a fan I am live right and you're probably wondering how the hell did he read that it's practice right so Flex one around it so now if I do that you can see it's there now the only reason why it's not using up the entire space is the container is not Flex so in this case if I do that bam it uses up the entire thing okay so Flex one rounded let's make it a little bit more interesting than that let's make it um have a border let's give the Border some styling and then I want to do some Focus sort of effects on here right so I'm going to pop in a bunch of information and we're gonna do the following so I'm going to pop in Border gray 30 300 but you might not know this one Focus outline Focus ring two and focus ring blue that's pretty cool and what this does is you see when I focus on that element right it turns blue if I made it red it would do the exact same thing but for red so a really nice kind of element right there and we're going to make the focus the Border will be transparent when we're focused as we've got a ring around it instead and then the padding X padding Y and so forth okay so overall generally pretty nice right so this is kind of cool somebody says Fester says good work something you've been always been my role model I appreciate that thank you for tuning in you guys are awesome that's why I do I do right so keep smashing that Thumbs Up Button I'll keep the videos coming okay so oh we've got some beats happening so we're gonna do on the form I'm gonna say it's a flex box panning X of 10 padding y of five because I hate the spacing right now space out the send and the input by two and then we're gonna say border on the top border should be gray 500 uh 100 sorry now at the beginning this is where I make it basically a fixed component right so here what I'm going to do is I'm going to say it's fixed to the bottom of the screen at the exact bottom and it's going to have a z index of 50 which means that as we scroll over things it's not gonna basically uh it's gonna use up the majority of the space right so in this case as soon as I do fixed you have to say it's width of four in order to make sure that you actually have the rest of that space so that's pretty nice I like that right it's kind of cool nice and now we want to go ahead and keep track of what I'm typing in right so I always get the question is it going to be live afterwards yes it will be live afterwards all my live bit streams go straight up back on the channel afterwards right so at this point I need to map my input to the input field right here there's so many ways you can do it there's raft this map there's a form submit but in this case I want to actually style based on my input so I want to have a piece of state so because I have a piece of state it means it's going to be a client component so in this case I'm going to use client to indicate that this chat input is a client component I'm now going to have access to my state if I didn't do that I'm not going to have access to my state right so set input and then I'm going to go ahead and say use State now at this point I can pull in my you state from react and I can go ahead and connect up my input field so for the input field the way you connect it is you say the value is assigned to our piece of State on change so as the user types in every single time they type in E is an event gets fired off and what you do is you update the input so in our state with e.target.value which resembles the input value so the value that is in here so every time it changes whatever is in here gets pushed into State okay so pretty sick pretty looking pretty nice so far I've actually gone ahead and opened up something I shouldn't have opened up there we go clutch so at that point and now I can go ahead and say if there is no input then we are disabling right so disabled will be true if there's no input so let's see what happened there so my button should have been disabled if there was no input and it wasn't and that's weird so let's go ahead and put my disabled opacity e50 let's refresh okay so sometimes the hot reloading a little bit janky a little bit janky right when it when it's on server components but it's okay we forgive them right so in this case you see that nice and the same thing I'm going to do here I'm going to disable entry if no no I'm not gonna disable entry I'm going to disable that if you actually don't have a session afterwards okay so at that point looks kind of cool I'm gonna throw some neat in this up a little bit very nice right so quick little water break absolutely incredible amount of viewers today you guys are absolutely awesome for tuning in almost uh can we get to 400 likes I think we can I think we bring a thousand today all right so we got the button down so this is looking kind of cool so when I hit hello and I hit submit you see how it refreshes the form right so obviously we want to connect that to a form Handler so let's do that right now let's say on submit and we're going to go ahead and say add message so this is going to be a function that's going to be assigned over here so we're going to say const add message equals a function and anything that is a form is going to have an event attached to it so there's a little trick okay to get the type definition for your event in typescript what you do is you pop an arrow here and you simply inspect your e and here you can see form event HTML form element so if I grab that go over here paste it in and I import that just like that I have a perfect type definition I can get rid of that I have the signature down and now I get my type definitions prevent default see little tricks just make your make make life easy right little tricks make it so much easier abria says mother oh God you're awesome you're awesome for tuning in thank you Daniel says my boy what's up someone goes I'm watching from my College gym that's what I'm talking about it's omnipresence all right so at that point we now have the ability to tap into when we actually have um the user submit the form so by doing either prevent default when I type in hit enter or I press send nothing refreshes we're preventing the default Behavior I also want to do some defensive programming I want to say if there's no input return cut things off at that point right now what I'm gonna do is I'm going to copy into a different variable so I'm going to say message to send equals my input now the reason I do this is because I want to make it optimistic so that means when as soon as you hit send I can get I can clear this right so as soon as you hit send what I can do is I can say set input to uh empty and then I still have access to my variable inside a message to send right so as soon as I hit enter bam you see how it's like optimistic it's bam it's straight away is quick right and that means I still have access to the variable right here so I have a copy of it okay so uh Alex says I like that part when you say it's practice man it is different I know dude it is it's just practice that's all it is right so at this point we have our message looking pretty good so I think what we can do now is fair to say is we can actually go ahead and set up our app stash up stash connection okay so for up stash what we are going to do is firstly head over to obstash.com so I want to go ahead and give a quick introduction to abstash so as I mentioned earlier they are an incredible platform for setting up our redis database right and again it allows us to have a nice little rest API with to make connections to now if you don't know already we shouldn't really be using things like um connections directly like a socket connection to something like a serverless function because they should be stateless they shouldn't have connections they should be able to just go up down shouldn't be like connected to anything for that long so rest API is an ideal situation for things like lambdas for things like the cell functions and so forth thank you Jobim Rose for the donation I appreciate you bro right let's go check this out so so at this point we're now going to go ahead into our console now if you do want to check it out even further and you just want to play around for yourself make sure you go down here check out their docs but I'm going to jump straight into the Contour now for today I've already set up a demo build so all you would need to do when you come to the console is actually go ahead and create a database you get a free one project when you set up so in this case I've already created a demo build so I'm going to go into our demo build and right here so I've clicked into the demo build and you can see we've got a bunch of information right here they make it so easy guys you can even inspect your data browser so in this case I can see it what is actually available inside of the data browser so let's go ahead and check this out thank you so much sassy Throne just dropped 7.99 Australian dollars I think it's the best react tutorials mate thank you I appreciate you bro that's actually sick thank you man so in this case look the way you store data inside of your um inside of your redis database remember upstash is just holding a reddish database basically and allowing us an awesome connection to it so in this case you can store loads of different data types in here right so the data structure server is mainly kind of storing things like key value pairs hashes lists sets sorted set streams and a few others right what we're going to focus on in this case this is a key value pair for example a string but we're going to use something called a hash right or so in this case the hashes is going to essentially be a list so in this case a message is hash and what we're going to have inside is a key to resemble the first value and this key should be unique right and then we're going to have the content inside and this will include the message all the different information about the user and so forth right so about the messages so if I was to copy that and pop it here you can see we've got the username we've got the Creator we've got the email the profile pic and so forth okay so a bunch of information there that we can go ahead and jump from so once we have that down now what we're going to essentially do is we're going to go ahead and you don't actually need this test data already by the way you can I can delete this one but I'm going to keep it here because we can connect to it have a look at it it makes life a lot easier so how do I connect to my redis database well first things first we head over to our details and first thing over here you can see node right so you can use different libraries I already this is what we're going to use today or you can use node redis like so first thing I want to do is I already right so I'm going to show you how we're going to actually go ahead and implement this oh drop the volume down a little bit down there we go so John Paul says please don't delete this once it's done I won't delete it dude I got you all right so this one is go down here and you can see npm install now I'm not I'm using yarn today so I'm going to go ahead and pop it in so what I like to do is work in a way that we have two terminals my left is my server running and my right is the one I can install stuff to right I already spam now I've installed IRS to my dependency tree and there you go just like that we have it applying it away and then I'm going to create something called a redis file so this file is going to be a Singleton pan Which is going to allow us to have one instance our connection to redis that we can continuously use okay so at this point what I'm going to do is I'm going to import redis from IO redis okay now once I've got this open what I want to do is make a connection to redis so what we do is we write console Radice equals new redis and inside of here it takes a string and this is our redis URL so what I essentially need now is a URL that will connect me to the database so you can see here perfect example just like so right and you can set and you can do a bunch of different things like this so I need this magic string so I'm going to show you how to get your magic string so right here is the key part where we have the asterisks is that is where your password goes okay so you're going to click copy and you're going to paste your password in there keeping the colon so at this point I'm going to copy that and I'll show you how we do it so imagine we had a string like so and this was the password so you'd click copy on the password over here and you can simply just go in and I'm not going to show you my password but this is where your password would go okay so we're gonna go ahead and pop it in just like so so at this point now what I need to do is create an environment file so I'm going to create a DOT EMF dot local to represent our local environment file and for this one I'm going to go ahead and create it make it very simple I'm just going to call this one our redis URL so where this URL equals and then I'm going to go over here I'm going to copy this just like so okay and I'm going to get rid of these brackets now here what I'm going to do is I'm going to go ahead and pop in my password and then I'm going to save and close the file okay so I'm going to hide the screen while I do that so I'm going back I'm going to talk you through it I'm going to click on copy my password and then I'm going in I'm replacing where the X's were with my password then I'm closing it okay now I've got it inside of my environment variables just like that right so easy as so at this point now I can go here and I can say process dot environment Dot and now we can get our string out of it okay so and if you are you are going to get bugged I'm telling you now you're going to get bugs right because it's new tech there's a lot of new things going on there's a lot of bits where you can slip up it's okay just take your time as I mentioned before you can even join our Discord server and our zero to full stack hero Community asks for help that is the best way to solve this problem right we're going to do the redist URL okay that was great we're going to do the redis URL okay and then we're going to hit uh and I'm gonna say that it's always there right you can actually go ahead and check make sure it's there and so forth but that's fine for now all right so at this point I'm going to say export default redis and hit save okay so it looks pretty nice and this is our Singleton pad so every time I need my redis object I can just pull that now easy as okay so with that done now what we can do is we can go ahead and make our call to that redis Singleton object so how does this make sense right so when I go ahead and type a message in here I should be able to actually go ahead and hit send and then I want to populate a message and ping it into the back end right so into our backend which is already database so I need I want it to go into our Swisher button data browser at that point okay so let's do that right now I'm going to go ahead and actually make this very clear I'm going to delete the entire messages all right so let's go ahead and get rid of that key in this case I've got a bunch of others I was showing in the coaching call that I was running inside of zero to full stack hero and again if you want to join us and you want to get more insight into how I learn all this and how I teach our students Papa react.com forward slash course first link in the description right and then smash that like button if you're enjoying this right so in this case you can see no messages are here so we're going to prove that it works okay so there's also other ways you can do you see that there's different ways using different libraries and you can even use a rest API like that it's fine you can do it so many different ways okay so let's go ahead and do the fun so at this point I want to go ahead and go to our chat input right and here is where we're gonna do our up like add our message to the server okay so inside of chat input now what I need to do is firstly I need an ID I need a unique ID that I can go ahead and pull from so we're going to use a library today called uuid right so this is called uuid head over to Google simply pop it in and it's going to be an npm package you can see very popular npm package okay so uh I like that so in this case we're going to go ahead and install it uuid and we're gonna pop it in and say yawn add euid there we go and then go to the top of the farm we're going to import version four as uuid we're going to rename it from the uuid library okay so basically we're pulling in something from there there you go and we're going to get an issue error saying you don't have your Dev types right so in this case this is our type definition so what the way you do this is you copy ad types there go over here and you simply want to type in yarn add Dash D to make sure it's only a developer dependency okay so you don't want to install that for like your production bundle you just want it for your developer and then you see it goes it gives in our developer it gives in our type definitions just for the devs right so at this point now we can use this uuid so I'm going to generate an ID so we can use it to go ahead and upload right so I'm going to say const ID equals uuid just like that that will give me a nice long um that'll give me a nice long string which resembles an ID now some people asking what is that all complete that you're doing dude that is actually called GitHub copilot and it is paid but it's actually incredible to help you out and sort of not do the code for you but in the event where you forget things or you just need to search up it helps me be a faster more efficient developer so pretty cool right so at this point we're going to go ahead and say cons message I'm going to create an object that we eventually want to push up to um our radius right so and we are also going to be creating your own API endpoints today a get and a post MPI endpoint so so full stack build today right so at this point for the message it's going to consist of an ID which is going to be mapped to our ID so we can shorthand it by just saying ID it's going to have the message itself which I'm again I'm going to use our message to send variable then we're going to have a few other things now you should be using the server date which is the date that is on the redis server because I could be in Dubai you could be in London someone else could be in Kenya and we're all going to have different uh time zones but what we're actually going to do today to prevent it from glitching out on the screen looking weird and having undefined values I'm going to use your computer your time zone and then when it goes on having uploads it's going to temporarily have the time zone and it's going to change the server time zone so on the screen we're always going to have a value and I'll show you how it's all going to come together trust me it's pretty cool how it works right so we if they create out and I'm going to do underscore notation here so create X and then we're going to say date dot now and then we're going to have the username profile pic and email so for now for the username I'm just going to say Elon Musk all right then I'm going to go ahead and say profile pic and for this one let's have so we are going to have an image here uh in this case I want to just have I'm actually going to get a Facebook image right now that I have up on here so I'm going to hide the screen for a second while I get that I'm going to grab a profile pic right here of a Facebook picture whoa and yeah we got Wicked donation give me one second guys um so I've got okay so I've got I've gone ahead and just used this right so I've gone ahead and used a profile pic like so you can use any you want this is the one that comes back from Facebook right but you can use any you want just make sure you whitelist it inside of your next shares config right so firstly thank you to Adamo Adamo uh for a 10 donation appreciate dude that's huge uh massive and Joseph says GitHub co-pilot is 10 months ten dollars a month so I will just pay for one month to get up go buy it thank you dude um so yeah we've got the profile picture up in here and then we're gonna go ahead and have that's just a picture of me as well so let's make it sunny all right sunny sunny like uh right and then and if you're not following me on Twitter go follow me on Twitter say anything uh Twitter that I'm trying to grow into it now all right it's pretty cool um so on there we've got an email as well so in this case let's just do a papa or react if you ever want to email us about anything popular team.gmail.com right so it's going to go ahead and populate so now you can go ahead and see that we're following we've got a message which is in the correct format okay so the next natural thing is I want to cast this firstly to the correct message type so I want to make sure that there's never that concept of it being you know wrong I want to make it sort of you know protected by our own type definition so firstly what I'm going to do is I'm going to go into our new all files right here so into our files we're going to go down to the highest level our package.json is create a file called typings.d.ts right and I'm going to pop in a new style oops I'm going to pop in a new uh type so this is a typescript definition that we're exporting for a message so basically it resembles ID message created that username profile pic and email right and then what I can do is save this and now I can import that in wherever I need to so and over here I can say this is going to be a message type oops a message all right there we go and we can import it from our typings and what this does is it allows me to understand what is on the message and it enforces that as well so if I went in here and I tried to add something like a foo right you can see now it's saying whoa whoa whoa a food is doesn't assign to that right so you see it like you can go ahead and protect your code so it stops you from having bugs good things right so at this point we've got our chat input and we're going to go ahead and make a request to up stash right so we're going to push the data to our upstash so what we actually need to do here is push it to our backend API just want to mention as well thank you I appreciate you man Ben says co-pilot is also free for students yes it is if you can prove you're a student it is free right which it means they're actually pretty awesome on that right I'm almost at 400 likes let's go guys if you're watching the replay smash the thumbs up let us pump this out to many developers as possible so what I'm going to do is create a handy little function here and then we're going to call this upload message to Ops Dash and this is inside of our other function right it's going to be an asynchronous function and it's just going to be responsible for making that uh post request to the back end okay so at this point what I'm going to do now say const data equals a weight Fetch and I'm going to go ahead and have the following I'm going to have forward slash API forward slash add message so we're going to create this endpoint shortly now for the arguments I'm going to say it's a post method and for the headers I am going to go ahead and state that it is a content type application Json so we are making sure that it's going to go ahead and pass in the data as a Json okay for the body I'm going to stringify the message okay and what I am going to do is I'm going to wrap it in an object because I want to go ahead and just very clearly on the back end access it as our request our body Dot message okay so at this point now we've got a we're stringifying our message object okay so that will go ahead and basically make a call to our API for slash add message which doesn't exist okay so we have to actually go ahead and make that so at that point what I can do is I can go ahead and actually get my um response so in this case this is going to be the response that's going to come back from here then we're going to say const data equals a weight res Json and that will give us back our data okay so before we do anything further we need to create this endpoint so API forward slash add message so let's do that right now now if you are using next.js13 you need to make sure that we are still using the old API Roots that's normal right that's how they're currently doing it so we're going to create an API endpoint called add message add message.ts and something to know all I do is I copy the one that they give us the hello and there you go bam why I copy that in simple as I get a nice template I can start things off without you know starting from scratch so that's my way of doing things right I don't try and reinvent the ball right so for this we're going to go ahead and ensure that we actually return back a message but I'm going to show you how I'm going to change it afterwards so right now this is a real endpoint if I go to localhost forward slash API vocal 3000 forces API four slash app message is there right so I'm going to firstly double check there's a post request coming in right so I'm gonna say if someone says who's Johnny though right it's about BJ I know so at this point we're going to say if it's a not a post then I'm going to return an incorrect message right so in this case what we do is we return a status of 405 and the Json saying method not allowed right and this is essentially going to tell the client that whoa you're making a like a get request to a post endpoint all right so in next.js you have to specify this as such okay so now we can only accept post request which is good then what I want to do is I want to destructure the message from the body okay so we passed in the message earlier on so I'll show you where we did that we went ahead and we passed in the message object which is why I'm destructuring it from the body so essentially I'm doing this right and I'm getting it out and I'm popping it in like so okay now once we've done that I'm going to go ahead and replace the time stamp with the server timestamp just like I told you right so in the beginning we're going to go ahead and have this date now and that's for a reason right because when we optimistically update it on the client I want to show something and I'll show you how it comes together afterwards what we're going to do is we're going to create a new message and we're essentially going to copy in the contents of the old message so this is called a spread operator and what this does is it opens up our current object inside of this one so all the keys and values are going to get poured out into this one so it's basically the same object at this point but I'm going to replace the Creator that with the date now from the server okay so what we're essentially doing is we're replacing the timestamp that the user had with the one on the server okay um now that's pretty easy as and then we need to push to redis right so push tops redis where this DB so at this point now what I want to do is I need to pull on my redis uh uh import right so in this case I'm going to import from redis so remember we made that endpoint earlier so we actually know the Singleton pattern here so this is my connection to redis I import it like so and then what I do is I very simply go grab my redis I make my um endpoint asynchronous and I go ahead and I say a weight redis Dot and what we're going to do is because I'm setting a value for a hash so what I'm essentially going to do here is I'm going to say which hash I'm going to basically push into so in this case that's the first argument in this case we're going to go ahead and say h set which is a special function we're going to pass into the messages then I need to give it a key so in this case I'm going to go ahead and say that the message dot ID is my key right then we're going to stringify the actual message itself into that value so remember I showed you that structure previously inside of redis that's what exactly what we're going to do so we're going to stringify the message so this is essentially the magic line that goes ahead and Pops in the data into our backend database right so if we go into our data browser that's what's essentially pushing it into a messages the key and then the value right so let's load that one up I don't know if there's anything in there I was just showing some students that right but um anyway we'll let that load okay so in that case that's what's gonna happen right so in this case it will be pushing into the messages with the ID with the key being stringified so Sim similar to how we just did that right okay and then at that point we're gonna return the item as follow we're going to pass in the message being the new message okay that's how we're gonna assume now it's complaining because we have set the data to be of name here because most of the time we pass back in name so what I like to do here is I like to actually change things up so if my data is in a sort of fulfilled state I'm going to pass back a message and that is going to be of type message okay I'm import my type definition great if it's this then what it's actually going to be is more of an error right so I'm going to say type error data error data equals error and this is actually going to be body sorry body string okay in this case I would return that as body not allowed okay and the way that we basically say is we say it could be of type data or it could be an error right so it could be fulfilled or it could be a narrow done and there we've thought we have it method not allowed will get returned if it's not that otherwise we'll go ahead and return the message great so at this point now we can go back to our chat input and this will have a place to go ahead and hit that's pretty damn good so we can actually go ahead and test this out okay so first things first I want to go ahead and just console log at this point to say console.log and say message added and then I'm going to go ahead and say data right and I'm simply going to call this function yeah okay so just like that I'm going to call it the function right so now what we have is inside of our add message function I am calling or in a function upload message to upstation yes you can refactor that out if you like it's completely up to you I would probably refactor this iron production so that's uh you could definitely do that okay so let's go ahead and do this let's refresh and uh sometimes we're going to get this error I find that it pops up quite a bit when we're actually doing this um so I'm going to type in hello world now remember I don't need to be logged in at the moment because we just got some default values there so I'm going to hello world send and see what just happened it showed to the user it was in media but if I inspect Now message added and the object is there see the message came back which means that it had full circle right which is damn good so that's a good sign and let's go over here and let's hit the refresh button and just like that we made a connection to our redis database at upstash and we went ahead and popped into our messages over here so that right there is the message from the user okay damn straight powerful easy very simple to do so up stash great job with your apis all right really really good stuff um so at this point that looks that looks pretty nice so now what we could do is just pop in another message I'm saying this is pretty cool hit enter and just like that it will go ahead and pop it into the back end so as you can see message added now there was a slight delay there which is completely fine because you're making an asynchronous request to your API to upstash and then it's going to come back again rest apis are being made and then it comes back so how do we go ahead and address this issue all I want to do right now is update the immediate client state so I wanted to show me that bam it was immediately added and then what I wanted to kind of do is roll it back if there was an error at any point how the hell do we do that right well traditionally it would have been kind of a pain to do that but with SWR so data fetching hooks from the guys over at the cell it's actually pretty simple to do this so this is what this is where this comes in to play so we're going to use something called SWR I actually always forget stairway validate right HTTP caching validation strategy and basically it's a really efficient way of fetching our data and caching it and doing all that kind of cool stuff as well right so let's go ahead and install this let's click get started and first thing you want to do is add it into our dependency tree so head over to our code let's go ahead and Bam head over to our code and let's pop this back on the side just like that and I'm gonna go ahead and make life a little bit easier for me and do that there you go okay so let's head over to our code and let's head over to our terminal and let's do yarn at SWR cool we've added it in super fast then we go down here and this is the pattern right so typically you have a fetcher and all this is doing is it's a function that accepts some arguments and then it goes ahead and it makes that fetch record or makes that kind of asynchronous request across with the rest API call and then you pass to Json it sounds more complicated than it is it's actually very simple we just did it right now right we made a fetch right except this time we'll be probably making a get request right it doesn't matter you could do a post as well right so at this point you can create your own fetcher do whatever you want to do with this so what we're going to do is we're going to use instead of this fetcher we're going to create something similar but in order to do this I need a way to First fetch all of our messages okay so let's have a what we need to now do is pause and we need to go ahead and make a create a way to basically fetch all of the messages from the database all right so from our redis database so the cool part about this is when I do this using SWR let's imagine I do it in the chat component it's going to Cache that value okay okay now if I'm in a completely different component somewhere else for example the message list wherever it made the request to first that's where it's going to go ahead and make the request and they'll cash it now if this component over here needs it as well it's just going to go straight into the cache and get the value out rather than make a second request and then it's got all these cool things that when you refocus on the window or refetch you can have interval refreshing a bunch of other stuff as well as optimistic updates which allows us to have that immediate UI impact or update so it's damn cool okay and that is true excitement because I thought it was pretty cool right so at this point we've got the chatting but so what I'm going to do is I'm going to go ahead and get the following I'm going to get some data an error and a something called a mutate right and I'll explain what all of these are soon code again what's up dude good to see you in the house we're gonna go ahead and say equals use SWR okay use SWR and I'm going to import that from the SWR Library nice and then what I'm going to do is the first argument is something called a key now the way that people tend to do this and do not get confused the key can be anything right it can actually be anything but it froze you off in the beginning when you're learning because you think it's the root right it doesn't have to be the root but it kind of makes sense because we're going to Cache the response based on whatever the route was so in this case if I was to go ahead and get the uh I'm gonna make a call here called get messages okay but this could actually just be called messages for all we can right it doesn't matter but at this point I'm gonna go ahead and make a uh a piece of like I'm going to set a piece of cash here called uh API get messages and the way to fetch the information for that is going to be uh we're going to create a function and we're going to call it the fetcher right so I'm going to create this function and then I'm going to move it somewhere else so I'm going to create a utils photo right now so up to my top level I'm going to create a utils or you can make a lib photo I really don't care it's up to you right and we're going to create something called a fetch messages function so I'm going to create a fetch message is hey so good to see you my friend enjoy life your day and weekend bro thank you so much Covergirl I love to see here dude so we're going to create a typescript file right and then inside of here oh no uh no don't do that type it correctly uh rename messages OCD is clicking their messages there we go nice and then what we're going to do is we're going to import our type definitions like so and we're going to make a function so we're going to say export uh actually the office account um fetcher right it can be cool whatever you want it doesn't matter it's going to be an asynchronous function and the whole goal of this function is to basically make a request to our API get messages which we haven't created yet but it's going to be responsible for pulling in that information right so first things first we're going to do contrary equals await fetch API get messages right so get messages we have already got ad messages I'm gonna make one forget messages then I'm going to say the const data equals a weight uh residency we're going to pass it afterwards okay mama says why don't you guys use turbo prop for this project because there's so much new tech turbo pack was giving me a few bugs I didn't want to layer it up and get everything kind of broken at one point so it's fine it's okay okay so at this point we've got this come back now this is actually gonna be the um inside of data we can get the messages back right so I'm going to say the messages is actually going to be the um so in this case you could do it like that and you can get back at the messages or you can just say that this is of type message array right so this is going to be an array of messages that comes back okay so the way we're going to build that endpoint is it's going to return this all right and we're going to put inside of the body in the form of a messages key okay and then we need to just return our messages so simple as return and the messages done okay then we're going to do a default export so export default batch uh bam hit save looks pretty good so far okay so at this point let's go ahead and go back to our um our code so back to our chat input and then here we can import our fetcher function right so fetcher from Fetch messages done so at this point now if I was to console log the data would probably get an error right the reason being would get an error is because there's nothing there right you see like right now and what I want to show you I want to prove a point here automatic retries so this is kind of cool Jason unless she says my first time catching live thank you dude what's up so here right now if if I if it tries to make a fetch request and it fails it automatically retries which is really cool right because sometimes the first request might fail for a normal genuine reason and the second one might go through so automatic requests by default retry is really nice right so in this case I'm going to create this endpoint so it's not just hitting my you know like that for no reason okay so let's go ahead and actually do that right now so first things first we are going to go ahead and create a endpoint over here so Pages API and I'm going to go ahead and create a new file oh I love this song right I'm going to call this one get messages get messages and uh bam we are at 400 likes just like that that is what I'm talking about let's go guys let's keep pumping that number up it helps the video get out to as many developers as possible getmessages.ts right and inside of here again I'm going to do our same trick that we do every time right in fact I'm going to grab my ad messages I'm going to copy the code inside of here and I'm just going to paste it into my get messages over here like so right and now I can just restructure it as I need it so for the Gap messages very simple very similar sorry but different we're not going to do a get we're gonna we're gonna make sure that it's only get requests that come through because we're fetching data now okay now as for the rest of this we can go ahead and remove it okay simple as so what I want to do now is I want to make a fetch call to our redis database and because we're accessing something called a hash what I can do is I can use something called H vowels and I can access the messages uh by passing in the key for the messages so in that case it will return me an array of all the things that I'm after you can use a diff a few methods you can HK a whole bunch of others but I'm using H files right so in this case we're going to do our messages response equals a weight and we're going to go to our redis which I imported up here and we're going to say h vowels and I'm going to go ahead and give the key for the messages okay now that will come back with the messages that we need so what I can now do is I need to pass the response of each of the messages I'll write it out for you so that way you guys can see what's going on well first things first I need to go ahead and pass it out and literally it's done it as I needed it right so in this case we're gonna do that and then I'm going to say we're going to get the response and firstly we're going to pass it okay so every single value that comes back remember it got stored as a kind of you know screwed up Json stringified value so you see this that's the Json stringified value so first things first we map through and we pass the values back into an object okay and then what we want to do thank you so much for the amazing comments codomania shahada and uh Jason incredible comments right and then on the server we're also going to swap okay so I'm going to do a very simple sort here you can probably do it on you know you can go ahead and move this on to um onto a redis as well but I'm just going to make it simple here we're going to do a simple sort and all we need to do here is exactly that right we're going to go through and say for every single object sort it in I believe ascending so basically the most recent one is at the top right if I'm wrong there I'm wrong right it could be descending ascending I just do it I just swap them around until it works right that's the truth be created that minus a creator that basically this is doing gonna do a comparison saying if this one is less than this one and it's going to push that in front of it right so it's just sorting them out on the server and then we're going to return the messages okay so then we're going to return the messages like so right and because it's already here we're returning the messages just like that so I need to update the type that we return so this is going to be a messages array and again the error date is perfectly fine so now we have our API endpoint so just like that now we should be hitting an endpoint because this should no longer be dead now you can see well hey we've got enough API endpoint so if I was to go ahead and refresh just like that we get back our messages and this is actually coming from our redis database guys so that's pretty damn cool so if I refresh notice how um ignore that that's actually my this little warning that you see and you're going to keep seeing it is from one of my uh it's from one of my uh what's it called it's from something I've installed them some uh other thing but don't worry about it for now okay so at this point we've got the two that come back so you can do things like server side checking it right so you can actually go ahead and say if there is no data or it's loading and so forth so you could I'm going to show you how to do that right now so we've got the chat info I actually know first okay one thing at a time right so what we've done now is we fetch the information and then we store it in the cache and the key for accessing that cache is API for slash get messages remember this could be literally ABC it doesn't matter right it's still going to be cached as that value so what we can now do which is really cool right I'm going to show you how we do an optimistic update okay so notice how I'm logging out the data right so what we can do is when we make any modification we can actually go ahead and mutate that value inside that cache and we can do it in a way that's like it can be synchronous so we can do an asynchronous chord to anything that will update it well it gets even better we can actually go ahead and optimistically update which means that we can tell it this is the value you're gonna have and then in the background it makes the fetch request so imagine it quickly updates on the client makes the fetch request in the background and then it replaces it and it double checks that okay you're good all right if it wasn't that it would roll back so you see how it's pretty cool right it's kind of cool how it works so that way on your client they always get this like seamlessly instant experience right that's how you do that trick right so at this point we've got the message added down here so instead of that kind of you know pointless bit of text now what we're going to do is we're going to go ahead and do the following so I'm gonna say I'm gonna say await mutate and mutate is the key word here so what we do is we're going to say I'm going to change this cache okay I'm going to change the cache and the way I'm going to do it I'm going to say and and by the way we don't have to give it a key because it's already we pull it out of this call so it's already bound to that key because we're pulling it from here right there is another way to get mutate that you have to pass the key in because we're pulling it out at the same time it's bound to it so now all I need to do is I pass in the original function to go ahead and make the call the fetch call so that's the call right so that's going to go ahead and make a call to go ahead and get get Matt the thing now in this case that's going to error out because it's not returning the expected data that we want and I'll show you how we fix this in a second right so if I was just to do this first things first this will break because this right here is originally if we have a look and inspect this I'm just going to go ahead and pop this under here this right here is an array it's an array of two objects right now over here we're just returning back a single messages or message right which doesn't fit our structure now what we need to do is basically get all the messages back so the way we do it is we get all of the messages that come back so the way I can do that is I can go ahead and say the following so I'm going to say the messages are actually going to be the new message that came back so simply as right so in this case we can go ahead and get the message out of here so we can say message equals data Dot message or you can destructure it really up to you don't mind um doesn't have any time that's fine so in this case let me just double check something we've got the what this comes back as any so we can actually destructure a hair to be fair we can say message and we're getting a error because we haven't done this so I'm going to check something quickly okay so what I want you to do now is we're going to say that the it's referenced directly in its own thing okay it's fine so we get this back okay so what I could do here is I could say that the response.json almost any I think we can mask it in here can we I think we can do that now and we can't do that okay anyway that's fine I'll show you how I'm gonna do it I'm gonna say that the data I'm gonna just pass it together here I'll say that by the deer comes back oops what have I done yeah we got the data I'm gonna do dot then I'm gonna say Rez where's Jason I'm just gonna pass it over here you can really do it however you want it's fine and then I'm going to say that the uh the date now I can access that data data.message all right just like that um I'm now gonna do the phone I'm gonna say that we should await right mutate um I'm gonna say oh wait no sorry what am I doing yeah um I'm gonna return from here the new message right so the new message will be the first entry in the array so we say data Dot message because this is what came back from the new add newly added message then what I do is I copy out the rest of the messages okay so I'm gonna go ahead and enforce that it's already there now messages you're probably wondering we don't have messages that's because I'm going to rename our data over here to messages so it makes a little bit more sense right and I'm going to go ahead and console log this out as well nice just like that right so what this is doing now is it's actually going to go ahead and um let's see what we will say right here um oh I forgot to make this entire function asynchronous async there we go yeah so now what you can see is it's going to go ahead and mutate which means it's going to update the store when I send that message so let's see this in action right and I'm going to show you how it's slightly delayed at the moment okay so it's going to be slightly delayed so if what I'm going to do is I'm going to type in the following we'll say hello world so in that case you see we just get some renders because I'm Contour logging at the top right and then I'm going to say send now a slight delay slight delay but three right but there's still a delay right we can't ignore that there's still a delay so what we can do now is we can have something called optimistic data which is pretty damn cool right so now because I have the actual message that I'm actually pushing in we can say optimistically I'm going to render it beforehand and I already know the value because I already know that the value that comes back is going to be in the same structure as that yeah it's going to be the exact same structure the value of created that might be different but it'll swap it in when it comes that's fine right so at this point I can say optimistic data is going to be the message that we send from the client side plus all the messages that we currently have right and notice how I'm preparing in advance though right we can have a little protector there as well okay so we have this this marked schedule site right so we have this and then what I want to do is I want to have something called rollback on error this is really handy if there's ever an error it will just roll back the previous cache value okay so let's think about what it's doing now it's going to go ahead and what we should see now is when I do this call it will be instant and then it will just go ahead and replace the value as it comes in so this is instant right so as soon as I do this you should see a four fun four and then you see how it came in again right so that just shows you that it did the optimistic update then the other one finished and then it replaced the contents in the cache that's sick that is so cool right so basically that means that now on the client side when we push the message in to the client it's like bam it just worked right and if only if there was an error would you just come back and it would detach it away okay so the really cool part now is where we can essentially effectively replace Redux right yes I'm saying it right we're gonna play where we can effectively replace Redux here is because I don't need to have some State manager now I can use the same pattern inside of our messages and what it will do is because it already has the access to this whatever one called the value first right it's gonna go ahead and get the cash value from there right and notice how a few things happen when I go ahead and click in and refocus it will fetch again right so when I come back into the screen and I kind of do stuff around it um it will refetch now I think also here right there's it there no okay anyway it does do that it refreshes right so at this point we're gonna go to our messages list right now let's go ahead and see cactuses at this point I'm gonna go ahead and fetch some lunch it's definitely not going to be an asynchronous request I'll see you later see you later dude that's pretty jokes all right so we're gonna now pop in the uh messages so it's actually way easier than you think I already did the hard work I already got all the the messages like sent out when we did chat input so what I'm going to do basically is copy that go over to my get messages uh go over to my uh my message list paste in easy as and I'm gonna make sure that I get my use SWR all right so I'm gonna go ahead and grab that from the following so I'm going to grab it from here bam okay and then I'm gonna import my fetcher Okay now what's really cool right and I know I keep saying it but it's damn cool right is firstly we are using our client side so I need to make sure I go ahead and make this a client component use client and yes you can probably you know refactor some stuff which isn't it's completely cool it's up to you so as you can see now what's nice is that it's actually and mine are only showing twice by the way because I've got the dev tools right so it's you see it's actually only logged out once but the dev tools are making it do it twice right annoying but at this point what I'm going to do is if I was to console log uh so it's actually only fetched the messages once right even though we've used it here because what is essentially done is it's de-duplicated the requests so it only sends one request as opposed to if we had a normal fetch in the use effect it would go ahead and send that twice right so at this point now I want to go ahead and render out the messages as forward right and that's probably it's actually a lot easier than you think right so at this point I'm going to go ahead and say inside of our div I want to render out our messages messages and we're going to optional we're going to say that it could be undefined in the beginning when the map through I'm saying for every single message I want to render out just let's just do a P tag for now right so A P tag I'm saying let's just have a div and a P tag inside of it saying the message and this is going to be casted to a message type so what we can actually do here is where we have use SWR I can actually cast this to a message just like that right and that will actually tell it that it's of type message so now you can see I have time message so message dot I don't even have to guess right I can see that message Dot message is the one and then bam and now and we need to give it Keys remember if you're ever mapping through things we need to give it a key so I'm going to say key is message dot ID um just like that and hit the refresh button and now just like that we've got uh again and ignore that super annoying uh extra attributes from the server body HTML I think that's because I have got in my head component and my body header no that's fine I've got an extra TSC shortcut lesson yes that's that's probably one of my uh extra things that's fine but basically you can see that there we are yeah so let's give this a try and see how it updates so what we should be seeing now is because the mutate function is happening on the chat Emperor it should update the cache which means that this will re-render so this is amazing but and a bomb just like that it's amazing it works and it just it just it's instant that is so powerful man that is actually so powerful hivakia what's up dude I'm gonna get rid of that because he's spamming the Contour okay so just like that banging look at that it works and again we've got that from just an extra attributing noise right this is dope all right amazing instant up on there and when we refresh it's there as well right so at this point now what we can do is we can actually go ahead and firstly I want to make the message component a little bit more interesting than what we just have here so let's actually start styling out our message component so message list we're going to go ahead and make this an actual component itself right so command B we're going to create a message component.tsx RFC here bam oops and we have our message component okay inside of here we're going to expect a few different arguments we can get rid of that we're gonna have our props that come in right now the props that we're going to pass through here are going to be the following we've got a key which is going to be a string we have got a message and we've got a which we need to import and we've got a session right now the session I'll come to afterwards we'll do the session it's a bit more intricate I'll show you how that works so at this point we can go ahead and get our props from here we can map it through like this and say our props are of type props and then we can pull in our message like so okay and firstly sorry we don't need the key the key is for the mapping we just care about the message right so that's pretty clean so at this point we can go back to our message list and instead of this we can go and pass it through we can say message component is going to be this the key for the mapping remember every component that Maps through has a key because it's our react operates message.id awesome and then we can pass in the message the entire message like so oh nice okay almost at 500 likes let's go guys that's sick all right it's a message component and now you can see message component is getting rendered out so we can start to style it accordingly on the front end right so so we got a message and inside of here we're going to go ahead and create this to look a bit like this now remember it's going to depend vary based on if you're if you're the sender and you're logged in it's going to show this if you're the receiver it's going to show this okay so let's do that now so the first things first we're gonna have a div inside of this we're gonna have a div and then we're gonna have um an image tag so an image tag okay and now for this we're gonna have a source and this source is going to be message dot profile pic okay and remember that's the message profile picture that we had the rest of the stuff is going to be things like styling height and width and so forth so I'm just going to go ahead and shortcut this in and pop it in like so with the profile picture and now we do have an error now because if I was to refresh we can see we're going to control the image oh sorry that's wrong this image needs to be a next image there we go okay logged in a sunny and then we have a problem here because we haven't whitelisted the Facebook uh back end right so let's go into our next config and this white list Facebook's back end so where they're coming from okay now we go back we restart our server because we've changed our next JS so I've gone ahead and restarted the server command J to hide it and refresh the uh refresh our web page look at that and just like that we should see something there we go hey all right so we've got all the pictures that are coming from that test uh entry that we had initially right so next up underneath this div I'm gonna have I'm gonna sort of style it out accordingly right but underneath this I'm going to have a div inside of that I'm going to have a P tag this will be the message username and what's nice about typescript is you can see the clear benefit right just by having this you can start having reassurance that if I type in this field it's going to go ahead and allow me to make sure that it's actually there because we type in we we type checked it right so inside of here I'm gonna have another div with a P tag and this one is going to be for the message itself so message Dot message oops don't message okay and under here we're gonna have a P tag which is going to be for the time of the uh sorry P tag and this is gonna have the message dot create.message.created that like so okay so that's just a timestamp right now okay so I'm gonna just show you how you can do this but New Day message will create an app and then you could do something like two local date string whatever you want here right so two Lookout strings do that one see how that looks you can see there we've got look two local we've got a better one than that I think it's this one morning yep there you go so right now it's just showing that but eventually I want to have it like relative like proper relative so it shows like you know two seconds ago that kind of stuff so I'll show you how we're going to implement that as well okay so first is first is style this up make it look nice outermost div let's go ahead and give it a class name and say Flex so it's gonna be a flexbox it's gonna be fit only to its width that it needs to be and then it's gonna have inside this div we're gonna say that this picture should never shrink so if the string if the page gets smaller and the message is Big never shrink the div which is containing the image okay for the outermost one we're not going to start up for the P tag I simply want to go ahead and have a custom text styling right so I'm going to have a text size of a custom value so 0.65 Ram padding of two and padding bottom of two pixels so very small value there so I need to refresh sometimes in order to see some of these right because some of these are custom values it's a server component which means that we need to have a hot root like a proper refresh and you're gonna find that that happens a bit when you're using class or server components until it's fixed right so we're going to make this Flex items should be at the end and then for this inner div I want to give it the following I'm going to say a padding X of 3 padding y of two round it off width should be exactly as much as it needs and the text should be white okay cool let's give that in so the text is white right now now I want to just go ahead and right now I'm just going to make you make it so they're all blue right or they're all red by default okay so let's go ahead and make it all red but eventually we'll have it if it's a user and that kind of thing if they're signed in it's going to be theirs and so forth right and the final one the P tag at the back we're going to give that a custom amount of custom size make it gray and make it italic as well okay so we are going to upgrade these Styles afterwards to ensure that if you are signed in it will reflect accordingly so right now we have this looking pretty nice right and the same goes for the top as well I'm going to make sure this is a text red 400 so over here this one is going to be the username text red 400 and then just like that we have a very nice little approach now the message list is where it's all rendering out right so over here we need to space these out they're too stuck up right now right so we're gonna go to the class name and then we're going to go ahead and do the formula we're going to say space between all of these white children of five the minute I hit save is spaces them out depending X and the five padding on the top of eight uh padding on the bottom of a 32 and I'll show you why now we need padding on the bottom of 32 so that way when you scroll down you've actually got more room to scroll past those if you didn't have any planning imagine that was the bottom there you would cut off that bottom message so you need to have enough padding so that way you can go past that so paddinger 32 does the trick right and then we're gonna have a Max width of 2XL because it looks it kind of starts getting hard to read after that Max width on the extra large screen of 4XL and then we're going to Center the elements as well so and then we're going to say MX Auto as well okay hit save and now you can see it centers it after a certain point you can say this is dope bomb amazing it works right there we go and I've even got a really long text that I'm going to go ahead and pop in right now so I'm just going to go ahead and do that right now and I'll come back on the screen in a sec so we all know about Laura mipsum all right so here we go Laura mipsum there you go nice okay so we've got some lorem some stuff happening and before we carry on now you see at the bottom right there ah so first little thing that we've noticed let's go ahead and get that fixed up so chat input what we needed to say was that the background should have been white so background should have been white and just like that we can go ahead and cover in but that is exactly what I was talking about now if you didn't have padding 32 can you see how we've got extra padding which means I can scroll to the last uh last message down here if we didn't have that you can see it would have been an issue but right now it's looking damn good right we still need to do our sign in or sign up and we need to go ahead and also do or uh our Pusher so in this case it won't actually update if someone else is on there so let's go ahead and imagine we have two windows open right let's actually screw it and say we have three windows open I eventually want it to be a case that we have all of these windows open and when I type in hello world right what I should see here is that this one has hello world but you see these two aren't updating so we're going to add something called Pusher so that way we have a pub sub model whereby everyone was subscribe to this the only way it would update now is if I click into it then it has because of swi it refetches right but we want to make it automatically doing that right so it's kind of like always on a real-time connection right now it's only when you refocus the window it makes the second refetch coin you don't want to have things like interval refetching because that can also cause issues where you're just unnecessarily ping in the server so we're going to go ahead and introduce that as well in just a second doing absolutely amazing so far near 500 likes quick little water break but tell me right now if you're enjoying the stream oh that was a that was a that was a big big water break okay so at this point let's jump into the next one so we've got our login here so David says great stream thank you dude I appreciate you man so now what we're gonna do is we're gonna style it based on if it's a user and then what I'm gonna do is make it eventually connect it to a um uh okay so we can do the white now I'll show you how we do it so at this point I'm going to make it if it's a user it will render this side right and then we're going to eventually connect that to your session instead okay so the nice thing about componentizing all of this stuff is that you can go ahead and simply do and I want to mention something now inside of my message list okay this is my components fine so if we go to R message component yeah right so inside of our message component now I'm simply going to have a toggle here saying is user okay const is a user and right now I'm just going to say it's true right so all the messages will eventually be blue on the other side right so if you're the one sending it it should be on the other side right so I'm going to go ahead and do this Humanity what is up dude awesome stuff uh so I'm gonna Now update it so if the user is there it's going to go ahead and render certain Styles as well so the way we do this is we simply wrap this in some jsx we add curly uh back text to make sure that we can interpolate and now I can go ahead and add an extra so I can say if it's the user then I'm going to add in margin left of Auto right and at this point now uh if it's the user so in this case it's true it will go ahead and add in a margin left of Auto right now for this one we're going to do the same thing I'm going to go ahead and do this and remember I probably need to go ahead and refresh the page as well and then it will kick in because we're server rendering it there you go okay so server rendering has its little perks and it also has down movements that's one of them so here we'll say is user and I'm going to say that the order should be -2 right so as an order should be two and what this is going to do it's going to rearrange it so this picture is going to take more precedent in the order which means it's going to go this direction right so now if I do that you can see it will go in front of it so there you go so one two so it took and now it's on the front side right and what we can do is we can give this one a minus value and it will go backwards right so you see what we're doing that's quite a kind of cool right so now I go down to my first P tag and here I go ahead and I pop in our curly brackets oh I don't do that add back ticks I'm going to say is user again you can see the pattern here right where basically yeah we're gonna go ahead and but this time I'm actually going to change them are you here you can't set a value by default and then only enter in a color you have to do it in the following way we have to say a ternary operator if it's the user I'm gonna say that the text should be blue and I want the text to be right aligned okay otherwise I want the text to be red and I want the text left aligned okay so now what we've done there is if I hit uh refresh now the text should be blue so Sunny Sanger is blue and it's right aligned nice we're going to do the same thing going down so the same thing over here as well so back ticks and then we've got our you know back ticks in place just like that and then we're going to say if it's a user is a user again we are going to get rid of our BG and here I'm going to say if it's a user then I'm sorry well okay full screen as far as me off sometimes okay if it's a user then I'm gonna go ahead and say that it's a BG blue of 400 margin left of Auto and I'm going to give it an order of two right so that should push you in a front direction as well and then we're going to say a uh EG red so over here background should be red uh for 400 if it's not right so let's sort of show you that so refresh and how we have a blue one right really nice the final one is just to make this text right so it sticks to this side as opposed to the other side so let's give that a final run so let's go ahead and pop this in now right so let's go ahead and do this Dune doom and then I'm gonna say is user and and I'm gonna go ahead and open text right so text right okay now just like that we have a toggle okay so what's cool about this now is if I go over here and I say it is to use a false boom if it's a user boom right so really nice look at that oh right so if you're logged in it will basically be on that side if you're first it'll be on that side and then I'm going to attach that to the session object in a sec Right Down the Line right so if you're signed in it would be your message on the right and so forth okay so pretty cool pretty cool okay now let's go ahead and actually set things up with our authentication so now is the point moment where we've got this working wow this is cool actually you know what let's not do authentication right now let's do firstly Pusher Pusher is going to allow us to synchronize all of our messages across each of the uh clients and then we're actually going to go ahead and add in the authentication and then we are golden right so we're very close and we're doing very well for time right so at this point now I want to go ahead and head over to Pusher so push Choice what we're going to be using to power our real-time experience so in this case you can see Pusher is basically a pub sub model now if you don't know what a pub sub model is essentially what you have is you can actually all of your clients can subscribe to listen to a specific topic right so in this case let's call the topic messages so imagine every single client that is on this chat is subscribed to that messages and you can make this for chat rooms and so forth right and now every time someone sends a message on the back end API when there's a new message what we can do is which is kind of cool we can go ahead and say push your message to the messenger chat saying new message and now everyone who subscribed says Whoa there's a new message add that message into my cache and what's really nice about this is that it actually goes ahead and uses use SWR to efficiently optimistically render the update so pretty damn nice pretty damn nice okay so at this point now I will show you how we do this so I'm going to go ahead and say so Pub sub you see that we've got notifications and we've got Pub sub node and we've got our JavaScript as well so in this case you can subscribe to our channel so in this case messages you bind to a new message event that comes in so in this case we get to say new message and then you could do something in this case we're going to update this state and over here when on the client when we actually add a message we simply just add it in there so I'm going to sign in to an account right now on my side so I'm just going to go ahead and pop in my sign in so I've actually done this super easy I've signed in already so I'm going to go ahead and create a another one so I think I can I think I get two or can I not get two so I'm going to manage I'm going to create an app let's call this fast socks too uh let's go ahead and do this and blah blah there's two front end is going to be uh react and then the back end is going to be no JS grab some more environments you can do it's fine and you can see you can choose a cluster as well so we are on four first socks number two right so at this point nice pretty cool I'm gonna click into app keys in just a second as well but first off to make sure that we can go ahead and get this set up nicely we need to install two dependencies okay so the first one that we need to install is something called Pusher right this is going to be for our server the second one that we're going to install is called Pusher JS so they've just done this I'm not going to do that I'm going to show you how we do it so we need two packages one is for our back end one is for our front end so yarn add and we're gonna add it in this we can just add it in the same course easy we can say Pusher push uh JS so push JS is a front end Pusher is the back end okay so simply put um that's sick um so in this case we're gonna go ahead and do Quan Jay so that's really nice and then I've got my Pusher laid out so now we can use this to go ahead and set things up so what I'm going to now do is I'm going to go ahead and create a pusher.ts file which is going to be same thing like we did before a Singleton pan so just like we have ready so I'm gonna have a pusher.ts file right now inside of here I'm going to import push off from Pusher and import client push up from pusher.js okay and then I'm gonna have two exports so I'm gonna have an export const server pusher all right um this is going to be my instance for the server right so when we do any node.js stuff right then I'm gonna have a client pressure cons client pusher and now the client Pusher is safe to go ahead and share those keys around there because it's going to be a client-side thing so in this case the client Pusher is fairly straightforward right we can actually go ahead and use this one right here to actually do this so I'm going to copy the value right there and for mine I can simply go ahead and pop it in like so so just like that like I've got my client ID my cluster and we can actually Force TLS connection as well so you can if you want to do you can force TLS as well okay so you can do that for your socket connection and then what we're going to do is and obviously yes you can and should be putting these in environment variables okay so I'm just trying to push for it not to spend too much time on that but because because we're going to have a bit more that we're gonna have to set up here as well right so now what I want to do is I just want to show you the structure of the next one so I'm gonna have a the following so I've just given a nice little outline of what I expected so in this client and the server side it's more hidden okay so again you should be setting these in the environmental variables right I showed you how to do one you do them same for this one as well I'm just going to try and Breeze over this bit so I'm going to pop these in these should be process.m and so forth now this is what it will look like I apply the key key and I've changed the password there so it's absolutely you can't do anything with it that's going to be some secret password cluster and use TLS true right so in this case we're using TLS you can force TLS on the front as well all right so it's just forced a solid connection right a secure connection so where do you get your credentials from I'm going to show you right now so you're going to click on app Keys it's going to pop up and then you're going to copy it paste it in here replace it inside of your environment variables not like this we're wearing just a quick YouTube video so that's why I'm not doing it right now okay but I'm gonna do that right now I'm clicking on app keys then mine are loading up on the screen so I go ahead and I copy them so I'm running it through now I click copy now I go back and I've got a bunch of different values that came back so I'm going to swap those values into where I had it inside of the stream so I'm going to do that right now so I've now swapped out my secret all that good stuff and I've saved the file and I've gone ahead and all right so in this case I'm hiding my key right so I've got a nice little trick here I'm hiding the key right now okay so right now you see I've got my app my key my secret key is hidden and cluster cluster right so there's a secret key there there's a secret and a value so I'm going to save the file and close it this is how we're going to export and have access to these as well alright so very straightforward now I'm Gonna Save the save that remove my comment and Bam I have access to the Singleton pattern okay so at this point now fairly straightforward all I need to do is essentially go ahead and oh my God okay that was stupid uh okay I mean I'm just gonna Breeze over it right if someone gets into that I can change it it's fine so I'm gonna go to my something called the debug console so at the debug console I can just listen for events now so what I want to do is whenever we add a message on the server so in the add message function I'm gonna go into here and this is where I'm basically going to say once you've pushed a message successfully we should also ping push it to to tell everyone that it's there I know I I know I know the the irony of what happened that's fine his ways so at this point I'm gonna say server push up man I don't care about it being in a weight right so it doesn't in this case I'll show you why so this is trigger and then we go take a trigger and you see it's a promise as well you could await yeah but I don't want to hold up my my server for that reason right so this is the one that I care about because obviously I need that to come back um but here I actually don't mind too much I don't want to I don't need to block for it right so in this case I'm gonna push to the messages Channel I'm gonna push an event called New Message and that's what we're gonna eventually subscribe to like if this happens do that and then I'm gonna pass the contents of chord new message okay so what this will do is it means that when a metal notice I'm using the server Pusher that we used or created just a second ago so now when I type in here what we should see is a message right so I'm going to go ahead refresh I'm gonna go here I'm gonna say hello world #pusher right hit enter now you can see Hello World push-up and then what will happen is if we go over here boom did we have it there we go API message right so at this point now I've got API message which comes in I click it and you can see Hello World Pusher came in we've got my username profile picture the email and the ID right so this message now I can subscribe to this topic on all of the clients and I can update in their real-time fashion okay so this is really cool right so in this case I can go now to the following I'm going to go to my message list okay so message list and what I can do here is I can use our good old use effects and if you are stuck on use effects there's a video right around the screen right now where you can go ahead and watch where I teach you all about how to do the use effect hook okay so that should help you out the J that's a cue to add that in right so at this point we've got a use effect right really good stuff we've got to use fat I'm gonna go ahead and pop it in like so so this is just a dependency array right there this will run when the component mounts okay so we import it from react and what I'm doing here is firstly I need access to my client Pusher so what I'm going to do is I'm going to have a variable cons called const Channel equals client Pusher so I'm going to import my client push and I say subscribe to the messages Channel okay now what we can do is just like in the example that we have previously we can say Channel dot bind and what we do is we basically listen out for a message so remember we pushed a new message event now when that came through once that comes through what I can do is I can have an asynchronous callback function and inside of that asynchronous callback they give me the data now what I can do here is I can say that that data I already know is in a message format so once we get that data for every single time that it pushes in I can now go ahead and say we can do our mutation okay so what I can now do is basically I can have our fetch a function which fetches all the messages again that's the that's basically what we want to do because we want to make sure that we get all of the new messages imagine 15 people sent the new message you'll make sure you get everyone's message but on the client what we should do at the bare minimum straight away is optimistically push that data in okay you could also eradicate that and just make sure that it just as it comes in you're only adding in that last one that's also an option as well but I'll show you how we do it okay so we say mutate and notice how I've got API get messages so I'm already attached to it so mutate so I'm mutating that bit of the cache I passed in my fetcher function so this will basically go ahead and remember it will fetch all the new messages again and then what I can do is I can pass in my options and I can say optimistic update and this optimistic update is basically going to pop in the data that came back and then all the new messages as well okay and then we can do rollback on error true okay so what this is going to do now is it will go ahead pop this in right so as it comes in it'll pop it in and then we will also make a fetch call now I'll show you what you can do if you don't want to have those unnecessarily large ventricles because you might just be wondering well you're doing the optimistic bit which you can't you just do that here well you could you could also do that there depends on your architecture how you want to do it okay so at this point as well what if I sent the message right so imagine if I wrote hello world it's gonna cut it's gonna subscribe then I'm already subscribed so I'm gonna get another one inside of here so if we don't address this this is the behavior okay so let's just double check what happens now all right so if I go to two browsers open so localhost right here and now if I go ahead and say hello world caps hello world and now wait for it we should see oh okay we got messages it's not iterable all right so at this point we better debug okay so I like this bit this is where it gets interesting Okay so we've got the messages come through here now what we want to check is really we should see if the messages weren't available we should have called the fetcher in the first place otherwise we can do optimistic update right but let's see what happens so what I would do here is I would console log oh okay I know why silly mistake and I even told you to watch my video on it the use effect our use effect needs to have dependencies and I'm using a lot here so this use effect is dependent on the messages it's dependent on the mutate function it's dependent on the client Pusher that was my bad yeah I should watch my user fat video okay so there you go right so we have it right here looking pretty solid and we have the viewership is crazy today literally about to smash through half a thousand likes absolutely incredible right so now we do that we hit save and that is why we were getting that error right so localhost Papi says Ah I know right it's crazy so in this case I'll say yo what's up now pay attention when I hit enter it will come up here like we expect but here it will say yo what is up yo what is up and then it will fetch and then it will get rid of it all right so we don't want to have that to happen so hit enter you'll say yo what is up and then oh we got first we've got another issue so it did work and then okay so it we'll figure this one out says debug so console log messages well we can we can do a few different approaches to this right we can actually firstly say if there's no messages should you mutate and so forth but I kind of want to see what the state of messages is here so here what I would say is messages messages and then do this and it's just inspect the messages as and when it comes in so let's go ahead and give that a try so let's inspect and let's just type in yo pop fam enter and in this case it would have come in and you can see now we've got messages come through and at some point it was undefined right which means that okay so it was two children with the same key was the first issue but at some point it was undefined right so what we could do here is we can actually prevent this issue I didn't actually address this in a coaching call but we can make it so you can say if there are no messages then what you can do is you can do a mutate whereby you are simply doing a fetcher call okay otherwise if you have messages you can do a optimistic update okay so in this case now what it will do is if there are no messages then you can actually make sure that you actually have this already right so this will actually now ensure this should fix our issue right if not that's fine we carry on debugging that's decoding right this is where I hope you find Value in these videos so let's go ahead and refresh and let's see what's up with my server modular phone can't resolving coding oh yeah you might get this error as well by the way so I can't resolve encoding when you get that I want you to just go ahead and do yarn add encoding so yarn add encoding there is a slight bug where they're not installing a dependency that it's relying on so there you go there you go so nice so we say hello world enter so at this point now you will see it would have waited for the new one to come in and then we've got this so hello world popped in let's try and see if this works or hello localhost 3000 and then I'm going to go ahead and say ABC and I say okay nice all right but there's a slight glitch ah there you are yeah ABC ABC all right so how do we stop this from happening hello world and then you see what happened they fetched in and then it happens this weird glitch is happening because what's actually going on here is this updating your own message and then when it comes in finally it's actually going ahead and uh fixing it so when the fetcher came in that's when it actually fixed it so what we can do here is we can fix this problem by saying if and we can basically check to see if the message is from us right so if the ID of the message is already in our messages that were inside of our local cache then we can say don't do anything you don't need to update because you are you're the one who basically pushed it so if messages don't find and again we're going to save messages dot find that we could actually just protect ourselves here by saying if no messages returned but in this case um we could do this yeah okay if messages find um we're gonna go and say if the message ID right is equal to the data ID so if you're basically the person who sent that message so it would already be in your stack if you already did because we optimistically updated then you would then we just say return don't do anything at that point right so this is basically saying if you sent the message [Music] no need to update your state update cash right so it's all good so let's see now right and then that will actually stop this issue from happening as well okay so hit refresh open up this side hit localhost and now let's see ourselves so let's pay attention to the top over here and we say uh join zero to a full stack hero and then hit enter all right join third full stack hero and then this one found the message and Bam there we go there should be an option to do not broadcast to send that I know I I agree Lewis says Priceless value and real current experience was thinking that nothing ever goes wrong thanks for being real dude I really I'm glad you you like that part of it because that's a stressful bit to be honest as a streamer um but that's where you find the most value so it helps by me putting it out there to help you out with that so amazing stuff right so that's the logical statement you're looking for right so in this case if that happened hello one two three enter once you came through here and then bam it came through there so pretty cool right very cool and it doesn't matter if there's like 50 000 of these open so let's go ahead and check it out let's pop this one open let's pop this one wow okay that's why it's being a bit slow um so let's go ahead and do this I've got three of these open right now refresh all of them all right let's see so you could be like you know loads of clients are signed up with that and I'm gonna fix this loading State as well I'll show you show you how we do that all right so we're going to server side render that as well so in this case I'm gonna say uh let's go Papa Farm and hit enter and Bam just like that and I go over here type in one two three bam it pops over there four five six bam all right sick nice all right mafus you can change the ordering of the chat however you want that's completely up to you all right so we've got the real time aspect down that is cool right and we're literally about to smash through the 500 Mark that's absolutely amazing so at this point now we need to go ahead and actually incorporate the um oh yeah and also that's not done by the way I want to make sure it's an important point to mention here we have a connection that is occurring here do not leave that connection open so in a use effect you should have something called a cleanup operation right inside of that clean operation we are going to unbind from everything so I'm buying from listening to any messages and unsubscribe from the messages that is important otherwise you've got these listeners that just sit around until they die right so that's important okay so next up what we're going to do is we're going to server side render the messages and then I'm going to show you how to do authentication and once we've done that golden all right so let's go ahead and do it we're doing really well on time all right because the the authentication but it's a bit of a bit of a headache because we've got Facebook to do it right um so at this point I remember if you are enjoying the content you want to see more of this we have got a deal going on at zero to full stack hero right now feel free popareout.com course if you want to jump into coaching calls we do a lot of this stuff first link in the description I've already taught a lot of this in the community um literally two days ago when I was just showing all of this so you'll get first headset into that okay so at this point what I'm now going to do is server side render using the new nexjs 13 components so heading over to page.tsx then what we're going to do is we're going to go ahead and do a nice little fetch now so what we can do is I'm gonna go into our home page over here and I'm gonna do the following so at the homepage level because we are using server components now I can make this an asynchronous function and I can actually go ahead and make a call to our um our uh what's it called our backend over here very simply right I can actually just make a Fetch and then I can actually it's very easy to do this now so I'll show you how we do it basically so I'm going to say const data equals a weight a weight right batch oops Fetch and then I'm going to say inside of here I want to make a practical now because we're on the server we can't do because right now we're technically on a server all right we can't do relative URLs so you have to do some clever stuff here we need to have a environment variable so I'm going to process.m dot the cell URL and the reason why I'm using the cell URL is because obviously I'm going to carry that out I'll show you right now yeah so let's go ahead and have the rest of this done for us let's get rid of that and this one we're gonna get rid of this there we go and then go in yep so we've got API get messages and then arrests.json so what this is effectively doing is it makes it cool to our get messages and it gives it to us right 500 likes bam we smashed it let's keep going amazing stuff right the cell URL is important because this automatically gets populated With Your Vessel deployment URL which a lot of you have been asking me for ages even I was wondering I was like how the hell do you get that URL that is how you do it right so it's a really nice little thing that you should know about it's called system variables right so I spent way too long figuring that out like no joke I spent like six hours picking there figuring out that one thing you're welcome all right so the cell URL and then I found a form I was like oh wow okay cool so at this point now if I was to go ahead I need to add in a vessel URL so first things first I'm gonna go into my environment variables and I'm gonna do that but I'm not going to show you my environment variables right I'll show you an example afterwards because I've got my redis URL in there so here all I'm typing in is localhost 3000 okay so I'll show you what I typed in I'm saved it I've added this into my environment variable what I'm going to do is I'm actually going to show you something in a nice way so um okay so I'm gonna just delete my redis URL for a second right I'm going to delete this saying Secret there we go I'll show you this so you should be able to see this now so I've got my secret then my vessel URL okay so I'm gonna go ahead save it undo that obviously and then I'll go back into my code so save close my environment variable and now I've got that populated right so hit save and now I'm gonna go ahead and do my refresh so I know that the new update should actually do it for us but I don't care I'm gonna do a young one okay and then let's do this and we have a fetch failed at this point so localhost refuse to connect okay so interesting uh it's failing here the cell URL and that's because we aren't oh okay I made a big mistake I made a big mistake it should have been HTTP localhost 300 at 3000 sorry so I'm going to change that right now don't do what I just did silly mistake I'll show you the exact thing right now so secret let's go ahead and put this in that was a silly mistake right so bam here you are save your file and then I'm gonna undo my secret thing and then pop that in so save your file you should have that otherwise of course it has nowhere to connect to and then I'm going to restart my server and then let's hit the refresh button and we should be able to make a request to our backend so this is now server side rendering so what it's doing is before the page renders it's actually loading that over here so if I do console log data we should see that inside of here now so if I go ahead and do this and refresh is loading the data beforehand on the server really cool right so this is the power of server side rendering and we're going to do this in a very clever way so I'm going to make it happen so it happens on both the server and the client but what I'm going to do is I'm going to server-side render on the on the server first so it's immediately available when you get to the client then I'm going to do it in the background and swap so that way you get their live data okay so let's go ahead and do that right now so first things first I'm gonna go to my messages so I'm gonna make this a const and say hi this I'm gonna say const messages so cons messages and I'm going to cast it to a message type so message array and we're going to access our messages like so right I'm gonna go ahead and pop this in like so and so we've got the messages hit save and now inside of my messages uh what I'm going to do is I'm actually going to pass down my messages as a prop right and I'll show you how we're going to do this because it's going to be a delicate one so for chat for the message list I'm going to say initial messages initial messages equals messages okay and then what we're going to do is I need to obviously add this in right so I'm going to go ahead go into my message list I need to give him my props which are going to be the messages and then I'm going to pass in the prop types and now for that we're obviously going to go ahead and say type props equals our messages as type message okay so duplicate identifier messages oh okay this is going to be initial messages sorry not messages it can be initial messages so this one is going to be initial messages so I'm just going to grab that right now and just paste it will save some time there we go right so in this case now you can see initial messages get spread through comes through as a prop and then we have access to our messages now what I can do which is really cool is I can go over to my jsx and I can go ahead and say the following which is kind of a nice little neat trick if you didn't know this before now you know it right so when we have our messages I'm actually going to do the following right I'm going to say and get rid of this I'm going to do the following would say pop in this and I'm going to say so load the messages that we have on the client otherwise show initial messages okay so otherwise show the initial messages right so somebody says you should use the cell localhost or localhost yeah I should you can definitely do that as well right um I definitely will actually try that one out so we've got uh messages initial messages all right like so okay so at this point now um oh that's actually a good point you know he's got he's got a point so here we could actually have said this or localhost okay so you can definitely do that as well right so you say the cell URL or um the http uh there we go the localhost Local Host three thousand so you could you could do that and then not set your environment where it will save you an environment variable a bit of headache so that's actually kind of a cool way of doing it as well so thank you for that yeah all right so at this point we're going to pass in the message list I don't know I didn't think of that right so there you go we've got the an instrument so let's see what happens now okay so when I refresh now we should see that it's immediately available okay it's gonna take a second to load and let's actually do it in a new window so you can see it for real right so there's not going to be this thing where it pops in now it's just going to be immediately there see that and then they actually swapped in front of us without us realizing so it would have actually loaded it on the client as well and then just swapped out but because it's got the same Keys it didn't need to re-render it so there you go look at that server side rendering but in that loading State how the hell do I handle the loading State now so it's so easy in xjs12 because we have a blocking condition right because inside of our page so at the top level inside of our home page this is a blocking condition right this is a promise we're waiting for it and it's either going to be fulfilled or it's going to be an error so in this case what I can do is I can add in a loading.tsx you can also do error but you can feel free to check out my tutorial on xjs13 for that the link will be uh in the somewhere around the screen right now rfce and what we can do is we can type in loading and this point I could just simply put loading or loading messages dot dot okay and now when I hit refresh during that rendering period it will actually have the following so let's go ahead and do a localhost fresh render let me do a fresh render actually with oh sorry I made a mistake I made a mistake it has to be lowercase l that's a big mistake lowercase L okay that actually makes difference there we go yeah so remember reserved keywords don't mess it up okay so now we come back over here and now you can see if I refresh while it's server-side rendering it literally actually pops this in so what's really powerful that I really want everyone to understand here is that that prevents us from blocking right so it's it's able to get the user to interact with the page quicker right so that way they're seeing a loader and then what it's doing is I've overdid it then it's streaming in the data as it's available so it streams it in so basically it delivered the header and photo straight away then it streamed in the rest so that's the power of server components with streaming right so that's part of the next year's 13's new Arsenal so let's make this loading Page look a bit better so what I've actually done here is I've used something from a website called flowbyte so head over to flowbuy.com this website right here right so httpsflowbyte.com docs components forward spinner and here you've got these really nice Spinners right that are basically purely written on Tailwind the reason why that's important is because this is a server-side component which means that it's rendered on the server beforehand so I don't want to use any kind of heavy dependencies but we do have access to our Tailwind because Tailwind gets compiled at build time right so at this point now what I can do is I can actually go ahead and I've already got one here the one I used was I believe it was the large middle one so it was this one right so it was uh this one right here I believe yes it was that one yeah so what I'm gonna do I'm going to grab this and I'm gonna go into my code and I'm gonna pop it in right there bam right and then you can see where they've got class I'm just going to go ahead and change that to your class name right and then hit save now that is freaking out because we haven't got a parentheses around it all so wrap it in the parentheses and oh that's because of that oops yeah and oh God okay I messed that up bad right and here as well last name hit save bam okay so then we've got a good situation so at this point you can see everything there so let's see now what we should have on the screen so now we've got a nice little loader so I'm gonna do a few little minor tweaks and you can feel free to change up as much as you want so in this case I've got a difference here where we've got text blue so for the surrounding where we have full blue dark I'm on dark mode a lot of the time so in that case I've got dark text Gray but I'm just gonna make it in this case just let me get rid of my dog mode right so I use everything in dock mode so that's why right now you can see it's in dark but you can see now it's light okay easy as then I'm gonna go and say padding on the top should be eight um and then I'm also going to go ahead and pop in a message in the form of a P tag above the status right so in this case so we've got loading your messages and that's going to have animate posts right and again everything's centered by default so loading your messages pops in nice that's pretty cool right in this case it's just a loading messenger that's kind of nice huh loading messenger okay there we go and then what we can do is we can change the width and height so a very simple change here we can double the size by simply going here and changing it to 16 and because it's all Tailwind this can get rendered on the server without any unnecessary extra dependency which is really clean right so just like that boom and then when it's ready pow server side renderer with streaming so we've got a string we've got the server side render loading component which is directly available and then when it's available when it's when it's done rendering on the server it streams in the rest but what's really awesome is you see the rest of the JavaScript got delivered straight away so really cool right um you could even probably do your chat input as well but again there's this up to you right so that looks pretty damn nice let's say sup and uh bam okay so okay this is cool so we've got our loading State done and now we've got the final piece of the puzzle which is the session right the session the authentication how to log in with Facebook right so quick little water break and then we're gonna go power through the final bit which is our Facebook authentication if you're enjoying the stream right now simply hit that thumbs up that is it and subscribe if you haven't already [Music] okay Colombia in the house what's up everyone all right wait for him okay let's go ahead and kill it all right final stretch nice so at this point we are now gonna go ahead and Implement next auth authentication now this is where I'm not gonna lie to you there are gonna be bugs that you're gonna come up because we're using a combination of an extra 13 and next door and the documentation is still relatively new okay so don't worry it can be frustrating but it's completely just just take your time and just debug it use the Discord Community the next chest is called Community the zero it full stack hero Papa farm community all this good stuff to help you out first things first we're gonna go ahead and head over to next authentication right so let's head over to next auth and then we're going to go into our next World right here now if we go here click on get started this is a really good provider that a lot of people use for their authentication when they're handling an extra stuff so at this point I can do over here yarn add next to it that will go ahead and install that now we can go ahead and add in the following group so this is still going to be inside of pages API auth next yes an export.js right so you can see right here we have all of this this exact photo structure this is important right so this is something that it relies on in order to operate right so we're going to use this photo structure because it's accessing our API which again remember even though it's next year's 13 stays in this structure so auth forward slash next auth is our key here okay so I'm going to go ahead and copy this part in particular and I'll show you why okay so let's go into our code let's go into uh uh pages and let's go into our API and let's create a folder called auth and inside of there a file called nextdoorth.ts nice okay so at this point inside of a next auth what I like to do is just copy their example now this is all for you know GitHub we're going to change that up very shortly okay so in this case we have a GitHub example now I'm going to show you how we can get the Facebook one we simply change that to Facebook and we change this to Facebook as well right so in that case we now have our Facebook provider and this is not going to be Facebook ID and Facebook this is now we have to change that to Facebook ID and Facebook secret so I'm going to change this to Facebook client ID Facebook plan ID and I'm going to change this one to Facebook client Secret okay and then we're going to ensure that they're there we're going to promise that they're there right that's fine for now okay and then what we're going to do is I'm gonna actually go ahead and over ride the default sign in page so I'm gonna say that we're going to create our own assigning page so in this case I'm inside of the provider so we need to come out of here and I'm going to pass in the pages right and I'm going to say this our sign in page is going to belong at forward slash auth forward slash sign in so I'm going to create my own signing page and we're going to server side render it make it work and that's going to be cool and then we're going to have a secret okay so in this case you have to have a nexjs or nextworth secret so in this case I'm going to pass in a next auth secret as well so process.m dot next auth and you can actually go ahead and um you can uh just pass the end I think by the phone it works as well I can't remember so I'm just going to put in here for now as well right but the secret as well okay so we have this set up so I need two things I need my Facebook client ID my Facebook client secret and my next door secret to be set and then we need to create the sign in page and do the magic that happens there right so let's go ahead and do that right now so first things first we need to create a Facebook app so in this case we go to meta developer app right so in this case meta developer app let's go to Metaphor Developers developers.facebook.com and we're going to go ahead and create an app okay so let's go ahead and do that right now so you see where it says create an app we're going to do that and now you can you've got all of this stuff here right so you've got welcome to Facebook for developers we're going to go ahead and do Facebook developer account and then we're gonna go to this start the registration process alternatively you can go to him click get started let's do that let's get started where's this link I've got a link that I always use that's default my apps there we go okay so I've already got two apps I've already set up but I'm going to show you one right now we're going to click create new we're gonna go ahead and do a simple oh God I can't remember this uh what did I do I think I did um consumer right and then we're gonna have next and add an app name so in this case I'm just gonna say up Dash um meta messenger all right contact demo fine fine in this case we could do me crap uh okay sorry oops Matt is not allowed oh okay I didn't mean that is it for educational purposes right we're gonna say upside messenger all right and then I'm gonna pop in my password right so I'm gonna go ahead and pull in my password right now and then it's gonna create the app okay so this is now going ahead and creating and now I've come on to this following page okay so now what I need is a Facebook login so what you want to do is click on setup okay and you know you can see here we're in the development mode right we're gonna click on www.site URL so for this one obviously it's a bit tricky to really tell it where we're at right so what I'm just going to do for now for now just for example.com all right I think if you have a URL sonysanga.com whatever you want to do I'm just going to put this in just so I can get past this step right now okay so I'm gonna push this through right now and then here we've got the app ID and a bunch of other stuff just click next let's click next this is fine I'm not going to use that stuff right now next next next and let's click on Okay cool so I now need to go to my settings right so click on settings I'm going to let it load I just don't want to expose any secrets right now okay so once that's done yeah that's good right once that's done now what we can do is we can go ahead and get our details so if I go to settings and I go to basic once again on on here where it says basic here I will have the following so they have hidden it which is good I've got my app ID so this is going to be my client secret okay so I'm going to write a string right now that we're going to eventually use so imagine right here I've got my Facebook client secret so I've got I'm sorry my this is my client ID right So eventually I will have something like this in my environment file so client ID equals this and then I'm going to have a secret equals and then here I'm going to copy this right so what I'm going to now do is I'm going to click show save this right and then I'm going to basically have my like ABC secret here right then I'm going to take these and I'm going to put them in my environment variable file okay so that's what you're going to need to do as well so I'm going to talk you through it as I hide the screen okay so in this case I've now gone back to Facebook I've clicked show I've got my long secret I then go ahead and grab that variable and I'm going to go ahead and take both of them to my environment file I've now popped in those values into my environment file make sure that we haven't got those comment marks still there and I've gone ahead and closed the environment file all right so at this point now I'm going back I'm going ahead and I'm just going to hide my environment secret again so you can't see it let's go ahead and hide it okay cool so now what I've done is I've populated my client ID and my client secret then what I do is I restart my server just to be sure that it's actually pulling in the new stuff okay cool so now I have that and then the next thing I need to do is next door secret okay so this one I forgot to do next little secret you just have a secret here so you can pop in a secret value it could be whatever you want but in this case you should use a like a hash value there's a there's a nice little command on their website that will show you how to do it so I'm going to pop in a value there and then put that into my environment variables as well so I'm just doing that as well so I'm going into my environment variables I popped in a secret super secret and it's hidden away and now we are back right so I'm gonna close my terminal um or shut down myself I'll rewind it again okay so we should be set up now right we have a connection to um everything there right now okay so at this point now we need to go ahead and set up the actual sign in page and there's a few other steps that we have to do right so it doesn't just work magically it's very close to it but it's it's kind of we have to get it there first right so if we go to our app folder right and obviously we have to also we're not done yet we have to actually white list some certain redirect Uris so heading back over to our Facebook login settings uh and if Facebook ever do watch this video it's all for educational purposes everything that we're doing right now okay I'm getting sued right so in this case a valid redirect you all right and plus we're helping developers I mean come on right so this place this is where we're going to have a special URI that we're gonna have to pop in here okay now as we're in development mode it should be fine that we don't have to pop it in there okay but we should just try it now so in this case I've got error error oh okay now it's refresh we should be fine um localhost oh sorry that's because I'm over here wait what is this that's my actual app okay I'm super confused what's going on okay anyway going back let's go ahead and uh connect our next auth now so at this point we need to go ahead so you can see here that they're doing session providers now we're using next.js13 which means that we've got some more stuff to go ahead and do in this case you can see here next year is 13 we can use the away unstable get server session right so I'm going to actually show you how we can do this to server-side render a value in so at this point now if I go over to my and I will show you two approaches I'll show you the way that we can first get here on the server and then I'll show you how you can add middleware which will prevent you from the only problem is the deployment of the middleware is funky right now there's a bug and it doesn't work and that's not just me that's a lot of devs online so I remember next year 13 is very new right the new structure is very new so underneath app folder we're going to have a auth and this is going to be oops no not that fourth this is going to resemble forward slash sign in right so we're going to have auth then we're going to have another folder inside it called sign in so that's going to go forward slash auth forward slash sign in and then we're going to have page.tsx so make sure your page is actually in the sign in I know it can be confusing because you think that that's also there but I'm in the sign in folder right now so that photo not that one that folder Okay so rfce oops rfca this is going to be my sign in page okay so this is going to be the sign in page that we're essentially sending an xgs over to next or over two so what we want to do here now is actually have a next auth pull in the special things that we need so what I need to do is use the get providers um pattern okay so what I want to do is uh firstly I need to actually get the Facebook login so right now we've got one provider here which is the next Source provider in this case I need to get these providers so first thing we need to do is go over here and simply pop in get provider so what I can now do is make this asynchronous and here I can say const providers equals await get providers and this is not doesn't need to be unwrapped once providers equals await get providers okay and then what we can do is I need to pass that down because this is a server rendered component right then we're going to have a signing component which is going to be a client-side component right so this is firstly going to have two things it's going to have a div with a picture inside of it and that picture is going to be a resemblance of basically a meta logo okay so it's gonna be a meta logo and that logo I'm just going to pop in right now to make life easier we don't need the signing component there that's easy so for this bit I'm gonna just pop in a bunch of styling so you can see here there we go uh links to a image that we have of the meta logo and then we've got a signing component underneath there right so here I'm going to have a sign in component and this one I'm gonna pass in the providers as a prop okay so if you guessed it I passed in the providers as a prop so I need to create this component of course right so at this point I'm going to go ahead and create a signing component.tsx this is going to be the signing component this one is going to be a client-side component this is going to be a used client component so over here now what we can do is I can actually go ahead and have and someone says 13 is good I know man is sick right so this point I can actually have the providers pull in from here now the problem is we don't have all the correct prop types and I'm not going to spend too long right now trying to find all the prop types but what you could do is you could get the return type from here so in this case record letter only and you could you could do all of this right and there is a way to do this actually I might try and do it right now I might try and do it live on stream I haven't prepped that one right so I'm going to show you right now if I can do this so the way you would do that I believe is you will have your function here and then we could do this I think so I'm going to do type props like props oops equals this and then if you don't know the prop type for this you can actually use a special trick so you can do providers so let's have a look at this right now so you've got a promise that comes back so you have to do a weighted and then we've got this type okay so let's try that out let's do promise is a awaited type so awaited and it's going to be the return type it's all handy like next.js Wizardry and then what we can do is we can say type of and then we can pass in the get providers function okay I know crazy stuff right and that's how you get the actual return type of something all right so that's a really nice kind of trick if you didn't know how to do that right um so that's how you do it that's how you get the basically providers now if I was to look into the providers you can see we've actually got all the different providers like Facebook so forth so pretty pretty damn powerful trick right it's a really really good trick um so at this point now on my sign-in page I'm gonna have a so you can see this is actually like a kind of it's a key value pairing right so if I did provide this dot providers dot you see I've got all these different keys for different things so I need to map through all of the keys in order to get something so now what I can do is I can do something clever here and I can say well I think it's clever I can actually have object dot values and I'm going to map through all the providers and what this will do is it'll give me the key mapping pairs so map through the providers provide it yep and then we can pass in the provider like so so I can pass in the provider name as our key and then I'm going to pass in the follow I'm just going to save a bit of time here and pop in my snippet code and I'll show you exactly what is going on so we've got the button um we've got a sign in with provider name and then we close off my div okay now you can see object values is here it's complaining and that's because of my time definition so this is where I can get a bit messy where it's not assignable and so forth time no it's not assignable so we could do yeah we just say it's there right I'm gonna prove it's there right so at this point we should have on our forward slash sign in page once we pull in our signing component we should have access to it so in order to double check this and go forward slash auth forward slash sign in and let's see sign in with Facebook what hey so I popped in off Facebook right that's correct and the reason why I'm telling you that worked is because I never wrote sign in with Facebook it pulled that from our next auth configuration and our types worked that's pretty cool right did that live on stream okay so um I mean the whole thing's live but you know so at this point we are going to pull in our helpful sign in helper function so I'm going to go ahead and pull in a helpful sign-in function I don't need to sign up that can go away um and now what I want to do is I'm going to say on click of this I want to do a arrow function I'm going to say sign in with the provider ID okay and you can pass in a callback URL so just FYI you can pass in where do you want to go back to right so in this case what we could do is we could do like the cell you know so and I remember we did earlier so we could have something along the lines of something like it could be process.m Dot oh my God the cell there you go URL or this okay we could do that so if we have the result URL then I want to do that but in fact I'm just going to be even more cautious of this and just uh I'll just to be focused up we could say if we do that or go to the forward slash homepage okay so quite a handy little callback URL tip so let's give this a try and this will probably not work because it will most likely say you haven't got a redirect URL author authorization so let's click it it will take me to Facebook okay it did and then it says up stash is submit for review okay I need to do that obviously I've not been approved for you so you have to obviously approve like ask for review when you do that whole app approval process inside your Facebook I'm not going to go into that but here you go get Advanced access and stuff like that you've got to do there's a review for app review there you go all right you gotta do that continue as Sunny so now it's trying to log in using my data I click continue that's because I'm logged in on Facebook if you want logged in it'll have your email and password and just like that bam we are logged in so if now I believe I am logged in yeah so we can check if we're logged in right so that actually worked right so that's perfect and it went back to my uh HTTP localhost home which is great all right so this is good so sign in with this name good stuff let's go up to now let's go ahead and pull the session itself and obviously I'll style out the um the login page so let's go to free uh let's just first you finish off that styling because that looks like looks like crap right auth sign in so here this looks horrible so I want to sign this uh start this up so first things first let me add that button you know that Facebook button fill which is here we've got the blue background similar to what we did before right and then for the overall div I'm simply gonna just say flex and justify in the center just pressing so very simple you know button right here obviously oh God that's horrible okay that's not that's not what I wanted um um my provider my object value is I'm going through them all thanks justify Center okay um and then my oh okay I see why silly me why this is this page where I need to do my sign up page so over here and also you see it's meta messenger I'll show you how using those reserved keywords that we talked about before you could do head.tsx rfce up in your head component and then here you can just pop in the title and say sign in to Messenger if I can spell that will help sign into messenger and then refresh bam sign in to messenger yeah nice we need to center it because that looks horrible that looks like it's got problems all right so let's go ahead and let's pull and pop it in and say that this one is going to be um the grid and justify center right so there you go nice okay so it centers that up and then I can sign into Facebook and I'm already signed in which means it will ping me straight back to that now it's worth knowing that buff until you've deployed it you can't actually use someone else's account so you can get test user accounts over here so test users you can go ahead and do that but if you try and use someone actually else's actual account it will say well your app's not active yet right so you have to make sure that you're just doing that's why when I was testing it I was testing it with some dummy data okay so next up now we need to go ahead and get the session so for session what I'm doing is I'm going to show you a few different approaches now in a client-side component sure you can wrap your app in something like a provider so if you are going to do the provider approach you can do the following pattern okay I'm going to kind of jump through this one pretty quick because I don't want to spend too long on this but if you want to do the provider pattern you can do the following you can make a providers dot TSX and then because I know a lot of people are naturally going to have this question you can make your session provider like so just how you would do it and this could have all your providers it can have Redux it could have everything but you know all that you would typically wrap in app underscore TSX right underscore underscore app.tsx but if you want to and then if you want to use it you simply go into your layout right and you would pop it into around your children like this so you'd pop in your providers like this right so that's how you would do the provider pan and then if you were to refresh you see how it still works right so that is how you can then go ahead so we could leave it like that to be fun you can now use your react hooks in the children below this right so this is actually allowing it to to work in the way we expected it actually no sorry sorry I take that back I take that back uh not in the layout you don't want it in the layout we're not going to do it here I'm gonna do it you could do it there you could do it there and then you can have your okay so you could do it there I'll show you why right you can do it there and then you can have your session so we obviously need the first instance of the session so you can use um unstable get server side get server session right so obviously this is asynchronous and this is from next auth right so this right here is from next door and what this is doing is it gets the server from the uh and remember it says unstable so a lot of this stuff right now is beta's it's unstable so just be cautious when you're using it okay now for the providers inside of here session provider naturally requires a session right so what we could do is we could upgrade this to include the session as well and this is any because we haven't prepped this out but in this case we pass through the session and then at the layout level you could go ahead and pass in your session so that way what's happening is you're passing your session through here through here and your children are render that and this is now wrapping out as a client-side component so something you can do okay just worth knowing that's how you would essentially do it right and now your entire app is that's how you replace the underscore app.tsx approach that you used in xjs12 I hope that helps someone right because I took a little second right so now you can use your hooks in underneath right but if you didn't want to use your Hooks and what happens if you want to pass it down and you know you want to have like instant reactions well then you can do that as well by just properly it down so inside here you can also get access to the session and then you can do the session equal so you could basically do the same line of code and you can prop drill it down as session session right you could do that as well it's completely up to you but in this case let's use the hook right let's actually use the hooks underneath and I'll show you the benefit of using it versus to benefit and not using it right so in this case um actually I'll tell you what we are gonna we'll probably I'll show you why right because when you server-side render it I want you to have the immediate action I don't want to have a second when it glitches in I want to have it straight away that it's there right but I just showed you that previous approach so if you want to use the hook you can use that okay so at this point unstable get server session so now what we can do is we could pass this into for example the chat Emperor and then in chat input all your props you can go ahead and do the following you can say props and then here we can do type props equals and for the session again I'm going to show you that nice little trick that we did previously right you pull in the actual function itself and then what you can do is you can say session equals session equals awaited because what we're waiting for is a promise time we're going to say I want to get the type the return type from the following function so I want the type of type of the return function which is unstable this so now I've got the session return type for this so if you look at it it's a session or no which is a return type of this so return type is a promise session no we are weighted so it unwraps it and then we get it so hopefully these are helping you out these are pretty solid tips right I had no idea about this before um I'm not bigging myself up either I'm just saying it's pretty cool okay so at this point for the uh button we could disable it if there is let's have a look what we've disabled based on let's actually disable the input right so the button is basically if there's no input and we're going to disable the input if there is no session so if the props to sessions I'm going to unravel my session like so I'm gonna see if there's no session let's go ahead and get the session out and here we say it disabled is no session so now if I refresh uh suspension okay let's just refresh Okay so this is what I got previously when I used the suspense at the higher level so okay this is what I remember yeah that's what I forgot about so when I used it at this level the page level or when I used it at the layout level this is the issue I experienced so you could move this concept to the other level so you can move this over to that's why I forgot I completely forgot right so you could do this at the page level not the layout level so you could in theory go ahead and make this wrap it with your providers and now you can map this inside like so and you can pass your session the session like this right so you can do that and that should work there you go okay so that's how you fix that issue if you run into it I'm sorry yeah try and keep your layout presentation logic only I knew that was a reason I couldn't remember what it was right so in that case and that's that's the cleaner way to do it okay so now we've got this happening let's um see if I can type in so in this case I can type in because I'm logged in right but if I have the sign out button in the header so let's go to my header component and where we have the logout button which was a client component right on here what we wanted to do is we can now leverage the use of our sign out button okay so on click sign out okay let's go ahead and do that and let's click that button let's see what happens let's go ahead and click it and I've now signed out and you can see look at that guys we have no session which means I cannot type a message in amazing that's really good all right so let's go back to the header now and we can go ahead and pass in the following so for the header we had the page component and you can see for where did I render the header out the lay they head out okay so inside of my header we can actually get the session object as well using the previous approach so inside of here we can do using our get unstable approach we can actually go ahead and pull the session from the client there and it's using cookies to do that by the way in case anyone's wondering we make our function asynchronous and now you can see we've got the session object and we should see if I saved this file it should say welcome to Ms and just sign in loads the messenger up and then wait for it so this is now using a bunch of different combination of things right it's really nicely coming together uh and obviously my internet's a bit slow when I'm streaming so there could be a hiccup because of that um let's go ahead and do a fresh refresh to localhost 3000 there you go so it's just a bit of a delay whenever I'm live I seem to get that it's fine right so now if I click sign in it will take me to my sign-in page but if I go back here you can see I just can't type in but I can see all the messages but now let's do the same concept with our message list component so the actual message itself let's go ahead and go to our message so the message component where is it over here now notice how this is a um in the message component we could actually go ahead and use a server-side rendered aspect of it so a message component let me go ahead and grab so here what we could do is we could prop drill it in from above right or and I'll show you the two approaches to this so first things first let's use the session itself right so when we get a session it's actually coming back as data and we rename it as a session from the user session hook okay so this actually comes from our next auth uh react so it's not from this it's from next door to react and it's from here use session okay so if we do this way this will happen on the client right now this can this can work sure but there's a problem with this where if I was to now go ahead and do our logic based on the session which sure I can do I can go here and I can say the user is user oh thank you so much I said that because I want to create react native editor can you make a video sure maybe possibly in the future but thank you for the donation right so I'm going to hit save now you can see if I refresh we can see that initially there's a little I mean it would have been a potential flicker right so I'll be honest with you there's going to be a little potential flicker right so even if I did the other way around okay I mean it's fine we can we could probably live with this right so in this case you could do it this way you could use the client-side part here and notice how it doesn't say use client right now the reason why this is actually probably a a client component it is a client compository is because the parent that is rendered in is use client and then it renders out so in that case this by default is inherited inheritantly rendered on the client as well okay so in that case now if I did this and I signed in and I was to post a message so firstly let's go ahead and sign in so let's go ahead sign into Facebook and I've already signed in so it would sign me out there we go logged in is sunny so firstly let's go to my header and make sure oh we got the pop-up let's go ahead and actually pull from the values that we expect now so logged in as foreign so session user image oh sorry no image oh my God session.user dot name and then for the image here rather than this one we're going to change it to session user image there we go and then this is freaking out because it we're saying that it may not exist so in this case there we go and let's refresh there we go that's actually my Facebook picture Sunny Sanger is my Facebook name and that's pretty cool okay and now don't get confused right this email address that we're going to check for in a second is the different to my one okay so this was test data right remember we added in some tests there it's a different email address to my signed in email address okay so now what I can do is I can go over to my chat input and then where we add a message I can get my session right so here I've got my session inside my chat Emperor so here we go so here we can say session oops sorry session Dot user.name and then we can just ensure that it's there and obviously you can have a protective block saying if there's no session return from the function and so forth I'm just gonna be lazy a bit today we can say this right I'm just going to ensure that there is that or you can have a full back kind of placeholder image you see you can do different things right Danny thank you so much because you're the best I see you from Ecto I appreciate you man thank you Daniel coder as well both Daniels in the house right that mean Daniel and then here you see papa react.team so these are all from a guy with Papa react.team when I my one is different right so my logged in email is different so session.user.email okay now I'm gonna ensure that that's there as well so what we should really have here is a protective block thing if no session return if no session return so we should kind of block over here so we could shorthand this into if another session or if no this there we go hey our song is on Victoria Legos there we go yeah and then we don't have to have these annoying things right there you go bam oh we do okay so oh because this is could not be there but still we should have a protective block there right shouldn't allow him to send a message at that point so cool um nice so at this point if I was to enter a message and type it in we should be sending it as this one so before I do that I'm going to go to my message list and I'm going to make sure that our logic for rendering out the messages right now is sorry so for for determining if we are a user or not oh it's already there okay so are you ready Moment of Truth okay when I type this in is it gonna be blue if it's blue we've done it correct because now it's going to be pulling in my Facebook information and then I should be different to this person which means I'm the sender okay so Moment of Truth guys Moment of Truth everyone everyone get ready for this because uh if it I have a feeling it could this could be something that ever breaks on there but let's get Let's Get Serious for a sec all right so I'm gonna go ahead and type in um uh this subscribe like And subscribe like And subscribe and let's hit enter bam and wait a sec did this solid hey this is sick okay that's exactly what I wanted that's exactly what I wanted that is solid aspanger uh I think that's perfect right obviously it's smash the thumbs up button please for that right so this is actually working the way we expected now so this person is technically different to the test data that I put in which is perfect that means if another user was to sign in bam it works as well and our real-time functionality also works because if I type in hello world I do this um hello world and wait for it we should have this syncing up in a second as well uh there we go hello world because it's that client and the reason why this is working across different clients is because remember even though you're signed in as the same person your cash from One browser to that one is different so it's going to know that it's not in your cache at the moment so Pusher comes in now I want to show you a perfect example of this in a really nice way so if we go to the chat input and we go to no sorry message uh list this is a really nice way of doing it so at this point you can go ahead and put in a console log just ensuring that when it pushes it's going to go ahead and tell you so I'm going to show you how we can do this right so if we pop in a message like this new message from Pusher push and then remember it won't push anything it will stop here if it's the message that you sent so I'm going to prove a point here okay are you ready for this I'm going to open this up on this side opening this up on that side refresh refresh and I'm going to go ahead and pop this open and I'm gonna go ahead and pop this up and now ignore that because I'm doing it on two different things that's why it's freaking out all right um there we go come on let's load okay cool so at this point now if I start typing a message in here yeah let's actually do it across three I'm gonna really push the boundary here right so let's go ahead and pop in another one and then let's do this right so again it's because we're rendering it across so there we go okay so now if I type in hello world what we should see is that this one will update State using SWR and this one well these were two will get pings from Pusher which in which case you'll see it in the thing in the console so bang push there you go and then these ones will get pushed to pushes from push there we go nice and if I do it from here over here this one will do it and then you see how it's gonna push and then this one will probably get in a second it's probably just delayed so over here oh no I did get it all right so it's just oh no sorry it was yeah it did come it did come it's just not two because it's a different thing so what happened hello all right this one should get it and this one should get it bam this is amazing right so if I type in one two three the messages one two three should appear here and here so wait for it wait for it so sometimes obviously I'm live right now so it's a bit slow four five to six seven eight nine there you guys Q system there you go I came through right and then there you can see it's also gonna fly through as well so absolutely amazing right it works uh it's again I'm when I'm live crazy stuff happens and that's why I can see this being a problem right but in this case let me go ahead and close this up let me close this up and let me go pop this in but yeah the point is you can see that it does work so it come through yeah uh well says you're saying it can be something along the line or playing with right next to that material seem to be homework let me uh I'm not sure we can talk about that afterwards though feeling when the code works and the way you went to is awesome yes I know absolutely crazy so yeah there we actually have it so I believe I believe we actually covered all the angles because now we have our login state uh let me just double check in messages we are showing yeah the message is being pulled from there so that's actually pulling the person's name oh we are with the timeout that's it so time ago I wanted to show make sure that we actually finished everything properly so if we go to the message component uh we are we need to install something called react time ago okay so what I want you to do is you can actually go ahead and check it out yourself but I'm going to go ahead and install it right now it's a nice little component library and what you can do is yarn add react time ago and we are going to pull it into our message component and I'll show you another little trick as well right I want to show you another little thing we can do afterwards so remind me middleware if I forget right so I'm going to go to message components or message component like so and then I'm going to pop it in react timer go and here we need to install our type dependencies for our developer so do do yarn add Dash D we had time ago that will install my type definitions um now what I do is it's very simple to use it I just go down to my timestamp and here what I can do is I can say time ago as a component and I can pop it in so I can say the date is a message so let's just do date equals and this is going to be a message so it's going to be new date sorry message dot created that okay and then self-close component like that right and then we get rid of this one and this is freaking out because we haven't got that and there you go right so now we should see as soon as I hit save let's see oh there we go bam nice that's so sick right so say hello well um hello world zero seconds ago one second ago two seconds ago oh awesome all right clean works well in that case now you've got relative timestamps so really really slick all right um and this is all using next.js12 so other components all that good stuff right so I'm also going to go ahead and show you just an example of middleware right so let's imagine you wanted to always redirect to the sign in page and you want to make sure that you can have a uh you know users can't see this page so if I was in a sign up like for example signed out now if we shouldn't be loading me here it should throw me to the off sign in okay so what if I want to enforce that through middleware what I'm going to show you right now just how we can do that well first I'm going to sign in and then in order to create middleware nextges 13 go to the top level so the level which is the sibling to app pages and that stuff right not inside the pages it's inside of the top top level right then we go ahead and we pop in the following so oh my God I'm almost going to do the wrong thing we create a file called middleware middleware dot TS okay do this middleware.ts now what's really cool is that middleware TS can run on anything that we say it will run on okay so what I'm going to do now is I'm going to export something from next auth middleware okay and now what we're going to do is we're going to go ahead and do the following we're gonna now we need to ensure that it's actually matched onto a specific route okay so how do we do that right so in this case I need to go ahead and say uh so you can do something called a match-up right so in this case we can use matcha now if I do this it means it will affect anything it will affect the home page basically I'm saying protect it right secure so basically only run this middleware on the route that matches this so the home page right you can actually have different patterns and all sorts of cool stuff but this is how you can have several like middlewares accordingly so let's go ahead and hit save and refresh this should kick in gear my middleware so now I'm signed in right so let's see what happens now because now my middleware will intercept the request to try and go to the home page and redirect me to my next auth sign in page which is uh created and it knows what it is based on this page right here that we also authorized earlier so the minute I click sign out I should not be able to access this page hit sign up bam I go straight there it just threw me over there and that wasn't anything else besides middleware right so now what we've done is I've gone ahead and if I try to go to localhost forward slash bam con protected it so now we are protected the only issue is with the deployment of that is currently a little bug but just so you know that is how powerful that is right so just like that we have an incredible protected route that is now gone ahead and you can't do it unless you sign in so if I sign in now you'll see I now have a authenticated say I can go ahead and do that amazing before okay and just like that we have the build now for deployment purposes I'm actually going to do it in a separate video because we have a few additional things next year's 13 is in beta we have next auth which is new to working with xjs 13 so there's a lot of quarks when it comes to the deployment process so in fact what we're going to do is we're going to wrap up here and we're going to dive into exactly what was covered in this build so I'm gonna go ahead and put something else on some music and then we're going to wrap up and see what was built in today's video so we just went ahead and built an incredibly powerful meta messenger clone we used a bunch of different Tech right so we use things like next js13 we use Tailwind CSS we use upstash to go ahead and create our redis database our serverless database and that was so easy to get set up you see how it took seconds super super simple to go ahead and say yeah we have Pusher to go ahead and enable real-time aspects to our redis database which is absolutely incredible we have next author and Facebook login and you can see there's different little parts to that where we can go ahead and tweak it and there's gonna be places where I promise you you will slip up but it's okay just take your time and you go and go ahead and follow this tutorial join us in different communities the Discord the next Discord Community is incredible the proper Farm Discord Community is incredible and yeah everyone's here to help you out okay and then we got typescript you guys learned a bunch about typescript including loads of different cool little tricks to go ahead and infer the types from Return functions which was incredible you created two API next year's endpoints banging you have a post endpoint account you also created your first ever server component you learned about the head components the new layout components and the page components and how to create your own server components right so a bunch of cool stuff you found out how to create client components inside the new app directory and you are able to use use SWR the new data fetching Hooks and we're not new they've been around for a while the data fetching hooks for the cell to essentially replace Redux so absolutely incredible incredible amount of stuff to happen here now I do want to mention that this video would not have been possible without our amazing friends over at upstash this was an absolutely incredibly powerful build because of upstash and I want to go ahead and just reiterate that you can go ahead and make benefit of doing today's build completely free right now there is no charge to go ahead and get set up they have an awesome setup page to go ahead and set up your first example project and it's very good documentation you can go ahead and check them out Simply head over to upstash.com as I mentioned before if I'm ever using a redis database upstash is the guys that I'm going to it's easy to use it avoids all the headache of setting up my own stuff scaling up and down all that kind of crazy stuff and the best part is it's free until I really start using it and it's per request model so you can optimize to reduce number of requests you can do exactly what we did today with use SWR to optimize your requests and yeah it's got rest API access to allow you to use it on edge and the serverless functions what more do you want guys absolutely incredible right um next year's 13 apps can be deployed and I did deploy this one it was just very fidgety so I'm gonna nail it the deployment steps I'm gonna create an entirely new video as to how you can go ahead and actually deploy any nexgs app with app directory or using next dots because those in my opinion would be huge value drops for everyone if you want access to the code make sure you go ahead and work for it or you can buy the paperwork GitHub access people ask me why I do that is because you need to work for it or if you want access there you can go and get it but I don't want people to just copy it I want you guys to work because that's what makes you developers absolutely incredible right without further Ado this was the app that we built today it was an incredible app right we have in the messenger with a loading state with next year's team which allows us to use the new server stream server components in a streaming fashion you can also have the error component if there was ever error if there's ever that could you can determine who's the sender who's a receiver doesn't matter if you have 50 100 clients on there it will work we learned about Pub sub as well so so much in this today's video right and we're able to build a beautiful looking app you power powered by the Facebook login right so really really cool stuff on that note I'm gonna go ahead and call this one a massive success I'm not no we just blew past 600 likes as well that's that's the way I like to end this right that was crazy like they couldn't time it any better right so at that point guys thank you for tuning in this is your boy Papa react Sonny and if you haven't already make sure you subscribe there's gonna be more videos on the channel I'm aiming for weekly drops now so we have the team and I are working overtime to get this stuff in digesting information building an incredible app pumping out to you so if you really are enjoying this stuff then make sure you definitely do subscribe and all I ask is you hit that like button and notification icon so that way you don't miss more videos and you help push this out to more Developers thank you for being absolutely incredible I love this community and I love what we're doing here and I will hopefully see you in the next video now I will see you in the next video that's how we end it out uh let me just read the chat last second we've got Mario's in the house Amy Luke we got papicha adash Manish everyone who tuned in today thank you so much Victoria of Lagos uh all of you absolutely incredible still and we just blew over 600 left thank you so much Papa fam I will see you in the next video peace [Music] Lewis Ryan awesome stuff as always thank you for the build cheers Papa and keep the code crushing David kids in the house that's what I'm talking about thank you guys peace [Music] foreign [Music]

Channel: Sonny Sangha

Views: 132,013

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: T2jKJF4BZOY

Length: 189min 34sec (11374 seconds)

Published: Fri Nov 11 2022