🔴 Let's build Twitter 2.0 with REACT.JS! (Next.js, Sanity CMS, Typescript, SSR, Tailwind & NextAuth)

back to another video on the channel today we're going to be covering twitter 2.0 despite any any tech issues you guys have been incredible amazing it doesn't matter how many times we're going to build this thing i'm going to build this thing one video through and through because that is what the papa fam deserves this is what we're gonna be building today make some noise smash the thumbs up button nothing will defeat me in getting this video out i promise you that this is going to be one of the biggest builds we've ever done with sani yi next js react tailwind all that beautiful incredible stuff including twitter authentication so if you're excited right now let me know where you're watching from let me know where you're tuning in from smash the thumbs up button welcome to the twitter 2.0 build check this out guys boom that's it all right this is nice we got the quality back the audio's sick everything is on track i'm going to give you a quick rundown as to what we're going to be building today guys so here we have our beautiful twitter platform as you can see we've got this nice responsive website so quick demo of that check this out as i get smaller boom very nice we've got full mobile capability goes into a tablet goes into a desktop really really nice all right again remember this is going to be out there recorded afterwards so you can feel free watch it at your own pace do whatever you need to do i am going to be starting this from absolutely beginning we're going to show you because that is what the papa farm deserves okay so we're going to go ahead and do this right now i'm going to go ahead and break down what you're going to be learning in today's world so firstly we have twitter authentication so if i go ahead and sign out check this out if i go ahead and sign back in we've got not only google authentication but twitter authentication so signing in with twitter goes ahead connects to the twitter api and we can go ahead and actually authorize the app login really really incredible stuff right really nicely logs us in we get our nice profile picture everything's golden right we've got lovely beautiful react hot no hot toast not notifications right here we can go ahead and tweet so if i go and say this is dope this is dope let's go right i'm going to go ahead and use this picture right now so this course zero to full sakura you might have heard of it it's pretty sick we can go ahead and attach an image add an image right so tweet and wait for it pow that's something we've never done before in a sanity build right so this is using sanity's mutations to go ahead and connect to the sanity backend and add data so you're going to learn how to use mutations in today's video to go ahead and add video our data in now something even cooler we've even got ability to add threads into our application so if i go ahead and add a comment here saying this is the best course on the planet go join it guys hit post you see we've got a lovely notification bam and then who agrees right who agrees how another one and we get this beautiful ui i mean just come on like look at that it looks absolutely incredible right really nice stuff go ahead smash that thumbs up button get the momentum back up because nothing defeats the papa fam guys literally nothing at all now i'm going to go ahead and break down even further what we're going to be doing in this build right so we've got the beautiful signing in functionality now imagine this post was quite like you know it was an ad negative content i wanted to ban that post right what i can do is this is the sanity backend so i'm going to be introducing sanity the ultimate platform for content right we're going to be introducing that just very shortly but i'm going to give you a little insight into the sanity studio i've implemented here their functionality to block a tweet so if i go ahead and block this tweet now and i click publish you're gonna now see this tweet will disappear if i refresh my feed bam it disappeared we've got a really nice kind of functionality here which actually goes ahead and it modifies our query to go ahead and say if it's blocked don't include it in the results you're going to learn how to do all of this right so now i've unblocked it refresh it's now back up on the page so not only have we got this awesome build today fully responsive you're also going to learn how to use content moderation and that kind of thing how to use structured content in a way which is awesome so imagine in our sanity database right now we've literally got this as a tweet and then we have comments which are literally have a referenced link to that tweet right so it's literally a connected structured database right really really awesome stuff sani is an amazing content platform they work with the big boys we've got nike we've got sonos figma i recently went and bought a sonos platform so this is a good this is a good company right really good they got amazing stuff inside there but something i want to tell you guys is that rather than showing you all the amazing features that they have i prefer to always go ahead and just demo it out right so today's build we've sorted you out with a double free quota so make sure when we get to the point where we set up our sanity you use the line listed here where it says sanity and knit with dash dash coupon sunny 2022 right so make sure you go ahead and do that and it's going to go ahead and help you out johnny says he never responds to any comments well now you know boy right that's it i don't like people when they call me out like that but anyway right so we're literally going to go ahead and build an awesome platform and we're also going to tie in and teach you how to use the twitter api in order to go ahead and connect that beautiful authentication that's going to be using um next off uh to go ahead and do it this is literally live right now you know all right so smash that thumbs up button nearly at the 100 like mark we were at 700 likes stream went down doesn't matter we're gonna get this thing back up to thousands of likes because your boy does not quit and i hope this motivates you to keep on going now quick introduction into this build right we've got a few things which are awesome in this build that i want to quickly shout out the first thing is we're going to be using typescript right so we're using typescript in this build to build robust code really really robust code right it's going to allow us to type check and that kind of cool stuff this whole page right so that you see in front of you here is going to be rendered on the screen using server side rendering so you're going to learn how to use server side rendering to go ahead and do that you're also going to learn how to query sanity's platform using the very popular grok uh query language right now grock is an amazing language is something that i would recommend that you go ahead and check out before i love i love the comments you guys really crack me up we got canada in the house what's up dude um grocky is an amazing platform it's literally like graphql very similar in the fact you have mutations you can query only the data that you want from the back end so it's a very good way of avoiding over fetching or under fetching and we're going to be building this entire thing with tailwind css to make it beautiful right and obviously after all of this you want to have it on your portfolio right so i'm going to show you how to deploy it to versa so you can go ahead show your friends show the entire world what you're about and as your capabilities as a nexus developer so this hopefully is something that you're going to get excited about we're going to without further ado we're going to jump into it right now so first thing i want you to do is go over and install tailwind uh set up your next gs project with 101 css so first thing you want to do is actually if you head over to google and you just type in simply next js with tell in css the second link is what will take you to this page this is going to allow us to go ahead and create a startup project with a template for taiwan tss it's going to create a next starter project for us so a lot of stuff is going to be happening here now i want to know where you're watching from right now get the energy up we just crossed over 100 let's keep going guys this is literally what we're about it doesn't matter we're going to keep going strong right let's get into our flow state let's go so i'm going to go ahead and kick start this project off mpx create next app so i'm going to open up my terminal oops open up my terminal and let's go ahead and full screen this to make it super clear for you right what i'm going to do is i like to go ahead and put things into a nice location so i'm going to put them into my builds folder i'm going to paste that command now i want you to take notice of something right the first thing create next app is the tool that we're going to use to go ahead and start off a template right a starter template for next js the second argument is with tailwind css this basically sets up that startup project but goes ahead and adds intel in css for us saves us a bunch of time so next thing we're going to do is type in twitter i'm going to type in to youtube clone right so whatever you want to call it it's up to you the next prompt will ask you to confirm if you want to use uh net create next app that's fine we're going to go ahead and do that as well right so i think i've done that before that's why i didn't pop up okay so at this point i can see the chats going off right let's see who's in the house right we've got gabriel from nigeria we've got egypt ghana india estonia belgium um this sick lithuania uk south africa i'm talking about papa fans international now it's crazy right it doesn't take too long to set up the project next thing you want to do is cd into the directory so cd into twitter to youtube clone and then you should go in like so right what we're going to do then is code dot uzbekistan norway oh this is crazy new jersey usa israel toronto wow sick guys istanbul nice germany as well right so code dot if i go ahead and hit enter now this will pop up my vs code in the uh on the screen right and it will be set up in a way which is perfect for us to code because it's got my directory open now if you don't have that command available or it says code dot is not available then what you need to do is this handy little trick okay so i want you to do command shift p type in install now you you will see install code command in part right we're using vs code by the way if you don't have it get it and if you didn't weren't able to do npm commands install something called node okay so at this point i've already done this that allows me to do that code command path right so what we're now going to do guys is you can also use open um here open folder and it will go ahead and open up this if you go to your current folder so quick intro into next js okay so what we're going to do is go into pages go into index.tsx and as you can see our pages in our app are basically built based on our file directory so basically by having the index.tsx page it creates us a page at the forward slash homepage right if we had four if we had search.tsx it would be four slash search and that so forth so to get an xgs appropriate command j to pull up our terminal and we're gonna go ahead and run this we're gonna do mpm oh sorry we've got yarn here so yarn lock if you have package lock it'll be uh uh npm but in this case yarn so we're gonna do yarn run dev all right let's go i'm gonna get the energy back up all right this is what i'm talking about this is why i like the popper fan right because the reality of coding is things go wrong right things go bad and the same thing happens even when i'm on live streams right it happens all the time things go wrong but this is what it's about coding is never a straight journey it's about can you go through the times when you have the really kind of down moments and an hour doesn't mean anything in the coding world right so we're going to be we're going to be strong with this one so heading over to localhost i've already got it running on 3000 that's where i was demoing it from so i'm going to show you uh we're going to be running it from low cost 3001 so i'm going to close this i'm going to go ahead and pop my code over into a second window and i'm going to open it up on localhost 3001. so as you can see you should get this starter template now what i'm going to do to make life easier is pop this over onto the second screen and push it like so so we can see our code command b to hide my sidebar command j to hide this all right check this out all right so now we've got welcome to next js so in order to get this basically set up and started off first thing i want you to pay attention to is the head this is a nice little component from nexus which allows us to inject code into the head of the document so at this point what i want to do is change create next tab in the title to twitter 2.0 so twitter 2.0 awesome stuff and now you'll see at the top we've changed the twitter 2.0 we changed the title of the document to twitter 2.0 i'm not going to customize the fabio icon you can do that if you want to and the next thing i want to do is clean this up so i'm going to remove everything from main downwards and i'm gonna go ahead and type in the h1 and say hello world get rid of the footer as well bam gone and as you can see we have a nice starting template all right this is pretty good papi said i took off the option for this that's what i'm talking about this is what puff fan's about energy is sick right almost at 200 likes smash the like button come on i know we can go higher and we can go to a thousand it's all good we're gonna hear that today now we're using tailwind css as you can see we've got tailwinds utility classes if you want to go ahead and get this nice little hovering effect where it shows me what it's going to go ahead and translate to then install the following extensions okay i want you to go ahead and we're going to need these for today's build i want you to first get this one es7 react redux snippets we're going to be using that the second one i want you to get is called tailwind css intellisense these are going to be really handy for you to go ahead and absolutely kill it when you're building this build right richard singh thank you for the donation he goes hey sonny i followed the medium tutorial can the no modules the sanity folder be added to get ignore yes dude i will be happy to show you that part and i'm gonna do that when we get to the sanity portion of today's build right let's go ahead and continue on so as you can see it's centered this is because the default sort of tailwind styling that's been applied here is going ahead and doing it in the center so i can delete that we have a clean slate okay so now what i want to do is basically go ahead and build out the beginning of our application so as you can see guys what i have here is i have three sections right so i have three sections here i've got the left hand section which is my sidebar i have the feed and then i have the widget right so this is basically three of my sections and this is going to be in a grid layout so the first thing we're going to build is the sidebar second thing we're going to build is the feed final thing we're going to build is the widgets okay so pretty good speed we're going at right now so what i like to do here is go ahead and always kind of mark things out with comments so first thing i want to do is go ahead and type in main and inside of here i'm going to just kind of comment out so i'm going to say the first thing is a sidebar second thing is a feed oops feed there we go feed and the final thing is going to be the uh widgets right nice indonesia what's up nice okay let's go ahead and we're going to go firstly create the sidebar component so what i want you to do to get yourself prepared for this build command b go over here now notice firstly that we're using tsx files this is pretty much because we're used this is literally because we're using typescript right so it means it's a typescript jsx file pretty much so now what we're going to do is go over to the package.jsons we're at the top level create a folder called components here we're going to house all of our reusable components i'm going to create a file in here and this file is going to be for the sidebar component right so i'm going to go back into my components add a thing add a file and call it sidebar.tsx awesome stuff rfce is from that handy extension we installed earlier okay hit this and now you can see we've got our sidebar so i'm going to say i am a sidebar hit save go to my index and what i can do now is i can pop this in so if i type in sidebar and i go ahead and do forward slash i need to go ahead and go to the end of the text control spacebar allows me to import like so and as you can see my sidebar is here okay so what i'm now going to do is go ahead and continue to build in my sidebar all right so what we're going to do is we're in order to do the sidebar we're going to need all these beautiful icons this is where hero icons pops in right so at this point faizan says sonny's got good taste of music thank you graphal nable what's up from canada awesome stuff i see two bosses on the homepage thank you dude i appreciate that go to hero icons this is what we're gonna be using for all of today's icons all of our needs you can notice that there's an outline variant and a solid variant it depends on which one you want to use but this is how i find it so i'm not going to go through and show you every time i find a new icon but this is where you're basically going to be able to like go ahead and search for different icons and all that good stuff so if we go over to the documentation right now right you can see we can actually go ahead and install hero icons into the project and we can go ahead and start using them off and the best part is this was created by the guys over at tailwind so it's really really cool and uh we can use our tailwind utility classes directly out the box so going over to our code command j and what i like to do is i like to go ahead and open up a second terminal hide my first one a little bit so i can just see if there's an error over here and i like to go ahead and type in yarn add hero icons react because i'm using yarn if you're using npm and you'll notice if you had package lock using npm then just do npm install hero icons react there's no right or wrong it's fine kenya mumbai what's up i see you guys in the chat right so we've got that looking pretty damn good already pushed over the 150 light mark let's go guys get over 200 let's keep this happening right so i am a sidebar this part right here so what i want to do now is i want to go ahead and start using those um icons so firstly what i'm going to do is a bunch of imports at the top of my page right so these are going to be all the icons i'm going to be using in my sidebar right now so these ones right here now notice how each component has a icon and it also has a title next to it thank you darwia it goes paparat you're a game changer i appreciate you so much for the positivity thank you right so let's keep on going guys so at this point for the bell icon i know sorry at this point we're going to go ahead and delete this and we're going to go ahead and do the following so i'm going to firstly add in the twitter logo at the top of the page okay so for the twitter logo i'm going to go ahead and i've given you guys a nice shortened url so if i go over here i type in image image and i do source and i can go ahead and make it easier for us now what you'll see is we have a nice big twitter icon at the top of the page okay so what i'm going to do is image class name and what i'm going to say here is that the height should be 10 the width should be 10. so these are those nice utility classes i was talking about a second ago right let me know if we're good right now i think we're pretty damn straight my signals looks pretty good on this side um nice so this one we've got the image working and what i'm now going to do is i'm going to go ahead and say start putting in our first of the many sidebar rows so what i'm actually going to do here guys is create a separate component called sidebar row and we're going to be reusing that with the help of props right so sidebar row like so forth right so borrow.tsx rfce boom nice and what i'm gonna do is go ahead and uh type in oh yeah so what i'm gonna do is introduce you to the concept of props so when we have a component the best thing about react honestly game changer was the fact that you can reuse our components by providing different properties right props typically come through here and we pass it in as if it was an attribute to an html element so very simple to use but what we can do here is we're actually using typescript okay so typescript oh thank you so much universe code sorry guys i have to address that one he goes uh thanks for every single build i have a channel for three months and you're part of the reason thanks for each bro and i've never been in the community like wrote to one million you will do it i appreciate you so much thank you dude that really means everything when we're like when we're dedicated like this so what we're going to do is i'm going to introduce you to types now if you've used a language like java or any of those they and actually have to go ahead and when you declare a variable you have to say if a number is like an integer or if something is a string or something like that now javascript by nature is weekly type which means we don't have to say if something's a string we don't actually support that out of the box so typescript was developed to enforce type checking this means that if i would have to actually say what props will i expect and what data type are they going to be right if it's a title i can enforce it's going to be a string then if i put a number in there my code's going to complain freak out not allow me to build it to production this allows us to catch a lot of the bugs a lot of the issues right so what i'm going to do now is go ahead and type in interface props and the interface is a way of defining a type and essentially we've got types and interfaces and we're going to get into that but the two props that we're going to expect is one it's going to be an icon notice how i use capital i this is because we're going to be using i'm actually passing an entire component here so firstly i'm going to put a little placeholder here which is the empty function the second one is going to be title and this is going to be a string of value so what i do is i pass it the type by doing a colon and passing in the props now in in a es6 what we had is this handy thing called destructuring so i can break apart this object and get the icon and title from it like so now i can just directly use these rather than saying props icon so title and so forth so inside of here now what i want to do is pop in my icon so like like this and i'm gonna go ahead and also pop in the p tag like so now what you can see is uh firstly it's complaining so the p tag is gonna have my title in but the icon is like whoa whoa whoa this doesn't make any sense you can't do that right so what we're going to do is pause it here for a second head over to our sidebar and we're going to use the first instance and then we're going to start piecing it together so what i'm going to do is i'm going to have the first icon as so so sidebar row i'm going to import it and we're going to go ahead and use the home icon now as you can see the title is not complaining that's because i've gave it a string value the second one icon over here you see how it says the type props element is not assignable to that template we just gave it so this is a handy trick guys and it's a game changer when you're using typescript rather than guess the type and all that kind of stuff what you can do here is it will can actually give you the type that you should be using so i'm going to copy this go over to my sidebar row replace my placeholder with this right and i can import this by using a command spacebar at the end of the text and import it now the only thing i need to change here is say jsx element is going to get rendered as an outcome as you can see icon stops complaining and this is happy with it as well okay so as you can see we've got our icon on the side over here looks pretty good i'm going to go ahead and pop in a couple of these and then i'm going to style them up together so you can see the effect in bulk all right so i've got a couple of these on the screen right now now for the styling portion of it we go into our sidebar row and for the icon firstly it's way too big i want to make it a height and width of six so a height and width of six there you go oh nice dude bencar a member of two months awesome dude he goes hey sonny at school right now so i can't stay but i'll definitely check out the bill when i get home ben you're an og i appreciate you tuning in thank you so much man and as you can see he's a member for two months at the papa fam uh on the youtube channel which is awesome right so at this point if you do want to use the next um by the way i do want to recommend that if you do want to use the next image icon do so here when you can predict the uh the image and you know the domain definitely use it i'm not using it here because we have so much to build in uh that i didn't think of it but yeah you can definitely use the next image icon it will optimize here okay so good suggestion so at this point what we're gonna do is we're gonna introduce flexbox now if you do get stuck with flexbox at any point make sure and if you're watching this back it's going to be a little pop-up over here somewhere but make sure you pause the video go watch my flexbox foggy tutorial which teaches you how to use flexbox you guys love that video come back and then go strong okay so at this point what we're going to do is i'm going to go ahead and put a class name around here and i'm going to go and say this is flex now by nature flex puts things into a row next thing i want to do is align everything on the central axis right then i want to go ahead and start making this look a bit nicer so at this point we're going to space the uh the x components out with a value of two you see how it pushed apart i want to also give this a um let's go ahead and say padding on the x axis of four padding on the y axis of three now you can see they're getting a bit bigger and what about that hover effect right notice how not only one it's a rounded border it's also got this nice animation associated with it in order to achieve that what we do is we go ahead and say rounded full right rounded four and i say a b hover on hover so we've got this nice little uh ident uh addition we can do there's a gray 100 now you can see when i hover over it it snaps in first thing is we need a pointer so i can go ahead and say cursor pointer and the second thing is what about the animation right so for the animation i'm going to say i'm going to add a transition animation to all the things so you can add it to transform whatever you want i'm going to add it to everything here give it a duration of 200 milliseconds now we get this nice silky smooth animation but notice how when i hover over this one no matter where i hover over it's going ahead and it's going ahead and highlighting the text blue so i'll show you how to do that as well what we do is we set the surrounding div with the children inside to a group and then you go to the inner p tag and then you go ahead and say when i hover over the entire group so group hover i want to change the color to a blue right so now this is not the twitter blue color as you can see right it worked but it's not the twitter blue i want this blue so how can i now extend my tailwind theme so that way we can go ahead and actually get this nice twitter blue and guys we're literally at the verge of breaking 200 smash that thumbs up button we're about to destroy this one jimmy what's up dude good to see you here we are going extremely strong dude so i'm going to open up my tailwind config as you can see it's over here and we're going to go into the theme extend and now over here what i'm going to do is add in a special color so over here i can say colors and i can go ahead and add an object and i can say we're gonna add a twitter color and the twitter color in this case is gonna be a hexadecimal i've got the value here and this is the twitter blue hit save and now what's so clever about uh tailwind is we can actually go ahead and use that in our text and intellisense even picks it up so if i go and do dash now you can see if i type in twitter boom i get the perfect twitter blue why don't we even get the animation on it which is awesome right now that's almost perfect there's one more thing that we need to do right if i go over to my flex uh next to flex or wherever really i'm going to set this max width to be fitting the container so in this case only use up the max width that you need to so now if i do that boom perfect guys with that said we just smashed 200 likes i love this the energy is coming back we're moving strong we're gonna absolutely destroy this build let's keep going so this is looking pretty damn nice so far okay so next thing i want to do is go ahead and style up this a little bit more so we're going to leave it um as this for now and then i'll come back make it a bit more responsive so the sidebar is now somewhat done we are gonna go ahead and add in an additional uh one over here so we're gonna add in a dots horizontal and we've got one more which is gonna be for the user icon right so i'm gonna go ahead and change the collection icon here to user icon and this one is going to say sign in but eventually we're going to make this dynamic so this one's going to say sign in if we're signed out and if we're signed out it will be sign in and then the on click functionality will be associative of if we're signing in or signing out and that kind of thing right so a lot of good stuff happening if you haven't already subscribed that's like 60 of you that haven't subscribed and you're watching these videos please just hit that little subscribe button bella notification icon and if you want to go ahead and join us at puppetreact.com forward slash course to join the amazing zero to full stack hero community 650 strong is a game changer right so absolutely killing it guys let's get to 300 likes smash the thumbs up if you're enjoying this right now and if you've learned anything new yasin osman thank you so much for the donation i appreciate you dude awesome stuff at this point we've got this looking pretty nice so now what i want to do is i want to go ahead and hit save and we're going to move over to our let's actually go ahead and do a class name i'm gonna go ahead and apply flex flex column to all of these individuals items should be centered and i'm gonna say actually no no let's do this afterwards i'm gonna leave this there for a second once we do the next step i'll come back so let's go to our index let's carry on with the feed so i'm going to go ahead and build this middle sort of section here we're only going to start with the top part and i'm going to show you how to do this nice little uh animation right at the top not this bit yet but we're going to show you how to do that so at this point what we do is we create command b create a new component feed.tsx right i love the energy guys i'm getting back up rfce boom this comes up with a feed right so the feed is now going to pop underneath by default because we have no styling right somebody asked is flex better than grid really doesn't matter it depends on use case i like to use grid for the overall ui flex for the inner components right so here feed like this control spacebar bam we got this now you can see the feed pops underneath right because naturally everything's by default in the inline block right it stacks up so in this case on the feed we can get rid of the comment i'm going to go into my feed and i'm going to start developing this bit now so first thing i want to do guys is get the top of the feed down so what i'm going to do here is have a div and inside that div i'm going to have h1 which says home and then i'm going to have a refresh icon right so refresh icon and as you can see this is going to be resemblance of this bit here right so i'm going to get it looking in that way so what i'm going to do is for the refresh icon first thing i'm going to do is change the size of it it's way too big right now height and width of 8 height and width of 8 like so boom awesome stuff guys we're literally flying right now i love this so much i'm gonna get that music up a little bit to get hyped up refresh icon height and width debate and then what i'm gonna do is i'm gonna basically do a nice little cool snazzy animation to this right so i'm gonna show you how we do that cursor pointer when i hover it over i want to be a pointer i want it to be blue on the twitter color so it looks pretty nice and i want to do something pretty nice here firstly margin right of five margin top of five we're going to use that for later on um and then i'm gonna go ahead and do it's uh css grid is not complicated with um um what's it called with a tailwind it's very easy for towing that's why i like it so much right so we're gonna add a transition and we're gonna add it to all and we're going to add a duration of 500 milliseconds and i'm going to add something called ease out now ease out is basically meaning when i hover over my component and i animate something it's going to be super fast and snappy and then when i hover off it it's going to ease out ease in the opposite right so that's basically what that means all right greetings from belgium thank you madani i appreciate you tuning in right when i hover i'm going to do this nice little trick now let rotate 180 and i'm going to do when i click it active is the word for that we do scale and i'm going to scale up 125 now boom look at that look at that look oh so nice all right now the next thing we need to do is get this like laid out a little bit in the correct fashion right so firstly the home let's go ahead and give this a little bit of a style so let's give it a padding of the extra large and then i'm going to go ahead and say fun should be bold like so okay looking pretty good then we go to the surrounding div and we're going to make this basically space out between each other so flex puts things on a row okay uh pepe says wow nice animation i missed this part from the first one nice there's always a pro to everything right so you've got the flex here i'm going to say items should be centered on the axes so you can see they just kind of neat neatened up then justify between pushes them apart like so so now we've got the nice kind of spacing looks really really cool okay so that's that's looking pretty good so far okay um we're gonna pause there before we carry on with this section which is called the tweet box we're going to do that afterwards now i'm going to move over to this section over here right the reason being is because i want to create just a skeleton for each one and then we can go ahead and apply apply the responsive logic and then we can go ahead and start building out the rest of the feed so for this right section we're going to move over to index.js so i'm going to hit save on this one oops what am i doing there well i just downloaded the page all right so hit save index there we go widgets let's go ahead and create a new component widget so widgets.tsx rfce bam and this is going to be the right hand side the widgets okay so nico is going to say wow it's true is the best thank you so much dude we are hyped on energy we are literally almost at 300 likes smash that thumbs up button if you're enjoying this right so at this point we're going to go over to our index and we're going to import this widgets like so bam get rid of this and we've got our widgets like so and you can see it's popping up underneath so clicking into it control click and let's go ahead and pump this in so for the widgets we're going to use something pretty cool here right we're actually going to use something called the react twitter embed npm library it's going to help us basically pull in these tweets do all this kind of cool stuff and you can choose who it's coming from right now i've got a hard coded on me you can have elon musk your own profile whatever you want right or you can actually make the search function if you really want to so first thing we're going to do is create the search box at the top so this thing and the main thing here is i'm trying to teach you how to go ahead and design a ui like this right so in this case for the search box i'm going to create a div i'm going to have a search icon inside of it right so search circle icon actually it's going to be the search icon so search icon right oh i like this song all right let's go this is sick right i'm going to go ahead and put a class name here i'm going to say a height and width of 5 and then you can see we got a nice little search icon the next thing i want to do underneath is put an input fill this is going to have a placeholder which is going to say search twitter there we go nice universe code says sunny's on fire i honestly prefer this way faster my attention is 10 out of 10 yeah i'm i'm locked in right now guys all right so this point once we've got the dip up we're gonna go ahead and actually start styling this out so first thing i want to do is i want to put the entire div in the flex right so it pushes it on the same line as you can see they're not aligned so if i go ahead and do item center like so it straightens things up a little bit more which looks cleaner spacex of two pushes them apart looks really clean i want to give it a background gray of 100 and as you can see this one is getting caught with some white in the middle that's because the input field has a background of white so here i can do a class name bg transparent wow as a mouse for transparent okay and as you can see it goes through right so at this point i'm going to go ahead and give the padding of three over here make it a little bit bigger okay and obviously we want to round the corners here because it doesn't look nice like this we're going to round it four and there you go starting to look pretty good okay margin top of two so we're not touching the top um okay pretty sick deep he says you're awesome mate thank you guys if you're enjoying the content right now destroy that thumbs up button subscribe if you haven't already it's going to be a nice good session today right so let's keep going all right so the input over here we've got the last name like so now as you can see when i click into it we get this annoying outline issue so there's a few things i want to do here first thing is i want you to go ahead and type in flex 1 that means that the input folder is going to take up the available space the second thing i want you to do is type in outline none outline none what this is going to do is you see it got rid of that nice little blue thing so now you've created your own little custom component looks nice does the trick and it basically resembles a nice little search box for us for this one i want to change the search icon to a text gray of text gray of 400 as you can see i like that extension it gives us the color palette as well which is kind of cool all right looking pretty sick young yak says sunny's always killing it thank you so much guys honestly me and my team jay is it we're just it's a dream team guys is i'm grateful to be doing this and i appreciate you guys so much all right the overall outside div we're gonna go to class name oh my god the tunes are good today px2 gives it a little bit of spacing on the padding and then we're gonna go ahead and say margin top of two we're gonna make the whole thing responsive afterwards shortly in a second right so um at this point what we're gonna do is we're gonna go ahead and create the final part here so underneath which is going to be the twitter timeline embed so what i'm going to do is go to the react twitter embed website so react twitter to embed and as you're going to see here we're going to get the react twitter embed mdm all right so we need to install this package and this is going to help us pull in the beautiful tweets that you see on the right over here so as you can see npm install i'm using yarns we're going to copy this go over here come on j yarn add react to iran ben so it goes there pops in that dependency next thing you want to do is we're going to use the timeline over here so the timeline straight a timeline embed as you can see you pass in this first attribute profile the second one is a screen name and the final one is a bit of a styling okay so at this point we're going to go ahead over to here and we're going to do command j and i'm going to go ahead and pop it in as you can see we need to import this and it hasn't installed yet so that's why it hasn't popped up let's try it again okay so let's go ahead and actually install that manually uh import it twitter timeline embed right let's do that fine let's go ahead and say import twitter timeline embed from uh react twitter embed there we go all right and i'm gonna pull it in from sunny sanger which is my twitter handle i'm gonna change the height to 1000 as well okay awesome stuff right alexandru says awesome work let's go and we have uh madani thank you so much five euro donation gonna send you some belgian chocolate one day dude i love belgium chocolate i actually went to brussels once i think i got patchy chocolate i think it was that one or one of these other ones that was really good thank you i appreciate it so we're gonna add that in now at this point we're gonna go to twitter 2.0 and you can see now look at this guys we get oh that's not mine let's go ahead and refresh we should see sunny sanger's twitter feed there we go oh and he actually opened up to twitter so this is actually the twitter feed looking pretty nice so far all right really really good right so at this point guys we've got the skeleton in place but it looks nothing like i want i need it to look like this so i'm going to show you now how to utilize css grid in order to get it to look like this and also to get the responsive aspect whereby it goes ahead and removes the widgets if we get small and also if we get to a certain small point you see how the text changes everything becomes really responsive i'm going to teach you how to do that right now so imagine oh my god the tunes are going off today smash that thumbs up button we're almost at 300 likes let's keep going so at this point what i want to do is i'm going to basically segregate my page into nine columns right and i'm gonna basically go ahead and say that it's segregated into nine columns and it's gonna be this one will take up two columns this one will take up five columns or maybe yeah five columns and this one will take up two columns right so in order to do that we're basically going to do the following and i'll show you why it makes sense once we actually get into it so if i go to my index we're gonna go ahead and apply the styling over here right so main let's go in here and we're gonna go ahead and type in we're gonna apply css grid here so naturally if i do grid it automatically gives us a one grid hence why they're still stacked up on top of each other it's fine it's not doing the trick for us though we need to go ahead and say that it's going to be grid columns of nine and as you can see each of the children are going to take up only one of the nine column ten five but all this space over here this resembles the additional six columns that are there okay so at this point i need to go into sidebar and start giving it a column span right so i'm gonna say the sidebar you're allowed to use up two columns so what i can do is i can say column span two you can see that it used up more space i'm going to go over to my feed and if you're wondering how the hell i'm doing that it's command p and then i type in the type the name of the file okay so let's go ahead and drop this so there we go and then what i'm going to do is i'm going to go ahead and check this one right here so the feed i'm going to go to the outer div class name and then i'm going to go ahead and say column span oops column span column span and we're going to give it a five here right to begin with now what you can see is if i go over here guys this is taking up five of the columns we've got the left hand side which is taking up a little bit of space and then we've got the right hand side which is there's one column here and one more here so i need to tell this one you can use up the remaining two right so let's go ahead and do this so i'm going to go over to my widgets and then i'm going to go ahead and say column span to bam as you can see you should be using all of your available space now but it's doing it in a ratio whereby we have nine columns two are being used here five are being used here and then uh the remaining two here so everyone can quickly write that down so we've got this side we've got this side over here and then we've got this now the way it's working is this one's taking up two this one's taking up five this one's taking up two that equates to nine nine columns right so looking pretty swift and pretty good right now now when i go smaller what i can do is i can say don't use this one so i want to hide that and instead of using five here i can make this use seven so it will take up the room over this so the way i do that guys is i go ahead and i go to my feed oh no so what i can do is actually go to my widgets and firstly everything that i write in tailwind css is mobile first so basically any of the rules i write apply from the smallest screen size first then what you do is you add in breakpoints you say medium screens large screens extra large screens and you can apply certain rules as your screen gets bigger so the way we do that as we go to the widgets and we're going to go ahead and say that by default it's hidden you're probably wondering what well that doesn't make sense right well by default on a phone it should be hidden right the only thing we want to do is only when i hit the large screen right actually is it large screen or is it going to be a medium screen let me just double check i think we did um it was on the large screen yeah only when we hit the large screen do i want to inline it okay so you see it's there but on the anything less than a large screen bam i want to disappear now as i mentioned i've got those two columns so i need to tell my feed that you can use up those columns right the way i need to do that is i go over to my feed by default by default i want to use up seven columns only when i hit the large screen does the other one pop in so then i have to reduce down to five columns okay let's check it out but there we go nice i'm using it all as i need to and as you can see as we get smaller the sidebar is not fully responsive yet so we need to go ahead and style that out so i'm gonna go ahead and finish up the sidebar now the way we do the sidebar is i'm going to go ahead go to my sidebar and i'm going to go ahead and start making it a little bit more responsive right so we've done column span 2 i'm going to go ahead and say though that mobile view the items should be in the center and you're probably wondering though that doesn't look better um i'll show you why i'm doing that in a second padding xr4 and i'm going to say on the medium screen only should the items go into a line okay so if you see on the medium screen and above it goes into a line but otherwise it should be in the center the reason being is i'm going to hide the text right so if i go into sidebar row go to the p tag now what i can do is i can actually hide the text at the right point okay so by default in a mobile i'm going to say it's hidden only on the medium screen should it be inline flex so at this point now can you see what's happening only on the medium screen does actually pop in looks really really clean right really really nice stuff right deep says best part about these sessions are subtle vs code tips you drop i'd watch these sessions for them let alone the actual development i will be doing tick tocks very shortly about all those tips because i keep getting that feedback so i want to make it into a piece of content that you guys can digest really easily so i appreciate the feedback dude um the only thing that looks off right now is that sidebar twitter icon i think i need to space that out a little bit more because that just looks wrong that's where your eye for design goes your radar is going off i think i need a margin of three here bam there we go that's way better okay so at this point looking good now i just need to change the text size so it gets a little bit bigger on the smaller screen right so cyborg as it gets bigger sorry so over here for the p tag what i'm going to say is i want the text to be by default uh text base right so text base and then what i'm going to say is the font should also be a light theme and then as i get to the large screen i want the text to increase in size to an excel so let's see what it's like okay so it's thin and it's the normal size as it gets to a large screen should go to xl nice guys we're looking damn good looking really nice now as you can see it looks really spread out now this is kind of hard to kind of navigate whereas this is super easy to navigate so what you want to do here is typically apply something like a constraint now we don't want to apply the constraint when we're on a mobile view we only want to apply the constraint when we're on a when we're on a uh on a bigger view right so what i can do here is go to my main um page and i can do the following i can say only on a large screen should we set the max width constraint to 6xl and as you can see it's a 72 ram equivalent so now what i do is if i resize it you can see it actually constraints it to center this i can go ahead and do something called mx auto to set automatic margins on my left and right axes so boom it centers it perfectly every time right and as you can see the we don't apply max width when we get to only only to a large screen does it make sense to do it right now the next few things are pretty cool little tricky hacky things we're going to do max height of screen and i'm going to say overflow hidden the reason why i want to do this right now is because when we get to this point if there's any content down here i want the containers themselves to be scrollable for example here i'm scrolling down the entire container i'm not using the entire page to scroll so i'm setting the entire page to a height of the max height of screen and then i want to go ahead and um do what's it called and the containers themselves should be scrollable i'll also teach you how to do a sticky thing here it looks pretty cool right so at this point we're looking pretty nice so far we are ready to go back into the feed and start customizing this a bit more so the next thing we're going to do is implement something called the tweet box where the tweet box is basically going to be responsible for that middle section over here so this bit here okay before we do that what i do want to add is and i want to add some border into that so i'm going to go ahead and say there should be a border on the x-axis so that way you can see we get this nice twitter-like phil right so i'm going to go ahead and have a quick water break i suggest you to do you do as well but in the meantime smash the thumbs up nearly at 400 likes let's keep this energy going also can you guys see something in the background where is that there can you see that oh you guys gave me that thank you so much okay we're going strong let's keep going okay so we have this looking pretty sick at this point what i'm going to do is implement the tweet box so i'm going to go ahead and make our life a little easier make it smaller the tweet box okay so at this point i'm going to go ahead and give create a div okay and we're going to go ahead and make a tweetbox component right so tweet box like so dot tsx rfce this is going to be the tweet box right papita says that's huge i know right it's crazy it's in the background it looks so cool guys we're so close to 400 likes smash that thumbs up button let's keep this going focus time right music up this one's a bit pretty pretty good for flow state right for me all right so this point for the tweet box what we're going to do is we're going to go ahead and firstly pop in the image of a character right so in this case if we don't have an image i'm going to give you a placeholder image so i'm going to go ahead and pop in oops an image but the source is this as you can see we're going to see a face pop up in a second if i decide to bring it in over here so tweet box tweet box like so now you'll see the face pops in what we're gonna do is go ahead and style this out so the face should be a height and width of 14 pixels i want it to keep its aspect ratio but use up the majority of the space so in that case object cover i'm going to say rounded should be four as well so that way we get this nice kind of uh rounded effect in the video right um nice stuff hell dragon says amazing thank you so much for the support appreciate you um everyone's asking me about the class name attributes uh how are you resizing or how you ordering them up so in this case have a quick look at my uh start i think it's the css intellisense that's doing that by the way um beyond that i don't think i have anything else just doing that yeah it's just that until when css intellisense so i think it's a new update that they've done so once that's done we're going to go ahead and say margin top of 4 sorry and that will go ahead and space us out a little bit from the top now once we get past that i'm going to create a div and inside of this div we're going to have a form right this form is going to house the followings we don't have actions anymore it's old school this form is going to house this now i want you to visualize this in a way that makes sense right so if you check this out this is like an entire div and you should always try and think of things as a box right so everything should be kind of a like a like a box kind of uh approach so in this case we've got the form inside of here we've got an input field so we've got the input field here then we've got two things inside of this we've got one box with these inside of it and then we've got it pushing this thing to the side so that's how you kind of think about layouts that's what's going on in my head when i when i work on this right so at this point now this form and we want a form because if i type in here and i hit enter i want it to trigger off the tweet right so i'm going to show you how to do that so we're going to have the input here and this is going to say what's happening as a placeholder so it's going to say what's happening oops uh what we can do here is to go ahead and make this like this we can say what's happening there we go and i'm going to have next to it a div right and this div is going to have the icons inside of it so we're going to have a another div with icons inside of it and we're gonna have another div with the tweet button inside of it so this is gonna have um in fact we don't actually need the extra div here we can just do a straight up button this one's gonna say tweet okay and these icons that we're going to go ahead and import from the top in one go so i'm going to import them at the top like here um check this out nice uh zade says for materials i learned so much i got an opportunity to make a mobile app for a foundation in reality that is incredible thank you so much alexandria i will be covering dark mode in a future video so stay tuned all right so at this point for the div underneath here i'm going to go ahead and pop in the following so i've got three icons like look something like this and then i've got one more which is a photograph icon right so i'm gonna go ahead and pop that in here and this is gonna be the photograph icon nice right now these i need to go ahead and put them in a row so flex okay that makes it look immediately better um it's going to say flex should be spaced between the components of two so i'm sorry um space x2 now let's space that a little bit and then we're going to go ahead and say the color should be blue so text twitter nice okay now this button here i'm gonna go ahead and transform this button into the twitter button so into this tweet button sorry so in order to do that watch the magic that unfolds before your eyes right now right so background twitter bam background two out nice we're almost at 400 likes guys smash the like button if you're learning something new right now right so go ahead and pop this here background twitter i'm gonna go ahead and say that the padding on the x-axis should be uh five padding on the y-axis of two font should be bold and i'm going to say the text should be white all right so text should be white like so oops no that's definitely not how you spell white all right there you go and then you can see we want to make the rounded button so to give it that nice effect rounded button and already just like that bam looks really good all right so literally look at the craziness that it changes when you see that now these need to be separated from one another so we go to the parent add a flex they go into a row naturally i want them to be aligned in the in the correct way so i can do as i can say items center and you can go ahead and do that and i want the one the container with all the icons in to use up the majority of space so flex one pushes it to the other side all right so that's how we get this nice effect now moving over to the input field at the top right where we had the image this div we're going to go ahead and add a class name with the one that is housing the form here what i want to do is go ahead and say thank you so much you're sonny my man you're killing it with these great values thumbs up i appreciate you dude thank you so much for tuning in smash the like button if you're enjoying this we're going to type in flex now what we're going to see here is that um we're going to do flex 1 to make up the majority of the room there we go i'm also going to say items should be in the center panning left of two all right now you're probably wondering this does not look right at all right this is because we need to go ahead and apply flex flex one here as well and make this a flex column there we go all right so we've saved ourselves a little bit okay now the final part of this is the surrounding div right so we go to class name here flex this will push everything into a row items on the action now here we're going to do a space x sub 2 so space x of 2 and a padding of 5 spaces out a little bit more right so immediately looks almost there but the image itself something is off here where we're not looking pretty nice right i think it's because i've done item center there we go yeah i don't need that um is it that one no i've changed something up here which looks horrible all right so we've got flair flex with a space x of two we've got our image with a margin top of four we've got the div which is flex one padding left of two and the items should be in center my bad yeah and then we've got the form itself with the flex column we've got the input field okay oh yeah that's it the input field so we need to go ahead and put this a class name the input field has to have a height of 24. so i say it gives it a bit more nice space and there we go nice i was wondering what the hell am i doing wrong all right with the four with the full and then i'm going to go as a text should be extra large the outline should be none and the placeholder text i want it to be uh text of extra large as well okay so it looks very nice so far looks pretty cool okay so this is uh this is pretty nice now when i hover over these i want it to be only this one i want to actually make active from the beginning right morocco in the house thank you osama i appreciate it dude all right smash that thumbs up button we're so close to 400 guys we're gonna get over it right so for that one button the photograph icon what i can do is apply for the class name i can go ahead and say when i uh hover over this one i want to be a cursor pointer i want to have a transition for an animation only for the transform property so only for the transform property duration should be 150 milliseconds so 150 made a mistake ease out again when you hover over it super quick when you hover out that's when it will be a slower hover scale 150 but now check this out look at that silky right so that looks pretty cool we've got everything looking the way we wanted it very very nice now what i want to do guys is we're actually caught up we actually go up to the previous point that we were at so this is why consistency we do this stuff it works well right so at this point what i now want to do is i essentially want to go ahead and um disable this button if i haven't typed anything in here so what i'm going to do is i'm going to use a piece of state to do that right i'm going to basically keep track of as a universe that i missed little chips honey i know i did let's hope that doesn't come back we're going to use a use state hook right so i'm going to use use state and what the state does is it allows us to keep track of what the user is typed in you can use a reference but i want to use this as i want to know if the blocks box is always blank so i'm going to put input here we always use a setup function watch my react basics if you want to learn all of this stuff in with simplicity we're gonna set the default value to empty and as we're using typescript you can always enforce the type if you want to as well right it will infer based on the value you give it here but in this case i want to go ahead and push it on rohan makes hey sonny what's up dude um so the way i connect this to this box this piece of state and react we go to our input field we say the value should be assigned to the input now if i do that and i i'm banging on the keyboard right now and nothing is happening the reason for that guys is because um i need to go ahead and do something called unchanged this is when the user types in an event gets fired off what i want to do is i want to update the input so set input to e.target.value and that's essentially what the user just typed in so now you can see it updates and it re-renders accordingly so everything looks quite nice when we do it like this looks pretty pretty good if you're enjoying this content smash the thumbs up button remember to subscribe to the channel if you haven't already and if you want to join our course and learn more stuff about this zero to full stack here link is in the description make sure you benefit from it all right so let's go ahead and keep going guys absolutely awesome stuff um so what i'm now gonna do is we have the we can keep track of the state so we've got the input button in state so what i want to do now is that button i'm gonna say the button should be disabled if there is no input so if the input is blank it should be disabled now you're probably wondering well the button still works honey that didn't really do much right well firstly um we're not done yet so it will work i promise you right secondly you see how when i hover over it there's no cursor pointer but if i type there's a cursor pointer so it's technically disabled what's happening here is we need to style it based on its disabled properties so here i can go ahead and say if you're disabled then i want to make the opacity 40. so 40 and as you can see now it very easily symbolizes when it's disabled okay so very very nice kind of addition that we can do okay so that looks pretty good so far okay so we've done the tweet box already so that's looking quite good the next step is we're going to go ahead and set up sanity uh the sanity platform right so sunny is a content platform absolutely incredible and you're going to see exactly why so we're going to be using something called the sanity studio to create our structured content and this is basically going to allow us to store our tweets and it's going to allow us to have comments which are referenced to those tweets okay um so as you can see this is how we're gonna have it laid out and structured now if you're excited for sanity smash the like button let me know in the comments right now but what we're going to do right now is set up our sanity project so i'm going to show you how to do it now this is important when you get to this step head over to sanity.io forward sunny it's also the first link in the description what you're going to need to do is install the sanity cli so i would recommend you might have to run sudo sudo before npm install dash g as sometimes you have problems when you install global dependencies in this situation i've already installed it so at this point we're going to go ahead and we're going to go to sanity init dash dash coupon razoo thank you so much dude what's up papa fam og member in the house five euro donation appreciate you bro sick right so we're going to go ahead and copy this line to initialize a project now pay attention here guys so we're going to go ahead and do a command j we're going to go to our app over here i'm going to push this to the side and i'm going to go ahead and do sanity and then i want you to pay very close attention to what i do next right you're setting up a sanio project at this point if you weren't logged in it will prompt you to log in if it doesn't prompt you to log in you can run sanity login to go ahead and do it right so at this point we need to give it a project name so i'm going to go ahead and say twitter to youtube clone um and i don't know if i've used this i'm going to say clone youtube and i'm just going to say xjs next yes okay so i'm going to hit enter now this is our project name and this will go ahead and set up a sanity project for us i'm getting scared because this is the bit where i froze last time okay so in this case this will go ahead and set it up for us and uh it should go ahead and create us it's gonna be a little delay here because it's setting up a sanity project doing all that kind of magic for us at this point right the next thing it's gonna ask us is what um name do we wanna have i'll let it i'll let it load for that bit right but in the meantime i'll go ahead and show you a bit about sanity content platform right so these guys are incredible honestly they they can power up your entire back end they've got loads of really cool you can see it's not just a single person working on it you can have several people working on it in a google docs fashion so really really helps you out um and it really is a powerful platform to be using i'm going to show you how you can even add content from your front end in today's video okay nice there we go oh okay we're still doing it cool i still going to go and sell that's fine so a bunch of other sort of features you can look at the sanity.io website for yourself we also did a build on this very recently called uh the medium clone so we've got a server okay let's try again that's fine sunny and that coupon let's go ahead and do um twitter to next js clone right and i'm gonna say youtube okay let's give it a second try it's fine it could be my internet it could be the fact that there we go that's what i wanted right so it happens sometimes it's normal at this point it's going to say what would you want your default data set so in this case you can have several data sets inside of your assignment yet which is very handy because you can have one for developing one for production you do not underestimate how powerful that is right so at this point we're going to type in just enter because that would give us the default production um so there we go and then the next thing project output part so at this point i recommend you either put sanity or you put suit studio at this point i'm going to type in the sanity and this is basically the folder in which it gets created in so at this point it gives us a project template so i'm going to go ahead and do a blog okay you can do a clean project but i like to use blog and then sort of restructure it based on how i need it so i'm going to hit block this will go ahead and then install the dependencies for us to go ahead and get this set up what we're going to now see as well is we're going to see a new folder structure where we got sanity right so this is going to basically be where sanity will now live inside of our project right so quick little water break we're doing amazing right now honestly this is really really good energy hour in and we're making great progress also boom we just hit 400 likes let's go universe code says this is coding level master code recommends music and more thank you dude it takes a lot of practice but i appreciate you understanding that um so it's just installing right now hopefully that doesn't take too long as well um i don't know the demo gods are against me when my life for some reason but it'll be all right we can give it a second okay so it's still installed and that's fine so at this point once we've done that what we can actually do is run something called a sanity start right so we need to go into the sanity folder i'm going to give you a little brief insight into what we can see here so if i go to sanity you'll see we get all these new sort of things over here right the first thing is is that the data structure for which represents how this is all seen right so how is how do we define what a tweet is how do we define what a comment is right so here for example how do we define any of this stuff it's actually happening inside of the schemas so let's take an example a look at for example the post schema that they give us by default while our dependencies are installing as you can see here we've got an example post we're going to basically manipulate and change all this to basically become a tweet right so we're almost done done with the uh oh my god my voice went it wasn't even chipmunk it just died um so at that point we're going to have uh twitter we're going to make it a tweet instead of a post okay so rowan says hey i've been following your videos since you really love the content you're providing us we are really grateful participating in smart in the accident this year only because of you that's an incredible dude how do you sure and send me a few environments um i'll answer that one afterwards i've described a month ago finish up the spotify budget nice awesome stuff dude thank you for being a part of the pub firm right so at this point we're almost done with the dependencies installing why it shouldn't take too much longer so in this case we've got the tweet we've got our comments so what i'm going to do is change their schema into ours right so what i'll do is while it's actually installing i'll do that so i'm going to go into their schema and i'm going to start changing it around so what i'll do is i'm going to change that post into tweet and then you've got title now this is more sort of decorative so we're going to just say tweet it's going to be a document inside of the sanity back end and as you can see it says git repo has too many active changes i'll show you how to avoid this problem as well by adding the sanity uh there we go nice all right so let's actually pause for a second on that up front let's go ahead and undo that and i'll show you i'll run sanity studio and then we can modify it right so that's already done what you should do is after you can see my get control goes crazy afterwards and that's because it thinks that we've added a ton of new files that's because what's actually happened is sani itself has its own node modules so what you need to do go to your git ignore and i want you to go ahead and type in here um you want to go ahead and put in a sanity so i'm going to go ahead and show you something we're going to type in forward slash sanity forward slash node modules and now if you go to your source control and you hit refresh you'll see it gets rid of that so you don't want to commit your node modules ever in any project it's a bad idea you shouldn't do that right it's because it's bloody huge okay so at this point we go back to our code we're going to go over to our uh terminal and what i'm going to do now guys is on the the left we're actually in our we're running our app here but on the right hand side we're now in our home directory right what you need to do is cd into that directory so sanity so now i'm inside of the sanity directory so s think of it like a mini project inside of your project right so at this point what i'm going to do is i'm going to type in sanity start and what this does guys is it goes ahead and starts off the sanity studio on our machine okay so really really good stuff we're almost at 500 oh i've actually got it running there's already that's why it died on me here so i'm going to go ahead and cut one off and i'm going to go ahead and run it again so i'm going to cut my old one off that was running here so this will go ahead and disconnect yes and we're going to go ahead and run a new one so keep this in mind we've got our tweets our comments all that good stuff but i'm going to show you how we can do the new one anyway all right so the blog template i'm going to first give you a demo at the blog template and then we're going to go ahead and see how we can do it ourselves so if we refresh now you see it connects to sanity studio now as you can see you can't just go into sanity studio and it works you have to log in with the correct provider for the account that you authenticated yourself with in this case i'm going to log into my account okay so we're logging into my account i'm pretty sure it's the one i logged in with so this should be good um let's see if i'm in so let me go ahead and just double check i didn't even click all right let's check this out oh okay so i logged into the wrong account i was on proper react all right so let's go ahead and log into the correct account proper react there we go and as you can see it logged me in so that's a good demonstration of how sani is secure right so this is the example template that you get so they give you an example post if you're going to create a post for example you can start creating your post you can create an author which is linked again structured content right so at this point i'm going to not run through all of this because there's plenty of awesome tutorials one by cat on youtube is amazing but i'm actually gonna go ahead and start restructuring this based on how we need it so the first thing i want to do go to our post in our schemas i'm gonna change this now to be a tweet i'm going to change the title to be a tweet and instead what i'm going to do is i'm going to go ahead and start changing this around as we need it so instead of text i'm going to say it should i instead of title it should be text and this is going to be the text in the tweet okay the next thing is going to be a boolean option right which is basically going to be where i'm going to get rid of this one and i'm going to say block tweet and this is going to be you can actually add a description which is going to come up in the in the ui of the sanity studio and here what we're going to do is we're going to say admin controls toggle if tweet is deemed inappropriate right so basically as an admin imagine you can come in you can toggle and you can actually ban a tweet so that's what we're going to basically be doing here right so this is going to be a boolean value the next one is going to be a username so it's going to be username this is going to be username with a capital username the type is going to be a string right but you can go ahead and eventually kind of change that out if you want to be a referenced object and then we've got profile image and image right so image is going to be representative if you basically let me get rid of all of this for now so all of this up to here so we're gonna have the following so oops uh i've deleted something too far one second let's go ahead and close that off there we go okay so we've got profile image which is gonna be the image of the user and we've got image over here which is going to be the tweet image if you added one okay so at this point i'm going to do that now i do want to do something i want to change my camera just so it lightens up a little bit because right now it's a little bit dark um so let's go ahead and just change that a little bit give me one second but this is an example of a schema right so this actually helps us out with a few things um there we go now i'm super bright it helps you guys in seeing me when it gets a bit later on okay awesome stuff okay hopefully that's a bit clearer to see me now there we go nice makes it way more vibrant right okay carrying on with the important stuff i'm also going to rename this uh file to become tweet right it's a tweet right now you're going to see a bunch of errors things are going to break because we've got references going on the second one i want to do is change let's just go ahead and change um block content let's change this one to uh comment okay um actually no sorry get rid of that one that's fine you can get rid of that change the author because we're not actually going to be using the author we're going to change that one to become comment right so i'm going to change this to comment and what i'm going to do instead now is for comment it's going to be the following so i'm going to change the top three lines to be comment this one is going to be comment itself so the comment that the user typed in we're going to change this to a title of comment and it's going to have a username a profile image um like so so we're going to get rid of these two and we're going to pop in a profile image and i'm going to get rid of this bio get rid of the preview over here we're not using preview today and then for the final one what i want to do guys is i basically want to go ahead and reference the tweet right so basically what i'm trying to do now is reference the tweet itself so this is where the structured content comes in so what i can do here is i can go ahead and say that the name should be tweet the title should be tweet and the description should be basically explaining that this is the reference to tweet that the comment is associated to the type here is not going to be a string it's going to be a reference okay then we're going to have a special thing here where we say to and you basically pass in the type that you're referencing to so in this case it'll be a type of tweet this will allow us to do this clever sort of logic right and i'll show you how we do it in a second so the final thing is i can delete the category we're not going to be using that and we go over to schema this is where everything basically gets tied together and we can basically go ahead and rope it all together so at this point i'm going to basically delete all of this i'm going to delete this and we're going to instead import the new ones that we made so block content is now going to become tweet and we've got category and if you by the way if you want to know that trick is you highlight it command d to get multi cursors okay at this point i'm going to say comment nice um and then we're going to go ahead and antonio says is there a new link for the logo guys if you need a link for any image just go find another one it's completely easy to do rather than using my one it's completely fine you can find another twitter logo it's fine um so at this point now what i do is i simply put in tweet and comment and this will create for me the special schema types right so this point looks pretty good okay we've got our schema we've got everything the way we wanted it so let's see if it runs okay so what i'm going to do is go over to my sanity studio and you can see we've got tweet and we've got comment so first thing i want to do is create a tweet and i'm just going to draft this up so imagine this was this is a demo tweet right and it's not blocked right now so imagine if i did like not blocked user name was sunny sangha so sunny sangha profile image let's find an image of me somewhere on the internet right so let's find this one so i'm gonna go ahead and grab that image of me okay i'm gonna go ahead and pop that in here tweet image let's go ahead and find this image let's use this one copy image address let's pop it in here nice and i'm gonna go ahead and publish this all right so you can see we have a drafted save but now i've actually published this so this is actually in the database now right so comment now what i'm going to show you is this is where structured content comes in clutch if i go ahead and create a new comment what i can do is i can actually reference the tweet so notice how cool this is it finds my tweet now it's attached a reference to that tweet so we can do all kinds of cool joining stuff with this right so at this point what i want to do is uh antonio cortez a 10 donation thank you brother that is massively appreciated that is huge man i really really appreciate when when people come through that really a massive stuff man comment here so we're gonna go and say this post uh this is my first comment oops first comment the username would be sonny sango whoever typed in the profile image in this case we could do the same thing that i had previously which was let's just use this image for now okay so i'm gonna go ahead pop this in now there we go and obviously the goal would be that that all actually becomes like as we type in it will do this for us and then do a mutation and so forth so i published so now i've got my first tweet and i've got my first comment so how do we now go ahead and connect to this on the front end and start pulling in this information all right so i'm going to show you guys if you're enjoying this and you're excited for learning about this bit smash the thumbs up we're about to cross 500 right huge huge stuff right so i never miss any of sonny's birds ben renny i know dude thank you for tuning in though that's the main thing right so what we're now going to do guys is we're going to install something called sanity uh next sanity okay so we're actually going to install this dependency right now next to sanity really really great package it's going to be our toolkit for working with sani inside of next chest now what i've done is i've saved you a bunch of headaches searching through this documentation all this kind of stuff and you can just go ahead and copy my sort of shortcut approach to getting set up so go to package.json create a new file at that level we're going to call it sanity.js okay now at this point what i'm going to do is i'm going to go ahead and install next sanity firstly right so going over here we need to install a few things right it's not just next sanity it's going to be portable text read and sign in image url okay so at this point i'm going to do command j and i'm going to create a new so we've got the studio running in the middle app running on the left and we're gonna do yarn add on the right okay once that's done i'm gonna go ahead and import the following right so i'm gonna go ahead and import this right here so give me two seconds right i'm going to import the following two lines create image url butter and create client okay so we're not actually going to be using image url but i don't think in this one um yeah we're not actually going to be using that so we don't actually need to do that we only need to create client at this point right so what we now need is something called a config right so what i've done is i've actually got this code block from something that was in the documentation that i found okay so don't worry i didn't get this randomly but you guys can feel free to copy it right so essentially just a config and what we need to do is basically i'm going to remove these to make it super simple for you to see right so boom now what we're doing here guys okay is we're essentially going to go ahead and pass in the data center now i'm going to go ahead and find our application on the sanity website so sunny dot io let's go ahead and log into my account and we should be able to see it let's go to login almost at 500 likes guys let's go all right we can see manage and now you can see this is the new and you should see boosted free if you use my coupon code right so that's the one that you want to be using so at this point we've got this this is our correct project space right so we need to do a couple of cool things here right the first thing is it's trying to target which data set now notice how we only have one data set here and that is production unless i pass in something else it will use production okay so that's basically if you want to have like you know an environment when you're doing development work you can do that i'm not going to go too far into environment managing but that's how you do that project id again next public sanity project id and we've also got api version and this one over here right so what i want you guys to do is basically add one more line for me which is basically how we go ahead and create a sanity client so that way we can do fetching inside of our app so this one right here and basically we're going to use this throughout our app to basically be able to communicate with sanity's back-end okay so at this point i need to pass in something called environment variables so in xjs to pass in environment variables it's actually very simple you create an environment file called m.local and what you can do is basically go ahead i'm going to skip this song it's a bit loud um i'm actually going to go ahead and try some of our new songs out if you haven't already this is a papa fam playlist check it out so we'll see how this one sounds right let me know what you guys thinking all right quick little water break as well because my mouth gets super dry from talking right looking super orange right now i need to normalize the the color all right so at this point we're doing pretty good okay so um at this point what i want you guys to do is go ahead and create your first environment uh variables okay so what i'm gonna do here is create the next public sanity data set now i want you to notice something whenever it says next public that is basically telling next yes allow for this uh environment variable to be seen on um the client as well as the server i'm not going to get too far into all that but that's basically what is happening okay so jay uh sort out um so we've got that and then we've got next public sanity project id all right so we're going to go ahead and do this um and then there's jokes i don't know what that is um so we've got next public sanity data set uh and then we've got project id so firstly you can imagine the project id we get from here this one i'm going to keep it as production okay and then we've got some cooler things here so sanity api token is a secret key that's why i'm not making it next public i only want it to be visible on the server not the client so not on the web browser right now in order to get this key what i'm gonna do now is hide this for a second right so i'm gonna go ahead and show you how to get the key and i'm gonna basically put it in here okay so pay attention now i'm gonna go to api okay i'm gonna go to api i'm not feeling this song what is this um yeah so i'm gonna go to tokens and i'm gonna go to add api token and here i want editor permission and i'm just gonna go ahead and say here that i'm just doing my uh let's just say twitter clone right but you can basically make this whatever you want okay at this point i'm gonna click save and what you're gonna see on the screen is i'm gonna click save and it will show you a value and it only shows you that value once okay so don't make the mistake of getting rid of this right so you can't copy that value and you want to go over to that file that i showed you before okay and basically so i've copied the value and you're going to go to this file and you want to paste it in here right so i'm going to paste it and close this file so i'm going to paste it and close the file like so okay so once that's done we are going to need to restart our app right so i'll show you how we do that because whenever you change an environment variable we basically go to our left app over here we do ctrl c and we do yarn run dev again and now what you'll notice is it will say it loaded the environment variables from environment.local so make sure that you do that and now basically our configuration is pulling from the correct thing because it has the details right what i'm also going to do is change my color because i look like an oompa loompa right now on this camera um that's because of the color correction but let's change it up in a sec you're going to see some magic right here all right give me two seconds but that's essentially how we do the sanity part of it right so it works really nice and watch my face change suddenly whoa nice all right that's way easier to look at okay so that's pretty cool that's a lot better that's how it should be okay so um at this point now what i'm gonna do is i'm gonna go over to our index um right so index and what we wanna do guys is i'm gonna do something called a server side render all right so i'm going to tackle a few things here what we're going to be doing is we're going to be basically making our first end point which is essentially going to be on the next js but so next js out of the box gives us api endpoints very easy to implement i'm going to show you just how to do it we're going to create one for fetching tweets but we're going to fetch from our own server so what i'm actually going to do here rather than contacting sanity directly from our browser i'm going to teach you how to make a full stack app so you can have a front end i'm going to create your own endpoints and then we're going to connect to our endpoint which then on our server makes communication to sunny it's also a safer way of doing it okay so um so this is looking pretty pretty good okay so at this point let's go ahead and do the following um let me just double check something right so at this point we're gonna go ahead and uh we've got to create a server side render so in xjs it's very easy to actually go ahead and tell a page or something like that that we're actually doing a server side rendering now if you're wondering what the heck is this other side render you keep saying it right basically typically normal react apps will load up the entire bundle on the user's browser that takes a long time sometimes javascript can take a while to load up and sort of download kind of unpackage itself do all that kind of stuff so in this case what i recommend is doing something like server-side rendering where it makes sense this basically is where all of that javascript work is handled on the server and the user simply gets the output of that response right so what we can do is index.js makes it super easy and there is actually an awesome lesson i've done on server side rendering so go ahead and check that out if you want more information all you need to do is add in this special function called get server side props this takes a special type called get server side props because we are using typescript we're gonna have to import that from next the next thing is we've got an asynchronous function which gives us something called the context and we need to return a function now as you can see here it's complaining now this squiggly jargon is basically just saying that you're not returning props right so if i was to go ahead and say return um props now you can see it doesn't freak out anymore so basically when we base when we build up this page on the server what we can do is all the information that we needed to prefetch we actually pass it in the form of props to the component that then gets shown on the screen right so at this point i'm gonna do something along the lines of this so i'm gonna say something like const tweets right and we're gonna create a type for this which is going to be tweets right so we're going to say something like a weight and i need to kind of create a function here called fetch tweets right so something like this fetch tweets right so what i'm going to do guys is i'm going to create a little utility folder which is going to be handy for any utility functions so inside the package.json at that at that level create a new folder call it utils or lib or whatever you want to do right inside the utils i'm going to create a function called fetchtweets.ts right it's not tsx because we're not returning any jsx from it at this point i'm going to create a function in here called am someone's export const this is going to be fetch tweets right this is going to be an asynchronous function oops uh an arrow function which is asynchronous and then what we're going to do here is make a rest api call to our own back end okay wow that's pretty cool but that's not what we want to do right so at this point i'm going to go ahead and create a back-end endpoint right so if you're wondering what does that mean well nexus gives us an api out of the box so what we can do here is we can go to our api and as you can see they give us an example hello right so as you can see this actually returns something called john doe so to prove to you that this actually is there we can go over to oh and i just shown the key there we go that's fine um we can go ahead and get rid of that um i'm going to go to localhost um no sorry another cost yeah low cost forward slash so i've got this running all across 3001 for api forward slash um hello and as you can see it says john doe right so as you can see as a living and breathing api endpoint right so and the reason why it does that is again everything is through your page directory structure okay we're so close to 500 likes guys let's keep it up let's keep the energy high we're doing really well okay so at this point what i'm going to do is i'm going to copy i'm going to actually create a new file here and uh oh nice suddenly made me quit my job for 14 years about to join the papa farm kelvin that's what i'm talking about join us at zero to full stack hero i want to see you in there dude all right so at this point i'm going to create an endpoint called get tweets right dot ts and what i like to do is i copy whatever i have over hello and i basically will rebuild it as i need to okay so i'm going to firstly create the endpoint and then we're going to go ahead and go and then we're going to go ahead and actually do the rest of the stuff to go ahead and communicate from the front end so get tweets okay so first thing i want to do is i need to import my sanity client okay so import my sanity client the one that we prepared earlier the second thing i want to do is i'm going to go ahead and actually firstly build out um i need to define what a tweet looks like so i'm going to create a type definition so this is actually the response that where we're assuming that we're going to send back so i'm going to go and say that we're actually going to expect to get some tweets back and i'm going to create a custom type called tweet and it's going to be a tweet array now this is complaining because we haven't made a type so if i want to create a custom type go to package.json that level create a new typings.d.t.s file this stands for um this stands for basically type definition files okay so at this point what we can now do is create our own type definition file so in here what i'm going to do is i'm going to have a tweet so i'm going to split this up and i'm going to show you how different types can extend off of one another now when we get our tweet back from sanity it comes with a bunch of other information ids this kind of stuff but when we're dealing with that tweet inside of our app we don't actually need that information so i'm going to break up our tweet and our comments into treat and tweet body and then show you how it works right so the first thing is we're going to have export const tweet body and the tweet body is basically going to be accessible for from the client right it's going to be the stuff that we're using on the client it's going to include the text which is a string it's going to include the um username which is a string and why is my thing freaking out right now export type oh sorry type i was wondering why isn't it coming up all right um we've got a profile image uh which is a string and we've got image which is a string image is also an optional because it's not 100 required now i want to show you something like this right thank you so much guys for the uh kind comments this youtube channel better than the signs there is this thank you so much that's amazing dude i appreciate you so much we're about to break 500 likes let's go so sick man let's try to get the music back let's go back on there what's this oh that's i'm gonna kick start off so 500 likes it only makes sense to bring in the energy right so what we're going to do is we're going to go over to yeah tree body so what i want you to notice is this right here is very closely related to how i've set up our schema so actually i'll show you here so if we go to our schema you'll see that is how we've got we've got the text username we've got text username profile image and image block tweet we're gonna have in the uh additional bit in a second right so this is basically gonna be the client side of things and we're gonna have an interface and the reason i'll show you why we do an interface and this is going to be for them full tweet and what this does is it extends the tweet body so it's going to get all of this as well as a bunch of other stuff and what this actually what we get back from sanity is a bunch of other fields such as id which is a string such as underscore created app which is a string such as updated app we also get rev so underscore red which is a string and we're going to set the type that comes back so in this case it will be the type here sorry no the type would be associated to the name here so we're going to say the type is of type and we're going to give this a hard value of tweet right the next one is going to say block tweet so that's going to be that boolean value that comes back awesome stuff okay reason why i'm putting it here is because again this is coming back from sanity i don't really want to the user to have ability to pass in block tweet information that kind of stuff where i want to kind of only come in one direction so now if i use tweet they're gonna have all of these things as well as the text username profile image nice okay rosie maya says oh my god you're live was getting ready to sign up for your course and then i saw boom live if you jump in honestly welcome to the course right zero to four sakura you know where it is popularity at the compost course i want to see you there rosie um but thank you for tuning in all right so this is looking sick we've got this so i'm going to go ahead and import my type definition or some stuff and as you can see now we've got strictly typed tweets awesome looks good right so i'm gonna go over to my get tweets and we're gonna go ahead and actually make a fetch to the backend on sanity right so now i need to introduce you to the world of grok all right so grok is basically how we query sanity cms so if i go over to santa ecms i'm going to show you how it roughly looks okay so is this the one yeah so we're over at sound ecms right now so we've got this demo tree and we've got this demo comment so i'm going to show you how we can use the grok querying language to actually go ahead and make and fetch information from sign ecms so let's go ahead and get rid of this for a second and we're going to go ahead and get rid of this um so we've just got simply a comment right so what i'm doing is i'm saying select everything where the type is of type let's go ahead and do tweet and if i hit enter see how it's querying and it found the tweet right now what is this well this goes along the the kind of um this goes along the kind of idea or sort of approach that graphql uses in the sense that what you do with graphql with grok is you define what you expect to get back or what things you require back so in this case if i just specify i just need the id back notice how i'm only fetching the idea it makes the request lighter and everything like that in this case i'm getting everything back to make life a bit easier so if i do this i'm getting everything back okay so that's really awesome now the second thing that you might have not known is that you can pipe on so you can say after you get these results i want you to go ahead and then order it by the created that time so by the created app which is what we're going to do descending okay awesome stuff now this is great it works really nice but what if i want to exclude the blocked tweets what i can do is i can say okay get me all the things with a type tweet and don't show me the things that are in the block tweet now you can see this is block tweet false so it's fine but if i go over to my tweet and i go here and i basically enable block tweet and i publish that change and i go to my vision and i go ahead and do a query ah now it doesn't show it because it's querying out the block tweets so that's how we're doing it so i'm going to go ahead and unbl unban that tweet but really cool you can use this for content moderation whatever you want to do right imagine the way i see it is imagine you had a reporting functionality where somebody would be able to report a post goes into a document of reports and then admin can go through and basically say um yeah this one's this is bad and then they can burn it out and stuff like that super easy way of doing it all right ben gray says wow sonny's eye again dude that's what i'm talking about quick water break we are doing insane guys 500 likes let's keep on going strong amazing energy from you all let's keep crushing this guys so we've got this looking pretty nice so far all right so what i'm going to now do is create a request over to the backend so the way we do this is we need that grok command right so what i can do is grok is basically passed into us from next to sanity and i didn't install this no they're not oh we need the type definitions right so if you need type definitions what you can do is go ahead and do the following you can install something called a developer dependencies because you don't need those things in the production environment so we say yarn add or mpm install save dev in this case i'm going to do dash dev and i'm going to say at types forward slash next sanity and what this will do is it will find the type definitions and it will go ahead and get it for us so um this one is actually or it's next on any corresponding type definitions that's actually did i install next honey i did i'm pretty sure i did but i'm gonna just sanity check myself um let's check it out one more time let's see boom okay i don't think i installed it okay interesting oh no okay oops sorry my bad my bad i was inside the sanity folder don't do that all right next uh remove this is something you need to be careful about remove next sanity from the sanity folder so yes be very careful here right i made a silly mistake there it happens to the best of us basically what i did there was i was in the wrong folder and i was installing dependencies into the wrong thing but what you really want to be doing here is you can actually open up another one let's forget that let's go back here go cd dot dot to go upper level now we're in the main folder then you do it so now if i want to do it add types type sanity um it's not finding that one though let me see if i installed it correctly that's probably why it didn't do it by the way so i'm gonna yarn add sun next sunny there we go so i made a mistake before and that's why i wasn't finding it so you shouldn't install the type definitions for me now okay so at this point what we're gonna do is we should get grok over here from it there we go nice and as you can see we get rid of it okay so what i can do now is i can create something called a query right so what i'm going to do here is i'm going to call it the feed query because we're basically fetching the feed of um of tweets right and all i'm going to say is grok and i use backticks here okay so ticks now what you can do here is honestly as simple as you can go to that vision you can copy this out and you can basically paste it in there okay so that's literally what we want to do here we want to basically run that over that's our grock command right and we're going to use it you see some similarity here with um both um graphql and this kind of approach right so everything is looking pretty good right now okay so at this point what i want you to do guys almost a 600 likes just keep going very strong stuff here right come on jay all right so at this point i want to go ahead and i want to do a fetch so we're going to say cons tweets oops tweets of type i'm going to say it returns back of type tweet equals right i'm going to do a weight so i need to make this an asynchronous function await the sanityclient dot fetch and we basically pass in the feed query and what this is essentially doing is programmatically executing this right so at that point we now get the tweets back okay so what i want to do is i want to prove it to you that we actually get the tweets right so what i can do here is i can console log tweets tweets and what i can do here really is i can just return the tweets right so i can actually go ahead and say something like this return the tweets awesome so what i can do now is if i go ahead and open up my server so this gives me the logs right so if i go ahead and see my logs now if i go to this endpoint guys so if i go to localhost forward slash api forward slash get tweets it should actually make a call and go ahead and fetch the tweets there we go bam it returned the tweets and we can see it in our logs and we can also see it here so now we've actually got access to those tweets we can successfully programmatically run the command as you can see we get all the things enforced by our type definition awesome stuff smooth as hell as well console.log nice so now we've got an api endpoint that we can go ahead and connect to so i'm going back over to my fetch tweets we're going to go ahead and implement this now so what i'm going to do is say consterez all right it's only great to catch you at your live coding session thank you so much dude i appreciate you being here and subscribe if you're enjoying the content right so here i'm going to say equals await fetch and then what i'm going to do is now what i need to do is basically they only allow you to use absolute urls so what i'm now going to do is create a environment variable so i'm going to firstly go to my environment.local and i'm going to hide it for a second okay so what i'm going to do is i actually have a nice little hide stream little thing that i can do now so hide stream does it work no hide stream let me just see if i can enable this one second it allows me to hide certain things on the screen it's kind of a cool little uh add-on hide stream where is it how do i use this lightroom yeah what's up okay high stream let's try out boom high stream you know what nope that definitely did nothing um or maybe i disabled it actually no i didn't use it okay interesting okay so what i'll do is i'm gonna just basically remove this for a second so i'm removing my api token for a second okay so i'm hiding it over here and what i want to do is i basically want to go ahead and create something called the next public base url okay and this is basically going to be my base url and this is going to change based on where i'm at right so in this case it's going to be the localhost 3000 when we deploy it's going to be the url that we deployed to right so i'm going to use that now what i'm going to do is i'm going to put my signing api token back here and then close this file okay so i'm going ahead and i'm putting it back in there and i'm closing the file okay sick command j we need to restart our terminal because this is how we do it so restart the terminal yarn run dev awesome stuff now what i'm going to do here is use backticks so i'm going to do backticks and i'm going to go ahead and say process.environment dot next public base url and what i'm going to do is forward slash api forward slash get tweet so basically i'm making a connection to that endpoint that i just done before then we're going to get the data from this we're going to say await res.json so we're going to pass the json response so we get back then what i'm going to do is i'm going to say the tweets are basically going to be inside of there so we're going to basically cast it and say i'm sure that i'm getting tweets back we're going to import our type definition we're going to go ahead and say it's going to be inside the data.tweets you can use destructuring but it's okay okay so at this point um all right so at this point we're going to go ahead and say we're going to return the tweets afterwards okay so now let's go ahead and do this guys focus please no childish stuff right 600 likes on the way this is what we're doing including ej all right so let's go in this so at this point we're gonna go ahead and we've got the fetch streets we've got this so now i can use this on the front end right so this actually makes it call to my back end right so at this point if i go to index and i call fetch tweets which i can now import bam i get my tweets i can now safely return this from my page so now i should have the tweets over here okay now let's test if this works right firstly i need to get my props come through here i need to define what the prop types are okay so on my index page what i can do here is i can create an interface for the props okay so i'm going to go ahead and do interface props like so import my tweet definition and i'm going to go over here i'm going to destructure my tweets like so and i want to test something now okay firstly we can get rid of the next page size so and we're going to go ahead and do console.log tweets okay and i'm gonna hit save and i wanted you to check something now i want you to press in your inspector go to your console and we should see so in this case we see undefined okay so we need to oh no we got it there yeah so refresh there we go we've got a ton of stuff right now oh no what i've done is i've gone ahead and got my other sanity api key okay so i need to find i need to go over and get my the new one that i just created so i've gone to the wrong sanity project next alright so i need to go ahead and get my actual key oops um that's funny i've actually got a ton of other ones that i've gone to so i'm going to go back to my login so let's go ahead and go here i actually went to the wrong thing so i think it was actually okay this is why this is why it's confusing so i think the correct project that i just did was i'm gonna i'm gonna try and not get this one mixed up let me just double check this one is my old project which was s or 0q so let's just double check that i'm not going to get this wrong zero key okay so i think it's this one and this one shouldn't have a key there we go okay so it's actually this one i'm actually connecting to youtube next.js js clone youtube actually okay so the other one okay you guys won't run into this problem it's fine there we go okay so that's my project id i've done the wrong one okay so i'm going to go back to my environment variables and i've actually put in the wrong and i haven't it's fine oh yeah interesting okay so i've got back a ton of things oh okay somebody spammed it that's why oh so annoying okay no that didn't they didn't they wouldn't it's not fun okay so it's just me all right so i'm gonna get another key i'm gonna save myself the i'm gonna get another key before i go crazy with this thing right so yeah okay so i'm gonna go ahead and get my key i'm gonna go back to my code i'm gonna pop in my new project id which is fine i'm gonna delete my sanity api token so you can see here i've got my this now if i go ahead and open up a new token and i go ahead and say something like this i'm saying new token uh demo editor and save right so this is gonna give me the token and i'm gonna go ahead and copy that token i'm gonna go back to my code and i'm gonna go ahead and pop it in like so okay oh no i know why that was happening okay sorry guys it was my fault my fault uh oh nice rosa maya papa platinum she joined papa platinum i think you've joined right awesome stuff welcome so at this point i've got the key in the background keep making that mistake right so what i was doing guys was so silly mistake right i was making a request to a local host 3000 when really it was 3001 that i'm running my app from because the other one was a demo so that's why it's happening so if i go back to my fetch tweets um sorry if i go back to my environment local file i remember i'm running it on 3001. that's why i've got another api running on 3000 so what i've now done is i've now changed it you guys won't run into that issue because you're running it on 3000 but what i've done is i've changed my there we go that's fine i was running i was like how the hell does that work makes sense we're past it whoa she's nice joined in awesome stuff thank you for being a part of the community dude oh this is sorry um awesome stuff right so at this point we're fetching awesome we actually got our results okay nice so now you can see i've actually got my one tweet nice okay so now we've got our stuff coming through so what we can now do is i can you see my um if i go to my index we got the tweets over here i can go ahead and get rid of that for this feed i can pass it through as a prop so i'm going to pass my tweets down as a prop okay so now we're getting into the juicy stuff guys so if i go into my feed into my feed what i can now do is basically tell it that you're going to be receiving this as a prop so what i'm going to do is create an interface for that yep uh immediate says this is live i hope that answers your question right and then i'm going to go ahead and destructure my tweets assign it a value of props awesome stuff and then calvin says the force is strong today yes it is almost 600 likes as well sick all right so at this point now i have my tweets available inside of my feed so now naturally guys what do you think i can do i can go ahead and implement my tweets down here so this is where we actually build out the remainder of the feed so what i'm gonna do is i have a div and inside of my div i'm gonna go ahead and have a tweet component now it's a bit confusing because i'm going to have a tweet typing up here so what i want to do is i need to create a tweet component i'll show you how it works so we're going to create a tweet component tweet.tsx and rfce this is our tweet right awesome stuff and then i go back to my um my feed sorry go back to my feed and you can see we're gonna have a name clash if i do this right so what you can do here is you can say import import uh tweet from and then i can go into my folder so oops i don't know components uh tweet right but here i can do as tweet component so you can basically rename it t component or even to be fair you don't even need to do that because it's default export yeah there you go tweak component right so now i can change the name of it when i import it and we can call it tweet component awesome stuff right but what we're actually doing is we're not gonna just render it like this i'm going to say go through all the tweets so jsx go through all the tweets map through each one and for every single tweet i want to do a return to parentheses and you'll notice how it knows that each one is a tweet because of our typescript definitions okay and uh somebody says why not web3 guys give me a chance i haven't even i can't do everything on one go right so i'm gonna have a tweet tweet component and then inside of here now the first thing you should know about is that whenever you have a list or mapping or anything each thing should have a key and i'm going to say that each key is going to be the id so notice how i look at that beautiful i have my type definitions right and then i'm also going to pass through the tweet because we're going to be using the tweet when we render it on the ui okay this is going to freak out because we haven't said that a tweet is a prop key is something which is baked in and it works right so tweet component let's click in i need to go ahead and say i get props of type rock and as you can imagine what we're going to do here is basically go ahead and define the interface props like so so if i go up here interface props and it's going to be a tweet boom i get it right and i'm going to destructure it so i get my tweets pulled through so as you can see now we basically fed it through okay so now the cool part now basically we render out the tweet so we're going to go from what we have here which looks pretty boring to this nice looking tweet okay so really really nice stuff okay um we're gonna be covering everything on this channel honestly we really are we just need time okay so really cool stuff we've already got people joining the papa fam from this video it's absolutely incredible let's keep this energy hyped nearly at 600 likes that's what i'm talking about okay so at this point we got the div sorted now i'm gonna go ahead and basically structure this out the way we need to so first thing i want to do so i'm going to have a div with an image inside of it that image is going to be the user's tweet sorry the tweeted profile image so in this case it's going to be tweet dot tweet dot profile image okay so there you go boom uh underneath this we're gonna have a div and inside of sorry not inside that image yeah we're gonna have a div and inside it here we're gonna have another div and we're gonna have a p tag which is gonna be the tweet username so tweet username and then underneath that i'm gonna have a p tag and this is basically where i'm gonna kind of fake the username okay so i'm gonna show you a little trick that i'm gonna do but basically i'm gonna go ahead and say that the username should just be the person's name uh without symbol so this is obviously educational but if it's a real app you'd basically change up so but in this case we're going to say tweet dot username dot replace and basically what i'm doing here is replacing all of these spaces with an empty string using a regex and i'm going to say two lowercase two lowercase there we go and as you can see it says atsunisanga so kind of a cool little hacky thing right but it's cool for this kind of example right so at this point looking pretty sweet right underneath there we're gonna have something like so i can get a timestamp from tweet.underscorecreatedapp but i'm gonna use something called the time ago library so this is actually called react time ago and i'm going to show you it's something like this so if i go over to react time ago this is actually a really cool library and it allows us to say how long ago a tweet or how long ago anything was actually there so you can you pass it time stamina tell us four seconds ago five seconds ago that kind of thing so what do i do i go here to react time ago i go ahead and install it make sure you're in the right directory no don't make my mistake that i did last time let's go ahead and move this out of the way let's move this out of the way and um i'm going to go into yarn add react time ago cool then i'm going to go ahead and import it so come on j pop it in like so and this one is freaking out it's because you says you haven't actually passed in the declaration files so in this case when they don't include it by default you can even do the npm command like so or you can actually install the type definitions yourself for yarn it's a little bit different you say you aren't add dash dash dev then you do add types hope that made sense yep awesome now that should disappear boom be gone thank you and the next bit we're going to have underneath the p tags we're going to have the time ago and where is it to time ago component this takes a bit of an argument this takes a date which is actually going to be the tweet dot created that so tweet dot create it up and then we're going to go ahead and style it a little bit so the class name here is going to be um text should be small and i want it to be text gray of 500 text grade of 500. hey look at that 40 minutes ago wow it's been a while right so um so we've got that happening over there now what i want to do is the div surrounding all my stuff i'm going to go ahead and say class name this should be a flex container it should be items center or to one another with spacing along the x axis over one looks pretty good the p tag i'm going to go ahead and start this up this username i want it to be a margin right of one with a font i'll give a little bit more room and then this one over here i'm going to say class name should be on small screens i actually want to hide it because it's a bit too big and then i'm going to say the text should be small anyway the text should be gray with the 500 so it matches the timestamp and it's only going to be shown on small screens and above so as you can see now only when we get to the big screen to show the username look how responsive that is honestly it's so incredible right so at this point the surrounding div that one's actually fine we don't need to do anything the image we need to style so this one i'm going to say class name equals um height and width of 10 so height and width of 10 rounded 4 and object cover jay i think we're all good right let's keep going all right so we've got the uh div we're gonna go and say it should be our flexbox puts it next to each other and then i can go ahead and say space x of three space oops space x of 3 awesome stuff let's go all right so that's looking pretty good so far let's go over to our main 12 let's see okay so that's looking quite close you see that yep looking pretty good okay and the text itself so where have i got the text i'm actually showing the text at the moment oh yeah so underneath the time ago i'm actually going to have outside this div i'm going to have a p tag of i'm going to say tweet underscore text so tweet underscore the sorry.text and there you go this is demo2 yay look at that looks sick all right awesome stuff gerardo thank you dude he got super content thank you how do you know all those tale and css tricks i set myself crazy challenges like building stuff like this and then i set a deadline and honestly the things you can do when you're under pressure on the deadline incredible and plus it's a lot of practice it takes time but honestly youtube videos i watch a lot of the tailwind tss channel stuff helps me out a lot okay the next thing i want to do is if there is an image so tweet dot image only if there's an image do i want to conditionally render so parentheses an image and that image as the source will include the tweet.image tweet dot image okay so is there an image for this one i believe there was yes it was boom and for this image we're gonna go ahead and say class name and this one's going to be a this one's actually pretty interesting how i do i'll say margin around it should be a five margin left of zero okay and then i want to go ahead and say margin oops margin left of zero margin bottom of one max height here i want it to be 60 okay i want the corners to be rounded so i'm kind of going for the twittery theme right um and i said object cover so if it ever gets too big i it to cover a shadow sm a very subtle shadow if i made it xl you'll see that it's quite a drastic shadow but shadow sm is fine okay now if you see look at that we're actually getting our tweets looking pretty close to what we need all right all we need to do now is go to our surrounding div and style this one up a bit all right so we're going to say flex flex column and we're gonna say space x of three hit save and i'm gonna go and say border y sub order at the top so right there and then naturally you see there's there's no breathing room here right so padding of five is needed bam and i also want to make that line a little bit thinner so i'm going to say border gray 100 bam just like that looking golden like look at that like seriously so sick right smash thumbs up on if you're enjoying this right now um we have a question from someone saying hey dude will this video be uh yes it is all recorded and up afterwards all right awesome stuff let's go how can i be more disciplined in programming just join a community honestly like zero to full stack hero this is literally what we do like we just code together and we do this kind of cool stuff together i also want to add a little kind of a spicing right which is this little icing on the cake right it's so small but i like it all right we'll go here and i'm just going to do a tiny little bop a little dot okay um so there you go nice little dot right okay demo tweet looks good now next thing i want to do is add these little buttons in underneath okay so what we can now do is i can go ahead and get the um i need to make a div underneath all of this good stuff right so where we had the timer go uh where we had the div the image outside that div outside the next div over here i've got another div and this div is going to have all of these icons inside of it okay so this one is going to have a div for the first icon a div for the second icon and so forth right so div and so forth and if you ever want to do a little trick you can say div times by two and you're getting that two little divs right a kind of cool little trick okay so what we can now do is we can go over to this one i'm gonna install i'm gonna sorry import all the icons at the same time to make life a little bit easier awesome stuff okay so um yes universe code so border y means border one pixels for the y axis yes exactly um if you do border y two there's two um cool stuff so now what we're gonna do is start pulling these in so i'm gonna go ahead and firstly pop in this one so chat oh icon two the second one the third one and so forth right so i'm gonna pull these in as they need to be um the next one um and the next one under here like so bam awesome stuff okay so you have these icons here i want to style these up all right so what i'm gonna do is i'm gonna go ahead and basically put multicaster so if i do option and i click click click now i've got multicut says as a little trick now i can say flex cursor pointer item center space x of 3 text gray of 4 text gray or 400 now what you could do here is because we've got repeating classes you can create a custom utility class i'm not going to do it today because i've done it in several other builds but just know that that is a possibility class name here i'm going to say flex justify space between and i'm gonna go ahead and also say a margin top of five bam look at that look how crazy it just works my team says excellent baby that's what i'm talking about nice cool stuff right um so it's looking pretty good right at this point i also want to have a number of comments here right so for now i'm just going to say something like five and that's going to resemble the number of comments that are next to it all right so in this case but this is eventually going to be hooked up to the number of real comments that are there okay so let's go ahead and implement the ability to see the comments okay so i want to go ahead and actually show the comments that can be there right so we need to firstly pull in the comments in fact you know what let's actually do the ability to write a uh let's do the comments first yeah let's do the comments first and then i'll do the login and then we'll do okay cool i know what we're gonna do okay so we're gonna go ahead and actually create a fetch comment helper function to go ahead and fetch the comments as well so similar to what we did earlier so i'm going to go to utils uh and i'm going to go ahead and create a special util so util and we're going to make a similar thing to this we're going to say fetch comments dot yes okay now inside of here i'm gonna say export um export const fetch comments equals an asynchronous function this is gonna take a tweet id okay it's going to be run for every single component and obviously we can talk about optimization we can do that inside the course um string and then i'm going to say we need to make a call to my back end now okay so at this point what i want to do is make a call to the back end which is going to go ahead and handle this for me so what i want to do is say const res equals a weight and uh we're going to go ahead and say wait fetch and i'm going to say forward slash api forward slash get comments right and as you can see it's all completed for me it's nice that's uh get a github copilot but basically what i'm doing is i'm going to make an endpoint called get comments and i'm gonna go ahead and pass in something called a url query param okay so the url query param is basically safe only for things which you don't care about so don't ever put a password through like this but basically we should be using it for like you know things which are nonsense in this case tweet id is fine right so we now need to create that endpoint okay i'm also going to create the typings for a comment okay so i'm going to just do the boilerplate here for what we would expect to kind of come out from this so we're going to eventually get the comments back from this and then we're going to do this now i need to create the comments typing firstly so i'm going to go over to my typings and i'm going to go ahead and do the same thing that we did last time but for my typings for comments so the comment one is going to be a very similar so imagine if i've started doing the comment body so again on the um client it's going to have you know the to id username profile image but for the actual other one we're going to have the signature like this and then we're going to have all of the fields which come from sanity such as this but remember we had a referenced field now how do we do that well the way we do a reference fraud is we say we're actually going to get a tweet and that tweet is going to have an underscore reference associated to it so string and we're going to have our underscore type which is of reference okay and that's going to be the tweet that's basically associated to it okay so at this point we have done our comment so looking pretty good i'm going to import my comment above like so and we now need to create this endpoint so to create the get comments endpoint again inside the api folder we're going to create a function called get comments dot ts and again what i like to do is get go to the hello function go to and just paste in that as a starting point okay now we can go ahead and do this luke tanty what's up dude okay um i would recommend joining a juicy said sunny swag on point thank you dude appreciate it man um so get comments there we go so now what i'm going to be doing is basically i need to make a grok call which is going to fetch the appropriate tweet id based on appropriate comments which are associated to a certain tweet so at this point i am fetching those tweets right so what i can do is i need to get this tweet id to prove my point here so what we need to do is create a grok uh like a query which is gonna go ahead and allow us to query this so if i go ahead and um go to my um code so if i go to my feed and i go ahead and console log my tweets right so you can see here i'm gonna copy the id of one of them for example so this one okay so i need to find i have got a test comment remember we set one up earlier so i'm gonna go over to my sanity and i'm gonna create a special thing now i'm gonna say find me the comments right so find me a comment and we're gonna use a special reference here so what we're going to do is we're going to say references so find me where a document where the type is a comment and where it references the following so parentheses and then i'm going to say select basically we're doing an inner inner query here and i'm going to say where the type is of type tweet so where the type is of type tweet and the id is the id that i just passed in right and then the the magic on here is you need to choose what it's linked to so we reference here based on the id so you have to do dot id at the end of it okay a little bit confusing read the documentation if it doesn't make sense okay but at this point i'm going to keep the rest of the fields the same i want to capture it all and look at that we get the comment associated to that one id okay so this is looking pretty good right so you guys see that literally we've got the that's the full idea of it basically what we're doing is we're well we need to find where reference is the id and we're passing the id here but obviously the goal here would be make that id dynamic based on whichever tweet we passed in so i'll show you how we do that now copy this and then we're gonna go over here and we're gonna go ahead and say inside of our fetch comments or inside of our get comment sorry we're gonna create a grok okay now i'll show you how we do this so we're going to go ahead at the top of our file we're going to say const comment query equals grok import it back ticks i'm going to paste now where we have this hard-coded value right what we're actually going to do here is put a dollar sign tweet id and what we call this is a placeholder when we're using grok and i'll show you how we pass the value to that placeholder okay so here for type data we're going to remove this and the data that's going to get returned is a straight up comment array okay so this one is a comment array and we need to import that from typings don't do that by mistake it has to be the one that you've written okay i've done that before as well it's a bit annoying right so we're going to go ahead and basically get the tweet id from their from the query param so remember the tweet id that i passed in here we get that by doing the following here so it's inside of rec.query okay now we need to do a fetch so what we do is we say fetch comments of type comment is gonna we're gonna expect to come back await so we need to make this asynchronous function uh sanity client so i'm going to pull that in we're going to do a fetch i'm going to pass in my comment query and the second argument guys is the argument is what basically what we want to do here so tweet id now when you've got the same id so this would be like one two three or whatever but when we're gonna pass in literally tweet id is tweet id as well there's a short hand here where if it's the same key and value you can just leave it like that so that gives us back the comments and just to prove that it all worked if i do console log comments oops comments right that will actually do what we expected to do now i'm going to prove it inside of our actual app right rather than sort of mess around with this so what i'm going to do is i'm going to directly return all the comments right and hit save all right we're going to go through this and we're going to get it working and then you're going to see it all work we're about to break 600 likes let's go man oh my god after all the the craziness we've faced that the comeback is so strong wow all right so we got this get comments this fetch comments actually goes and fetches it for us let's go 600 likes as the bee drops nice that's sick all right okay so inside the tweet component now i'm gonna do something with a use effect okay so inside of my tweet component i'm gonna go ahead and have a use effect which is responsible for fetching the comments okay so check this out boom i think everyone's just super hyper focused right now this part is intense everyone's like yeah everyone's feeling it so we're going to go ahead and make a handy function called refresh comments and you'll see why i do this in a sec asynchronous it's going to go ahead and basically we're going to fetch the comments so we're going to pass it over here like so and we're going to say await fetch comments so fetch comments which is from our util and we're going to pass in the tweet id from our props so the one that the tweet that we're basically in we're gonna go ahead and pass that one in then what we're gonna do is create a piece of state for the comments okay so i'm gonna say um use state and i'm going to go ahead and say comments you should always have a capital c here this one is going to be an empty array and i'm going to hard enforce this value with a comment so let's check this out comment there we go and you should always pull in your type definition use state we need to pull in from react there we go all right so awesome stuff um let's check it out so we've got comments and then i'm going to go and say set comments to the comments that come back okay nice and basically this is never getting called but what i'm going to do is when the component mounts so with a use effect make sure you check out my use effect tutorial on youtube i'm basically going to go ahead and say on the first mount and only on the first mount i want to refresh the comments awesome stuff and what i can do here is i can console log the comments and see what we get awesome stuff let's check it out inspect just like that bam i get the comment this is a test comment where is it this is my first comment boo yeah look at that all in one go an api endpoint all that goodness everything just loaded up and now we can use that to go ahead and make the ui okay so let's keep going strong guys this is amazing right so for the comments now we're gonna go ahead and actually have the comments load up down here so where i've got the upload icon i'm going to go ahead and pop it over here so i'm going to say okay so firstly i'm going to have a comment box logic here afterwards so i'm going to leave that as a to-do and then i'm gonna have here i'm gonna say comments okay so it could be undefined so they might not have loaded yet so i'm gonna say comments if the length is greater than zero only then do i wanna render out the comments so basically what i wanna do is i want to render out a div and inside there i'm going to say comments dot map for every single comment i'm going to render out parentheses and this is going to be a div where the key is going to be each comment id you see how typescript helps you actually code really fast when you get good at it all right so here i'm going to have the image and this image is going to be the comment image so it's going to be comment [Music] profile image and you can see oh i started to get the we're starting to get the comments in look at this yeah nice all right i'm going to style this up so class name e course i'm going to say height and width of 7. [Music] nice um it's going to be object cover object cover boom and it's going to be rounded for yeah this is the whole goal here is not to be massive it's just to be there right and then underneath that we're gonna have a div so underneath this we're gonna have a div inside of that div we're gonna have a div with a p tag with two p tags and the first one is gonna be the comment username so comment.username the second one is gonna be the okay that little trick that we did so it's gonna basically be something like this um it's gonna be this awesome stuff with a little dot as well awesome and then underneath that we're going to have the timer go right so the same thing that i did last time with the time ago except it's going to be with the comment created up okay and now we're going to style it up to make it look good so underneath the div the final matching bit obviously is the comment this would be the comment itself so comment dot comment awesome stuff see how you can safely type when you do it with typescript really cool stuff so meet what's up dude all right um check this out okay so the div at the top all right so this div next is we're going to be firstly styling this one so div class this one's going to be flex items are going to be in the center the items are going to be in the center and then we're going to go into a space x of one boom okay awesome stuff um the next bit about this i want to do is style up these things individuals so i'm going to go ahead and say firstly the margin right on this and font bold then over here i'm going to say class name it should be hidden on small screens the text should be small by default the text should be gray with a 500 color and then only on large screens i want to inline it boom now on a big screen you'll see it but on the small screen you won't see it okay the time ago sort of is not coming up the way we expect it right now that's because we've got the p tag is outside the div it needs to be in the div sorry the time ago there we go that's what i wanted and now you'll see it comes up next to it there we go that's what i wanted um and then for the surrounding div i want to do the following so i'm going to do a little trick here okay so first i'm going to set relative because i'm going to do something absolute i'm going to use some absolute positioning inside of it it's also going to be flex a space x of 2. okay now you're wondering what the hell is that that looks horrible right firstly that was a mistake um i think i didn't mean to put that there let's have a look i did no i did actually want to put that there it was mainly for the um no it was for the image no that's fine the comments map okay so this one is going to be where we have the comment id this will be flex yes and it will be space x of two okay i've got my image which is styled okay and then i've got a div and this div is gonna be flex item center okay so interesting we have a weird situation here so who agrees this is my first comment so who agrees is where i've got it weird there we go nice i had my p outside the wrong div okay so at this point um we need to go to my outer div and i'm gonna go ahead and start this up a little bit so class name this is gonna have a margin y axis of two margin top of five max height of oops max height of 44 oops 44 space on the y-axis between components of five so between the chats we're gonna have an overflow scroll only on the y it's overflow y square border on the top is good idea and we're gonna have a border gray of 100 with a padding of five boom and you see how we're starting to get this nice little thing boom nice um why does someone use image instead of image juicy that's a very good point you can definitely go ahead and do um what's it called uh oh wow alex yeah thank you for that you can definitely do that um yeah so juicy you can definitely use the next image right the reason why i didn't do it because i've got a lot to cover but definitely do that i do it in other builds as well it's more optimal 100 okay the next icing on the kick is this little line how the hell do you get the line right so i'm gonna show you a little neat little trick for this one so underneath the div over here i'm gonna have a horizontal line okay so oops horizontal line so hr okay i'll show you a little trick here so i'm going to absolutely position this now if you don't make the parent um absolute sorry a relative then it's going to be absolute to the entire page you don't want that you want to be absolutely positioned to the parent which is a lot better i'm not going to get too far into it i'm going to say the left should be a 5 the top should be of 10 and the height should be of 8 okay now you should see a little line but it's invisible right now so we're gonna say a border x there we go and i'm going to say the border should be of the twitter color um and it should be 30 right so this is a little bit far out let's see why um but right now you can see we need it to come a little bit up so i think the top right now is a little bit off and that's because i've done the image here is wrong so we should be margin top of two there we go and now you can see i've got my first comment hey awesome stuff all right so what i now want to do guys is i want to start having the ability to do the mutation so right now the presentational logic is there i want to prove that by doing something right now okay so if i go over to this and i open up my standard ecms backend and i go here and add a new comment okay let's go ahead and do this add a new comment my first comment uh let's go ahead and second comment sorry let's go and do this i'm gonna go ahead and say comment this is the second comment username sunny sign go let's just do yeah say yes and then let's go and do a profile image i'm gonna copy this one for now there we go profile image and the tweet that we're gonna connect to is this one publish and if i refresh this page boom look at that guys absolutely beautiful all right see how it pulled in the second tweet right and now we need to go ahead and connect this bit as well so it says two instead of random five so obviously it works that's awesome and it's really cool to see when it's like that as well um but the actual number here is very simple to change all we need to do is go ahead and say comments dot length simple as comment start length and now let's see two which because there's two comments awesome stuff right we're also going to do the hot toast notifications we've got quite a bit to do right now right we've still got the authentication we've still got the refreshing and we've got the mutation to go ahead and actually tweet right so in order to do any of this stuff now we need to handle firstly the refresh is very fairly simple to do we can do that now um and we can actually implement the hot toaster right now and then what we can do is implement next auth and then we can go ahead and do the mutation so we're getting there we got this all right wow okay so at this point i'm gonna go to my feed and i'm gonna go to the refresh icon okay so this is what i'm doing and go to my feed and go to the refresh icon and then for the refresh icon i'm going to basically make it so that way we can have um firstly let's implement them okay i'll show you all right so what we're going to do here is i'm going to go ahead and create a handy little function called let's actually console.log the tweets for now that's fine i'm going to have a function called handle refresh and this is going to be an asynchronous function which is going to go ahead and basically say const tweets equals await um fetch tweets fetch tweets okay and what this is gonna do is whenever we call this i basically want to replace the ones that came through the server side render with the current ones which we just fetched so in order to do that little trick what you do is you set the you create a use date you go ahead and you say tweets oops tweets uh make this a capital t you rename your prop so the way you do that is you do colon and we can call this one the tweets prop and you give the initial value of your state the tweets prop and then you can go ahead and actually uh protect yourself by doing it like so right and you still need to import your use state and now your state gets initialized with your tweets that tweet gets passed down but you have control over if you ever want to refresh your tweets so now what i can do is i can say set tweets do tweets nice awesome stuff handle refresh should be on click of the refresh icon so what we should see now is if i go ahead and see like it shows me my feed if i refresh see how i actually loaded up the new thing so if i click refresh it's actually refreshing the feed so if i added something new there it would actually come through so in order to make this look nice though because as a user you're not gonna have no idea that that's actually doing what you're doing so we're gonna download react hot toast i love this library it's awesome and i'm gonna show you how we do it ninten thank you so much for the positivity dude all right this is so cool are we going to implement edit no we're not going to we're not going to do edit for the the tweets no no i'm not going to do that all right so we're going to yawn add react hot toast we've got a lot to do that's why um react toast there we go you're an adventure toast and then what we need to do it's very simple all you need to do is add the toaster component into your app at any point so what i'm going to do is go into my index and at the top i'm simply going to place that component in like here so that way it's available throughout my entire app i import it like so now what this does is it's very easy to implement this right now when i'm inside of my feed for example and we do the refresh i can literally go ahead and trigger off uh one of my notifications in a really cool way right so what i want to do is i want to have a toast which is loading okay so what i'm going to do is i'm going to say const refresh toast and this is going to be a new toast so what i do is i import the toast i go ahead and say loading and i'm going to say this one is refreshing dot dot okay and after i've done the fetch tweets after i've done all that because this will block right only after that's done i can then go ahead and say toast.success so i have a little tick associated with it and i'm gonna say feed is updated okay let's give that a try feed updated and what you can do is you can pass in an id for an existing toast so the first toast that i passed in that one's going to show on the screen and then this one's going to replace it once it's done so let's see how that worked out boom refreshing oh my god it's so so clean like look how clean that is refreshing once it's done and it also even handles up the tallying so look at that boom boom boom boom and it's literally working and that's actually showing us on screen the ui it works beautifully all right we're going to also implement that when we tweet when we do the comments that kind of cool stuff okay now what is next right so the next thing we do is the sign in so now we're going to implement something called next auth into our application so what i want you to do here is basically go ahead and set up two things now i've shown you how to do a google login in previous builds so what we're going to do today is i'm not going to show you how to do the google login but it's very easy and it's also in the code base to do the google login bit based on the previous buttons so that's something cool but i'm going to show you how to do twitter login which we've never done on this channel before so i'm going to show you how to do that so we're going to head over to next auth and i'm going to show you how we do that all right so check this out nextof.js get started and as you can see we now need to install next auth okay so i need that and now i need to go to my uh terminal yarn add next auth okay so i install that awesome stuff and it goes okay that's awesome uh universe because elon has to see this awesome stuff right so now we've got this now in order to add next auto authentication into your app you basically just have to follow the call that folder next off dot js so inside of the auth folder next door dot js and this is where basically it uses it it figures this out in it on its own right it knows how to do this so what i want you to now do is once you've got that done we're basically going to go ahead and provide the following here okay so i'm going to go ahead and paste in the example that we have so if you do want to do google providers you would have seen in a previous clone that this is how we did it right we basically went ahead we passed in the google provider we gave it the google client id which you can get from firebase and the google client secret i'm not going to show you how to do that again because i've done it in loads of builds before but what i'm going to show you is how to do a twitter provider and as you can see you can just tally on as many providers as you want and then when you log in it will actually go ahead and show you how to do it so at this point we're going to remove the google provider and we're going to do twitter provider instead right so next auth providers twitter and we here we've got twitter client id and twitter client secret i'm also going to use uh oauth 2.0 okay so at this point i now need to get some twitter credentials okay so what i want you to do at this point head over to twitter developer right so type in twitter developer now twitter developers essentially you get one free project under the twitter essential developer plan so you can actually create your first project for free you get limited access bill work for this or you can go to the elevated plan which is what i did you just have to fill out a slightly like a very short form you just fill it out and then you can basically go ahead and get the api key that kind of stuff it takes them about a few hours to a day to approve if you go for elevated but i would recommend if you're going to build more than one app then definitely worth it okay so developer.twitter.com then what you want to do is go to the developer portal okay now i've already created an account on here you guys can feel free to do the same but in this case you can see i've already created one app i'm going to go ahead and create another app so products i'm going to go to overview and i'm going to go ahead and create another app so add app okay so at this point what we're going to do is i'm going to go ahead and do a stadium production let's just do a production app um did i do this before active um i think i did that one before oh okay so i actually created one before ready for it right so i did twitter clone um okay so i did it here so i'll tell you what i'm going to do in that case is i'm going to go ahead and edit this one and i can actually go ahead and i don't want to delete this one that's fine i'll see what i'll do i'll change this development environment to production for this one um ignore that okay now let's do it again add up so i'm going to create one you want to click on development i'm going to click on next and then i'm going to go ahead and type in the following i'm going to say let's just say twitter clone next looks like the name's already taken let's just say sunny at the end of it whatever that's fine okay and then you get this right now obviously you don't want to expose that right so i'm going to go ahead and probably generate these afterwards again anyway but once that's done you want to go to sunny twitter clone all right and what i want you to do is go over to oauth right so two o'clock sunny app sorry is this one yeah i want you to go over to there now it should say um set up okay so at this point i'm gonna turn on oauth 2.0 right and here you can see we have to select the type of app so it's a single page app and the callback url and redirect uri this bit is important right so these these like environment variables are actually quite important even when we come to deploy remember that you're gonna have to actually change this when we get to this point as well yeah so at this point for the callback uri i'm just gonna go ahead and put in um the following for now uh i can't actually remember where it was i think if we go into our app we'll get this in a second so i will show you this in a sec so what we can do is come back to our app we've actually set this up already so what i want you to do now is go over to our sidebar and where we had our sign in what i'm going to do here is also okay let's let's take one step at a time let's implement the remainder bit of the authentication bit and then we can finish off the twitter api a bit okay so that will help us out a little quite a lot okay so at this point what we're gonna do is we're to go ahead and we need to wrap our app in something called a session provider so if i go into app oops by going to my underscore app here now for this bit i'm just going to go ahead and solve this by putting any here just for now just for the demonstration rather than fix this bit but we're going to go ahead and pass in this right and we're going to go ahead and say import session provider and i want you to do the following i want to say session provider pass this in and what we need to do here guys is we actually need to go ahead and destructure our page props to get in the session so we're going to say get the session and then basically still have the rest of the page props okay so at this point what i do is i pass in the session like so and what this does guys is called a higher order component this is basically going to allow us to go ahead and um this is basically going to allow us to go ahead and use our session so our logged in state throughout the entire application okay so it's going to keep awesome stuff right so at this point what we're gonna do is um i don't know what this guy doesn't cover today wow thank you um so at this point we're gonna go into our index or our sidebar rather and what we're gonna do here is we're gonna pull in our source of our authenticated state okay so what you can do here is you can use this very handy function called use session right and what we're doing is inside of there there's a prop called a property called data and we're going to rename it to session so it's easier to understand easier to use that kind of thing so at this point what i want you to do is we're basically going to conditionally render a few things based on this value so we're going to say if you're if you have a session so if you're logged in then i'm going to say sign out otherwise i'm going to say sign in right so that's the first thing sign out um and then basically what you'll see now is it'll say sign in because we haven't got a logged in state then what i want to do is here i want to say on click and you can see we don't actually have an on click handler right now okay but i'm going to say session if there's if you're logged in then i'm going to say sign in and notice how we can import this from next source react and otherwise if there's no session sorry we're going to if there's a session we're going to sign out sorry otherwise sign in and these are being imported like so now this on click handler i'm going to show you how we import this so i'll go into my sidebar row i need to go ahead and extend my um on click so i'm basically going to say it's a function it's an execute executable function it's fine for now okay so at this point for the div when i click on that div i'm going to say on click right on click i want to go ahead and pass in my on click okay but now it's complaining it's saying it could be unconditional it might be there so the way you safely execute this you say okay it could be there so optional chaining and we're going to go ahead and execute it okay now this is saying could you not define blah blah blah oh yeah so we need to pass it in here so we say on click that's a safe way of executing it if you don't do this it says whoa whoa it's dangerous it might be undefined so we're saying only execute if you're uh if it's there right so at this point check out this magic if i click sign in oh one second so oh i need to save my other file there we go that's why it's safe so if i click sign in now oh we'll sign in with twitter right if i click sign in um okay oh no okay so it's throwing me to local 3000 that's because my other app all right so this is where my other app is confusing things a bit so what i'm going to do now is i'm going to shut off my other app and i'm going to change everything to be running from 3000 because it's starting to get a bit messy okay so i'm going to shut off my old app shut off my yeah there we go and now i'm going to go into my environment variables change it to yours will already be on the right settings mines is just because i had to do this thing so i'm going to restart my app with the new oh there we go and i'm going to restart the app because i just changed my environment variables you don't have to worry about that guys so at this point what i want you to do is go ahead and test it out so um localhost 3000 now there we go okay so i'm gonna go ahead and hit sign in sign in with twitter and you can see sign in with a different account now the reason why this is saying this is because we haven't excluded this sign-in from the api auth endpoint right so what i'm going to tell you now is basically we need to go into our project settings for our twitter and we need to exclude some stuff okay so if i go into my previous one i'll show you how i did it so here i've gone ahead and excluded this special callback right so we're going to do the same thing here so inside outside of here what you need to do is enable oauth 2 type of app a single page app and for this one you just need to put in the following okay now for this i honestly just in the beginning i just put test.com test.com just to sort of get it past it right but here for example this is the endpoint that you're going to want to restrict now once you go ahead and deploy you need to come back here and white list the url for example for example it's the uh it feels like sunnysanger.com you would have to come in and add another sunnysanga.com make sure this is sunnysanger.com that's what you need to make sure you need to do okay similar to how we do it for the google authentication you always have to wire this there once i click save i might hide it because it might show something so i click save yep there you go so once you click save it's going to show you these things on the screen right so i'm going to try and do this in a clever way but i'm going to show you something so you will see this on the screen right so i've done something pretty clever here so you'll see this on the screen right so this would pop up on your screen so you'll see client id client secret copy these values and we're going to put them into our environment variables right now client id and client secret okay so i've just blurred it out right so help me out there nice all right so this is only going to be shown once as well okay you can always regenerate it but that's how they do it so i'm going into my i'm going to talk it out as i'm doing it now i'm going out into my environment variables and what i'm doing now is i'm going ahead into my i'm creating something called twitter client id and i'm pasting that value so i'll go ahead and show you in a sec to our client id and the two the client secret is a little bit more of a secret one so twitter client secret okay so client secret equals and i'll show you now basically and i'll undo it in a second so okay so basically what i did was i copied the secret i put that secret into i don't know why it's doing that i copied that secret i put that secret into here i had the sami api token i'm not showing it because i sensitive credentials you should never show that and then i'm gonna go ahead and save the file and close it okay so i'm gonna do that exactly now so save the file close it restart my application okay and also while we're there guys i want to show you something else that you're going to need as well otherwise you're going to bug out when you get to the real thing right so what i want you to do now is go ahead and i'm gonna just hide this for a second but you're gonna need to add these two things next author secret right so i'm gonna go ahead and show you this one as well so we've got the next auth secret and this one you can just use some secret password like this one is basically you can define what it is but it has to be a secret uh the next author url so as well this is also important next auth url these two would be the same value essentially right but basically if i deploy that will become the deployed base url so they have to change so in the cell once we deploy we're going to go ahead and have to change that as well okay so at that point we're actually pretty good so i'm going to go ahead and pop in my sony api token and my client secret and be back in a second okay sunny api token and the other one which was did i not i didn't copy it one second guys i'm just going to go ahead and copy that so i don't get the same error that i just did okay so boom boom boom okay awesome so i've saved it i've done it and i'm closing that file okay so i'm back come on jay i'm gonna restart my app and now you shouldn't get these warnings where it says no secret okay um and you should see there we go okay awesome stuff now let's go ahead and just double check i'm going to hide that for a second because it's going to kill me if i show that um oh masudi wes 10 donation thank you so much because any plans on doing an inventory type project like havana i'm not sure what cabana is but definitely sounds cool dude so i can definitely think about doing something like that so thank you for the suggestion um okay so come on jay um okay so once we've got this up i'm gonna go ahead and appreciate that donation that big so i'm gonna go to the back to my app i'm gonna go back to my local 3000 before all of this so just basic there we go and let's try again sign in now i've whitelisted the url let's click it boom hey nice and it should pop up with the app twitter clone app sunny that's why i named it wants to access your twitter account authorize the app i am now going to get redirected back into my app and then bam now you see it says sign out and if i click sign in sign out again you see how i signed out and i can do the whole flow again nice mercedes yo let's go welcome to the papa farm special tear as well awesome stuff dude amazing support i appreciate you man nicholas hi from london what's up dude wes good to see you here man so much love man so check this out awesome stuff dude so you can see look we have our twitter login working amazing stuff destroy that like button we are about to destroy over 700 likes if you're enjoying this right now i love you guys to pieces because this is what i do it for right it's to help you guys out prashun appreciate dude coming in with another donation ah the love is bro today right so now we've got this coming in now i can start pulling in your profile information so literally in the tweet box i can actually start pulling in information right so let's go ahead and use that information so if i go over to my tweet box now where i basically just have a blank image i'm going to go ahead and do something a bit more interesting right so i'm going to go ahead and actually use the information so the tweet box over here like so we're doing so well guys honestly so so well all right so the tree box i'm gonna go ahead and get my session similar to what we did before so bam i'm gonna go and grab this next auth there we go i've got my session like so now what i want to do is i want to use that session so inside of there if i do session dot you can see i've got the user and inside there i've got email image and name regardless of what provider it will always work and it will always show you those values this is what's nice about next door it has a consistent kind of profile for your user okay so at this point for my image i've got this bit here rather than this i'm going to say okay if there was a source for the image i'm going to use it so i'm going to say here it should be session session which is uh you know possibly kind of you know jose said i joined the pop fam community yesterday i can't wait for camera fishing day let's go guys this is popping off this is the love today's real watching from california yo we got america in the house i love this this is so sick session user and here we're going to go ahead and say the user might also be doing undefined i'm going to say the image nice let's see if it popped up with my picture boom nice i got my picture up looking good really nice guys this is such good energy right so looking really good right now okay now what i also want to do is i want to disable the tweet button if i'm not um logged in so now what i can do is i can actually protect us i can say don't allow them or disable that button don't allow them to tweet if there is no session so very simple to protect now uh if even if you've typed in as a user but you're not logged in so if i log out you see i'm not logged in it's still disabled right so let's log back in quickly let's authenticate and we can continue on so now we're going to go ahead and actually add in the ability to add a picture so when i click this i want to drop down to have an image url and i'm going to add that then we're going to have the ability to send a tweet so i'm moving at some really amazing pace the first thing i want to do is have brazil's in the house and burundi africa nice awesome stuff where's the link to the papa fam course um it's literally in the description guys join us over at zero to full stack dot hero forward slash course i love and appreciate every single one of you our course is literally growing incredibly uh right now we've got over 650 members strong right so it's literally like it is so awesome to see you guys show an interest right so at this point what we're now going to do guys is we're going to go ahead and have a piece of state which is going to go ahead and keep track if the image url box is open when i click this i want a nice little box to pop out okay so what i'm going to do is i'm going to say image url box is open i'm going to say set image url box is open again the naming is not the nicest but you can change it if you want when i say use state um is going to be uh false so by default i don't want that to be open it's going to be a boolean value i'm going to tie it to boolean awesome stuff nice and now what i'm going to do is i'm going to say when i click on that picture icon so the photograph icon when i click it i want to basically do a little action so i'm going to do an inline arrow function i'm going to say set image url box open to the opposite of if it's open or not so image url box open so image url box open so that way if it's open it'll close it if it's closed it'll open it okay cool now i can conditionally render a box under it okay so now what i can do is um where i have my image where is it the tweet uh under the button under the div so here i'm going to have if the image url box is open then and only then am i going to go ahead and render out a form so this is where we pause basically start styling sharp so form and i'm going to go ahead and say the following so inside that form i'm going to have input field and i'm going to have a button this button is going to say add image okay so let's see like if i click it okay nice i'm starting to get the click functionality nice if i click it it goes in um uh join us gift it'll be awesome dude um so i'm gonna have that and i'm gonna have the placeholder which is gonna say enter image url okay so at this point image boom placeholder enter image url so now if i go ahead and keep it open this looks good i'm gonna go and style this up a bit more so it looks nicer we're gonna say mt5 margin top five flex rounded lg background should be twitter nice little trick here is you can make it slightly up uh opaque so that way eighty percent so a little bit transparent sorry padding y of two padding x of four bam okay it doesn't look that nice yet but trust me stick with it right it's a process all right so for the image we're going to go ahead and say class name equals flex 1 use up the majority of the room that you have background should be transparent so i need to go ahead and do that properly so background should be transparent uh the p2 to make it a bit more spaced i'm going to make the text white outline none so when i'm focused on it it doesn't have that weird border and the placeholder text should also be white so placeholder text should be white as well all right so boom looks nice uh the button i'm gonna do the same thing style it up i'm gonna say the font should be bold the text should be white wow okay looks nice right so we've got this and then uh i'm gonna have so it's just super easy right like so easy to use then and i want to make this rounded lg there you go my bad okay so super nice right now when you type in here i want to keep track of what the user typed in right or whether the url simple straight value i'm going to connect this to the actual um actually no no it's going to be the input ref sorry which is going to be um no okay what i'm actually going to do there guys is i'm going to create a reference instead so what i'm actually going to do here is rather than this one we're going to keep an image because i'm going to use that for later but for now image input reference okay so for this one i'm going to import the reference and obviously imagine this is like we're pointing to input element type for example first and second thing is imagine this is like a big pointer right so what we do is we connect the pointer to our input field and whenever i want to get the value from it i can now point at that thing and say get me that value okay so what i want to do now is when i click on when i click on the submit button so in this case um on click sorry on click so we're going to make it type submit here type submit and i'm going to say on click of this button we're going to go ahead and create a function called add image to tweet all right i need to create this helper function at the top why is that there oh yeah yeah sorry it's fine um and then we're going to go ahead and say const add image to tweet awesome stuff and what i want to do here is basically there is going to be a mouse event attached to this right so what i want to do is if this is a handy trick if you don't know what the type is of the event yeah whenever you have a clicker like a click here so in this case if i hover over it you see i get the type definition so what i'm literally going to do is copy that up go back it's such a handy trick honestly and then e i just pasted in boom i get the perfect type definition really nice all right and then here i can do e dot prevent default to prevent the page from refreshing because we're in a form okay and now what i can do is i'm gonna go and say if there was no picture that was assigned there then you shouldn't really be uh attaching any image so i'm gonna say if there is no image input reference or if the current value basically that you're pointing at if that is blank so if the whole thing is blank then basically i want to return from this block so i'm protectively coding here okay um awesome stuff i think we're good jay all right i'm just clarify if we're good so at this point i'm going to set the image if it's all good past that point to that value so the image.currentvalue okay we don't need to do optional training here because i've already protected um so let me just double check okay so all right sick um so at this point set image is good so what i'm gonna then i'm gonna do after that is basically hide or sort of set the current value of the text box to blank and i'm also gonna close the image url box so i'm going to close it afterwards to false okay awesome stuff so now i've got the basically you would put an image in there so imagine if i went ahead and did something like this so if i went ahead copy this image address said i paste ad image and now what i've done is i've captured that image url in the state so now what i can do is it gets even better guys it gets even better right i can go down here to underneath my form underneath this and that can actually go into if there was an image so if you did attach one then go ahead and show that image right so show the image the source is in the image state that's where it's holding up and then we can go ahead and style it up so we'll say class name equals so if i go ahead and hit save right now see that it's there right and if i go and say margin top 10 height of 40 width of 4 rounded xl object contain so if i didn't want to do object contain because i want to show them that you can see the entire thing uh when you upload object content and shadow i'm gonna do a large shadow boom nice all right so imagine now like awesome stuff right if i refresh just to prove a point here and i basically lose my state let's do this one copy address let's attach an image add image boom there you go nice right works really well hello world and now what we want to do is basically go ahead and have it so that when i tweet it will go ahead and actually mutate tweet and refresh the tweets so this is where we do mutations right so mutations is a very powerful thing it's where we're basically going to be able to do the adding tweak functionality so in order to do this i need to create an endpoint i need to create an endpoint on our uh api called add tweet so in this case i'm gonna say oops add tweet so add tweet dot js oh dot yes sorry dot yes dot ts okay now i'm gonna do is the same little trick copy this hello over there nice and then i'm to go ahead and create the add tweet functionality okay so what we do in order to make this work is firstly i'm going to be passing in the body all right so i'm going to be passing in firstly in this case just to clarify everything right um no we don't need to worry about that so i'm going to pass up it's going to be a post request so basically i'm going to pass this information in the body of the request so the way i do this guys is i go ahead and say constant data equals tweet body which we prepared earlier equals json.pass the request dot body okay so i'm going to send over the information as a json stringified value so it comes up as a json string my value now there is oh my god i just smacked myself in those now there is uh more engine you papa thank you so much dude um i'm gonna go ahead and have a little bit of water because it's getting to that point but i'm trying to not have too much water otherwise it gets really hard okay let's keep going strong guys we're literally past 700 likes we're gonna go ahead and bring the music up because it's helping me get hyped up okay let's go all right so at this point we've got constitute a tweet body so i'm going to go ahead and say const mutations so this basically comes from the documentation now any time you implement with a graphql or something like grok or sound ecms what you essentially want to do is you have something called mutations mutations is basically you send this instruction to the back end the back end is then responsible for mutating the back end in the while in the way that you request the way it works in standard ecms is you pass over an object right you pass over an object and it has the following inside of it mutations okay so what we're going to do now is pass over this array of mutations you can have several if not you know however many you want in this case i'm going to pass over something called the create mutation this is all available in the documentation i'm simply going to show you how to use it so what i'm going to do is i'm programmatically creating a tweet on the sami platform right so sony content platform i'm going to go ahead and pass in text and this is the cool part so remember i passed in that information as a part of the request so here i can say data.txt the username is going to be the data.username the block tweet by default guys is going to be false right because it doesn't make sense every time you post if it's just automatically blocked the profile image is going to be data.profile image and the image is going to be data dot image okay so this is our mutations we passed it in this structure and you can also pass several along that kind of thing that's why it's an array and then that's what we're essentially going to be using to go ahead and send information over to the back end okay so what we're going to be doing now um let's go ahead and check this out so yeah we're going to basically be making a call over to a special api endpoint okay now i want you guys to pay attention to this one so the api endpoint is basically the empire endpoint is this one right here so it's backticks and you can get this from their documentation but basically it's https it's the sanity project id so in our we have got this inside of our environment variables dot api dot sani dot io forward slash the current version number which is their latest data mutate and then you pass in your data set so in our case production okay and then we're going to be using that so it's backtick at the end right so what we're gonna say is const result equals a weight bench and i'm gonna pass in my endpoint okay and i do need to pass in some options here okay so the first thing i need to do is make this an asynchronous function because we've got some a weight that we need i'm going to go ahead and pass in the headers headers are important here the headers are important for two reasons the first thing is we need to tell the back end what kind of content that we're sending okay the second thing is that we need to auto send it as an authorized request to think about it you can't just have anyone send information to the backend otherwise it will only be secure what we're now going to do is we're going to use our sanity api token so i just want to double check that we actually put this in there i think we definitely did something yet we did we did this earlier so the sally api token we prepared earlier so what you do is you put a back tick and you basically go ahead and say bearer this is called oauth that we see bearer and we go ahead and pass in the sanity api token okay so that's going to be part of the headers now this is actually how you go ahead and send in this is how you actually go ahead and send in please make the sound loud i'm confused uh but the music is too loud or not all right so at this point we're going to go ahead and for the headers we've done we've actually sent in authenticated requests now because it includes our key and we're going to go ahead and say in the body we're going to do json stringify mutations right so method is going to be a post method so let's do this post there we go all right and then we're going to go and say const json equals await result.json okay and at this point guys we would actually be able we would actually be performing a mutation on the back end and all we're going to do here is we're actually not going to use this information here but i'm just going to say message is done or added yeah it could be anything it could be a two or one that's what you typically do and then you can just say message right if you really want to uh we're not actually using the information at all to do anything right so at this point this is our add tweet functionality so what i now need to do is head over back to my tweet box we're gonna implement the functionality to actually go ahead and do this now so tweet box at the bottom what we're gonna do is when we hit the tweet right button so when we hit tweet button so where's it going here right when we actually go ahead and hit the tweet button i'm gonna say on click of the tweet button we're gonna go ahead and do the following i'm going to say handle submit okay so handle submit and at this point i'm going to do that e trick again to get the sort of you know the the type definition so i did that already i'll show you how i did that so remember that e trick that i just did a second ago that's how i got the actual click event there we go the music is getting hyped up let's go um let's see what i've done wrong here we've got this handle submit okay equals e dot proven default okay what we're done mass event there we go you just have to import e dot prevent default nice and then we can go ahead and do the actual coding that's needed here so when we submit right think about what we're doing now we need to go ahead and post the tweet right so posting the tweet we need to create a functional pad so i'm going to say post tweet and i'm going to create a helper function above it so this is going to say const post tweet do you have any typescript course yes we do inside of the course right we have lots of typescript lessons inside of my zero to four stack here of course yeah and community best time community on the planet i'm telling you right now this is going to be an asynchronous function and then what we're going to do here guys is we're going to go ahead and say we're going to prepare the tweet body that we're going to send so we're gonna say cons tweet body con street body and we're gonna cast it to our tweet body typing so that way we're protecting ourselves and here what we're gonna do is we're gonna go ahead and pass in the following so i'm using the input that we've masked earlier the username is going to be the logged in username otherwise inside is zero to force that might be thank you dude um otherwise it's gonna be on your user and then the profile image is gonna be this or a placeholder and then the image if you attached an image all right so the next thing to do is to go ahead and make a post request to our backend so what we do is we say const result equals await fetch and then i do backticks so i can do api for slash and then here i'm gonna go ahead and say the body is we're gonna stringify the tweet information so stringify basically means you can't send javascript objects over the um oops whatever down there you can't send change that to tweet info not tweet body you can't send the javascript objects over the internet you have to stringify them and then you can send it okay amir says you're awesome thank you dude you're awesome too smash the thumbs up and if you're enjoying this all right so we got this then i'm going to go ahead and pass the response so await the result dot json awesome stuff and that will give us the tweets right now so that would actually mutate the tweet next thing we're gonna have to do is fetch the tweets again right now what we're gonna have to do here is one level of prop drilling right otherwise you would have to implement redux so it's okay we're only gonna do it for this example so what i need to do here is if i go up to my feed what i'm gonna do is here we have the set tweets function okay so what i'm actually gonna do now is where i have my tweet box i'm gonna prop drill down one level now this can be frowned upon so what i would recommend is if you don't want to follow this approach you implement on that recoil or redux which i've taught and then you can go ahead and do it in that fashion but this is just one level deep so i it's not the worst thing in the world for this one use case so the tweet box now we need to go ahead and prepare it so we're gonna pass this down as props and we're gonna go ahead and basically do the following here now how did i get the dis how did i get the type here for this i will show you so i'm going to import all of my type definitions how did i get the set tweets type if i go back to my feed what you will see is um you can go up to your set tweet and you're here there it was so set tweet uh react or dispatch react set state action tweet right so you can do it there that's how i got it so tweet box oh thank you so much alex goes this dude literally codes four hours with no breaks he's definitely built different thank you so much dude i appreciate you universe called all the context api yes the reason why i'm not is because as you can imagine the builds pretty massive already in the space we've done it so some corner had to be caught right but you can definitely do it so set tweets now we've got the ability to set the tweets so what i can now do guys is obviously we make a mutation but i need to re-fetch the tweets so that way it basically updates my ui so i'm gonna say const new tweets and we've got a handy util so you can see lots of patterns here that are coming in oh wait fetch my tweets and then i'm going to go ahead and say set tweets to the new tweets nice uh and then what we can also do here guys is we can actually do a nice sort of uh tweet posted so in this case i showed you how to do a promise based approach before but if you want to do it this way you can just say tweet oops tweet toast can be uh tweet posted and you can even pass in an icon and let's go ahead and do the rocket emoji awesome stuff and i can go ahead and put this in the little quotes nice cool stuff and then at the end of it i'm going to return the json return json right cool all right so i'm actually don't need to return json it's fine for now but post tweet cool and after all that is said and done i'm going to set the input to be blank again i'm going to set the image to be blank again and i'm going to close the image url box to your false quite nice now if all of this is done and we did it correct then what is going to happen is basically i'm going to go ahead and tweet this so let's go ahead and do it from scratch right so i'm gonna refresh copy the image address i'm gonna say this is the first real tweet all right i'm gonna put this here put the image url ad image nice now when i click tweet right hopefully this works first time i'm gonna be sending a post request with this information in a request body that's gonna go ahead mutate the sani e platform at the back end and it's going to go ahead and add in the new document which is for the twitter uh the tweet then what's going to happen is a refresh is going to occur but we're going to refetch the document and then we should see a re-render here so tweet yes nice dude let's go tweet posted boom this is the first roti and if i go ahead and refresh now look you can see that oh so so clean so so clean right that was so that was such a nice feeling that it worked first time honestly like a smash that thumbs up button if that was pretty damn cool right but you see what's happening and we even get the timer go look nice and dynamic awesome awesome stuff guys really really stuff venezuela announced what's up uh this is sick right this is so cool so we've got this now now i guess the final part is just add a comment to this thing and deploy it right because we're literally so close so what we're gonna do now is add the ability to comment okay so what we did previously is i had this oh you can see i've not got the scrolling functionality i mean okay so i need to fix that so what i'm gonna do here is open up my feed um let's go ahead and fix that up right now so feed oops i've got all my screens mixed up one second guys um i've just done a little bit of a keyboard shortcut hiccup so there we go okay cool we're so close to 800 likes guys let's keep smashing it so many viewers are tuning in right now thank you if you are you guys are awesome right so we're going to go ahead and now uh implement scrolling so right now i can't scroll this feed right that's horrible we don't want to do that we want to be able to scroll this feed so this is freaking out right now because it's not assignable to hdmi bottom event it what we need to do is change this slightly to be a global dot this i think it's global this um which one is it let me just double check tweet box i did this before save you a bit of time global this stock mastermind there we go so it's going to be globaldesk.event there we go nice okay so that works nicely now what i want you to do is go over to your tweet and it's no feed sorry feed and we're gonna implement the scrolling functionality so we've got the column border x nice now i'm gonna do max height of this is going to be the screen so max height screen overflow scroll awesome and now you can see we can scroll okay awesome looks nice so okay awesome stuff so we've we need to implement the actual commenting functionality right so this is looking good so far you'll notice on my build i actually hide the scroll bar i do that by implementing scroll bar hide uh extension for tailwind css so let's just do that now get out the way so tailwind css scroll bar hide so let's go over here install it nice so check this out so i'm going to go ahead and do yarn add tailwind scroll bar hide boom i'm going to go ahead and import this like so um yarn add toe and scroll bar hide and what you need to do is update your configuration right so what we're going to do is go into our tailwind config and there's a nice little plug-in bit so tailwind config is over on the side command j to hide that plugins we're just going to pop it inside there right now we can actually implement the functionality that they've added on so over here now what you'll notice is if i go ahead and pop this on the side you'll see there's a scroll bar on the side the minute i do over scroll bar hide it won't be there so scroll bar hide bam it's no longer there i get my real estate back but i can still scroll we get this super slick functionality it looks cool really really nice right this is really cool nice j screenshot uh pop fun thanks for the tinder clone help me land an amazing job keep up the good work awesome dude um this is crazy man honestly we've been calling for like five hours now we started at four o'clock um this is crazy honestly um because we held here i'm not even gonna go there right let's keep going um so at this point we've got this working next thing i'm gonna do is the comments functionality guys going damn strong right now so inside of the tweet i'm going to go ahead and implement the commenting functionality so we're going to move fairly fast now so tweet component i'm going to go ahead and have a few things so a piece of state to keep track i want to basically click this box a little comment box comes out and we can kind of do our thing with it we're going to need to prepare a few things the first thing i'm going to need to prepare is a input box and a comment box is visible so we've got the two things here we've got one piece of state for the input one piece of state similar to what we did before with the image comment box visible boolean value false okay so that's how we start things off next thing i want to do is when i click on the chat button i'm basically going to go ahead and have a on click this is going to go ahead and trigger off as simple uh function arrow function which is going to go ahead and say set the comment box visible to the opposite of if it's currently visible okay so open and close it now what i can do is i can go ahead and say if it's open so underneath the upload icon so here comment box dodge it see what we did nice comments help you out right we're going to go ahead and say comment box visible and and open up a bracket so we're going to open up a form and i'm going to go ahead and hide the form now there we go i'm going to put an input nice boom now for this input i'm going to say placeholder write a comment placeholder write a comment dot dot all right and then i'm going to say button and the button is going to say post okay so as you can see now if i click this um okay so i'm clicking there comment box visible okay so i'm not attached to the whole thing i might attach it to the whole thing instead um i've got it here for the on click get rid of that put on the div surrounding it it's easier it'll be nicer as a ui now when i click on any of it it opens up nice cool so i'm going to style this up now so let's go ahead and check this because we're going to go to form uh thanks bro don't have something about videos of gremlin apprentice saying i appreciate dude uh crouton let's go pop fam smash the thumbs up on almost 800 likes let's go guys the form class name equals margin top of three flex and i'm going to go into space x of three and you can see it's already looking pretty decent and the input we're gonna style this up say flex one take up as much room as you can round the corners out oops if do it properly round did lg rounded lg what's going on there there you go rounded lg and we're gonna go into a background should be gray of a 100 padding of two outline none awesome looks clean and for the post button i'm gonna go ahead and say uh heading to 800 guys we're so close 800 likes uh we're gonna say um text is gonna be can you imagine if you didn't crash oh my god it would have been crazy it would have been a thousand sign likes crazy stuff but we're we're doing damn well for it being at this point all right post i'm also gonna disable the post uh button so we're to say when we disable it so similar to what we did before disabled i'm going to go ahead and say the text should be gray at 200 okay now what i do want to do as well guys is i want to hook the input field up to that input so i'm going to say value is equivalent to the input and as i type in so remember what we did earlier e and say set the input so as i type in update the state so e.target.value okay sick and set input is okay it's just slow okay cool and what we're also going to do is that button right that opened up that comment box i'm only going to let you do that if there's a session right so only if there's a session should you be able to open up the comment box so only if you're logged in alright session is not defined that's because we haven't got a session oops i need to import my use session hook let's go ahead and do that boom and i need to import it like so and now what we can see is it will open it up because i'm logged in if i'm not logged in it won't actually let me do it so that helps us out a bit okay so this is looking quite cool so far right so what i'm now going to do is disable this post button if there is no input so disable if there is no input there you go looks cool if i type in there you go and then what we're going to do is have a button so when i click the post i'm going to go ahead and say on click let's check this out soon to break up 800 likes hey let's go all right i'm gonna go ahead and say on click equals and we're gonna go ahead and say um handle submit that's a handle submit and this is going to also be type submit oops i love these tunes they actually get me hyped up coding handle submit we're going to create this helper function um so at the top we're gonna go and say const handle submit and then here i'm gonna go ahead and say it's gonna be an asynchronous function i'm gonna i showed you guys the trick before as you again but react form element there we go oh that is actually this is different so the handle submit for the form element is not actually here i've actually done it on here then on submit handle submit so you can do it two ways right if you do a submit on the form element you can do it there otherwise it would be on the on click and you have a slightly different type so in this case you can see form element right so here we're gonna do e dot prevent default nice okay cool so we've got this then we're gonna go ahead and actually have the comment body so you can see where we're going with this i need to make an api endpoint for the mutation that goes on okay so let's check this out um this has got some somebody else are you gonna make connect back-end stuff this has got a lot of api stuff in this world um so that i think yeah it has done it in this one so i'm gonna create an endpoint called add comment so add comments so add comments yep add comment.yes same thing copy my hello template boom [Music] awesome stuff let's go to and build that out so i'm going to do the same thing here right so again we're going to send it through as the body of the request so what i want to do here is say const comment will get sent up we've already typed in our comment body type definitions earlier on we're going to pass the uh body that we send up the rec.body then we're gonna go ahead and make the mutations so very similar to what we did before so jay you've got a question um check this out so we're gonna go ahead and say mutations and here we've got uh the inner imitations with this and we're gonna go ahead and do a create okay and um we've got create and here i'm gonna go ahead and say create a type is gonna be comment so underscore type is comment and um great what the hell um create oh yeah oops this is going to be a i don't want to confuse you guys so i'm going to do this and then we're going to have create cool and then we're going to go and say comment is a dot comment because we're getting this in through here you could say data whatever you want really and i'm going to pass in a few extra things right so the next thing is it's going to be username and it's going to be oops you know username and profile image and then finally to reference the tweet so remember that kind of magic part at the end right so we're going to go ahead and pass in the type here this is going to be the reference and this is how we connected to the tweet up right so the reference here is going to be the comment.tweet id that's how we get that connected structure content working okay so this is working quite cool we've got the mutations down over here next thing we're gonna do is make a request to the api endpoint okay so we're going to do the same thing we're going to say const api endpoint um endpoint equals and i'm going to paste it in so we've got the same endpoint that we did last time then i'm going to go ahead and do a fetch and with a const result equals a weight fetch we need to make our function asynchronous so async then i'm going to say await fetch i'm going to pass in my api endpoint and then remember we're going to

Channel: Sonny Sangha

Views: 116,974

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

Length: 197min 52sec (11872 seconds)

Published: Thu May 05 2022