Full Stack Next.js & Supabase Twitter Clone – Full Course

learn how to build a threads clone uh I mean a Twitter clone the focus of this course is not just building the application but also understanding and implementing essential development tools like next.js 13 Tailwind CSS typescript and super bass key elements covered include designing the layout with Tailwind CSS managing the back end with Super Bass incorporating robust authentication handling server actions fetching tweets and developing engaging features like liking and replying to tweets this course is an excellent resource for those wanting to understand the complete life cycle of developing a real world application with the latest tools and Technologies pranjal Sony is a full stack developer and he teaches this course let's start learning welcome to holistic Netflix in this course we are going to build a fully step tutor application it is a web application and the tech history we are going to use is Nexus 13.4 version with latest server actions and server components we are going to use Superbass for authentication and for our postgres SQL database we are going to use something called drizzle orm for our database orm to make our life easier with fetching and inserting data in our database then we are going to use Redix UI components by shared CN it's a very great Library if you go to ui.sharescn.call you will find it's an awesome library and we will use this library to build our dialogues and build our application components other than that we are going to use typescript that is obvious part because type is shift helps us to build our application faster and it helps us in a lot of Auto completion so that while developing the web application our life is very very easier so if you are excited and if you want to join this course follow along this course is absolutely free you can watch all the tutorials on my YouTube channel you can watch the whole series and it will teach you a lot of concepts of Nexus so thank you very much and I hope you enjoy watching this course and the most important part now I will play a demo on my side you can see this is the demo of how we are going to build the application and and how our application is gonna look after we have built it so if you have watched the demo forward application and if you are excited to follow along follow this course and learn next year's 13th thank you so now as you can see I am using Mac operating system so if you are using Windows you can use your terminal which is a git terminal okay so you can install all the things you can install visually Studio code I have made all the videos related to installing initializing in my past YouTube videos so you can watch them you can understand everything related to installing and setting up the environment we will directly jump forward and we will start building our applications so I haven't prepared anything so you will see what I do here yeah so for the CSS part I have forgot to mention that we are going to use Telvin CSS because I like Kelvin cssa a lot and it will increase our productivity at least by 10x so that's why I love using television CSS and that's why we are going to use salvances in this full hack Twitter clone project so for installing so first we will get into our folder so now I am in my root so I will go to desktop I will go to YouTube and I will clear everything and I will now use pnpx command so you can use yarn you can use npm you can use pnpm but we are going to use pnpm because it is fast so why it is faster because pnpm used a mechanism to hard link all the packages to the code we are working for example you are using Prisma Oram inside your one code folder or inside your one code repository and you try to install that into your another folder into your another project so it will install it one place and then it will link that package to every project from a centered location that's why it is faster and it will help us to save our disk space inside our machine that's why I love using pnpm but it may sometimes cause some errors so you can always shift to yarn that is better than npm so I will go for pnpm now I will say pnpx create next app because we are using next yes so it is a command to directly install the next.js so create next app at the red latest and we will say just enter and now you can enter your project name so I will say Twitter clone so I will call it ultimate ultimate Twitter Chrome now it will ask us a few things you would you like to use typescript yes yes television CSS absolutely yes yes and now it will say would you like to use experimental app directly it is now experimental but it is a great chance that when you are watching this it is into the stable version so we will move forward with server components that's why it is the latest and greatest tutorial on the internet as of now so we will use import alias so that we don't have to use relative Imports so it will make our life easier also so you as you can see it has installed all the packages very fast because they already exist in my machine and the pnpm just hard linking them to the center location where the packages exist to my project now we can go to our ultimate and I have made a ultimate blog application udemy course so you can see that thing in my description or you can visit the page but as of now this is a free tutorial and this is going to be free always and I'm making sure that it will be the greatest tutorial on my YouTube channel so as you can see we are into our folder into our repository now we can open our Visual Studio code over code editor where we will write some code so code spaced out and enter and now it will open a window of Visual Studio code open it and now you as you can see everything is set up already for us so inside the source directory you have this API routes where you can Define some API routes you have your layout you have your page so now as you can see our project is ready now we will install a few things which will help us to make our life easy so now as you can see we are using next font and here we are using enter so we will remove everything and first we will run this application so that we can see what is happening there so we will run pnpm run Dev because if you see in the package.json here you can see to run the dev environment you just have to run pnpm run Dev yarn run Dev or npm brand as you can see we are using App directory because we will use server components the latest and greatest stuff in the react ecosystem so this is my browser window I will open it in another tab here and I will go to localhost 3000 and you will be able to see how it looks so this is our basic nex.js application running as you can see now as I said we will use Superbass for everything in this project because why we are using Super Bass because it is very easy to set up authentication to set up database to set up storage because we will be uploading images we will be uploading GIF also for our Twitter post so that it will be very easy for us to like use super bass and it will handle all the complex stuff for us so we don't have to worry about anything so as you can see building we can scale to Millions this video is not sponsored by Superbass if they have sponsored it I would be very grateful but it is not I am just recommending it because this is by far my go-to tech stack for building fully stack web application and I love using super besters so now as you can see it is totally free by the way you can sign up for a free account and now you can click on new project and I will say ultimate Twitter Club so this is a database password which you can also generate afterwards and now I will choose a reason which is near to me free account and create a new project now it will create a new project for us and now let's see what are the features Super Bass offers so we will see all the features so you can see we have database we have storage we have Edge functions if we want to do some computation on our backend side but I think for our project we don't need any computation but if you need something like sending emails to the user running a chrome job or doing some expensive task like video processing image processing or some kind of stuff then you can use Edge functions it is just like serverless functions or it is just like using virtual API routes but it is much more capable of doing anything and it uses Dino as a framework of node.js and we also have real time thing where we can face real-time data we can get real-time updates so let's assume you have some leaderboard inside your fully stack application then you can use Superbus real-time database to connect to your database and whenever you have some updates it will automatically update your UI and your users will be able to see all the results changing in real time and we will use authentication we will use database we will use storage these three things these three things I think we are gonna need inside our project so it will take some time to provision the project let's wait for some time you can see okay so our project will be deployed on its own instance okay so let's wait for some time and we will see how it works so you can also visit some documentation here all the documentation is here so number one thing we can directly create our database tables here okay so if you visit Twitter so I don't let me just get my Twitter account so we are going to copy this whole thing so as you can see this is over Twitter and we are going to copy this whole thing we are going to copy this whole thing we are going to copy this model we are going to copy this sidebar this timeline this trending section and we I think I am also going to build this feature which is training feature who to follow and all of those things so first first thing first what do we need we need our database so what does a Twitter contain a Twitter content tweets number one thing users tweets and replies and all that kind of stuff but for now we will stick to our database so we will think how should we approach so let's let me open my escalator and here we will see what we will do so how should we approach the whole thing so here we can do something so first we can build our layout build our UI build over layout I think that's the best approach and that's what I do almost all the time UI build the whole UI and then what you need to do now you have the UI you know what the data you need then you can proceed and you can design your database you can design your database so design the database then afterwards we will create our tables so let me Zoom it so you can see now we have our database and now we will create our tables create tables and sync over database with over code so let's assume we are going to use an orm like Prisma to handle our database queries and mutations and handle all the migrations and all that kind of stuff but we are not going to use Prisma here we will just stick to plain Superbass and plain stuff here with super best directly queuing over database and directly mutating over data base from our front end by using the Super Bass GS library and for our curious thing we will use react query and you will see what are the problems we are facing with plain Superbass with using custom hooks or if you use a library such as react query to make our life easier with loading State and error States so here we will create tables and sync our database with our code base so now we have our database and also typescript configuration so we need to do some things with typescript here and afterwards so when we have did this thing now we can build our functionality so now we can build our functionality build the functionality so what are the functionalities we need mostly in our Twitter application so mostly post Tweet a tweet includes text image video also or GIF so we will we are going to implement all of this thing okay so posted a tweet can include a tweet includes text images video GIF or all of that combined so we are going to implement this functionality so this is the first thing now we have an infinite timeline which is infinite scrolling feature okay so this is the main feature where we can first fetch the tweets another functionality we have is user page profile where we have our users and users can like a post users can like bookmark like and bookmark two things we can and reply to a tweet so it a reply is also a kind of tweet a reply is also a kind of tweet so we will see how to implement this thing and that's all the functionalities which we need so this is a lot of work and you will see how we approach these all things and you will be amazed how easy is this to build this application and how easy is this to build this application using nexjs and Super Bass and television so first let's jump right into building the UI part go as you can see this is our basic Nexus application starter code which we have initialize everything in the last video in this video we will just going to build the layout section and the whole UI section of the home page so we will remove everything here rafc if you don't have this extension you can install this here you can install the es7 plus react reduxe synthetic native Snippets this is a very useful extension which will give you a lot of Auto completion if you type rafc then you can see our load to completion which it will give you but we need rafc even so this is so this is our home page our Twitter home page and now here we will Design the thing we can remove this we don't need this thing so if we go to Twitter we can see how it looks so this is how Twitter looks like you can see this is our timeline this is explore settings but we can create a fake account for now so I think if I if I refresh this it will ask us I will sign up for a demo account for now yeah so this is the club of folders account as you can see and now we will implement this thing first of all we will understand this layout we will understand this layout how it works so first we will go to excalator and here we will Design our whole UI we will understand it so this is our home page as you can see this is our home page and now we have some fixed width if we try to zoom out you can see the whole Twitter page is taking some fixed width some fixed maximum width and it is not exceeding its fixed width and it looks different on mobile but we are only going to build this whole thing for the desktop I am not going to make this layout responsive you can do that so now this is our whole layout and this is some fixed width let's assume this is our fix width and now here we can see this is the sidebar so first we will make a division and we will give it fixed width after that we will make 3D using inside it sidebar this is the main layout which you can see this is the main timeline section and this will our training section this third division this is our third division which is our right sidebar okay and now what we will do this all our icons this is home this is exclude notifications all these things so Dash datash and here we can write a tweet we will not implement this for you and following we will just stick to the basic one this whole where we can write our tweet which is here home just like it and this is a section where we will write our tweet we will compose our tweet and and now we have all our tweets here like this Dash and here we have our trending section what's happening so this is our twin trending section and this is who to follow section just like that so this is the whole UI we need so this is just a game of flex box and grids and this is very easy to implement this is fixed this is also fixed only this is scrollable and we will do all these things very easily by using telwyn CSS and you will see how much easier this to build this whole layout and this is our Twitter logo okay so let's start building this first we will install the icons library because we need Twitter icon so we will say pnpm install react icons this is a great Library which you can search also react icons dot github.io this library and here we can search Twitter and here you can see this is the exact icon we are looking for so as I said first we will create this fixed width thing so we can say class name is W full H full width and we can say this is a whole Flex box justify Center item Center if you are not seeing the auto completion you can install the Telvin intellisense so you can install this so now we have it full H full and it is item Center and we will now make a fixed with division inside it so class name maximum which is screen 1024 pixel okay this is good we can say with full H full it it is also a flex we can make it Flex because okay so these These are these are fixed you can make it relative it is also relative you don't need to specify It Is by default relative but we are it is not widely for relative I think yeah so if you want to make he learn absolute inside this division or inside this division then you have to give it relative so the absolute division will position itself absolutely according to its nearest parent that's how it works so now we have over this layout the whole color is BG black like that now we have three things here inside this we have sidebar Tu into three so this is our sidebar this is our home timeline and this is over right section like this you can also do the section thing here you can say this is main to make it semantic HTML can make it section like this and now we can do all the things so first let's design the left sidebar so it is class name now if you give it absolute width it will poison itself according to this division but if you make it fixed with it will position itself relative to the whole Windows width and height so what do you think what should we keep it this thing I think we can position itself with the whole Windows height so you can say fixed and W is we can give it some width let's find out what is the width of this so now you can see this is the width of 275 into 836 to 275 pixel with this 275 pixel so you can how 275 which is near to 64 right things and 70 to yeah it's good and it is a flex column because inside we will Define all the navigation items after we have designed the whole thing then we will separate all the components into a different different file because we don't want our code to not be organized we want our code to look nice and easy for anyone who looks at our code so now we have a fixed sidebar left sidebar so we can say left sidebar for navigation or we can say the header it is a kind of header and it has the height of edge screen inside it we have home explore notifications message bookmarks profile and more so what we can do here we can Define array const navigation items is equal to this is the array and we can then map through them and we can Define our sidebar so here we have home explore notifications so we can say that the title like this the title is home and the icon is home icon or The Birdhouse bird house you can insert any icon and you can choose whichever you like so I will go with this one okay this looks better how about we search home yeah there are this looks similar to The Tutor House icon so here we can say bi home Circle and we will import this thing first so import from react icons slash Pi like this now this is explore and this is the explore icon which is a hashtag so we can search a hashtag import from react icon slash hi now we have notifications notifications icon is kind of Bell so we can search bail which looks similar to the spell icon and I think this one looks much similar now we have what messages we are not going to implement all of these things we will stick to the basic functionalities you can implement the other functionalities if you want for the message we have the envelope so we can search in the lab yeah so whichever looks similar yeah this is good import from react icon slash hi2 okay so import it from BS now we have bookmarks and profile we will skip them more we will bookmarks bookmarks and we have profile for the profile we have the user icon and for the bookmark we have the bookmark this one looks good BS bookmark for the profile we have the user icon so AI outline user Pi user whichever you like so I think it looks good you can import it from here so now we have all our navigation item and we can render them if you hover over this you can see this is the title and icon and we just need to render it over here so we can say it navigation items dot map and this is our item and now we can say render a division which has a key of item dot title and we need to render two things here so instead of division we can what we can do instead of division we can render a link over here and we can say href is also slash item dot title dot to lowercase like this and here we can give it some classes I I will give it busy white of 50 rounded of 3XL painting I will give it padding of 4 and that's good here we will render two divisions first for the icon so here we can say item dot icon just like it and here we can render another Division and inside this we can render the item dot title we can make it a flex we can give it item Center justify Center we can give space of X of 2 and now save this and let's have a look at the whole home page what we have did till now so now you can see this is what we have designed and it is looking nicely for the first look we have forgot to render this Twitter icon here so what we will do first we will render the Twitter icon over here so we can say this is link href is Slash and this is just a Twitter icon so we can say PS Twitter now if you have a look yeah it is looking good we can comment these two things for now yeah also what we need to do is we can give it some class names for now my of margin of y y means on the vertical axis so we can give it 4 M by 4 okay so it is not working why is that because I think we have to do something here when we hover over it then we have to show something otherwise known so we can say when you hover and this is just 10 and we will make a transition duration is let's give it 200 and P4 is a little bit too much so P2 will work yeah 30. now you can see if you refresh this it will work and 30 is bit too much yeah it is good now we just have to make it to the left and we don't want to give it a whole width what we can do here instead of just if a center we can say justify start and W is fit now you can see the W is fit so it is taking the whole content width and what we have to do now we have to make it a little bit bigger so now it is smaller so for that here we can come and here we can say note here I think we can directly say so it will this class will also work on this is item dot icon we can set text is Excel so it will make it a little bit bigger and I think it will 3XL 2XL yeah it's good and we have to give it little bit more of space so we can give it six not on the X on the Y also so as you can see this is flex column so instead of giving this m y of 4 but we can do we can say space of y o four and margin of Y of force yeah now it's good we should also give it P2 so it looks similar and also text of 2XL now you can see we have a similar looking Twitter UI here we just need to make it a little bit bigger and the width is also bigger than we have defined here so instead of LG what we can do XL yeah it it is exactly similar to the tutor and when we are on the page we will render this icon as a bold like you can see we will fill this icon for now we can skip that part for now we are just designing the home UI now at the bottom we have Club of folders here at the bottom so what we will do also we have this tweet button also if you see the padding of access a little bit bigger and here we don't have that padding so P wise 2 and PX is 4 yeah it is good now I think it is more PX of 6 yes it's good but we have to give the same thing to this so that it looks exactly similar to yeah now it is good also we can give it this thing we have but I think we can Define it over here instead of manually doing so we can say title is Twitter and icon is PS Twitter like that now we can remove this thing but here we don't need the Twitter thing so what we can do we can conditionally render this thing so here we can say we don't need to render the title when the item dot title is equal to Twitter don't render this when the item dot title is not equal to Twitter then enter this otherwise we can say now you can see it is similar to the whole thing it is looking beautiful and we have the same effect as Twitter now we have a one thing more here we have a tweet button so what we can say we have a button here which is tweet we will Design this button now we can say w is full a rounded is 3XL Pages blue so we will copy which color is this Twitter color so we'll inspect this element yeah so this is the color we have so we will modify our utils because we we need this color for a lot of things you can see this is the same color which is this so we will modify our Telvin config so this is where we will modify so we will extend our color so we will search how to do that I don't know so here we can say command plus K hit command plus K and search Kelvin config theme configuration now you can Define the colors like that so theme inside colors and you can Define the colors so team extend inside the colors we can Define the colors I will say the Twitter color or we can say the primary color which is this now it will work because I think we have modified the Telvin config we need to reload or let's see BG of primary yeah now it will work now you can see how I find a solution which I don't know how I search into the documentation and you should always do this okay so if you don't know anything you can always search into the documentation and look for the solution so now we have our BG primary color now we need to give it some padding so pux 6py4 would work and the text is also bigger so I would give it to Excel and the text is also Center save this yeah it is looking good but when we hover over it the BG opacity we can reduce some opacity we can say 90 and we can also note 90 I would go for 70. now what I can do I can also give it transition and the duration is 200 so that it looks smooth and it is not 3XL it is actually full yeah now you can see this and I think we have made it much weaker so P4 would work I think because we have given full width that's why it is working yeah it is bigger so that we need to decrease this to 75 pixel it's good but I think we need to let's keep it margin 4 to decrease some width of the butter now it is looking good so you can see the messages is looking a bold here okay so we don't need this bold thing we only need this when we are on the message as page so instead of this hi envelope we need a outline so envelope we need an outline envelope so BS envelope will work for us yeah it is good and now we have designed this sidebar for the Twitter okay so this thing is remaining so let's also design this thing so we have this section the whole section we can wrap this whole thing into a division separate division why we are doing this you will find now because this is fixed width and the height of this is screen we will make it items stretch and now we can define a division here and this is at the bottom you can see now this is at the bottom it should be at the bottom now it is not W4 let's give it w full so it doesn't look odd okay so we have to keep this whole thing here this is a division this is another division what I want I want let me go into X skeletrome so here we have a division so what I am saying is we are defining a division here which is a flex column so this is a flex and now we will say make this port using justify between so it will stretch those division through the whole height so that it will make this division to the bottom but it is not doing that so we will see why yeah now you can see this is at the bottom but the problem is because of my4 it is not at the bottom yeah so we will see what is happening here we will remove this m by bottom yeah now you can see this is at the bottom because we are using items stretch items stretch will stretch this division to the bottom that's what we want here what we can do we can M by 4 now it will work yeah we can only give it to the top here it's as a screen here we don't need to give it a screen we can just not give it anything here we don't need space y it's good but now here we can give it Edge full so it will take the whole height here till here and now here we are at the bottom and now here we can Define this thing so this is a logo this is the name this is a username and now this is a three button or whatever to say it so this is similar to this but some parts are different which I will tell you inside the button we have two divisions not actually two we have three division this is a three dots so BS three doors I think yeah we have the three dots here we have the logo which we can just for now make it rounded full this is basically author we can make it busy slate 400 and what we can do here yeah it's good we can give it w 8 h8 height and width this is already I think flex no this is not Flex so we will make it flex and items Center Space X of 2 inside we have two divisions so this is a division inside we have two divisions first one is the username so this is the name of the user so let's see for now Club of quarters and here we have Club of colors my username and now you can save this whole thing and now we will see how it looks yeah so it is looking a little bit odd because we have given its PG primary but we don't need BG primary we need busy transparent and because of the text to excel this is too big so we can make a text XX so extra small now you can see this is looking good and instead of giving it text access here we can give it text access and this is small and we can make it text to the left here and I think the smaller is looking bigger it is not smaller we can make it font semi bold and these both are extra small text yeah and when we hover over this whole thing we can make it VG White and the open city of the BG white is 20 now you can see 10 would work just like it yeah but here you can see the the three dots are not on the left not on the right basically so we want to make it the full to make it to the full width so what we can do here we can give it full width and we can tape this whole thing into a separate Division and we can make it item Center and justify between so now the three dots are to the left and here we can now Define Flex item Center space of X of 2. now you can see this is good but here you can see the text speaker I think so I can give it a small yeah so now we have designed the similar looking Twitter sidebar we can make this thing this Avatar also bigger 12 watt yeah 10 would work so you can see that the font is not similar to Twitter you can find whatever phone you like and I would just stick to the simple one which we have now and now you can see we have created the left sidebar for the Twitter layout so as you can see this is what we have currently we need this thing so this is centered first thing first and then we have this home then we have this Twitter composer thing where we can write our tweet and we can tweet this thing and then we have the border the bottom border and we have all the tweets rendered here so let's put this left sidebar into its own section so in the source directory we will create another folder called components inside components we have our left sidebar dot TSX rafce and we will copy and paste the whole thing over here we'll also need all these things here yeah it's now good and we will import the left sidebar in the main here left sidebar just like it save this thing and now we have a separate component for our left sidebar close everything and this is our main time line save this and we will see how it looks so it is currently being rendered over here why because we have this left sidebar and it is fixed so this container which is a flex doesn't know that we have this for now that's why so to make sure that it assumes that it has something over here what we can do is we can define a invisible container here or what we can do we can make it like left so we can give it margin of left so class name margin of left of 275 pixel let's assume we have a lot of low Ram Epsom here for the demo and now if we scroll this you can see we can scroll this and it is fixed it is fixed but we can scroll this and that's what we need so Ctrl holds it and now it is good now what we can do as you can see this has left border this has right border and this has tweets inside it and the home so we will say if this is flex W is we will give it some width which is how much width it is taking so let's find out so this has 598 into 53 so it is 598 so we can give it 600 pixel almost the width and the height is full obviously and it is a flex column that's all we need and now here we have H1 and it is home as you can see on the Twitter and let's give it text 3XL font bold save this and we will see how it looks yeah now we need to also give it powder left border right or left and right no top and bottom only left and right border left and border right and Border color is gray 400 I think yeah it is 0.5 pixel I think and the border is it looks good it is one pixel left and right border and the height is full as you can see here the height is full and the minimum height I think we can give it a screen so now you can see it is taking the whole screen for Twitter and we here to give some padding to it and 3XL is also a bit too much we can give it some 2XL and let's give some padding of five six would work yeah it is good but we need this to be 0.5 pixel for that what we can do we can say 0.5 pixel just like it and the same thing here it is looking better now we need some padding for it also you can see the padding between these two so let's go to or we can give it some margin we can give it the whole thing margin so padding and margin of X is 2 left yeah so we have to give it some padding to it so let's give it PX of over six now now it is good you can see this is over bottom whole thing and it is a sidebar and this is looking good and the home is small small a bit so let's go into the page here you can say this is Excel this is good and now we will Design This compose box so for now here we can come in here you can you can say class name this also has the Border top and bottom so instead of this we can copy the whole thing we can give it top and bottom we are not giving left to right but because if we did then it will be two borders because we have already given left and right border here if we give it here it will be two orders and it will look like a little bit Bolder so top and bottom so we have top and bottom for this box and what we need now we need some height so how much height we it is so we can give it Like H of 3 32. let's try this for now we will see what it is and now it it has a author which is the user profile and here it is the input which is what's happening the placeholder and now here we can write a lot of things so low Ram Epsom let's choose some words not like this uh generate paragraphs yeah so now you can see Twitter character limits so I think 144 is a character limit of Twitter Twitter character limit 280 characters okay so so it has two at the character limit okay so we can now give it relative also and now inside it inside this division we have this Avatar and author so we can make two revision inside it first one is for Avatar which is a W10 h10 height and width is 10 and BG is Select 400 rounded is full it is good here we have two things we have this input box then we have this border then we have this tweet button this image GIF this Emoji picker this pole okay so we will also implement this thing also this is a cool functionality and we will try implement this this is both this is scheduling so if you want to schedule the Tweet you can do it yeah so this is a kind of form we can for now this is a division this is a division inside it we have two divisions like this so we can make it Flex column Flex Flex column inside we have two divisions this is a input box type of this input is text and placeholder is what's happening this has border of bottom 0.5 pixel and the powder color is gray as as you can see we have already given the Border color here so we don't need to give it again and again now we have this thing so class name and we can make it w full justify between item Center to make all the divisions all the children division to Center according to the Y axis because this is a flex row okay so you can give it Flex row now we have two inside two divisions and this has all the things like image icon GIF icon Emoji picker all the things but we don't need this thing now we can just skip this for now and here we can define a button or the button here and we can say tweet and it is the similar button to this thing so we can copy this whole button for now the classes around it is full opacity is cool everything is good now let's see how it looks yeah so it is looking cool for now now what we need to do is this input field it knows looking good so we have to give it some classes W full H is full BG is transparent and outline is none border is also save this now you can see this is cool if we remove this here this border is the color border is not working so we have to I think here also yeah and what we need to do is we need to give some padding to it so instead of giving this thing here we can give it padding bottom of four or the whole padding is four we can remove this division round it is full we can remove this margin for this spreading is 4 is also a bit weird we can give PX4 py of 2 W of full let's give it Max with uh 400 pixel would work I think okay it is bit much 40 pixel and the text is bold phone is bold basically text is 2XL node 2XL LG would work yeah it is similar to Twitter we have our button here cool now what is happening and this is border is overflowing why is that because I think we have some mistake over here so let's find out this is a flex this is also Flex what we can do is we are giving it border bottom and top yeah so we can make it Flex this is flex this whole container is flex and items are Center space between them is two and now we need to give it with full now it is similar to this but here we need to do something we have to give it Flex none so that the rounded full works by default perfectly items not center items start yeah items are start but we have to what about stretch so it will take the whole Y axis instead of note taking the advantage of full height and now we can also give it some padding to Y 4 would work so I think this is similar yeah we need to also give some padding after below the home so we can give it the Mars into it yeah but as you can see we have given some padding to it so this border is not taking the full width so instead of that what we can do here we have another option so where we have given py okay so here P6 so left and right border P6 if I remove P6 yeah it it is working so what I think we can give it py if we remove the whole P6 we need some padding we need to give some padding to it so we can give it here so we can give it PX or 4 now it is good and we need to also give P 6 to it so we can give it P6 so it is now looking much similar to the Twitter you can see the sidebar this is our home and this is looking good but we need to make our placeholder look a bit much bigger so we can design our placeholder by doing this placeholder colon and now we can give placeholder classes so parlays folder is 2XL and placeholder color is also a bit dark so placeholder text Gray 800 about 600 yeah it's similar now it's good you can type here and instead of giving this whole thing we can make it yeah so now if you type something and you can tweet it good cool now we have our page six but we have given its a fixed height that's why it is not working so what if we remove the height it is good so now as you can see we have designed this tweet section now the time to create the Twitter timeline here this whole timeline so to design the Twitter timeline we have to design the tweets and then we can render them so let's design this whole tweet so as you can see first thing first it has stop in bottom border and then it has some padding author name username date when it is published the Tweet text and the image and video or GIF or something so what we can do this is our division this is home and now here we will render our tweets class name Flex Flex column here we can say array we can create a fake array area Dot from the length of let's give it length of 5 for now dot map tweet this will create a array of five length in which each item has undefined as its value so now we can render a division as a tweet so key is I which is index now we can give it top and bottom border we can give it padding good yeah so you can see it has a icon here so you can assume like this is a flex container the whole container then we have this container two containers are here first one is this hole and second one is this what I'm saying is this is our tweet inside tweet we have two containers first one is for the Avatar this division we have the Avatar here and another division is this inside this we have the name here and then the username here and then the text here and then the image or all the things here this is how it works first thing first we will Define two divisions first second inside we have author these are in the flex row Direction inside we have in the column Direction first one is row second one is text and third one is image or any media file so let's go so we can say Flex we can give some SpaceX of 4 and inside it we have two reasons first division is Avatar only so here we can make another division class name wtain S10 BG slate 200 and that's all we need rounded full here we have three divisions first second third two into three first division has three divisions three divisions I'm if you are using vs code this all will work Auto completion and you can how it is working so I am typing du into three and then it is giving me auto completion if I hit Control Plus space on my Mac keyboard Control Plus space and if I hit enter this is emit abbreviation and it will work like that so it is a name so we can say Club of coders this is my username Club of Hoarders and this is one hour ago like this as you can see programmer humor programmer humor and this is also we have a DOT here so we have four divisions okay so we have four divisions and here we have a DOT so PS dot just like it and all these four things are in Flex column not Flex column Flex row so we can give with flex item Center space of X of 2 of 1 1 will work so this is our first one the second one is text so we can give its low Ram of let's assume 100 this is a bit much the two it can be this much longer I think yeah so this is what we text it is text white text small and that would work this is flex column by the way Flex column let's give some y space to every children and it will work here we have all the media file so for the media as for now I will just render a square thing so I will say BG of slate of 400 aspect is square W full height I will give let's give it 96 96 would be good and that's all yeah we can make it rounded 2 XL or Excel would work this is media and now here we have all these things comment retweet like stats and the share button so five things we have here so five division first one is comment second one is retweet we will select each icon for that now we have like now we have States and here we have share and these all icons are in Flex row Direction and we have item Center we will give space of X of 2 we can give it to be full and that's how we have designed the single tweet and it should be rendering whiteweight for us and now let's go and now you can see all the twists are being rendered over here cool but we have to tweak a few things for now we have to give it the padding of Y axis so here we are giving padding X we also we need to give padding of Y so now it is good you can see this over tweets we need to also do something we need to make it bold this text should be bold so here what we can do we can make it Port font bold and that's good as you can see these borders are not looking good why because we are giving each tweet top and bottom border which is not needed so to remove that we only need to give it only top now you can see we are only giving the top border not giving the bottom and we can also keep it bottom border yeah now it works it works but the problem is if let's let's remove this for now and you will see what is happening here so we have this border that's why we are not giving border of top here we will give border of bottom so this tutorial contain the border of here then here and then here so it will work so save this and it is good but we have to give it the exact color which we want save this and now it is looking good it is good now what we need when we try to scroll this this home should be fixed to the top for that what we can do we can give it blur we can not blur back BG plus backdroper basically backdropular and PG white of 10 and we need to make it fixed or we can make it sticky to the top top now you can see this is sticky and this is backdrop blur you can see if we remove this let's give it black 10. now it's good yeah now it is sticky the home part is sticky to the top always remember to q a top bottom left right any position while using a sticky position you need to give some position to it while using sticky otherwise the SDK Position will not work like this you can see the space is bit too much for now so we can reduce the space so what we can do here the Border bottom P4 space axis 4 which is good but space yo4 is not needed 2 will work now it is good so now what I will do I will select the icons for each of the thing comment like and all the things I will go to here and I will find all the icons I am finding if some icon is looking similar to the Twitter one but yeah it is looking good so I will go here this is your comment icon let's import this this is a retweet search yeah we have a repeat icon import this from react icon slash AI this is our like which is like this will work this is the share icon no this is the state cycle so we can search States let's import this and the last icon we need is share icon which is yeah kind of like this import all of them and it is good to go I think what we can do here instead of item Center space we can make it justify around so it will take the full width and stretch all over the width you can see it is instead of this what about justify around what about evenly you can try whichever looks good I would go for just if I start and Space X of 8 more space X of 20 24 20 would work now I need to give it extra of Y2 it will not work let's give everyone M by 2 and let's give M by 1 and it will also my one yeah it is good M by three how about M by three I need to give some space to it it is not working why is that because we have given this m space of Y yeah now it is good so what we can do we can give it the top instead of full my we can give it also M term 2 yeah it is actually good and whenever we hover these icons there should be a nice looking around it full let's give it this this parent round it full and BG's black 10 20. let's go for 24 now and only when we have hover this otherwise don't make it look so let's try this also make it like cursoris pointer so it is not looking how about 50 yeah we need to give some padding to it now if we hover it is visible now you can see this is looking good so I would go for 30 20 actually go for 10 as we did here 15 10 would work and that's cool we can make a transition and the duration is 200. good now I think we don't need to queue the PMT two will work cool it's good and we will copy this classes and we will paste to each of the division instead of doing this we can define a component and we can render this icons but for now we are just doing this in the future we can fix our organization part so as you can see we have designed our timeline section for our Twitter there is three dots which is not visible and the text is also a bit larger so instead of text SM how about going with large yeah this is actually good or just stick to the base and this is the curriculum username is text Gray this whole thing is gray basically so we can remove this okay paste this class here also and here also yeah it is looking good and now we have our tweet timeline section but we also forget to make this three I can see here this thing we also need this three dots so we will wrap the whole thing cut it inside a division and there is another division which is PS3 dots we need to give these classes to this espresso effects don't need it here and it is good we can make it full width we can give it full width okay so note this thing okay so I think I have included it here so this bs3 dots should be outside this division here save this now you can see this is at the end and now we can also give some padding to it so to give it some padding what we need to do is how much bedding we are giving it so let's see P4 so we need to give some more padding to it how about be it p y 4 and P x 6 it is not working as expected it's good I think because we have given it fixed width that's why it is not working where it was so as you can see we have given it fixed width so if you remove this whole thing if you remove this now you can see this is taking a hell lot of width and what you can do here we can make it full with but you can Define some Maximum width let's go for 512 pixel or a bit more Excel a bit more to excel would work yeah now it's good because the image we have used we have given it 384 pixel and this is 672 pixel and now it is looking good it is a bit bigger than the Twitter but yeah I think we have to follow the tutor convention which is 600 pixel and we can make it smaller 80. now it is good cool so it is looking perfect now now we need to design the right sidebar so here as you can see this is what we have designed as for now so we can cut this thing and we can make a new file which is main component rafce paste here so these all are server components because if you want to use clients components you have to put use client here like this because we are using next year's 13 words so if you are defining use client then it is a client component if you are not saying anything then it is by default server component so we will import everything we will save this main component we will import this here cool now we have to design override section so this is also a fixed width so fixed now we need to give it something it is also Flex Flex column and space of Y of let's give it 4. inside we have three sections you can see this is our search bar this is trending section and this is who to follow section so this has three divisions first one is search bar so we can say input text so the type of this input is text and the placeholder is search tutor let's give some class names it doesn't have any border but it has this search icon so to keep this search icon what we need to do is we need to wrap this whole thing inside another Division and we will give it relative class W is full height is full and we also give it w of full height of full and we will give it rounded Excel and the other thing we need to give it a spading of let's give it four and now we will Define search icon here we will find a search icon so we can find the search icon this PS search I can looks good to me yeah it is looking good so I will import this and I will make it absolute and we need to also Center this alongside the y-axis so we will create another division inside we have this search icon and it is taking let's give it W5 H5 text is gray of 400 let's give it 500 okay so this is a relative and this is absolute division absolute division this is absolute with respect to this division so that we can move it around anywhere and we will now give it top 0 and we will make it high to full we'll make it Flex we can Center it that's how we are centering this thing to here so as you can see this is the icon let's go here so I will make you understand what I am doing here so this is our relative parent container so this is our relative parent container and we are saying that we have division which is absolute so this is absolute Division and we are saying the position of this absolute division is top 0 and right zero this means this absolute division which means this is the absolute division we have absolute Division and this absolute division has the position of top 0 and right 0 means top left which means the position of this division is top left and that's how it will take this whole height and after it is taking the whole light we are saying that everything inside it we want to Center so we will Define a icon and we want to center it that's why we are giving it flat and item Center and we will also give justify Center to make it Center and that's how it will work cool now we have done this we can also give it some padding but as for now let's proceed with it and let's see what is happening we will also give outline is null BG is also transparent and border is also save this and let's see how it is looking so you can see this is our search so this is right zero we instead want left zero so now you can see it is centered but we also need to give some extra padding to x axis so we can say the py is 4 good but we want p x to be 6 or let's go for it now it's good and what we can do instead of division we can make it level and we can give it html4 search box and we can give it ID of search box so whenever someone clicks on this thing it will focus on the input so that's how we have designed this whole thing so this is fixed as you can see and we will make it right zero so that it will stick to the right as you can see we need to give similar kind of classes to this because as you can see we want it after this thing for that we will see what we are doing we are giving it a fix with so that's what we have to do here we can give it a fixed width to this section instead of write 0 we can give it fixed with okay so and H of screen now let's see let's copy all the things because this is the similar thing we need so the problem is we want this to be right for that I think we can give it margin of left Auto this has a width of 275 pixel that's that's okay but if we go for right 0 then it will stick to the far right but we don't want that for that the other thing we can do is this is relative we can make it absolute and now if we save this you can see this is here we can cut this thing and if you series is relative and we if we make it border of let's say 4 and now you can see this is to the left here but let's also make it something and remove this thing and give it border border of Four but we are missing something and I want let's give it this left sidebar also the absolute and left zero cool and now give it this main component with full where is this maximum width just give it with full it will take the full width instead of it will also take this width okay so why we need to make sure that it doesn't take more than this centered width for that we have to do some fixes here okay so these are both absolute division okay so there is one thing we can do yeah there is one thing we can do remove everything related to the position we can make it simple container a relative container like this WSC w275 pixel left sidebar this is already good we can remove this part save this now we can also remove this whole thing now if you save this you can see we have these three sections first one is this division second one is this Division and third one is this search bar so now we need to make sure that this main component doesn't take more than 600 pixel Max width can be 600 pixel now it's good so it is taking more than which so I think we have to decrease some decrease this instead of LG yeah I would go for LG but it is not good so LG is 1024 pixels so I would go for 1100 pixel okay Max with 1100 pixel or how about 80 VW which means 80 of the viewport let's go 70 of it's good then what we need to do we need to queue according to the width not with full but we can give it like this is taking let's assume this is hundred percent then this is checking 30 this is taking 30 and the remaining is just 30 30 60 and this is 40. we can do that so what we can do we can say with his main component is 60 and the left sidebar has the width of 30 percent and the remaining section has the width of 30 percent yeah it's good but still it's not looking perfect we have to decrease some of the left High PX of 6 we don't need the p x x here PX of 4 would work and let's go for twenty percent yeah it's good so this is 20 percent this is also 20 percent now this should be 30 yeah it's good now but the problem is with this the problem we are facing I am seeing that this is not this is too much of fading here we are giving so I don't think we should give it padding here we don't want to get the padding here yeah it's good now it is looking perfect okay as you can see it is looking good this is good this is good but this is a bit of weird so to fix this thing we can fix this here so what okay so don't give margin four yeah it's fixed now you can see because we are giving it margin it was not looking good so it is exactly like similar to Twitter s for now I think the 30 25 and 25 and let's give it 50. okay 30 is bit too much for this left side but 20 20 is like perfect how about 23 yeah it's good 23 is good 23 is good and the main component should take the 50 that's also good and the remaining one is this with full this is with full now now it's good now it's perfect okay so we have designed this whole thing so now you can see this is not stickiest so to make this sticky what we can do instead of before we are giving the fixed now we can give it sticky so we can say this is sticky to the Top This is sticky and we can say top zero and the same thing we can do for the left sidebar now the the main component is not a sticky the left side virus so now you can see this is sticky for us okay so this is also sticky this is we need to make sure this that this is also sticky yeah now the both sidebars are sticky you can see this is also sticky this is also sticky and this is scrollable so this is the similar Behavior to our Twitter as you can see here now we can remove the border which we have given to these divisions to debug our television CSS now it is good okay so it is now looking absolutely dope now we need to give some gray to the border and for the icon so where we were in the main component close both the components here we are so we can give the background is not transparent it is actually some grayish background gray of 400 okay 400 is not good it is Greece or neutral I think it is neutral neutral neutral 900 is yeah you can see this is much better and 800 would work okay so 900 and let's opacity is 990 yeah it is good it is good we will proceed with it now as you can can see this is the search icon is looking a little bit weird so to fix this we can give it some padding so this is our division which is relative so what we can do we can give it some padding note here this is absolute division we can give it some padding before it looks good now but we also need to make sure that we fix the PX so instead of p x we can give it P left of 10 and the P right is 4 by default let's make it 14 and also instead of top 0 I would say yeah it's good but I will give some margin to top P4 yeah and now you can make it to 4 so it will be sticky yeah you can see this is now good looking good okay so now it works Forest a bit too much so I would go for two yeah it works so now as you can see we have designed our search when we click on this input button now it is focused and it is showing us a blue border so we will also make this effect so to do that when it is active or I I think it is when it is focused make the border border we need a border and the border is primary focus border is yeah now if we click this the Border doesn't look okay so you press this first now the border is not looking so board it is primary and the border is let's give it powder okay so we are giving border none that's why it is not working here now it will work so when we click this this is blue border and when we focus this border should be two now you can see it looks good not one by default the border border will work okay it looks better now we have our also we can group this whole thing what I am saying is we can group this whole thing this whole division we can group it by using this group class and now we can change this color also this search icon color also so we can say group over when this is group O or not over when this is group Focus we can say the text of this icon is primary and now it should it should work okay it is not working because yeah so to make this work we have to use some JavaScript so we can skip this part or we can use some peer classes I think we can use some peer classes there is something I think peer peers first peer focus and then text of primary it may work okay some something is Pure Glass Delvin before and after there is some class which I think we can make it work you can say group hover thing works but we want when the item which is nearby is forecast to do something okay so here it is so we will Define a peer class here we will say this is over here and when it is focused it is visible you can say when it is invalid visible this cool so now I think it will work save this okay so it is not looking how this works so let's see here again this is input which has period class and now we are using peer invalid visible won't work only previous sibling can Mark SPL okay so we have to we have to make it like this only previous siblings which means it won't work it will work like now this over this is our input and this is over and you can see okay so this is our input and this A P tag which is when it is invalid make it visible here it is saying that we have a span and this is our input so if this is before this this will not work now we have after this only previous siblings can be marked as peer okay cool now it is not still working okay so what's the problem let's try this for a simple other state so we can say this is a P tag class name peer Focus then make it visible otherwise it is invisible hello world okay you can see when we click this it is visible otherwise it is not and we want the same behavior for our text part which is this but it is not working why is that let's see yeah it is working now because the problem was we are giving a text Gray and we are saying that text is primary so it will not work because Telvin CSS will mark this class as a priority so this will be note our priority that's why it is it was not working now if you remove this from here now this classes will be applied to this thing save this and now you can see our thing is working without any JavaScript this is directly using Telvin CSS and it is so cool okay so this was the part I didn't know before and I just learned this thing now with you okay so this is so cool now we will Design This what's happening part okay so here is our training section part so it is also Flex Flex column that's all say we have S3 and copy this thing over here what's happening and now here we can Define all things here we can define a division inside division we have array Dot from another fake array we will create let's we have five trending things for now and we will map through them item and we will say division key is and here as you can see this item it is by default undefined because it's a fake array so we can get the index for now and we can say trending item first like this now we have to design so this is a neutral color again so here we will say border not border round it is Excel BG is neutral um 900 and this is a bold text font is bold text is to Excel and wise for now it's looking good how about if we make it 800 no how about 950 no how about 50 I think 900 is good for now we can give it some padding as well yeah also we can give it margin and Y of 4 cool and now we can design a this section this section okay so this is a hashtag and Below we have number of tests so we have two divisions div into two hit enter and here we can say trending item this instead of this we can say hashtag trending I plus one and here are the number of tweets this hashtag contents so how is this visible okay 35.8 K so let's go with this 35.8 okay this has the color of grayish and this is bold last name font bold text large this is text is small text of gray save this and let's see how it is looking okay so it is it is also note gray I think it is neutral and we will make it 400 yeah it's good forehand will do the work and if we hover over everything there is some background so we can also do that last name over BG white of 10 save this and now if you hover over this this is good but the padding we don't want to give to the whole container we only want to give it to this and we can give the padding to it now you can see we are good to go but here rounded Excel we also need to give this thing rounded Excel to the last element when this is last a rounded Excel rounded bottom we can say rounded bottom and we can say Excel now when it is last item it is rounded you can see it's look good it's good and what's happening is 2XL is bit much and Y can be 2 B4 can be 2 PX PX can be four it is good okay so now you can see this is our trending section and it's good okay we only need this thing now it is good we can give it some transition so that it looks smooth transition and other thing we need to give it a situation now it is smooth a bit okay so now we have designed make another division here another fake array 4 dot map key is I and this is who to follow same thing so we can copy the S3 here okay so we can copy the whole thing here basically we can copy the whole thing not from here yeah the full because this is exactly and with some modifications this is not here we were doing some wrong instead of what's Happening we can say who to Let's copy this how to follow save this and let's see now you can see we can the part is we only need to make this part sticky not the whole sidebar so we can come here and we can say this only division is sticky otherwise these both are screw level now you can see sticky and The Cone they are gone or I think there is another hack let's make this sticky top zero it is not working because the parent content is flex and it doesn't work like that so I think if we keep it fixed it will not work it will take the whole width that's why let's give it 25 percent now we can adjust the right um 40 yeah now it is good but we are facing the same problem which means we are not able to scroll this thing so for that we were doing perfectly before so what I mean w full sticky and top two is good what we need to do is Overflow scroll we just need to give it overflow scroll so it is also a screw level it is fixed but it is also scrollable now you can see we can also scroll this part and we can also scroll this part cool now we have to just Define this it is a avatar this is a name this is a username and this is a follow-on follow button so we will do that thing this is the same thing we need we will give it Flex make item Center and here we have three divisions first division is Avatar class name W10 S10 BG let's keep it neutral rounded is full and that's all we need here and this is a class name Plex Flex column and we have space y of 2 this has two divisions first one is name which is other user and this is the username of the user one two three four okay and now this is a four one follow button so we will Design this button also so this is basically a button so we can wrap this button inside a button component or a button element class name rounded is full PX 6 p y is 2 BG white text is neutral 150 save this thing and let's see how it looks yeah it is much similar to the tutor one now we need to do some fixes here we don't need this space okay number one thing we have fixed now we need some space of X here now it's good or let's give it four now it's good and we have to make it bolded and white this thing last name font bold text white we need to give you text Gray and text is small it's better yeah so I think it is good but we need the follow this button to the at the end so what we can do margin of left Auto this is a hex sometimes this works and let's give it with full now it only works when margin of right now or this no we can make it Flex none it's good I think okay so instead of doing this what we can do we can make them justify evenly or around what do you think okay so this is the P4 which is causing the problem now we can say justify around no this is good I think but we want to make this follow button to the left so for that we can use that again what is that heck wrap this whole rep these divisions to a another Division and wherever we this is this board save this first so you can see these both divisions are into this Division and now we can say justify between and it will work save this and now we need to give it Flex item Center space x 2 okay justify between Flex item Center everything is looking good okay the problem was you can remove this division yeah now it is at the end now you can see this is also looking perfect so now we have created the left sidebar we have created the main section this is our Twitter and we have also created the trending section the who to follow section all these sticky fixed positions are these things are working so as you can see here I am in the folder and the app is running this is a database diagram I have designed so first let's see how our app is looking so you can see this is our Twitter clone and it is looking absolutely top it is exactly similar to Twitter and it is awesome now this is our Twitter database diagram I am using this DB diagram website and you can use it too so as you can see we are defining table user has all the things related like username email other things so user can have multiple tweets this pins user to tweet is a relationship of one to many relationship but a tweet can be only authored by one user that's why author ID is string which is this and this is how we Define reference or we can say the relationship in this DB diagram website so don't worry about this thing I will share this thing with you you can just see that a user can have multiple tweets as you can see this is multiple this is one so one too many between user to tweet a tweet can have multiple hashtags a tweet can have multiple hashtags and a hashtag can also have multiple tweets so this is many to many relationship between tweet and history now a tweet can be liked by multiple authors so we can say a tweet can have multiple likes and it also connected to user a like his user ID Intuit ID so this is how we are saying that a tweet can have multiple likes and a tweet can also have multiple bookmarks and a user can also have multiple bookmarks so this is how it is working so this is our bookmark table and bookmark table also have ID user ID Twitter tweet ID created it if you are having hard time understanding this don't worry when we start coding this part you will understand it better and that's how it works and now this is our reply a reply is just a like of tweet so when a user replied to a tweet we will save some text with the Tweet ID because why we are saving the Tweet ID in the reply row because we want to know where this reply is related this reply is related to which tweet that's why we need a tweet ID so we can fetch all replies of a tweet by saying that qumi database give me all the replies of this tweet ID then we will have all the replies of a tweet but if a user is replying to a reply that's why we are saving a reply area also so here when we will Define this it can be null so you can visit the DB diagram you can see DB diagram syntax and you can find out how I have written this whole thing reply identity both are optional both are optional so here this is a dbml language basically so this is the whole syntax of dvml language you can see how we are defining menu to one relationship between these and how we are doing all this stuff you can also share the node or the save the node like this if you write this and if you look at the reply you will find the store user this is the note we don't need we just need to understand what we are storing in the database so first thing first this is a text VR showing the username when this tweet is created who is posted this to it and the likes bookmarks and other things and here you can see nod null if this is the username is like this if the username is we want to be node null then we can justify it like that note null and unique so we can copy this thing and we can say in the users table here we can say it is not null and unique we can also Define the default like 10 now and all the things you can read this which is on the DB diagram.io talks slash dbml and you can click this link to see all the syntax to write this database design okay so now we have understood what is our data now we will use share gbt to build a query for us because I don't want to manually create all the data inside our database so what I am saying is if we go to superbase if I sign in now I can see this is Ultimate Twitter clone and here I have this is a SQL editor and here this is how you define tables we can also go to this database and we can insert table like this but we have to do this all of manually and I don't want we want our productivity to be highest so for that we have to leverage the chair gbt you can see all the things are given here this is for storage this is for Edge functions Super Bass is awesome I think and we will use this now so let's visit jgpt and build the query so I will now open my another Chrome so now I will open my another Chrome tab here so this is changeivity and I will tell it that qma the query and I have already designed the DB so you can follow me just so I'm using zpd 3.5 the default so here is my database I will copy this and I will tell it give me post to create all tables and the dbml for those and use this dbm for the context like this and we will give it and now we'll it will you can see this is this has given us all the tables like this this is how much easier to use cheer gbt for us to write SQL now you can see ID you guid username email this is good and I think it is nice all the primary Keys foreign yeah it's good also I have renamed the like table with quotes like okay so what we can do we can use likes instead of this and if you visit this the database SQL editor create table you can see this is how it works ID begin generated by default is identity primary key set at it I'm starting with time zone default UTC not null we will copy something from it and we will modify according to us so let's copy all this and we will modify according to our need so user for the user I think in the here I think we have something use management instructor profiles yeah this is what I want so this will reference to overthrow users table and it will delete a user from our database when this is deleted from superbase auth table this is for the row level policies this is handle news when a new user sign up for a new account for on our website then this function will be automatically triggered and this will save a username into our table this is setting up all the yeah so we just need this thing this one this one and this one this three things we need for now let's copy in the SQL editor here so instead of this user I will say user ID uuid primary key yeah so we need username text unique we can use text inside postgres where care 255 is required for SQL so here yeah the ID we need ID updated username full name full name okay full name is stored in oath Road users table also I think if you use Google sign in then it is not required also this is not required constrained username length this is good we just need one thing here username and it it should be unique and that's all we need for our profiles we can say our users now this is a function which will create a trigger and it will automatically insert a username now we don't need author so it will values new DOT ID new DOT Ray row user metadatized username so it will insert ID and username into our table like this insert into this table values are this and return new it will be automatically triggered and we will pass the metadata from our front end when the user signs up for a new account cool this is profile now yeah the uuid cool updated timestamp with time zone and we can utilize this here yeah so it will be default to now now we can remove this because we have utilized this whole thing these are rollable security policies we will see all the Securities at the last first we will Design or we will build our whole application or whole web application then you will see if anything wrong with the security part and we will improve our security for our web application okay so trigger on Earth user created it will be triggered each row execute processor public dot yeah now we have a tweet uuid it is a primary key so for that yeah it is also primary key reference so I think it's good see it is ID where care instead of where care I think we can directly use string or not string text author IDs text created a timestamp now we need to do one thing over here testing default notable this whole thing copy this for the timestamp one part we will do this yeah this is hashtag okay tweet ID uuid okay this is also good you can use capitalize or small case both will work that's not a problem here primary key is good foreign key yeah this is for reference tweet hashtag so this is another table which means a tweet can have multiple hashtag and a hashtag in your multiple tweets so it will store tweet ID and hashtag ID and the primary key is both tweet ID and hashtag ID and it will reference to the table in tweet and hashtag the id id field the reference is ID field yeah and the reply is also like that user ID this is good create table like so now we can do one thing instead of saying like we can do likes we can say replies instead of tweets instead of Twitter you can say tweets this is better not here we can various to it tweet hashtag is good tweets hashtags this is better programming practice to name your table like that tweets instead of tweet this is hashtag stable this is tweet hashtag yeah this is fine now it replies this is good here just tweets so be careful by doing all these things tweet ID user ID reply ID this is fine now we have likes so likes is good we don't need to use the double quotes but it will be fine if you use or not use here user ID code code no so instead of users we are saying profiles so here you can see so instead of user everywhere instead of user we will say profiles ID profiles here also profiles SEO tweets so we will we will have to instead of bookmark we will say bookmarks The Bookmark should be unique that's why we are saying that constraint bookmark is unique unique user identity it is good like should be also unique a user why this is unique because a user can like a post one time and a user can bookmark a post one time that's why we will save only one record in our database that a user is liked or bookmarked a post we will not allow a user to like or bookmark multiple times or in the other words to save multiple rows inside over DB for one thing so user ID this is good okay so let's check again one time so we have profiles this is looking good we have this trigger function which will save a username into our database every time a new user is created this is our tweets table this is our hashtag Stables this is a table which will Define a relationship between tips and hashtags table so this is streets and this is hashtags like this cool now we have replies profiles tweets replies cool now we have likes this is also we are yeah Astro tweets we have tweets okay so this is good that's all the table we need and now we can run this query and over all functions our tables will be created so click on run and it will be fail to run okay so let's see what is the problem here so it is saying that foreign user ID foreign key cannot be implemented so in the replies so where it is here so it is primary kit text is text okay so here we will say that it can be null okay so for that it is null or node null so if it can't be null then we have to define or we have to say normal otherwise we can just skip null part yeah so now here we can say not null like this this is also notal a tweet must contain text here also this should be not null okay tweet hashtag tweet ID hashtag this is good not null not now good here also we will say not null here user ID can't be null but tweet ID or replied both can be null so we will ask here jgpt that okay so let's first run again it and then we will see what is happening so this is yeah this is also not null this is also not null here is timestamps we will use this whole thing here again let's run it again and we will see what is happening so we will ask this error to change GPT so that it will fix this for us let's see now it is updated over so I will give it my new this whole query I am saying that find any problem with this okay so it will say your modify query looks mostly correct but there is a couple of issues that I spotted in the replies table the foreign key constraint tweet ID reference to tweet stable instead of tweet Stables ID column oh that's the problem so you can see how we can utilize this to increase our productivity okay so what's the problem in the bookmark table okay you should change this to foreign key to it ID so it is a foreign key okay so we are saying which is a foreign key let's copy this thing if we can see the difference between the thing share gbt given us okay so this is uuid cool usernal tweet ID now let's remove this and we will run it again it replies user ID foreign cannot be implemented so I think it is mostly because of this line because yeah applies uuid okay user ID note null okay now how about it likes okay okay now it is working so what we have did is likes user ID foreign key so this is likes these both are uuid we are saying that these are text that's why it is showing us the problem author ID call a tweet a profile or we can say a tweet can have multiple users a tweet oh no a tweet can't have multiple a user can have or we can say a profile can have multiple tweets fix the TV according to this and also fix any error now it will create a foreign key like that author ID and profile ID that's we need previously we don't have any foreign key or relation between date and user now we have a foreign key author ID and profile ID yeah but we don't need author and profile two things we okay it can be just only one so profile ID remove this author thing here now it's good now we will run this and we will see if it is working or not let's try invalid SQL okay so we have did some mistake here what can be the mistake okay success now it is successfully run and we will see if it works as we want so first of all we will go to home in the tables now we have seven tables bookmarks let's see that bookmark have ID user ID tweet ID created it that's what we want first of all we will see profiles profile says ID updated username full name okay good replies this is good reply ID tweet ID user ID everything looking good and now we should also have a trigger if we if you click on a trigger these are our tables and if you click on a trigger here you can see when the user is created we have a handle new user trigger which will insert a username to our profiles tables this one we can do all these things webhooks functions and we will utilize this according to our need you just saw how we have used shared GPT to create SQL query for us and to fix the error and all these things okay and if you want this code let me just create a note here this one I will copy this whole thing and I will create a GitHub guest so this is DB design dot for ultimate Twitter clone just like it I will create a public just and that's all and I will share it with you I will put this into my readme file database I will save this for now I haven't committed or pushed to GitHub let's let me push that so okay so you can follow along and you can find all the code let me also create a GitHub repository now the code is live on my profile you can visit Sony prinjel on GitHub and you will find the repository here it is public repository and you can find it you can follow along and here is the code which we have used for our supervis so now we have also accomplished our database part now what we will do I will put this whole section into another component which is the right section so I in the components new file right body of CE I will press the whole thing here and this save this and I will import this here good to go now if you visit localhost 3000 you can see this is our application and it is running on Port 3000 and this is all the code you can find all the code in the description there is a link to GitHub and we are going to use this Library called UI dot sharedcn.com it is a great Library it has a lot of components and we can use these components instead of building that on our own to increase our productivity and to not reinvent the wheel again and again so as you can see currently we only have the Telvin CSS installed so to install this UI Library we just have to follow all the things so if you want to create a directly repository or you can say a fully fledged next.js product with this UI Library you can directly use this command but we have already installed all the things so we have to manually install this Library so first of all we will install this uh and beam packages so we are using pnpm so I will open a new terminal and I will install all of these things so this is for icons Telvin merge is used for merging the Tailwind classes and I will explain you what it is later clsx is also for merging classes and it's kind of like if you want to use logical classes or if you want to like assume if you are doing something and if something went wrong or the error occurs and you want to render a button color to Red based upon a logic then you have to use some JavaScript for your Telvin classes so instead of using JavaScript so instead of doing Curly braces and these brackets and all these things you can directly use CL SX and you can Define logical class names for reverse element CSS here we have class variance Authority it is for defining variants for your components like if you have a button which is primary the button danger button or info button Etc and television animate is just a plugin now we will see how to proceed we have already defined this path so now if you open tsconfig.json you can see we have defined our paths here so we can instead of relatively importing we can directly import using this so our Imports will not look ugly so now we will config our Telvin CSS here yeah so we will copy everything inside the Tailwind config so where it is here we will use this so control plus a control plus v so you can see container Center this all the things are defined for us already and these are the colors you can see the radius the Border radius and the primary color secondary color all the things cool and now here you can Define all the colors so if you want to change any color or theming in the future you can do that so inside the Styles slash Global CSS control plus a control plus v and these all the colors are being used here you can see variable primary foreground and these are the colors so we are good to go for now but as you can see we have defined a color which is primary color which is our blue color so we will use that color here what I am saying is if you control press Z here a few times this is the color this is the tutor color we have used so copy this color Control Plus shift plus Z now if you if we save this we need this color everywhere so for the here you can see how to customize theme according to you so here is our theming section and we will see how to use this so given the following this is primary and this is primary foreground okay so here background is good card primary so primary color is this this is the color we are going to use primary color and primary foreground is black so we will just use hashtag zero zero zero and it will work okay and we will see if it won't work we can change it anytime later so now we have defined all the things now we have to do one thing more we have to Define this helper this will combine the CLS X and the Telvin merge both days into one and we will use this so copy this into a source directory create a new folder called library inside the Library create a folder called what we can say it utils.ts okay and save this now it is good to go so in this Library we are using the Lucid icon Library so you can use any you want but we will use both and basically we have created our layout so probably we don't need anything for now so now in the components we have to create a new folder called UI in the UI we can now copy and paste a lot of components from here so first of all we need a dialog or we can say a model so that we can utilize our authentication for that so if you have previously used tutor so if you are not logged in then it won't allow us to view anything and it asks us to First authenticate ourselves so that's how we are going to make this application flow first a user have to authenticate themselves then they can proceed and now as we can see everything is good but for now let's Control Plus close the terminal and restart everything so it will work pnpm rundev now visit your application refresh this you can see the Telvin all the classes are gone why is that let's see maybe because if you delete the next folder here and that's that's the problem restart the server refresh the page sometime this hack works but okay so this is not working so something is not defined correctly okay so this is the problem we have a source directory so instead of directly saying you can say Source slash go into the app directory and find all the TS and TSX files find all the Telvin class names and use those for classes so instead of this we can directly say go into the source directory and find all the folders and do all the things save this thing now it should work yeah now you can see this is working but something is weird why is that because we have configured our Telvin CSS and the font is also looking a bit weird so first of all we will improve our color and our font yeah so this font is looking ugly so these are the colors this border radius phone families font sense okay so I don't want it I want okay Acer default default should be sense and it is good now it is the font is looking good the first thing we have fixed the text color should be so if we go into here we can say text should be white always now it is good text is white and this tweet button is not looking good so we have to make it look good so in the left sidebar where is our button here is over button okay so we are not giving okay so the primary color is not defined that's the problem so here instead of doing this here colors ring foreground primary yeah it should work so let's see the problem PG primary foreground yeah so the BG primary color is not working which is this color which is this variable the primary variable so we will find this variable where it is and we will fix this thing this variable doesn't need this RGB this variable needs hsl format so we can search RGB to hsl so we will 29 155 to 40 29 155 to 45 to 40 and that's good this is the hex and this is the hsl so I want a easy converter where it is color converter yeah this is good so I will copy this thing and now I will copy the hsl format I don't know but this is unless I don't like this this background also is not so we will we have to change this from yeah now it should work you can see this is working so the problem was we were using hsl format here to convert these variables into a hsl from it then we are using this that's why we have to Define this I don't like this approach I would go for directly the color approach the hex color that always works but for now we can skip the part because we have done all the things our background is working okay and the thing is if we go here the BG is black cool but why it is not showing any color here yeah it is showing it's showing now so if you remove this text white let's see so the text is not by default white so for that we have to again modify something into the colors input color all these things we have to modify border input ring okay so what we can do we can ask chair jbt to give us all the colors for Twitter because the chair gbt already knows the GitHub colors so I think it should work because it is too much hard work to Define every color and I don't want you to get into that for now so we can ask we can ask Jr GPT to use Twitter colors and modify this file this code accordingly so now it is given us the Twitter code you to use Twitter colors yeah it's good I have replaced hsl values with respective codes for Twitter node that use hsl don't include hsl nice so as you can see and it should work I think and let's see so now this is the color for Twitter and yeah so now everything is changed you can see but the text color is is Blue by default and we don't want a text color to be blue for that we can ask it to again modify this thing change the text color to white and the only color which needs to be Tweeter blue is button background and borders or accent colors okay the only color which needs to be Twitter blue is accent color okay so we have changed this thing body apply BG background text photograph text is for the ground let's copy this file again so it haven't given us the hsl values change it to hsl values without hsl keyword so this means it forgot now I think it will work yeah now let's see okay so it haven't changed but here we can do apply BG background and text should be white now it is good now you can see the border is good if we type the color is good yeah so you can also use the chair GPT like that otherwise if I had to do this all along like finding the colors and doing this this would take me like an hour or so so to save my time here I would go for this approach as you can see now everything is good to go we just have to do something here so now first thing first we need a dialog or we can say the model so for that we just have to do first of all we need to add a button or we can just add a dialog and I think it should add all the things related to dialogue so now we can copy and paste this command here and hit enter and it should add a dialog button where would you like to install the components so in the dot slash dots list SRC slash components slash UI so we will copy this thing maybe in the future if you want to install any other component then we will just paste this so now it will install the component in the dialog here you can see this component is here so basically it has copied and pasted all the things okay now we need to also install the button because the button thing we need always so here is the or button copy this now we have also button you can see all the variants of the button that's why we have installed this class variance Authority for our buttons now this is good to go now we need authentication for our application okay so for that we have to define something so first of all we'll find the documentation related to superbase authentication next year is 13. so this is our authentication first we have to install this libraries so we'll open a new terminal this this terminal is only for the UI part this is server this is for installing all the other dependencies so we can say pnpm install supervised auth helpers next yes we also have to install this all react not helper so we can use all the hooks that are provided next yes 13 is stable however the new app directory and server components are in beta check out our experimental guide yeah so we are using this app directory that's why we need to follow this documentation and you can find this link here I will paste this link in my readme authentication setup so you can follow along the video if you want and you can also follow this article to integrate authentication for your application so first of all we will copy this environment variable we will create a environment file dot EnV here dot ENB not for now first we will check if we are using dot EnV here no so we have to ignore dot EnV file here first dot EnV now we can define a dot env.local just like it so that it doesn't get dragged by our GitHub these are not secret next public means this keys can be public what can't be public are super best secret keys so we will see what are they in the future so yeah now it is good so your super based URL and your supervised NN key we will find this key by going to Super Bass project so superbass.com sign in in the ultimate clone and in the project settings in the API where is the let's see API yeah here is our project URL copy this next public this is our project URL and this is our NN public key see this is secret key and this key has ability to bypass row level security never share it publicly so don't share this key publicly anytime you can use this NN key always so now let's paste this thing here so now we of my energy now we have my Super Bass URL that's good to go okay so for the authentication allow new users to sign up you can enable this we can enable also custom SMTP settings that means we can use our own email provider credentials now here we will Define a configure middleware so we are using typescript you can toggle this thing here so we have to use a middleware that will be code every time we request a page and this page will contain the cookies and all the things that will be handled by this thing and it will provide us the supervisor that's how we we know who is accessing our application or we can say we can know the user details when the page is rendered so copy this thing typescript types can be generated with super based through your life so we will also generate all the types so for that we have to use this thing Super Bass start first of all we will do Super Bass init now you can see the Super Bass inside our application this is C dot SQL if you want to see any data for seeding your data you can also use share GPT to write some queries for you you can use chair GPT always use J GPT I would say to increase your productivity so now we will say Super Bass star I think it will start the low condition which we don't need for now I will just use this thing if it works or not let's see it will generate over types in the library and database type.ts okay you can use CLI to generate types but the point is I am not using so first of all we have to install the supervisor we still haven't installed the supervis if you go to package.json we have installed the oauth helpers but we haven't installed the supervised CS Library so pnpm is done super based yes this is how we create a client and now we can face the data so where should we generate the type so we I think we can generate the types in Super Bass slash database DOT type slash TS so it is asking us to install or to run the docker and then we have to run the super based local instance to generate the keys but what I want here I want the remote database to generate the tables for us so okay so what you can do here if you don't have Docker first install the docker for your machine so if you visit this you can download for your machine install this and make sure the token is running fine and now I will open the docker so that we can run supabets inside our local machine now if you visit the Super Bass dashboard we are using the remote version but for development we want a local version that's why because we need to generate the types and it is asking us to generate the types now it is good or we can ask it to I don't want you to get into the docker any stuff that's why I want the remote support so super bass generate types remote database okay so first login then we can use this command to generate the types cool so let's login npx superbase login so we have to generate the excess token here so I will generate a access token so paste this thing and generate a token local machine so I have this token I will not show you this token and you should keep this hidden because this is a secret okay now I can close this thing now we have generated our custom token now we can generate the types here so instead of using the project ID so we can now delete the supervisor so we don't need it okay what I'm saying is first I will write steps you need to follow before authentication authentication generate the types for your tables for the tables for the database we have created in the last video so for that npx super bass login and then you have to do is this command project ID and insert your project ID here I will insert mine so I will go to my super based dashboard this is my ID I will copy this and I will copy here in the public yeah I will hit enter type supervised let's create a file or you can say a folder types now it should work it is generating the types and it has generated the types you can see we have all the bookmarks we have hashtags we have likes you can see row insert update everything is here these four things likes profiles replies hashtag tweets okay and these are the views functions enums all the other things but these are our tables which are seven tables this is a profile the row is full name ID updated username okay so the username can't be null why it is saying this is this can be null okay I'm not sure about that maybe we have some mistake this is also row IDE reply ID can be null Twitter ID can be null yes this profiles in the profiles we have full name so the problem is when we first run the query it has created a row which has null and then we have run the another query then it doesn't override it again that's why the username can be helped but we don't want the username to be null so we'll modify our database so in the profiles the username can't win also I will say allow nullable so I will not allow this to be nullable and is unique yeah save this thing now we have updated our username table this is the much thing we have to do because we don't want any user to sign up without a username and if we now again generate the types by using the same command you will see that the username is now string and not null in the profiles here username is string no it can't be null so this is the important thing we have to do we have to remember so here you you have to use your project ID good I will clear everything now we are good to go so where we were we were creating this thing middleware.ts in the root of your project and populate with the following so this is a middleware which we are going to use so let's see how it is being used so this is a client common in the client's component we can always use the super based client and we can face the data like this this is simple but in the server components we have to use like this create server component super based client which comes from here and then we can paste the data like this and this all data will be faced on the server so you can follow this repo for the whole example okay so this is a middleware.ts which we need to create in the root of over directory so middleware to TS go up copy this thing database two types what we can do instead of here we can paste this thing here or what we can inside the Library supervised types two types now it works remove this folder these are our types cool so it is a middleware which will handle it is a database which is this it will create our supervised instance and it will provide us the authentication and it will provide us the session of the user close everything now in the app directory create a supervised provider which will provide the whole application and it will work like a context so Superbus provider.tsx copy everything and this is a client that's why we are using instead of super based root types yeah if we call it database to types it will be fine but yeah if we can call it super based client database we are defining the types this is a context super best provider we will provide the whole application or we can say we will wrap our application inside this provider and it will run the use effect hook which will check every time if we are authenticated or not and Export cons used to always supervised must be inside supervised provider and now we can use this use server base inside our application so we don't have to Define again and again and it will be only one instance of super best inside our whole application save this thing now we have to rape our whole application inside this super best provider here like this in the layout.tsx like this so inside the body we will say this is supervised provider import this from supervised provider save this thing and it will work now any of our client components base hook use super best hook to ensure they are using the same instance of super bus line or we can say they will not be creating more than one instance okay so now inside our client components we can use this inside our server components we can use this that's okay that's good so first of all we will try this thing inside our server component so so in our page this is a server component we can see now we'll import this create server components import the database and the headers and cookies do not cache this page where we get our headers and cookies okay let me see that we have to import this from next header okay now if we try to login now if you try to look this console.org super based out all the things auth dot user get user it will give us let's update for it let's make this function async and we will log in the user here we will see if the user is logged in or not save this thing and now you can see the data is user dot data dot user so instead of doing this we can see the data and the error and we can load both things now we have the user is null and error is missing subclaim or which means we are not authorized the status is four zero one now we will try to authenticate the user so what should we use which method should we use I will use the Google login because this is the easiest one to create so I will go to Google Docs so to create the Google authentication you have to follow these steps you have to get the oauth and now you have to do all the things here we can use a password method username password method but I'm not going to this add login code to your client application sign it with Google so only email providers is enabled for now okay so I think we can use the email if you want any other provider you can see their docs their docs are very user friendly very easy to follow we will use the magic Link login for now simple login the user will receive a login the sign in with OTP and that's all this simple thing we just have to provide the email and everything will work so let's copy this thing and that's all we need we have to enable magic link authenticator to your application so here in the email I think this is already enabled so what we will do first we will create a model or we can say a dialog we can create it here so we can see if the error dot status is equal equal to 4 1 which means the user is not authenticated then don't allow user to see the whole thing or we can say here if the error dot status is 401 what we need to do is we need to show the user the model so if this 401 means the user is not authorized or the user is not authenticated so now we will import the dialog here which we have created in the components so remember to import this from UI slash dialog so in the dialog we have dialog content like this and now here we can also use the input okay so we can say so to use input we can also use this thing input this will provide us a beautiful input field now if you go into the UI you can see the input this so import the input from components this is a client component and you will see YZ we have to Define this as a client component inside another component so first of all let's save this thing and see how it looks where is our application localhost 3000 you can see this is not visible now so we can can say if the error dot status is 401 we have to open this so is open default open we can say if the error dot status is 401 then open this thing refresh this now you can see we have this model and we can't see but we have got a few errors doesn't match expected server HTML to contain matching div the hydration error refresh this it will not work okay so what we need to do we have to cut this whole thing we have to create another component or the model we can say not a folder it is a file auth model dot TSX here what we can do rafce this is a client component and to use a client component we can say use client why we can't use this is a server component because at any point we have to write something we have to send some data to Source server so we have to interact to our UI and for interactivity we need to use client-side components and if you are not sure why I am using a used client here you can watch my next year's app directory tutorial which was a to-do list tutorial I have published a few days ago in which you will learn it to build a to-do list application and inside that application you will see why we are using here use client and you will understand for sure okay now you can follow along here I will copy this thing dialog is good close this here we will use a use State and these hooks can be only used in client component that's why is open files import the state here and we can say open is open and on open changes set is up so now we can control this model to open and not open import the input also this is good now what we can do here is open so we can direct face the detail here okay so what we can do here so this whole thing can be used inside our provider where we have used supervised provider which is a client component here here we are providing the whole thing here we can find the details okay so I think here we can do all the stuff instead of creating a new component by the way we can import the dialog from components copy the state import everything dialog and dialog content here import the dialog from components from components from components save this thing so now we have a dialog and we are rendering the children and it is open by default if it is if the user is not authenticated and we can do it by doing it here so you can say subscription dot not like that we can say superbase dot oauth dot Care Station dot then result if it is if result dot error dot status is equal to 401 then what we need to do is we need to open the model otherwise everything is good to go and otherwise we don't need to do anything so just save this thing and that's all we don't need this oath model anymore we have created all the logic we need for our authentication inside our supervised provider so now this is a good tool we can remove these components because these are they are not used here go here now you can see if we refresh this okay it is not working let's see let's see the result here first of all lock the result okay where is our localhost 3000 now you can see we got two things we got station and we got error okay so if the session is null which means we are not authenticated so what we can do if the rest dot data dot session is not true if this is not true or which means the user is not authenticated then open the model otherwise don't now you can see the model is open and we should not be able to close this okay now it is good to go this is what I look dialog overlay background at the busy background we can change all the things here if you want you can see dialogue trigger dialog content header footer title description cool so if we refresh this you can see we are not logged in and we are seeing that we need to do something here so here we can do all the magic first of all we will make this whole look like Twitter so BG black give some pairing to it cool now this is a form and we need input field for now so input we have already used that thing the type is text the placeholder is email and here we can say do or S3 please sign in to continue give some classes to it text LG my 4 save this and let's see how it looks now it's it's look good mice my4 is bit much it's good now we need to make a button also button import the button from UI send login and we can include a short here short a paragraph here you will receive a login magic link here we can give it some classes text SM text is white or you can make it gray somewhat 200 that's good or we can also give it margin by two yeah and what I need is I'm right Auto the color is not looking good to me this is tutor color but this is not looking good to me so I will say BG BG white and text is Click I want it to be end so for that what we can do here is I can wrap this whole thing inside a division and I can make it Flex I can give it w full and I can say justify to the end so now the button will at the end text is text should be white when hover text should be white and when hover the Border should also be white okay so what you need to do is to make this application beautiful you have to give some time here you have to select all the colors without using chair GPT because we always want to make sure that our app looks good inside tell me in CSS television config in inside the styles.css where it is inside the globals.cs here you should carefully Define all the colors and that's how it will work nicely otherwise you can see it it is working out and you will face the problem like this so for that I will use the default colors provided by here theming for now I will use the default color in the future I can go for different color but for now I am going with default now you can see refresh this page it's good now I can remove this this button already looks good you can see this button already looks good and the border the hover properties everything seems perfect instead of text Gray I would go for 900 okay so and for our home page what we can do here so for our home page we can give it text right here so it will work good now our text is white instead of this tweet wherever we use the primary Dash primary like here BG primary so here we can use the Tweet color so go here so what we can do we can insert a new color to it Twitter color we can say it Twitter and we can use the Twitter color hex Twitter color hex code this code here now if you go to here instead of PG primary you can replace it with VG Twitter color and it will work it will work as default instead of compromising with the default UI classes modify all the yeah so now it should work so now if you visit our application you can see our tweet over everything is looking good if you refresh yeah this is good and now we have to login the user so for that first of all when the user owns submit it receives the event so we have to prevent the default to prevent the page to reload again and now we have to submit the user email so for that you can use a state again use State snippet email first of all it is empty set email to whenever this status changes so on change it receives event and set email we went to Target dot value okay okay so why this login button is looking blue because we have changed the button color also so if we go to here instead of this we have changed this thing also so we have to use the primary yeah also now it is good save this let's go into here if we hit the login button it will work this function will run and it will call the supervis function which is superbase dot auth dot login okay so we have to find the documentation where it is login with magic link sign in with OTP sign in with OTP so here we can provide the email and we can say email dot trim and we can also check if the email is correct or not for that we can choose the email field here type email and it will by default check it if the email is correct or not then it we will trim and we will send this and options are should create user data and we also need a username so that we will Define another field which is text placeholder username and we will use another state use State as username this it is by default empty set username and we can say minimum minimum length or we can say the minimum should be it should be three characters long now if you parse the username in the future we will also check if the username is exist or not first check if the username exists or not okay so we also need to show some toast to users for that we will install the new library called sonar it's a great Library you can visit the sonar npm you can see this Library rendered Host this is a beautiful toast and this is the same toast I am using for my website Club of folders if you search Club of folders so I am using this for my website and I can recommend it it's a great an awesome library to render the toss so we have installed this first of all if we go to app in the layout here we can Define the toaster in the Super Bass provider I think here we can Define the toaster also from sonar import this from sonar we only need one toaster and now we can use toast dot like this toast dot success like this error like this username already exist please use another one we have to check this so forth checking we can find we can say Super Bass await super based out from profiles Dot and make this function as a async function dot we can fetch we can select we can do everything select dot now we can say select where the username is let's find the supervised docs so we don't miss anything so in the fetching data we can select the data and here are the filters we can use like this select select dot now we can say is equal to it except two things column is username which is also a string and the value is which we have used username dot let's stream it if the user has typed in any white space we can find it it provides us data and error if data exists and let's consult or load the data first of all and we can say username already exists please use another and we can return it from that's how we are checking if the username is already exist or not and we are sending sign in with OTP now we are good to go we can avoid this also we can avoid this and when everything is successful we can close this model or let's don't do anything and let's see for now what is happening so go here in the OR application refresh everything so we are making sure that everything is good extra attributes from server CZ shortcut listen okay I will use my email which is Club of Horrors gmail.com gmail.com and I will type my username also Club of coders and let's click on the login we should also show some loading state for that we can use another state here use State you can see how many steps we have to use here button or we can say yeah we can say it's loading initially it is false set loading is true and here set loading is false and when it is loading show the make the button is disabled simple disabled save this thing now if we type Club of quarters.com [Music] gmail.com I will type my username also you can see we have to give some space here let's click on the login username already list please use another so in the data you can see we have selected and we have got nothing we got nothing so the array is empty so if we can see the data I thought length is equal to 0 or we can say is greater than 0 then show this otherwise don't data and end data dot length is greater than 0 then show this and return from there otherwise log in the user with email now here we can remove everything let's also give some space to this input last name m y 2 now you can see it's good clap of folders Dot gmail.com Club of quarters hit enter now you can see it is sending us an OTP so now it first find that if the username is exist and it found that username doesn't exist now it has sent the request with the data of username and this user now the user should be in our database so if you go to what tables and this authentication and this sign in with OTP also should create a trigger to create a username which we have passed easy data so we should see a username inside our profiles let's see yeah so you can see we have a club of folders username inside our profile and now we are signed in inside our application okay so if you hit a button again you will receive that username already exist and it will find this full name and this user okay that's how it works and we are now signed in to our application and you can see this is the current user this is a user which we have faced now you can remove this we can remove this we are successfully created this sign functionality close this thing close everything we should be able to see the data here okay so it will not sign us up because we have to verify as so I should have received a magic link for signing you can say confirm your sign up so if I click this link here now I am signing yeah so now I have signed up for the application and you can see the data here ID is this role is this my email is this and everything is here okay so now I am signed in and I didn't see anything so we can remove this we can also remove this basically we don't need anything because we are handling all the what we say the authentication logic inside our supervised provider here we have created a dialog we have created a form and we are using this authentication here so now we are signed in and we are good to go to build the functionalities the Tweet functionality is the live functionality is the bookmark functionalities so first of all what we need to do is we need to enable row level security policies for all the tables currently over all the tables are public which means anybody can access over data and modify it and can fetch it so we don't want that so we will go to the Super page dashboard home and go to the database part and in the tables and here I think we have policies so table editor go here hashtags you can see all the tables and the table save row level you are allowing Anonymous access to your table so we have to enable all row level Securities so to do that go to authentication and in the policies clear the search box and you will find all the tables here and enable the policies for all the tables so you can enable the policies you can also enable all the policies by running a SQL query but we are doing it manually because we don't have many tables and we can do this manually it is easy we have enabled the row level security policies which means nobody can access our tables now but if we try to access from our database URL or database connection string the database connection issuing have previous to access all the tables and all the data so that's why we are going to use server components and inside server components we will face the data so that we don't have to compromise our security over row level security policies and everything we are going to do is in the server side okay so you will see what I'm saying so first of all this is our project and I will start this project by running so we are using here pnpm and we will say pnpm brand Dev and we will take a demo first what we have built till now so we have env.local and everything is looking good now so this is our app directory because we are using the latest nexgs features that's why so let's go to localhost 3000 and we will see what is how it is looking you can see the this is not looking good because I have enabled the June so let me yeah so 150 percent it's good looking good so currently we are signed in or not how get it so if you click on the profile the page doesn't exist if you click on tweet nothing exists for now the training part the home to fall apart so what we have to do now we have to check if we are authenticated or not we will make this responsive in the later videos so if you go to super best provider so here we are providing everything okay and if you try to tweet something hello world we try to tweet it doesn't work so we are getting the profiles and we are saying that it doesn't exist yeah so this is our provider this is dialog set is open yes so we are logged in basically so to check if we are logged in on console.log we will lock the current supervis user so here we will consider.log the superbase dot auth dot user dot get user and that's all let's lock this thing okay so it is let's see we want the current user who is logged in so there are a lot of things get user gets session let's see the get session thing okay this is also returning the promise so what we can do we can look here we'll check the result here it will refresh and here we are so you can see we are logged in this is our user this is my email and everything is looking good but for for the authentication I think we can use something called server context or server station to see if you are logged in or not so now we will implement the Tweet functionality if I tweet something here or let's say I copy some paragraphs so this is the rate cost extension you can also install this it is pretty handy you can install this it's great you can directly go below MF Sim you can also do the confetti thing it is pretty good you can see so yeah you can install this so this is our text and if you try to tweet it doesn't work now so we will implement this functionality so in the main component is our home this is our input text and this is our tweet button so tweet composer we will create another component so recently when I have created or when I have started building this script clone next year's release a few more features like nature server actions so we can utilize these server actions to mutate the data inside our database so that we don't have to do all the API stuff so let me show you what is next year server directions you can see this is how we will create a form and we will decorate this as a server code and we can directly you can see save to DB and this is our running mode server this is not running on client this is running on server so this is very easy to do and we will do this now so first of all what we will do inside the components let's close it in the source directory in the components these are the components these are server components by default so we will create another component so I think we can create a folder called server components so that we can differentiate what is server component and what is nodes we can also do it like this this is nothing bad in naming like this and we can say compose to it and this is a server component okay and what we will do rafce compose tweet okay so we renamed wrong compose tweet so this is our composed tweet and what we will do we will just use the latest next year server directions so as you can see we can face the data like that and we are doing that in the supervised provider here you can see this is a client component you can see this is a client component so okay so we are not fetching any data is for now so we will use this technique to fetch our data directly you can see you can directly face the data we can case the data using the kit static props and we will see how to do that also so this is this will speed up our page reload and then we can also revalidate the data like this when we are using the kit static props and this is how we can mutate the data directly using the server components so now let's do this so this is our function and we will use this thing so copy this thing so this is a function which will we will say compose compose to it like this or submit to it you can do is submit details or save to it in rooted DB whatever you want to name it save submit to it this will take a tweet text tweet and it is a string simple and it is a used server you think you can see you this is a use server but I think we have to update our Nexus version because we are I haven't updated anything after I left building this uh in the like past two months so this is the version we are using 13.3 and what is the latest version of lectures next shares let's go okay so we I think we have to go to the GitHub so the latest version is 13.4.7 so I think we can update it close the server first pnpm update next it will update over let's see okay already up to date I think what we can do this is remove this thing and we can install this again so it will update find the next note here okay so it is uninstall we have to do it again because I have saved this thing yeah now you can see in next year's 13.4.7 so if you are watching this tutorial please update this thing otherwise the server actions may not work I don't know so you can see we have removed the 13.3 version and we are updated in HS 13.4.7 clear everything pnpm run there again it may create some problems let's see if this is working or not okay so it is working so inside the compost Suite now we can use this theme so let's comment it out first so this is our server thing and we can get the data like this we will see how to work with that thing so first save this thing let's see if your application is still working or something is broken with the updated version yeah so it's working it's working fine you can see so now we will integrate our server action action and that Aid item and then okay so we have to enable the server actions from our next config so this is also you should remember so go to the next config and we have to enable the server actions like that inside the component that uses server components and in the separate files code I just want to know how how we are getting the data so this is the data and we are doing Aid item and it is getting the data from cookies but we want to know and action is similar to HTML primitive action okay so it is same as HTML action okay so I think we we are we can get the data from the form action that's custom invocation using start transition you can also invoke server actions without using action or form action you can achieve this by using start transition provided by use transition hook which can be useful if you want to do server actions outside of the form button or inputs okay so we can actually use server actions without using a form component this is what this means cool like this this is a like button so when we will Implement our like functionality or bookmark functionality we will use this thing and you can see this we this is saying that use Virtual KV which is a new feature or we can say the new integration inversal which is a KB or we can say the radius database inside under the hood it is using something called upstage This is a serverless data for already so you can have a look at it if you want if this is how this is working this is a client component this is what we were doing when we were handling things in react basic simple react but now time has changed and we will do things differently so first let's see how we are getting the data so this is how we are getting the data phone data just like it and we will see how it is working so this is our phone data and we will console.locis and it will console.log in our server here not in the client in the browser this will load the data inside here in the terminal so first let's copy everything from our main component which is this okay so this is our main component and let's cut this thing paste it here and we can say this is a form we can remove this thing save this now here we can say action and here we can Define submit to it it is saying that yeah let's see how this works action and this is again form data and format data good why it is complaining so import the compose like this it will okay so I think we have to do something with our responsiveness this is looking ugly okay so what we will do we will hide it when this is smaller so in the sidebar right sidebar I think we can hide both of the sidebar when this screen is smaller so here we what we can do here we can use hidden and only be visible when the screen is clearer than large screen we can do the same for right sidebar here we can say this is hidden by default and only be shown after the screen is larger this is how so now if you refresh this you can see this is hidden so what we can do we can do after Excel so if this screen size is extra large hide both of those things now it's good but you can see this is also breaking this thing and this is overflowing from the content so which is where so we have to fix some styling in our own so if you go to the main component okay so let's comment this out this is all things let's remove this thing and yeah now it is taking the full width we can also do only after the Excel the width is 50 otherwise the width is like this so now it is good you can see it is looking good but still when the skin is too small this is overflowing so we need to fix this thing this tweet list so for the inside the here so let's keep it with full we are giving it border that's good overflow hidden so now the Overflow is hidden but we don't want the Overflow to read and we want this to be contained inside the flow so why we are facing this problem let's see okay this is same problem after so we have to remove the whole thing we don't want our photo to be hidden we want it to be contained inside this so it is not content it may because we are giving some fixed width to something okay so this is width height and 10 this looks good to me but let's wait for some fix it yeah it's still broken so you want to make make the height or the font is smaller so for that we can say after the Excel the fonts I don't know what is causing the problem so I will comment it out and I will see it is the image which is causing the problem this thing so if you comment it out not this image where it varies over full image yeah this thing so we are giving it height of 80 and we don't we are not giving it with full so this is this is the thing which is causing the problem so if we comment it out no it is still causing the problem we want it to be contained okay so this is not the problem I am showing you how I am fixing this problem so you will also get the intuition behind everything power commenting this out moderate 500 border 2 so this is our container and it is yeah it is good but this is not containing this inside this is bad the resource URL was preloaded using link preload but not used within a few seconds from the windows okay so we will fix this error also extra tribute server so let's focus on building the feature now we will see how to fix this scene later or I believe we can fix this by making it grid sometime that helps create otherwise if you don't give it anything what will happen because something is broken now and that's the reason it is broken the reason this thing is broken is this we are defining a maximum width and we are trying to squeeze this and it is taking the that width so that's the reason of this is not working so you can see this is getting out of hand so here if we remove this you can see now it is contained inside this that is good part so here what we can do only give this Max width when this is greater than XL otherwise with full is good so if we try to increase this you can see now it is responsive if we squeeze it yeah you can see this is responsive and looking good cool now we can work on this thing so if we try to yeah it's good so if we try to submit something hello world and we should be able to see something here form data so for that we need to define something old submit or I think action which is submit tweet and this is taking the form data yeah so this is a text and the form meta we don't know what is this we will see if we do it something let's see the okay so we are not getting anything so let's see the documentation how it works okay so we haven't given this button the submit type is submit and this is inside the form you can see so now if you try to submit this there is still nothing type is text action on data okay so this is a client component here we need server comp why it is complaining it is saying it is not a sync okay any let's go for NES for now so this action text action.js use server so the problem we are facing was if you remove this this will complain and type this script is not happy so to avoid that you can use as any this is a just temporary fix I hope next yes will face this issue as soon as they can but now because this server or we can say this function or this functionality is still in Alpha phase which you can read over here you can go to block you can read that this server actions is is still in Alpha phase so you can see this is good but we have to careful to use this in production this tutorial is just for beginners or we can say for learning purpose so we can use this thing but do not use this thing in production because this thing is still node in production phase so let's just build our application by using this temporary fix so we can say temporary fix okay so now if you go to your application which is our application and Hello World server actions like that and if you hit to it you can see we are getting our data over here I have changed I have also put the name attribute over here and the type attribute over here so now it is working you can see Hello World server actions and we are getting more data inside our server and we can directly mutate our database from here so what we can do yeah you you can get the Tweet over here just like that if you see in the console we have a name and we have a value so we can say form data dot get tweet so it will give us the value of the Tweet so you can also confirm it by console.log tweet save this thing and if you click on tweet you can see we are getting the Tweet value now you can verify this or you can check if this value is truthy or you can say this value is good to put in our database if you can check if not to it then simply return and if this state is accessed we can directly insert this into our super best table so we can say const data and cost error we can say supervis import the Suba best client but here we need our server swabish client so for that where we can get our super best server client so inside the app directory layout this or supervised provider let's see if we have any Super Bass server client so first I think we need to create a server client so using superbase with Nexus app now so this is the what we can say this is the blog article which we have followed to build our super base authentication you can see we have also created a middlewares called something this is a create middleware supervised client and yeah so this is how we are creating the super based client we are using typescript over here this is authentication and this is what we were doing previously yeah so this is they have given the example of a server action here you can see directly without using anything like client component create server action client and we will pass the cookies and now we will have our client everything is looking good so this is how we can create our server action client so we will create our server client import this first import from supervis import the database okay so it is being imported from auth helper Nexus create server super best client this is what we need create server swaps clients and import the cookies from here I think we don't need testing and it will ask us through something okay so create server supervised client how about this so I think they have also changed their documentation and this is not exported from auth helpers Nexus a lot of things have changed rear server action client what are the X create browser create middleware create route Handler create server component super best client so this is what we need create server component supervised client and inside this we can pass our cookies from like this what else it needs it needs headers also import the headers from there so now it is working so super based Dot from so that table we have named is we can also yeah so you can see all our tables because we are using this database types here so we have bookmarks tabled hashtags likes profiles tweets so inside the tweets we need to insert a rogue so tweets dot insert and here we can specify our values just like that and it is you can see this is auto completion is given to us by typescript and it is pretty good so profile ID so here we will give the profile ID which we will get from superbase dot oauth dot so first thing we need to get the user so here we will get the user const so await Super Bass dot auth dot get session or get user I think so it will return as the user which has data and errors in the user data we can say this is the user data it is user error if the user error exists return and if the user data exists then log this thing so we will log this and we will see how it is working first we will go here we will do it and you can see we are getting the user data so this is the user ID we are getting and everything is looking good so first of all we will go to the authentication in the profiles we will see if we have the same ID inside our profile ID as well so you can see this is the ID we have copy this and this is the same ID yeah this is the same ID which we need here okay so we will insert this into our tweet so if you go to the twists tables here we have mapped this profile ID to user ID if you edit the column you can see this is mapped to the profile ID and which is the same ID which is here we are getting so now we can see await super based Dot from and we can say tweets dot insert okay I want to disable this co-pilot extension I don't like this I will disable this thing insert and now we can insert over things here ID will be created automatically so profile ID is user data dot user dot ID like that other thing we need is text so the text is tweet next thing we need is ID okay so it is saying that we need ID so we can generate a ID not a big thing so this is a uuid and we can generate it by uuid from the crypto and it is saying that form data entry value is not assignable to type Stream So to each dot you can convert this to a string and now it will it is looking good so this is how we are directly mutating our data without compromising our security inside server components using the server actions and it is pretty simple you can see we can do one thing here we can directly pass the ID the user ID from the form but that is another approach but this is far more secure because we know that user is logged in or not and this is pretty sweet save this thing and then we need to reload the page we will refetge all our tweets so if you go to the main components here we are getting the tweets so this is also a server component so what we will do we will create a const get tweets this is a server components and we will fetch all the tools from our supervised client so the same thing I think we can export this from a utils folder something like that the whole thing we can export it here import cookies and import the headers as well and Super Bass server client just like that save this thing we will see if this is working or not remove this Ctrl D import this from utils let's check this thing is working or not okay so you can see this is not working because we are also importing this TW merge here so instead what I will do I will create a new library called Super Bass here superbase.ts I will import everything inside this because it may it is conflicting with the client package which is this television merge and the CL X CLX package so now it is node conflicting and here we can import this again from our supervised server client and now it will not conflict yeah you can see Hello World this is a new tweet we will tweet this so it is saying error something went wrong okay avoid when wrong because of this extraction viewed it but I want to use it everywhere but we can't use this because the cookies and headers are different I don't know let's yeah this is the same error which we are getting I think we can't do this why we can't do this let's see yeah so we have to initialize this again and again for every component this is not good I want to use the Super Bass server everywhere without getting worried so I think we can create a client hook also and we can use this remove this and Super Bass client import this thing we are using the database and here it will need supervised client new superbased client it will need the supervised URL which is EnV import can say the process.env dot it needs first argument is supervised URL so you can say Super Bass URL and the second one is process.enb dot the subabase key here we will use the secret key supervis secret key which is a key that is previous access to all the rows and it can bypass the security of row level security SVA so it is a like admin key or something so it is saying that it can be undefined so we can say as a string we can fix this this is a temporary fix this is not a good idea I will tell you how to improve your managing your environment variables just like we do in the T3 stick so now we can remove these things we will try this thing first so I will now go to EnV here we have next public supervised URL this is the same thing which we will use here and this is the next public enem key so this is the public key and it doesn't have any access so we want the secret key which is a server key super based secret key and I will go now to Super based dashboard and I will copy that key here so in the API so this is service rows this is what I am talking about and I will reveal this I will copy this and I am hiding this because this is a secret key and you should also keep this secure so now we have super best secret key and we have Superbass public key and we will use this client here so instead of using this yeah let's see if now this will work or not refresh the whole thing try this we are just trying and we will see if it is working or not super best key is required okay so we have the supervised key here let's lock this thing out so we can see what is happening here process.env.next I think separating it out it doesn't work yeah okay so let's remove this thing we have to use it again and again we have to create this again and again so Ctrl Z Now this is is good so we have to use this we have to use this Constable base we have to create this again anyway we can't use this only once so we have tried it and we have tested and it is not working like that so as you can see here we have our main timeline and as of now we are not showing anything but we are we can submit now any tweet we can create it we can tweet basically so this is a tweet and if you hit enter it is being done you can see okay so yeah so now we have some tweets inside our database so if we go to our dashboard in the Twitter in the tables in the tweets here we can see all the tweets okay so there is no Tweed because if you go to the main component in the main component we have a main form a composed with here we are submitting the Tweet just like that it is saying that oauth user yeah Miss so let's see if it is working or not so as of for now you can see this is not working we will see what is happening here const it gives us data in error console.log we will load the data in the error both and we will see if this is working or not this time this is a tweet let's tweet this yeah new row okay so it is saying that we are violating the row level security policies so it's good we are getting some details over here but I want to show this message or this error message on the front end so can we do that can we do that but I I think we can't do this in in the server actions so if we showing error on client in server actions Nexus how to handle the errors so we will see how to handle the error okay so we can submit the error and we can do like this cool you can return anything we can return the data and error from here so what we can do with return data and it's just like that and here we can do this thing Action assing phone data await Action phone data and this is how it is suggested here so this is a tweet we can see what it is saying if it doesn't break uib don't consider it an error yeah that's true because we are doing all in server so it is not breaking the UI it's just the data you return from an action support it into the state when it create true sleep error Setter there but also be built in the Injustice pattern model so now let's try to return this and we will see if this is working or not the data we are getting here we can make it a sync and here we can make this action the data and let's give it any on now and it should give us some data or the response and we will print out the response I am not sure it will work or not but yeah yeah it is saying form action function functions cannot be passed directly to client components unless this is not a client component let's see if it is breaking the UI yeah so form action function cannot be passed but why it is saying here the same thing we are doing the same here action async data the form data and okay so what I found out is we can't handle the error system like we handle in the client components if you want to do this we need to create a client component and then call the server action like this this is a client component we need to create a client component inside the server component and then we can call this as a prop storage Direction inform data like this it's possible with a client component you can pass the server action as a prop to the client component so this is how we can handle the errors that's why I believe the trpc is still ahead of time if you use trpc QV live will be so much easier but don't worry we can do that now so let's create a client component for now so in This Server component create a form client component let's try this out if this is working or not so first we will say use client and we will receive the props in here like this we are typing it and we will say we will receive a phone client component just like here so we can I think remove this thing we can just follow this pattern over here the whole thing the error everything let's install the package first pnpm we'll start Sonos this is a package which will help us to show some toast messages and nice toast messages so you can see the touch presser these are very good and we can also you can see this is Rich colors and looking good this is our server this is our server action and we will cut this thing and we will paste it here and instead of doing everything here we will say props dot submit tweet so if you hover over it you can see this is a promise of data and error so promise of something form data so what you can do we will pass the whole thing here let's rename this form capitalizes we will import and we will pass our props here so we will pass this submit to it action or we can directly say the action thing submit to it and here we can declare the type action and the type of it is these things let's copy this and paste here simple directly I am showing you how I am doing this and this is our thing and here we have our action so now when this is action is being done we can say it is dirt here is our data in action dot this is our action and we will pass the data inside it submit to it and to remove this this error what we can do we can declare this in another function handle submit just like something const handle submit tweet sync and this is our action or let's rename it to server action so it will be more server action more descriptive so we will face some errors like this because we are doing we are coding the latest pattern or the latest thing in the next yes so we can we may face more such a problems in the future okay so it's a functions so yeah now now we will paste it here and we can say as any we will see if this is working or not but there is such that it will not work functions cannot be passed directly to client components unless you explicitly expose it by marking it with use server so as you can see it is still not working and we are not getting what we want this is already a server function so basically it's not working so we can't handle the errors properly in here you can't get the return value of a server action in a server component yet okay so we can't get the written value the action must be code from a client component to to this we are waiting for something like use action State the action must be called from a client component so we are calling that but it is still not working okay so what I am saying is if we remove this thing let's refresh test and now it's what it's good it's happy and if I do this it's happy yeah and let's try to submit something hello world okay so something so are we getting anything from here or no basically this is this is working we can pass the server action as a submit to it and here we are calling this thing but I am not sure if we are Hello World server actions yeah we are getting this console.log rest okay okay we got this yeah we got this we got this so this is working we are getting the error here so we can see if the rest dot error is there then touch dot error and we can say res dot error Dot message that's what we want to do that's our whole goal and if this is not true or the error is not here then we can show a success message which means toast dot success tweet send successfully okay we need to configure our toaster for that to configure our toaster we have to install this and we have to use this toaster in the top level component so let's go to the context main component not in the main component in the layout go to app in the layout this is our server component keep remember in the supervised provider this is the overclient component so in the client component we are already showing a toast here you can see so now here we can show a toast and it will work so let's go if we try to tweet okay we are not able to see any error why is that let's close this this is not working hit enter okay we are not seeing anything why is that we can create a client combo inside a server component so you can see this is composed to it this is our server component and we are passing This Server action into a client component and we are calling this from here so this is just like in API which is working yeah I got this this is just an API so you still have to do this things here so top stored error is not working so let's console.log let's see what is happening here res dot error and if we try to hit it is it is being low but I think it is doing Globe from here okay so maybe we have to refresh this whole thing something new we are getting this but we are not number one thing we are not able to see this thing number second where where is this consulted look I'm not sure how this is we are able to see the console.log but let's see what is happening now let's run our server again and we will see what is happening because we are not logging any data and it is still showing so that's what I am trying to figure out oh okay okay okay so that's the wrong thing we have did so we are reporting in drone got it now it will work it will work now yeah something happened same something happened good let's try it again we can wrap this thing into try catch the whole thing if you hit the Tweet yeah now we are able to see our error we are getting this error from our server component and this is true this is awesome so now something is working so we have to restart our server and we need to import our files correctly we were doing it wrong that's why you are facing the problem so now we can remove this and now we are creating everything from here so it's not a cleaner approach it's good we can say this is our form directly we are calling from here and this is our function which is a server function so this is all good but I would say trbc handles it very beautifully okay so if you visit the trpc mutation you will find that it is very good it's my opinion you can have yours so now over this is saying that it boilers the policy why is that because we are creating a component server super based client and this uses the API key which is NN key and which is public key so that's why we are not able to access our tables so to access over tables we need a secret key to top level key which we will use only in server because this is a confidential key and we must not reveal it to the public to the client so that's why if you go to the super best provider and I think in the supervised context somewhere we were using in the library in the middleware yeah it's good so I think we are missing something we need to create a server client which will handle all this stuff so super bass client this is not what we want so from the JS Library what I am saying is from Super page yes here we have super best client and we need to create a server client this supervised doesn't have access to over tables that's what I'm saying and this is a confidential or a server code and this is not a public code so we can remove this thing we don't need this here what we need is we need a Super Bass client super best server client you can say which is confidential and which will use a secret key so supervised client you can say this is a new supervised client and it will accept first one is supervised URL so it is in the process dot EnV dot subabase URL and another thing is super best secret case so process.env dot superbase secret key like that and it will say that it is it may be undefined so what we can do if this is defined so we can say Super Bass URL is equal to const Super Bass secret key this is a secret key which I have shown you already in this in your Super Bass table editor in the project setting in the API this is what is secret this key has the ability to bypass row level security so it is secure and you can use this thing process.env dot super best secret key like that and if not if this doesn't exist or if this doesn't exist then we can return the error and in the error in we can return message supervis credentials not provided like that because this is what we are sending here so we want to send the same schema so that we can show this clear message so here we what we can do here we can use this and here we can use this so it will not complain no so it will not complain now we have our super best server client and here instead of super based server client we will use the super best server so to insert into our table we will use super based server from tweets like this and to get the to get the user to get the current user we need to use the previous super best thing what I'm saying is const superbase is equal to the previous thing which we have removed create server component client this thing it accepts cookies and it accepts headers so this is our client component this variables know that we have located no not so super best client here we will say super best client dot dot get user so it will get the current user and it will helps us to insert in our tables just like that now you can save this and it will work nicely this is complaining postgres error so what we can do here is postgres error it is complaining that now we have two things data and error error has message but here error is say said to be postgres error but here we are sending the error indifferently so a is any does it work so a type script may be pain sometime but you can fix this error so what you can do you can copy this whole thing and you can paste it over here now this will not complaint so now we we have we are getting the error in the message type and we are getting the data like this so the two things we have but still the error can be possible server or the error can be the error object which has message so now let's try this and this should work this time hello world if you create a tweet super basic credentials not provided credentials are not provided why is that because maybe we don't have or this variable is named next public because this is a public think and we are also exposing it to the client okay so if you go to the context where is this in the supervised provider I think here okay so this this should work now click on treat Super Bass credentials are not provided so this means we don't have one of them two variables so if you go to the EnV local you can see we have our secret key and secret key named ronly it is s e c r e t it is a confidential key and you should not show this to public I am saying it again it is a very confidential and it has all the access to your database and your everything so this URL and that's what we need okay so remember to name them correctly so now if you try to submit it will work tweet sent successfully now our tweet is working if you go to the database in the tweets you should able to see the Tweet here you can see everything is looking good and nice and this is the username which have submitted this with so that's how we have where is this in the compose to it we have created a server component we have created a client component we learned how to pass how to handle errors in server component and do all things as you can see we are now able to successfully submit a tweet let's do it again copy some lower map sim a long paragraph Maybe so you can see this is a long paragraph if we tweet this this way it is sent successfully and in the network tape you can see all the requests so these all are the requests which is working on in the backend you can see this is the tweet and this is how it is being sent and we are getting some data from our server as well this is a server action okay so now let's close this thing I just want to show you that it is basically sending API request nothing much and here we are able to see our tweets we just now have to face them and show to the main component in the main component here we are fetching all the tweets so here we will Define our get bits function first we will create our Super Bass server client just how we have created in our server component so this is how we we will create our thing so what I want is I want this to be used on the same place so I can create a yeah so we have supervised URL everything is good and here we have our super based light so this is a JS Library I think it may not work so we can try this at least there is no worry in trying we can try this okay so this is an async function and here we have over Super Bass server client new supervis then do anything basic simple we will figure out how to handle this stuff much smoothly or much nicely in a very much organized way this looks ugly as for now but yeah we can handle this for now so now we have our supervised server we just need to fetch all that bits for that I can show you the example how the data is being fetched so in the fetching you can see get data here we are fetching the data if this is okay we are returning the data and this is how we will get the data so what we can do const superbase gives us two things data and error you can await we can say Super Bass server not secret key server Dot from tweets and we can select all the records you can see we have all the records but we also want to select the profile with the tweets because we want to show something here we want to show the username we want to show the user profile also okay so we want to join this table as well so you can see username and full name so we will join this table the username the name and the Tweet later on we will also join the likes bookmarks and all the other tables for now let's join the user table so if you go to API docs here you will find how to join this so in the trades you can see you can read the for Interval like that select some column other table and here you can select so what we can do here we can select all the rows from the current Table in the other table which is profiles table we can select everything from profiles as well can we show everything from profiles on the client let's see if profile doesn't have any secret or confidential thing so it is ID upgraded username profile so we can select the username in full name basically for now so we can say Here full name and we can say we need the username name and we can as for now let's console.log the data so we can see what is going on here okay so the data is not typed full name and username so if you go here and if you hit the refresh now we should be able to see something here okay so we have to call this thing over here so const data is equal to get tweets and we have to avoid this and to avoid this we have to make this function a synchronous now this will work you can see we are getting some data this is hello word username is Club folders and the name is null you can see the full name is null and we are getting the table as well so you can see we are getting the profiles and we are getting the main data as well taught so here we can say what it returns so it will be type save so what it returns so here if you hover over it you can see overrides the type of return data so how to do this let's see if the supervised talks has anything related to returning the super base returns type from table type script TS with supervis yeah so here you can see export async so this is how we are returning the movies ID and titles and here we can say type of get movies but it will show us the title but we want to show the correct response here I think there must be docs related to returns foreign so here as you can see we can override the data by defining here so if we Define a string over here so you can see this is string order this data is string or null so we can type the data over here so to type the data we have the database types here all the types we have generated previously in our previous video so we just need to join two tables so forward here we can say the database import the data first of all we need to import this thing okay so we are not getting the imported thing here so we can import so in the database we have some types in the public in the tables instead of doing the tables yeah in the tables we have tweets we are getting the tweets here all the tweets and we are getting the profiles as well so if you go over here where this no you just need to copy this thing you can profiles and here you can see profiles so now if you hover over the data you can see we are getting something but in the tweets you can suggest what do we need it is a row and it is also Arrow now you hover over it you can see we are getting some data which is a created ID profile this is okay but here we are getting only full name and username so we can select we can modify the type and you will see how we will do that also so profiles is is a row and which is a array like that so now if you hover over it you can see the profiles is now in Array note array it is just a single so we can remove this now it is good so now if you click data dot okay so it is so we are returning the array of this whole thing so now this is an array so if we go to the zeroth element and we go to profiles and now here we can print the full name and but we'd only want to select something so we can pick from our types so we want to pick full name and we want to pick the username only two things we want here so you can search the pick type script in the documentation so here you can pick the desired columns like that so now if if we have full name and profile like that so now if you go here on the application if you refresh this now you will see Club of order signal which is the first element of our thing so we are getting all the things we need and now we can return this whole data and this will be nice and easy so you can return it directly and here we have our data if we get any error so we can show the error okay so this is something wrong with this so here we what we can do if we have data dot error we can show an error here to its node available okay tweets or we can show server something wrong with server something along with the supervis or we can say the server and here we want to show the data if it is available so if we can say data dot data is here so instead of data we can say the return the return all the response response dot data is available then restore data dot map directly and here we have our tweet and inside our Tweet now we have a tweet ID you can see everything is typed save now here we can set tweet.r profiles.what is this this is full name and if it doesn't exist don't show anything and here we can show the username here we will show the time when this is created so we can use the datejust library for it and the relative time plugin so if you search dgs we'll use this thing so go to new terminal install pnpm install date yes and if you search if you go to the documentation display and time from now so it requires relative time plugin to work so if you search you just need to also import this thing so what I'm saying is import to AGS from thgs import relative time plugin and you can what you can do here you can j.js.xtend and you can extend the plugin like this so import relative time from this and now you can extend this thing and now you can use this format here from now so here we are what we can do teachers day cheers here we can give it a the Tweet when this is created and we can say from now now it will show us the relative time and this is our tweet text here we can show to it dot text this is everything else we will do after the like we have implemented the like functionality and the other functionalities so for now let's save this thing and see if this is working or showing some error so now you can see we have two tweets and it is showing nice and good we can submit it to it let's copy some another lower map some now tweet this tweet sent successfully but now this is not refreshed so we have to refresh this and then it is it should be available okay so it is not available so what we can do we can disable the caching if you go over here it is enabled the caching for now we don't want it background reveal is a very validates the data at a specific time interval on demand we will data based on the email such as an update yet it is fetching and next it will debilitate so we can do something like this so in the next case we have something so in the revalidated tag here we should have something console.log we will edit take okay so this is the API route I am talking about the this is that's why it is very fast you can see this is like very quick 78 millisecond because we are hitting the cache notice hitting the default so when we have created the Tweet we are on to rehabilitate the data so to revalidate the data we need to we can directly to this we can set this to zero I think so it will revalidate again and again let's try this now this is not working let's see this in the server actions it is saying that when we have submitted a product to the card we can develop it the path this is a used client component you can see increment client here we are using a server component this is what we have did now custom invocations without start transition yeah I want to see the documentation not testing Dynamic data phases are phase requested specifically opt out for caching Behavior by setting the cache option to no store OD validate to zero that's what we are doing we are rev editing this to zero so instead of here this is our main component so inside of defining the revaluation the tag here we have to do this here and it is saying that main component cannot be used as CSX we can also separate this whole thing out into the separate file for now yeah now you can see we are getting all the three tweets because we have disabled our caching if we try to submit again we are not seeing we have to refresh this thing to be able to see two very words now yeah this is hello world we are seeing two lovers this is hello world second tweet tweet said successfully we should see three hello world now if you hit refresh hello word hello word hello word two yeah it's working so we have disabled the caching for now you can see the cache is missed and it is taking some more time now what is your main concern is when we submit any tweet we want to revalidate the whole thing okay so revalidate the path note path we want to revalidate or there is something called mutation success mutation in the compost it let's go to here supervised server from insert when this is successfully done you want to refresh the page so routed we can use a router from next router latest const so let's go to the documentation here we have something called router Router there is something which I have used in my previous tutorial and the documentation is not nice I would say previously there was good documentation which was a development version of the documentation of latest Snapchat features use router yeah this this is a thing I'm saying in validating the case server actions can be used to revalidate the data on Demand by path or by case Tech what is this revelated take here so if we are using the Nexus API routes then we can really take it like this but we want to do inside our server actions that's why I think we need very validated path so I think here we can revalidate our path revalidate okay what it is saying revalidate now this is not revalidate the path and it will accept the path is a home page so now if we submit anything yeah you can see that we haven't refreshed and this is automatically getting populated Auto revalidate to it you can see we are Auto revalidating this thing so this is working nicely now we can demo our consort.log which is here in the page in the main component you can remove this thing we can also put this thing into the separate component or the functions so in the app or in the library create a super base create a new folder I think supervised in the create a new file get tweets dot TS export constant tweets and here we can use this thing over here as simple as it is save this and we will just import here so this is how we are extracting the logic out of here it will be much better import the database also yeah it's looking good let's see if this is working or not yeah this is working and one thing more is remaining when we compose a tweet in the form client I want to reset the whole form so how should we reset the form okay so to reset the form there is something reset for HTML cool there is something called a type reset which will reset everything you can see this is action.php the page if we try to do integrate submit this image this yeah everything is good but I want to reset phone which we can basically this is a client component you can see so we can just do it directly what I mean is we can have a button type is reset and we can give the reference to this button and we can programmatically call this so reset ref is equal to use ref it is a button HTML button element initially it is null we can pass the reference to this I haven't used this approach but I think this can work we can give class name as a invisible so it is invisible and when we have successfully sent the Tweet we can click this button like this so it will this is a tweet with Auto reset if you hit enter you can see it automatically reset our form which is good I I don't know this is a correct approach but yeah this is a one approach which you can use to reset your form so that's how we have submitted our tweet and everything is looking good for now this is maybe hard for you because I know next shares this is the latest things which we are doing so as you can see here is our timeline and this is looking good as for now this is all being rendered server side so if you hit refresh then you will see all the tweets rendered instantly or like it is not being rendered on Clyde that's why we don't have any loading indicators at all so it will be faced directly now what we need to do we need to implement our like feature and our bookmark feature so in the new Twitter we can also bookmark tweet directly from here so we can implement the feature we can Implement a save button here and then we will see how to do The Bookmark feature implementing bookmark and like feature the both logic is similar very similar and you will see how we get that so this is our application inside the main component we are rendering all our tweets so first of all I will separate this component out into a new component so let's create a new component and also the other thing is you can see here we are using Pascal case and here we are using some another case so I will change the case to smaller case so here I will say left side part like that we will also auto update the Imports as well so here you can see this is looking good so that we have consistent naming in our whole application here we will say main component component yes let's change this here we have our right section or yeah let's name it right section just it is complaining and it is saying main component cannot be used as CSX component it's return type is not available [Music] [Music] so this is our client component as you can see we have some hooks inside here but we need a server component so this is our page here we are getting all the data and here we are fetching all the data so why it is not working is it is saying that promise element is missing okay so we need to mark it as a react dot server context no let's see if Nexus has some type for it server no okay so to use async server component with type script ensure you are using typescript 5.1.3 or higher end types react okay so that's why we are facing the problem so we need to update our typescript as well if we go to package.json so if we go to our package.json and here we can find out the typescript version we are using so you can say 540.1 and it is not updated that's why we are facing that problem let's update the type script as well we don't need typescript as a dependency we can use it as a div dependency and types react is 18.2.8 this is also not updated so we can put all these things inside div dependencies so open a new terminal because the project I am building I am building it for like two months and I haven't tested anything for two minutes now I am doing all the things now that's why we are facing some problems with versions so now what we will do pnpm 8 as save div and we will update all these things inside our Dev dependencies also the type script let's remove all these three things and it will work just like fine save this hit enter so now we have all the latest version 5.1.3 yeah and 18.2.8 yeah it is higher so now it will work nice save this and now if we hit the refresh let's PNP and brand new again and if we reload our window now our error should be gone okay it is still here now it's searching on Google and see if this works or not so it is showing that it is async server component okay so we type script let's see restart the TS server we can do a lot of things here we can also enable this typed route feature that's good so this is over here to use and ensure you are using if you are using old you may updating the latest version and types should resolve this issue okay but we are still facing the issue or maybe we are not using the version which we have operated to so here we can select our typescript version to use workspace version Wi-Fi 1.3 which is this yeah okay so you can see the error is gone that's why we were also facing the problem when we are trying to submit something inside our server component so if we go to our form so here you can see p here defined as any so let's remove this as well now you can see we are not seeing any error it is fixed so updating your typescript version and configuring it from here select type is extrogen and U is a 5.1.3 version and it will be fixed or you can use the use work work space version as well also update your react types both so inside package.json this version and this version this both needs to be updated okay so now we are good so let's also update this so this is a client component we are using this inside server component so I will create another component which is client components client components and I will put this into client components because this is a client component so we can differentiate it better yes I will also rename this server component to S cell components and I will update this now things should be good so now the naming is consistent you as you can see we have also defined our functions separately over here here we are getting the tools it is for our timeline and things are now good to go so now we can create our further things we can create our features like like feature and bookmark feature first of all we need to also add a button of bookmark let's remove this and see what is going on we refresh this yeah it's good some errors we are getting from pnpm updating to yarn works as well but for now we can proceed it you can see this is being rendered so in the client component we can create a new form but before that in the main component here we are rendering everything so first of all we will create a new client component which is tweet tweet.tsx we can also update this form client components so we can say compose tweet compose tweet form and then we need to also update all the namings I am fixing the naming post Tweet form like that now you can also update this props at school and in the client company compose to it form and here we are importing notice compose create form so it is correct and now it is good to go we have fixed over naming we've fixed a few things here and there so in the now we need to go inside main component so here is our tweet rafce capital letter first and in the main component here we can cut this whole thing and here we can put this thing we can import the tweet from client components and here we can pass our ID as well so we can say key is to get root ID and other than that we can pass the whole tweet as a props so tweet is equal to tweet and here we can say we are accepting tweet and this is tweet probes so type tweet probes is equal to feet and here we will Define what with so let's hover over this tweet and we can copy this whole thing or what we can do go to kit tweets and here we are returning so this is our type so copy this and this thing import the database from library super best types and here we have a word with just like this or we can define a type and we can use this everywhere so what I'm saying is type feed type so we are sure that we are using the same thing here and there save the thing do we type and we can export from here export type to type and we will use this over here so instead of doing this we can do tweet type import the other things as well this icons Ctrl X and that's how import the pages as well and the relative time plugin this is how it will work so now we have created a separate component for tweet and we are using the same type here and there and it is good now it is much more organized and looking beautiful so if we go to our application it is running and everything is code now we will go to the Tweet component here and we will create our like button let's create the like and we will see how to implement the bookmark feature as well so the live feature is nothing we just need to insert a row inside our likes table so if we go to super base our project dashboard and here is our tweet clone in the table editor here you can see we have over like stable here we need to insert Arrow insert some data we will say who the user so who is the user who is like which tweet so we will specify user ID and tweet ID and we will save both of these so that we can know who is this user who has like this to it then we can also fetch all the users from a single date we just need to get all the data from this table we will just say give me all the users who have liked this post so we will say select all the users from like stable where the Tweet IDs is simple so now what we will do here we will create another server action so this time we are not using the form element we will use something called start transition or a new thing in the Nexus server if you search server actions so this is how we are submitting our tweet but this is how we can also use this for a button where is this so this is this thing use transition hook so this is basically a client component so we need to import use transition from here from react and this is a client component we can specify this with use client a server component can have client component inside but a client component can't have server component inside it so it will work just like as it was working and we just need to do this transition we will say is with pending so it gives two things allows component to avoid undesirable loading instead by waiting for content to load before transitioning to next system so it's good you we can take a reference to this what is this excuse as two things is spending and use transition let's do update the state without blocking the UI okay this is cool thing so you can see the demo of this so currently we are now at the about tab if we click on the post we now have post if we click on about and contact it is fast but this is slow okay why is that start transitioning and set tab to Next Step cool system method to use this okay now let's see how we can use this with our server actions is like pending and start transition it gives Boolean and start transition function so we can name it whatever we want so we will just name it start transition and when this is clicked we will add a row so this is hard button and when this is clicked we can name it Button as tool so this is much better so when this is Click you can copy the whole thing I will Implement a function called like to it and we will pass the Tweet ID to the function like that so now we need to implement our like tweet feature or we can set the light tweet function so inside the actions we are importing add item from our server actions okay so this is how we can import it from so in the server component we can create new thing or in the super base here we can declare use server as well like this and here we can export the like to it feature or lightweight function as well is equal to async it will accept the Tweet ID which is a string and then we just need to do the same thing here not same basically we need this thing if we have supervised URL in supervised secret key then we need to await super based server Dot from behave like stable dot insert and it will ask us to insert something okay so we here we are not joining the database that's why it is not giving us Auto completion now we should have over Auto completion yeah we have Auto completion so here we can say random quid the Tweet ID is which is passed s tweet ID here we have the user ID we can find our user we can also pass the user ID over here that's the good thing user ID which is string and here we should have the user ID so for that we can use a hook code use users this is a auth helper which is given to us by react it gives us two things I think it uses user which can be user or null okay so here we can also make it condition if the user exists then only like this to it otherwise don't like this if the user exists user and user dot ID exist which is by the way exist if user exist then like this tweet otherwise toast dot info or we can say toast. error error would be not good simply we can show a message we can say please login to like a tweet just like that here we can pass two things so instead of passing the parameters as different different variables we will make it a object so it will be much more easier for us to pass it down here so what I'm saying is we need a tweet ID and we need a user ID and these both are interesting we can say we have tweet ID which is string we have user ID which is also a string and here we can pass over user ID as well that's thing we need and it will create a row inside our likes table and then we can revalidate or we can update our UI that it is like that's how it is simple so here we can import and we can pass down things here twit ID is tweet dot ID and user IDs user dot ID like that and let's see if this is working or not so here we are and also log this out we can see if this something went wrong data and error we can log console.log broke data and error and we can also load this so it will be more descriptive so here is our application if we click on the like button so we are liking over to it ourselves so it is saying please login to like a tweet which means the user is not defined so we can log the user as well here we can see what is going on so if we try to the user is null why is that when we have sign in Wise user is why is user not logged in if we can tweet yeah if we can tweet which means we are login then why it is not showing if we go to application localhost so there is some there is no other place where we have used this so if we go to our context our main context where we have defined all the logic for authentication which is in the app directory we have components we have library in the app directory yeah we have super based provider here we are using everything yeah the router tools refresh is a thing which we can use to refresh our router superbase dot oauth so I think we can use this also we have to use this use State create browser super best light and then here we can call this whole thing we can say superbase.aut.getuser.10 it will give us the result inside the result we can do all the stuff basically so instead of console.logging it remove this and here we have the response which is user response fresh dot data which is data is user and we can say rest dot user data dot user dot ID otherwise you can say the user is not logged in okay so it is also possibly undefined or the null so here we can say if the result or data exists and this exists then do this okay so what it is saying is having some problems with that const user is equal to race dot data dot user and here we have our user we can say you user dot ID like that yeah and we can show a loading indicator when this is being pressed but we will see what it is you can also show if this failed so we can say cache cache the error and show a toast message authentication failed and instead of doing it inline we can create a new function as well but for now let's proceed with it and see what is happening so if we click on dislike okay something worked this time and here you can see over like that's what I'm talking about if you go here and user ID and we can refresh this to ourself because we have liked the state and you can see we are able to see and we if we go to refresh this the statuses we can see select a record okay so this is a tweet ID and we can find out which to it is this we can filter our table with the Tweet ID so you can see Hello World we have liked hello world and let's like this time this whole text if you click on this and new like row will be inserted into our table which you can see and this tweet is the long text you can say so this is how we have created our main Logic for implementing like now what we can do here we also have this like pending so when it is pending we can show three dots or something we can disable the button if it's like spending and we can change it to a red hat if the user has lagged it to it or not so as you can see this is our project and here is our app if you refresh this allo our tweets are being rendered nicely but here you can see some white background is here so we want to remove this white background so for that I will go to in the layout and here in the HTML what I will do I will do it I will make the whole background black so now I think this is still not black so let's inspect the element and see what is this so we can then debug this thing so if we try to make it hidden so we can say what is the property I don't it's hidden sticky and then after Excel it is flexed so it's good but I think the hidden property tell it so I use television so much that I've forgot what is the visible property so it is not visible I am more into okay so let's give it visibility let's make it hidden so now you can see there is no white background but this is the problem of this container if we remove this you can see there is some white background at the bottom so I think we can give it the class name of let's let's give it background color of black no it's not working or let's give it overflow of hidden yeah this is working so what we need to do is remove this thing go to the right section and here what we need to do we are giving it height of screen so let's cut this part now it is not sticky because we should give it some fixed height to make it sticky okay so instead of giving Edge screen we can give it 90 of the viewport yeah now it's sticky and it's good 90 report but I'm worried about this white thing and it is because of the Overflow X property so what we can do we can give it overflow hidden and only the X overflow is hidden so now you can see this is gone but it's it's scrollable it is uh so instead of overflow Y is Overflow scroll we can say overflow y Auto so when this is bigger so the white will be there otherwise now this is good so when we try to make it large so now it is scrollable and it's good but when the screen is bigger and the content is inside the container so every content so now it is working so now it's look it's looking good so where we were we want to implement our live functionality we want to show all the likes so there are some different different approaches how we can show the likes on our timeline so the first approach is fetch all the likes with the post so let's assume this is our post and count all the likes and show here so how many likes this tweet has so we will fetch the likes count with the post when we are fetching the post from our database the other method is fetch all the likes on each separate post but what I am worried about if you face for each post you have to send a lot of API requests to your database and which is not a good idea so we will reduce our API request number and we will fetch the likes count with our post so what I am saying is let's implement it so if you go to the main component this is our server component and here we are getting the Twist and the other thing we want to improve is this is Super Bass and this is get tweets instead of get tweets we can rename these two functions or queries or two different things so we can make two different things so this is for queries queries yes and then what we can do we can cut this thing because this is a mutation this is a database mutation so inside supervised create a new field called mutation so we are separating out queries and mutation now this is good okay and the other thing is if you go to the queries this is also your server and this is also your server that's okay but I am worried that we can export this also we can in the utils not in the utils we can create a index.ts and we can export or subabase server for that we also need these things in the index.ts we can import and then we can import the supervised client as well and for that for the fix we can do is string and as string Super Bass server client this is a super best server Library okay so let's name this super best server this is good so now we can use this thing over here so we can remove all of these we can import like this supervised server from here and we can import the random uuid from crypto save this thing this is good and we need to do that here also so we'll remove the unused code and we will import everything what we need so now it's much cleaner approach you can save this now we have queries and vo mutations so if you want to face something we will Define here and if you want to insert some data or update some data we will Define here all the functions so now if you go here if we refresh everything is working as it was working previously okay so now what we want to do is you want to fetch the likes count with all the tweets we are fetching now what we can do we are saying that give me all the profiles as well but we want to join the likes table as well so if we go to our super based dashboards so let's go to supervis Project let's go to Twitter clone and here is over all the tables so we want to join the likes table as well so here we are saying that give me the profiles which is related to the tweets so here are our tweets and we are saying that okay so remove this filter we are saying that this is the profile ID and give me this profile ID or give me the profile of the user who has made or who has submitted this tweet we want to also attach like who is who is who is liking over to it okay so we want to query the count also so for that we have to look for the documentation so inside API docs here we can see how to get that we can also page in it we will do this uh at the end of our course what we will do we will fetch only a few tweets for once and then when the user Scrolls down we will fetch more tweets so really specific columns some column other column other table foreign key good but other table is fits and we want to with filtering okay so we we can this is how we can filter also insert a row insert menu update subscribe to changes read four intervals so this is what we want to do let's assume we have likes table then we can fetch who has like this tweet or who which to it is this so we can face the detail but we want to do from another Direction so let's try this comma and we will say like stable and in the likes table let's go here and the foreign key is I think the ID okay so let's do it like that and we will see what it is giving to us or what we are getting so const if you are getting any error or something I think this will not work but let's try if we were using Prisma or some Oran that's another thing but let's see what it gives to us data and error return data yeah column tweets dot likes does not exist and that's we know that's good because the problem is we have tweets so let me make you understand so we have tweets inside tweets we have a foreign key you user ID so we can fetch the user details or the author of The tweets fetch the author details who tweeted this tweet on the other hand we have our likes table inside we have two for in case we have user ID and we have tweet ID so from this side we can fetch the Tweet detail and as well as the user detail I want to do in it in one one query so we can make two queries but I don't want to make two queries let's see how to achieve it so here is the thing we count directly face the count of the tweets which is related to direct relatives so here we can't say that give me all the likes of this tweet or give me all the count like that we can't do that because we are not using an orm this is something which Superbass offers us to fetch all the things so what we can do now we have to fetch the Tweet count for every single tweet so here we can define a single function get likes count this is how and we can Define it will accept a single tweet ID so tweet ID which is string and it will return the count of the likes for this to it so we can say return a bit Super Bass server Dot from and which is the likes table give me all the count of the table us where we can say the equal we can say the Tweet ID is equal to the Tweet ID so now it will return so first let's consider.log or we can directly log this thing yeah so constant result we can console.log result and we can return this as well so this thing we will use inside our get likes count so if you go to the Tweet component this is over tweet and this is a client use client so this is a client function or you can say the client component this is complaining that okay because this is the query and we have to import it from mutation so now we have mutation so inside the client component you can't Define a server components that's the thing that's one thing we have to remember but inside a server component we can have a client component so now we have here a new problem which is this oh this is our server component we do you can see this is our server thing this is a server function we can't face directly using this function on the client so that's why we need to Define in some more components so instead of doing this a use client we will do this is a use server component that's why we can't Define a used State here so we have to remove the ReUse State and we will cut this thing we will Define another component which is like button to TSX and this is a client component finally this is a final client component we need and it is a like button simple so we will cut this whole thing we will paste here because we can Define use State inside our client component import the use browser super best client as well cool and then we can cut the whole thing from here and we can paste it here this thing also we can cut from here paste here import the like tweet import the toast import this and that's good tweet.id so it will accept some props so we can say like button props and we will Define the props type which is tweet ID which is string and here we will say this is our tweet ID and instead of doing tweet ID and tweet ID we can simply do this tweet ID save the whole thing here we will import our like button and we will pass down the Tweet ID which is tweet.id like that save this thing remove these functions also this one we don't need this and now this is a server component and we can fetch all the details of the Tweet here so if we go to our application you can refresh this and it should work as expected like this tweet and it should work in the likes table we have three likes now good so here we will fetch the tweets so you can say const get to it likes count is equal to get likes count and here we will pass the tweet.id like that and now it will give us the like count so we can consort.log and we can find out what is this so if we go here if we refresh this we will get a lot of things okay so so here you can search for a foreign relation between likes and count in the schema but no matches for fall okay okay so we did some mistake so it is assuming that it is a count table and give me all the okay this is not we want so instead of this so we can find out how to count rows super base client how to get count start okay so we can pass around the count exit you can say give me all the rows and we can Define things here we can Define count and which is true now if we what it is okay no it it doesn't accept true it accepts estimate exact plant so we can say accept so it will return as the exact count of a single tweet so you can see count is fun you can remove this thing we don't need any data we need only count okay so we need something so instead of that we can just say we need only ID so now we are getting something so this is test two it has one this dude has zero count distribute has one this two it has yeah so we are getting the Tweet count now and we can show the Tweet count over there so here here we can Define the returns type as well we can say what we are getting we are getting the ID and we are getting the count so okay so let's not Define the type here we can directly render over count get tweet likes count here because we don't need to worry about the ID this is just for the purpose of like we need something that's why we are getting that and where is our like button so here we can pass the count likes count as well likes count is equal to get likes count dot so it is a promise basically we have to await this that's why we are getting a lot of things there so now this is good toad get likes get tweet likes count this is what we need so it is dot you can see we have count so you can pass down the count and if we go here we can see we can this is a number and we can show the likes count here near to the button like this likes count here we have our likes count okay so it is saying it can be null as well so we will say in the likes it can be null as well so if this is null if the count likes count is null then it shows zero save this thing if we go to our application and now you can see one like and zero like zero like one like that's cool and it is sending rumors request to the server but okay this is okay because this is the only choice we have if we use super best clangers Library if you are using an orm then it will be much easier task for you you can directly join the tables and you can do a lot of things now in the like count here we want to Define it in one line or what I'm saying is flex item Center like this and we can skew it some space space X2 and we can yeah this is looking much like Twitter so if you go to Twitter so you can see we have the 2D likes after this after the yeah so this is what we need we can make it bigger a little bit class name is W5 H5 and that's good that's looking good and now we need to do one more thing we we need to do we need to find out that if the user who is currently logged in is liked or not if the user who is logged in if liked it then we will show the red Earth so in the queries here we are getting the likes count so here we can also get export const get is liked if the Tweet is liked or not async and we can get the Tweet ID and we can so we just need to find out that if this row exists or not in the database if this row exists with the tivitis and the user IDs is then we will show the red heart otherwise we will load we will not show the header this is tweet ID it is string string and user ID it is also a string then here we can return we just need to do the same thing here copy it paste here from likes select ID count exactly we don't need the count we need only if this is liked or not we can remove the count you can say tweet ID is this and Dot equal we can say the user ID is user ID so now it will find the Tweet or if it it will find a row which satisfy these both parameters tweet ID and user ID save this thing and we can fetch this detail here okay const is like oh wait so if user has liked so is liked and import from library and here we will pass down the Tweet ID as well tweet.it and here we will pass down the user ID so now we don't have the user ID so what we need to do we need to find out the user ID then we can only know that if this is liked or not right so for that we need to create a server thing const superbase server is equal to Super Bass note these things supervised auth client create server supervisor and this thing we need the exact the exact thing which we have used to compose over to it so if you go to the composed bit server component here you can find out we have used this thing so that's the first thing we need to copy this paste here supervised client supervised server component supervised client import this import cookies in headers so that we know who is logged in currently import this from next headers because it's a server component now we have super based client and it has the user details auth dot so this is how user data superbased client auth get user so these two things we need here so it will find out the user and we will see or the other thing what we can do go to the because it will fetch the details of the user each time it is rendered instead of doing this we can get the user details here only one time and we can pass down the whole thing over here cut this whole thing paste it here so we only getting the user details one time or or we are sending the API request only one time this is what it means so yeah so now we can pass down to Twitter now we can pass down the user ID so this is our tweet user data is equal to or you can say the user ID is equal to user data dot user dot ID like this and if you go into the Tweet here we can accept the user ID as string we can say current user ID current user ID so it is much clearer what is this can pass down the current user ID like that current user ID so it is saying that it can be undefined so we will do this we can make a question mark here and here but now we have problem we have this is saying that it can be undefined or it can be null so if we will go to is liked and we will Define some custom logic here we will say user ID can be undefined so we will say if user ID is not available then just return this whole thing just like this so now it is good save this whole thing save this also if user has like so now we will so.log what it is giving to us console.log is user is like and in the queries instead of directly returning we can return that user isn't like this otherwise we can find out if this is exist or not and we can return it true here so const data error not this error we can say we can also say that a single the user can only like single time nice and we can say if data dot ID exist then return we can directly return if use data.id exist you can say Boolean data dot ID so if this exists then this is the activity is liked by the current user otherwise it doesn't like to buy the current user so now if you can see this is a Boolean and we will get if the user is liked or not so now here you can see fast true false false false yeah this is the whole thing so true means we have like this to it false means we don't have like this tweet cool so now we just need to show this over here we will pass down this thing is is user has liked and in the like button we will get this detail over here which is a Boolean and if this is liked then show the red heart or we can import the CN Library over here so do this to this import the CN helper which will merge all the Tailwind glasses we can say if his user has liked then show the color of red so we can set text to rows yeah now let's see now it is so we need to find out a good component so we can show here SVG elements so react icons so heart icon where is this yeah so AI feel hurt whichever you want you can use so what we what I'm saying is AI feel hurt if user has liked then show this fill hurt otherwise show this thing this is simple and we can remove this thing we can use the same here and we can say text is read 600 let's try this refresh this whole thing okay now we are not able to see if it is we can use the free property I think fill from the color let's give it black for some time because we have already liked this this should show a like here but it is not showing why is this console.load and let's see so it is giving us undefined why is that if user has liked okay we haven't saved this save this now refresh this okay so refresh this again now you can see we have some black control files here good now it is working remove this fill yeah so now it is red and we have liked this video you can see this is good if you hit refresh it will show that we have liked this to it and this is good but we want to remove this like okay so what I'm saying is we also want to implement the unlike feature so in the queries in the mutation so like to it here we can do the same thing unlike tweet unlike tweet the same thing which will just delete the tweet from the database supervised server from likes to delete dot equal don't forget to use this equal otherwise it will delete the whole table you should be careful doing this and we can say the like which is the like row so we can say the ID is like ID you don't need these two things we just need like ID like ID which is string so now it will delete from like stable it will delete a single like from our database we can remove this we can also remove this or we can yeah if we have got any error we will get any error in the future then we want to debug that also that's why we are consider plugging everything so now unlike tweet we just need to do one thing here so when this button is clicked when we get this user then we just need to do one thing if the user has likes so we can say if if user has liked then unlike otherwise like import this it will accept like ID and the like ID is so we should also get the like ID from our table or otherwise we can do one thing we can do one thing instead of deleting it from using the like ID what we can do we can do the same thing the treat ID is tweet ID and like this the user ID is user ID like this same same as this so now we have user ID and tweet ID and we are using this here so delete this row where tweet ID is this and user ID is this simple so we can pass down the same thing as here good now it is good also here we are getting the user but we don't need it we can pass down into the component but yeah if you don't want to pass down as a props so what I am saying if you go to the Tweet component here we are getting the current user ID so we can pass down this current user ID into the like button and here we can use it directly instead of getting the user again but that's totally up to you we can remove that thing and when this cheat is liked we want to refresh we want to refresh the like count so what we need to do is we can revalidate this thing so we can revalidate this tweet component so how we can do that so we will find out so refresh this for now if you go to the likes table you can see we have three likes one two and three if we click here the like is removed now you can see the like is removed but here the like is not updated we have to refresh the page find out okay so this is updated if we click here not updated but here you can see this is gone and here this will also come but because we are changing our window that's why it is being refreshed but if we do it here again if you click the like button this is created a row but it is not refreshed so we want to refresh this for that what should we do so I think we have something yeah it is liked but we want to refresh it instantly so now for the simplification for the simplification purpose you can revalidate the whole page but this is not recommended the another way is just update the UI optimistic update so user click the on the like button and you know this will be updated the row inside of a database so update the UI that's all so this is called optimistic update so we are optimistic that this tweet is successfully liked or the user has inserted a row into our like table successfully and we are sure of that so when this is successfully done you can directly like you can then and you can directly update your UI or another way is evaluate the whole page which is not recommended but we are going to do here we validate the whole page just like it when user like or dislike the Tweet trivialated the whole page so now here if you refresh the page everything is good but if we click on this you can see this is gone here if you like this to it this Tut is like if we remove this this is removed so now it is working like Char so now only one two it is like and which is liked by us we can remove this by clicking on this it is remote and you can see this row is removed if we like this tweet again a row will be inserted and the state is like let's log into a different account and see if it is can be liked by multiple accounts so let's to that also so this is my other account and you can see this is asking me for liking the Tweet so here we can see this is liked but not liked by us so if I try to so you can you can see we we need to login so for that if you hit refresh it will ask us to sign in so let's sign in I will put my email ytblogs.app gmail.com I will put my email ytblogs.hab it is my recent product which generates blogs Twitter Searchers from any YouTube video so I'm using this demo so let's login so I think it has sent me the login link let's see yeah so I have received my request and I will confirm my email and now I think I am signed in yeah so if I try to like I can like this tweet and now if I like this this has two likes and this is good and here I am a if I hit refresh you can see we have two likes now if I like like this we have two likes and this is working nicely we can like from multiple accounts and it is good so let's create something also this is a new tweet from another account hit enter and you can see this is a tweet from another account this is our username and all is good we can also order all the tweets you can see we have we should have a new tweet here so if we hit refresh you can see we have a new tweet here we are not able to see this data in the real time we can also implement the real-time feature by using real time updates from super best but that's for another part we are just building a basic web application and you can see our like feature is working nicely similar to this you can Implement a bookmark feature as well we are not going to do that in this video because this is a simple a same thing similar to like feature you just need to create a row inside your bookmarks and you can you have to delete Arrow from your bookmark table and that's all about bookmarking a post as well so now our like feature is done what we are focused on now we have implemented posting We have implemented liking and disliking now we will implement and the reply features so anyone can reply to this post where we have first we have showed all the likes count we have showed everything what user is doing on the website here you can see all the tweets but there is a very big problem here what is the problem the performance problem if you can see on our super based dashboard the requests are 14 and 708 which is a huge request which is like this can't be true so we are doing something wrong here what we are doing wrong so let's assume we have 10 tweets and we have 100 users 100 users are minimal noted a lot so let's assume we have 10 tweets and we have 100 users who have visited our web page and now each of the user will send each request for each tweet so this means each user will send 1000 requests every time user refreshes the page or if the user has liked any tweet then he also fetch like 100 requests so this is like huge burden on our server and we don't want that why it is happening because you can see on our main component if we are fetching gate tweets this is totally fine because we are fetching it only once and this is totally fine but what we are doing we are rendering all our tweets here and we are fetching again and again this thing so let's assume this component is being rendered two times so we will fetch this request two times so this is very bad so we can't do this this is a very bad approach we have implemented this approach we have seen that this is getting us some problem we are facing some performance problems now we will resolve this how we should resolve this is using chpt so in this video I will tell you how you can utilize crgbt to get all the results so basically we want to fetch all the tweets single time we want to fetch tweets with the likes count and we want to also assure that are we including or do behave like the Tweet so the user who is authenticated in the current application is liked a single to it or not so how should we do that so we can run a plain SQL query because super bases client Library doesn't provide a query like that it is a complex Courier so we have to build a plane a square query on our own because we are not using any orm for now if we use an orm like Prisma or drizzle or type on something like that you can do it with orm but here we are not using an orm that's why we have to define a single performant SQL query so for that as I said I am not good at writing SQL so I have used crgbt to help me here so you can see these are my SQL tables and I have pasted all the SQL tables which we created I want to fetch all the trades with likes count can you give me the best way to achieve this so it gave me how you can get all the Tweet switch like on so we don't have to fetch the likes count again and again for a single tweet so it will give us the likes count another thing which I said to it also I need to include in that query if the current user has liked the post or not so it gave me the SQL query that give me twitch.all so this means give me all the rows and it is saying that count all the likes as likes count and it is finding that if two likes or tweet ID is current tweet ID and likes to user IDs current user ID exist or not if it exists then user has liked the state otherwise it is not so this is how it is finding all the twists and from tweets and this is left joining the likes table and it is grouping the tweets by tweet dot ID so this is how it works and then I told jgbt to order it by latest tweet on the first of our web page so it gave me order by so we can copy this query and you can go to your SQL editor and you can create a new query and you can paste it here and I have checked it it is totally correct and if you run this you will find all the tweets but for that you have to get the current user ID so let's assume our user is something random so this means this user doesn't exist so if we run this query then you can see we have a input a few values so let's find out the correct view ID here so for that I have recently query the same thing so what we I can do I can show you this is my user id we will pass this your user ID to the function and this then this to query so this is a big query you can see and now if we run this we can find out all the tweets with the latest tweet on the top this is new to it from another account and we can also find out the likes we can also find out if the current user has like this post or not so if you go to bottom you can see we haven't like this and we can see if we like this tweet you can see now we have liked and if you run this query again we should be able to see true here so you can see we are now getting true so this query is working so now we have to run this query on user main page so here instead of running a lot of queries again then again we will only run one query and it will improve our performance so for that to connect this database to our application we need something called PG pole so if you search Pages pool postgres Circle pool on the internet you can find out this package and we will use this package to query our database like this so let's install this let's remove this thing because you can see we are sending a lot of requests to the server and it is very bad we don't want to send too many requests to our server so we will install PNP install PC pool in the source here we will inside the DB in the utils not in the utils yeah you can create here PG pool or you can create a new folder called DB here in the DB you can say index.ts and here you can Define your poll so all the details you can read and let's go to GitHub and find out how we can use this pool so PG pool we have to also install the PC here so let's copy this and install everything we need PG pool and PG both the things we need and then we will use physical to create our instant database instant and then we can query our database so let's copy this also instead of variable we will use const you can supply custom client Constructor if you want to use the native postgresq okay so we don't want this thing we also don't want this we also don't want this so we need to Define all the options here import poll from PG pool like that you can see we don't have the types that's why it is not showing us Auto completion so we will install the types pnpm install PG pool types so it we are installing the PG prototypes as Dev dependencies as you can see now if you hover over it you can see other types and if you try you can see all the stuff here so the database is postgres and the connection is string which we will get from the database node EnV we need it from import okay so we will Define process dot EnV tote our connection string so what we will do database connection string so I will go to my EnV which is confidential and here I will Define my database connection string and you can go to supervis on the project setting in the database here you can find the node.js database connection string copy this thing paste here and here you will here I will reset my password I will regenerate my password so that it is good confidential and now I will paste my password here so now this is my database connection stream I will copy this and I will use this here just like that and I can Define the other options as well allow exit on idle true now we have a pool so how to query okay so let's see all the things SSL is true yeah so now we can query like that poll dot connect then and then catch like this play nice with a syncope so we want to use a single bit so let's use that also so what we will do we will export it export const pool so pool dot connect and then we can use this so it's instead of directly exporting this we will Define our client and then we will use this cons DV is equal to await or instead of doing this we can use this thing this is a self volume function const poll is we already have a pole and then we will say pool dot connect okay this is good and then we can find the result and all the things here your new favorite helper method so we can directly call this also what you think because it's so common to just run a query and return the client report afterwards visible has this built in so it directly curages that's good so let's do this one thing first export this pole and then we will use this export this for now so we will go to our main component inside here where we are getting all the tweets so instead of this we need to run the query so return is equal to await we will import the tool from DB and then we will directly query the stuff we will directly query the stuff so like this select dollar one means the distinct text S name so we will copy our whole query which is this copy this thing we'll use this you can see to install star and here we are using the current user ID so we want to pass this as a so we will pass this thing like this so if you go to current user ID here you can see this is our current user ID and in the example of PG pool you will here you can see this is over so we can ask share GPT to return the query with the PC pool so we can say return the query with using the PG pool and random uuid variable so you can see this is a connection string and this is dollar one so we will set instead of this this is our dollar one which is the parameter and then we can directly query like that don't forget to release the pool so this is how you can leverage chair GPT here so it will copy the whole thing paste it here it will also copy the query yeah so this is our query and we are are passing the current user ID and here we can get the current user ID as well which is a string here over query and here we are getting everything so now if we go to main component here you can see this is complaining this is complaining that you have to get the user ID as well so we can do that that's not a problem so what we can do we can pass the user data over here so user data dot user dot ID like that and we can cut it from here we can paste it and here instead of this we can say this is a string and when the yeah so we can Define two queries here so query with current user ID and query without current user ID like that we can copy the whole thing we just need to change a few things we need likes count but we don't need the user is like simple so we can run this simple query so what we need to do is if the current if the current user ID exists then query so we can Define the query temporary here which is a string let query is string or we can say this is QD without current user ID and if the current user ID exist then we can say the queries query with current user ID and then we will run the query we will pass the parameters and we will process the query results like that pull dot end and that's all what we are doing now let's remove this four now we don't need this we don't need this as well for the moment let's comment everything out and we will see if this is working or not so pnpm brand there and we should be able to see something for now so now if you go to localhost if you try to refresh we should be able to see something here yeah something went wrong can you use a pool after calling and on the pole so something went wrong error password authentication failed for user postgres okay okay password authentication has failed so why is that this is over pool database okay so we don't need this database thing here we can directly use without connection string like that can connection sync directly and from PG yeah so now if you try to hit the refresh and we will see what is happening here we get something now authentication field executing query authentication failed for user postgres this means over connection string is not correct so let me correct my connection a string so to check if this is connecting or not we will first let me reset my database password again reset the whole password and I will use here again good pool mode 6534 okay so connection string is this connection pulling is this let's copy this thing this is for the connection pooling I think we need to use this we can try it we can see what is happening refresh this yeah we are okay so now we got this okay so after changing we have get everything we want you can see we are creating ID text profile ID created it updated likes count and user has select or not and that's totally awesome and we can just return this whole whole query result from here so if this doesn't exist we can return nothing and if it exists we can return result.rows like that so what you need to is you need to use this pool here this one connection string for connection polling not this one this one and then it will work and now we are efficiently curing everything okay but it is still getting some problems like cannot use a pool after calling and on the pole now we can remove this thing and we can modify our treat type and we will return everything so here we are returning all the tweets and here we will render everything we need so restored error is so if this is error so we can return the error inside error we can return a message DB queuing failed and here we are returning all the rows restore data and we can wrap this whole thing in the data like that we can use a sync and await here but we are not using that for some reason because jgbt go to us this thing but yeah that's also possible here we can for this moment we can say this any but this is not a good idea so if you come here if you refresh this nothing is visible and we are still fetching all the things here we don't want these things likes count tweet tote likes count and and the other thing is which we are getting is in the queries you can see Twitter stored lights count and otherwise this user has liked so tweet. user has liked so this thing but there is a challenge is that this doesn't exist so we will wrap this whole thing in the Boolean here you are saying tweet type but we will Define any for the moment so it doesn't show us any error save this whole thing rest dot data let's lock this thing so we can see if we are getting something on the client not getting we are not getting anything let's restart the whole server sometime you may need to restart the server to get things working okay so we are not getting anything and it is still sending a lot of requests to the server which is auth request we are sending a lot of oauth request why is that do we in the like button so in the like button queries index console.log let's lock the result as well so you can see what is happening result yeah something is working here if we are getting the result basically result of rows then why it is not being shown yeah we are getting the result as well so return the data okay okay okay okay okay so the problem is if you visit the poll documentation you can query like that so we will use this async a bit note this not testing I don't like this too let's cut the whole thing const result is equal to oh wait hold dot query because it is a promise and we can see now the query result and we can wrap the whole thing into try cage block so if something went wrong we can console Dot Lock error otherwise we can return the data as rest dot you can see rows because full name is not defined so why is that cannot read the property of full name this is this okay so we want to also fetch the whole profile of the user so we can ask the chair GPD to modify our our queries so we also want to fetch the user author details as well so it will say that profiles.user yeah so we can now face the whole thing here as well so let's copy this thing Ctrl D Ctrl V remove the extra comma and it is good so you can see profiles.username so we are getting the profiles.username as well we are getting profiles dot full name as well so if you save this now it should not complain good now it is not complaining so here if we refresh this thing because something is wrong here missing from close from enter okay okay so we haven't copied it correctly so left join joins profile so we have to join the profile table as well so we are left joining the Tweet table left showing likes join and group by yeah so we have to correctly fix our query Group by and then order wire so this is a big query you can see but yeah we have to do this now we are getting something we are getting something we are getting text username full name everything directly without any hassle so what we can do here we have to modify this thing here we are saying tweet.profile so instead of profiles we can directly save this thing now it's good you can see we are directly getting everything so if we hit refresh this is being rendered one time but the likes count is still not visible why is that tweet dot likes count okay so this is Lex count now it is visible you can see and if we try to click here you can see this is updated if we try to click this is updated and we are also not bombarding over database with a lot of requests so if you hit refresh we now have something 16 000 or 17 000 request in the last 68 minutes but it will now we have removed every complexity from our application like a lot of request we were doing in the last video so this is the only time we have to specifically query a single SQL query otherwise we don't need to do this okay so you can go here and you can refresh this a hell lot of time and this will note you can see 4309 if you hit refresh if you try to to refresh this it is not changed a lot you can see this is cool so now we can like this tweet remove or like and here as well okay so so if we are not logged in we are not able to see any tweets that is not the way I want so if I open this tab in the new tab this is not we are not able to see any why is that syntax error at or near from so this is a bad thing like not using an orm because it will make our life complicated as you can see here qdb dot current user ID if current user exists then QD is qdv so let's see what is the problem we are facing here profiles.full name what is the problem here we are getting this is the same likes dot tweet ID profiles everything seems good to me let's remove this current editing and let's see if it we are still getting a problem yeah so we will fix this problem in the next video I think we have done a lot of stuff in this video so I have explained you how you can optimize your web application so that a lot of users can use it many time and you will not bombard your server with a lot of requests from clients now if you refresh you can see we are not bombarding our server facing some problems with this query without current user ID so what was the problem we are using extra comma here and that's why we are getting the problem so we are selecting The Columns and we are then joining and grouping and ordering everything doing so it's good so here we can Define our query so our query is basically this one so if the query is basically if the current user doesn't exist then our query is poll dot query is query without current user ID that's our query so it is yeah and if the current user exists then our query will be query with current user ID and then we will pass this current user ID with our query okay so this is for the parameter this taller one then we can await this query here we can avoid this query and here we have our result and then we can save this thing and now we have all the tweets here you can see and if we go to a incognito mode then if we try to see here still we can see all the tweets we can see everything is working nice and good so this is a little bit of complex query but yeah with the help of jlcpt we can query our database efficiently so this is what jpt can do now what we need to do is here we can also Define an error so return error something wrong with curing the DB like that now save this now this is good so we are rendering everything and everything looks good to me so now what we need to if you go to the like button so everything is good so you can like we can dislike we are not bombarding our server with a lot of API requests you can see this is still the same yeah what requests are a lot of fourth requests we are sending why is that let's find out there is a reason so this is a homework for you what you need to do you need to remove this oath here and you can pass down the user ID from the tweet and from the main component so we we have the user data we have the user ID you just need to pass down the ID from here you need to pass down the ID through the like button enter so it's that's how you can also remove a lot of like and what what we can say the oath request to the Super Bass server that's all now our application is looking good where is this so this is our application we can take to it this is a latest tweet you can tweet and you can see this is being rendered here instantly this is is super fast okay now what feature we can implement we need to implement our reply functionality so in the next video we will implement the reply functionality what we need to do is similar to Twitter so let's close everything if we go to Twitter so here is a tweet and if I tweet something here you can see if I click on this button it will open a new model and now I can reply the to this Suite so same thing we are going to do when we I click over here it will open a model and then I can type my reply after this if I click on this tweet it will open a whole new window and then I can see the replies below so here you can see this is our application and if you go to the here localhost 3000 and we are running our application nicely but if you go to the queries part we are doing all these things so this is looking bad and there is a great chance that you might do a typo here like we heard it in the last part like if you type a comma here and then it will break your goal thing and you are not able to get this why it is happening so if you now go to your application you can see something went wrong with the server right so we don't know what went wrong and this is a very small typo and we can't debug this thing very quickly that's why it's always good to use in orm that's why we are going to use drizzle orm because it is a typesafe orm you can go to the drizzle warm website you can go to the documentation and you can find out that it's very good over so we are going to use this so first of all let's click on pnpm and install all the packages we need here close this thing pnpm install all the stuff we need so we will create a schema.ts file so this is our source directory inside the DB houses TV thing okay so we will create a new file called schema.ts here we will Define all our schemas which we have created in the supervised so you can see we have a few tables and we need to now create all the tables here this is a simple part but a repetitive part and you can use share GPT to do this also firstly so how to do that using this crcpj so let's go to chair GPT and here we have our schema so if you are watching this part then you also must have watched the previous part in which we have created all the tables so if you go to the SQL editor so create table you here we are creating all the tables so now what we need to do we need to create our schema using all these tables okay so let's copy this thing and this is my SQL tables these you can say these are my SQL tables we can copy everything so this is our profile table and we can remove this row level thing here this is already done so we can remove this this is unnecessary we don't need this thing in our schema file now we will tell this jgpt to generate over schema so generate the orm schemas as you know that JDP don't have the latest data so what we will do generate the RM schema From Below talks so we will paste the relevant information here so we'll go to chat GPT or we will go to the result one because we are using postgres SQL here you can go to redox not here it is directly yeah so we'll copy the whole thing so what I want to do is this is redirecting us to so I want to copy them so this is a postgresql so you can see these are all the docs here so just Ctrl a Ctrl C so we have copied all the things and we will paste this and now we will send this so you can see there was an error generating this much because this is very big so we just need the relevant data what is the relevant data the column types is relevant data okay the this is relevant data so we can copy the whole thing so first of all what we need to do is we have did a mistake here the chair GPD only accept 4000 tokens so we'll fix this thing we will copy everything from here and we will again from docs below and we will only paste the relevant docs nothing much so let's paste this now we have this thing go up to the top here we have the things schematic layers this is our main thing this is also relevant yeah this is relevant index is foreign that's all we need and you can now send this and it will generate all the tables for us you can see is generating all the schemas so we don't have to write all these things by ourselves it's like a productivity hack you can use this and it's good I will tell you if this has any error we will also fix this so now we just need to copy our whole thing copy the whole thing paste here result or MPG core so pgnm popularity so we don't need this populated thing here so we can remove this the uuid column we also don't need this we can just pass the uuid so this may have some error so we are fixing this we are checking if chair TPT has done anything wrong so this is good PG table profiles ID is uuid which is a primary key it's totally okay and we can also pass Auto generated default random so it means it is generated default so now we can copy every ID using this thing uuid primary key default random updated it timestamp defined now not null okay username so this unique constraint is not available in the drizzle noun so we can remove this also instead of uid column we can replace it with only uuid now you can see username dot now we also don't have this check thing so we can remove this it's totally okay but we can say we want not null full name also not null we will again cross check with our original schema so you can go here ID updated username and full name these four things ID updated username and full name cool we can remove this this one also we have tweets which is default random text is not null profile ID and the refresh to the profile IDs profiles.id so this is saying that a profile can have many tweets just like that and now here we can also Define some react Convention of for naming so instead of profile underscore ID we can say profile and then capitalize and then D so profile it it's the best practice to do like that profile ID create it updated it so the database will be saved or what I'm saying is the data base column will be named after this but in the application we will use this for our type script generation so it's cool we have Hastings so it's also cool default random the hashtag continental and then we have a PG table called tweet hashtag a tweet can have multiple hashtag and a hashtag can be part of multiple tweets so you can see we have a table tweet hashtag so instead of saying to it hashtag we can do this do it hashtag this is a table tweet ID hashtag ID and then this one this is cool to eat hashtag primary key so we will say that this is tweet ID and this is hashtag ID so it is creating a table which has access to the thing that which tweet has which hashtag okay so we can if we want to get all the tweets of a single hashtag then we can query the table you can say give me all the tweets of this particular hashtag ID we can create this table and then we can join the Tweet table with each ID of the Tweet is equal to the student ID so it will join the tweetable and it will give us all the tweets so that's how we can do that here we have our replies replies why it is complaining so let's see we have uid as a primary key we have text that's good user ID son ordinal references profile dot ID so it means yeah so who is the user who have replied okay okay let's see we have tweet ID we here we can instead of username we can say user capital I tweet Capital ID reply Capital ID over productivity after this after creating this schema is going to be very good this is one time thing and you will be very much productive after implementing this because previously we were doing all the row things the native things like queuing the database from raw queries that that is very bad so it should always use orm so I thought why not use overm in this tutorial that's why I'm creating this part also when integrating the one part okay so replies text user ID tweet ID reply ID you can see this is itself reference note this you can see self reference a user can reply to okay so we have ID tweet so if we comment this out we yeah it will work so this is not working it is saying that it can't refresh the current table so if we go to the documentation here you can find out an example that for sure which is self-reference you can see that sisters City ID and it is self referencing foreign key and that's cool you can see country ID is countrys.id inline foreign key that is good country ID thesis and sister city ID which is referencing to same table and EPG column and then so replied is also referencing to the same table which is replies and it is saying that reply ID is this do we need the reply ID basically yeah because a reply can also be reply so this is the confusing part let's omit this part I don't think we need the reply why do we need the reply yeah we don't need the reply reply user a tweet can have many replies and then a reply can have more replies also that's why we are doing this yeah that's why we are doing this so if the reply ID exists that means it is a reply for another reply if it doesn't exist this means it is a top level reply if it is existing it means it is a down level reply good so let's do this also now you can see it is gone we are referencing the same table so we will insert this reply ID whenever we are replying to a reply that's how it is work it will work now we are getting the replies and we are constructing the foreign Keys which is columns foreign columns yeah but we don't need this thing we are already referencing things here reply user foreign key columns reply dot user ID profiles.id explicit foreign key with one column explicit foreign key with multiple columns in line four and key so this is a explicit foreign key and this is inline foreign key we can choose to use either of the one we don't need to do both of them so we are referencing one two three so this table has three reference so a user can have many replies a tweet can have many replies and a reply can have many replies so this is what these three references mean and we don't need this extra hustle of creating this explicitly if you don't want to Define this inline you can do that so we will remove now testing and it's going to now we have likes table which is likes that's good default random uuid which is user ID and it is referencing to the profiles.id which is this one that's good tweet ID is this a tweet can have many likes that's why it is referencing to tweet ID so we can instead of saying user we can say user ID tweet IDE you can see we have to do a lot of fixes after behaviors shared GPT jgpt will give us the initial boost so we don't have to write a lot of text here basically and we are creating a index over here why we are creating index because sometimes it is faster to get the data if we have created the indexes but it is not required but yeah we can create that so let's create a index on user ID and tweet ID so we can query them faster so here you can find out about the indexes so if you search index you know this index you can say index and unique index two things we have here okay so I think it is so we need to import the unique index unique Index right so now we have our where is this likes yeah so we have this unique index over here unique index which is like can only be like is unique basically the user cannot like a tweet more than one so it means with the same user ID or tweet ID more than one row can't be existed in this table that's why we are creating a unique index like unique and we can name this thing likes user ID tweet ID index and here we can say unique like index dot on and here we can Define our columns here so we can say like stored first one is user ID likes tote and the second one is tweet ID like that so we have defined our index selected awesome here we have our bookmarks it is PG table the same thing here we need to do user ID tweet ID created it it is referencing to the correct table good it is also Continental so we can say it can't be null so this bookmark feature is same as the like feature nothing much so you can also okay so we are already saying it convenal that's good this reference thinks continual basically yeah this reply can be null but it can't be null okay so this both can be null but yeah these both can Minal but they can't be null both at same time because we need to fetch we need to find that if this tweet has some likes or if this supply has some replies Good now we have some likes over here and we need to do the same thing like we have did for the like so we can just say bookmarks we will say bookmarks unique because as I said in the last part that bookmark and like are the same thing unique bookmark index then we can say bookmarks user ID tweet ID index ID user ID tweet ID created it okay so you can see this is how we have created all of our tables and now the migration part comes we need to generate the SQL from this and we need to sync our database so for that we will use again result docs here you can find out how to connect to our database like this we just need to use this we are already using the pool which you can see and then we just need to pass you can remove this thing import the drizzle import the drizzle from the result postgres import the pool from PG install everything PNP install PG okay I think we need to also install the types over here we have connection string and then we can use over overm just like that's DB select from users and it is simple let's reload our window so we can see what is going on we need to export it also yeah we need to install the type PMP install save there at the rate thanks slash PG so now we have types we reload it will it is gone and it's good so now we have our SQL DB which is a orm and we can now efficiently query so you can see DB dot we have all the auto completion beautifully Auto completion now our productivity will be much faster and we will be able to catch error much faster so we don't need to do this now we can also remove comment it out we will use this riff for reference when we create the same query using the treasure worm so we have seen three methods first of all we have used Super Bass client.js library to fetch all the tweets and to mutate or insert like row and doing all the stuff then we have used plain SQL now we are using an orm so these three different approaches and you can choose from last to whichever you want it is not like must for you to use this result if you want to go with Prisma you can I just want to explore this new thing that's why I am creating a tutorial for it and let's see we have to eat hashtag table it is good you can see many too many this is a many-to-many relationship between tweet and hashtag otherwise we have one too many relationship like a tweet can have many likes a two it can have many bookmarks a reply can have many replies a tweet can have many reply so this is a one to many but a tweet can have many hashtags and a history can have many tweets so this is a many-to-many relationship good so now we have over DB now we will create another script for migrating over database migrate.ts here we will do we will Define a function which is main function we will call it async and what we will do await migrate so we need to find a way to migrate our database so if you go to migrations here you can find out how to utilize the migrations so we need to install the drizzle kit which we have already did I think and now we can use this thing await migrate and import the migrate from here import it import these two things import the DB now we have DB okay so it is migration folder of migration folder is our Reserve when we will generate the migrations it will create a new folder digital and in which we have our migrations node PG database record string yeah so white is complaining let's see diesel SQL let's use this Max connection and also the postgres thing here over here so I think we need to we need distinct postgres and then here we can use the postgres and we have other things here database yeah connection option so this is the database string we need I think so let's connect our database here we can see this is using pool and here it is using postgres so two things we have here but at the end we have database let's use the process.env okay it doesn't need the new thing and now let's see what the things you have connection host host name password everything it has we want to use connection let's go with the database yeah and we will pass okay I think it accepts a connection string like that and it accepts all the can say as a string and we can pass down all the stuff here we can say Max connection is one so we have our SQL can pass down over SQL here inside the drizzle which we will import from postgres CS yeah and now it is not complaining it is good postgres JS database and we will run this main function we will say main dot then process dot exit I will say console.log migrations running console.log migration finished cool so now we have our drizzle warm with a schema proper with proper SQL DB and with migration system now we have to do few more things if you go to the package.json in the scripts you need to Define some script over here so we can say generate so it will generate over all the migrations file so for that to generate all the migrations file you can use test result kit generate PC so where you can use result kits and net PC it will generate all the migrations file and then we will use the migrate to push the migrations to our database so here we can say we will use one something code 1 to run over script one dot sh so it will automatically handle all the stuff holders like getting the environment variables and handling the type script stuff and all the things so you don't have to worry about anything you just need to use npx or pnpx whatever you want npx1 you can say run and then you can copy the migrate copy path the migrate so instead of this we can directly say source code to Source in the library in the DB migrate.ts so it will run over migrations so first of all let's try this let's try to generate the schema SQL from our schema so we will type over here we will say nbx you can type pnpma as well pnpm run what is our description rate okay so it is failed result config.json doesn't exist so we have to define the configs of this thing let's import this as well in the root of 4 directory create a result config.ts and paste this stuff so we can find out we can Define our schema in the source in the library in the DB we have our schemato schema.ts and where we want to Output the SQL we can say it isn't now it's good it will now do the work so let's run the command again pnpm run generate yeah so now we have something and it is showing us that transforming const to the configuring environment is not supported yet so it is saying that no config path provided result.config.ts let's see what is happening errors are if you want to have all the params as CLA options we can also do the install spec command here and spec so it should have directly saying result create yeah so we Face an error so what is the error if you go to the tsconfig.json file you will find that yes if you previously we were using es5 instead of es5 what you need to do es 2017 so if you can see there are a lot of things so you want to use es 2017 and it will work nicely so if you run PNP and run generate again it will right so this is the version thing type script sometimes stuff like that may happen so you can see our migration file is ready and you can see this is mostly similar to our stuff all the stuff we have created here we have our indexes and all the things like foreign keys and stuff awesome so now we have all our things and now we can run the migrations as well so if you run pnpm plan and then you can say interest Let's do an instrument okay so pnbm run install spec what is this select you go to the package.json you can find out it's true spec it is what like this and here yeah intro expect install not not install intro respect and let me fix that intro expect and hit this also address so pnpm run intro is introspect so it will only PG is available option for Drive command field only PC is available option for Drive okay so something is happening here so connection we have to Define our connection string over here if you want to install inspect our stuff so we can go to our config which is drizzle config and here we can provide our connection string yeah it is saying DB credentials inside DB credentials we have connection is string and which is process.env dot what is over connection let's go to command plea of your own make if you are on Windows control P env.local this is our database connection string so make sure this is hidden and yeah database connection string as a string let's fix this so now if we run the install respect it is saying that it is only available for the driver what is that okay so you can Define our driver PG either connection using database are required for database connection so for the temporary purpose what I am going to do I am going to paste my database connection string over here it is not necessary let's not do that if you want to and install is intro respect to your database you can put your connection string and you can remove definitely remove this because we don't want to commit this to our GitHub result config you can see we have test result config and we don't want to GitHub to track our database connection string to please do it carefully so we should remove this thing over here but yeah you can do that okay so you can also pass the connection string like that so we can do that this is this is this can be done so what I'm saying is if you go to the PK store Json Ctrl P command P package to Json here we are saying generate kit install spec PG so here we can say npx result kit intro expect PG and here we can pass over connection string as well out migration and then we can pass our connection history so we don't have to copy and paste so GitHub won't be able to trick yeah so I will now paste my EnV my secret connection string over here and let's try this PC is available option for driver okay so what it is sometime it doesn't work yes so we can say the driver is PG or something yeah now it worked driver is busy and if you go to the migrations in the schema you have all the things okay what is this you can see it is commented current SQL files while generated after intro expecting the database if you want to run this migration please uncomment this code before executing migration so what is happening here first of all we have find out what is the difference between our current database tables and the previous one so it find out that we need to create some more few things here like user identity ID because if you see in our database in our super based database we have tweet underscore ID this is not the naming condition we are using that's why it is generating and yeah so what we can do instead of this let's remove the whole thing we don't need to intro expect for now let's generate the migration file once more so let's delete the migration in the drizzle yeah we have this this one so we have this one in inside the migration we have this one that's good so if we go to our migrated file which is this migration folder is we are saying that this is drizzle and this is our migration folder and if we try to generate or we try to push the changes to our DB let's try this because this is a div instance and we don't care about it that's why we are doing all the stuff over here so we can say pnpm run migrate and it will push over changes to the DB now you can see npx button so if you don't have the bun install it will say please install the button and you can hit the enter and it will work now we have got some errors you can see migrations running bookmarks table already exist relation already exist hashtags so this is stuff all all of this stuff already exists that's why it is not doing anything multiple primary keys for table tweet hashtag are not allowed so it is now done so instead of this we can save after this is done we finally close the connection so now if we try to do this again it will close our server after running yeah after generating the script so you can see already exist now if you go to our database which is here you can find out all the things here if you go to tweets you can see there is nothing changed we already have all the things as they should be and everything is good to go but if you try to change something then it will do something so if you go to the migrate folder and let's try to run the migrations on the migration folder and go to here uncomment the whole thing so we can generate our migration so now let's try it again PNP and run migrate and let's see what is happening yeah so we got something this time also we are getting some errors if this is a fresh database then we won't be facing any problem schema result Rd exists checks already exist bookmarks already exist likes profiles replies to it stick yeah that's good but then why what did you do with introspecting so introspecting is the way to find out what is changed let's assume we have a fresh database create a fresh database and try to push something there and it will work so if we go to a fresh database let's create a new project test or let's say Dev database Twitter ultimate Twitter clone tail generate a password I will copy this choose your reason and we will create a new database let's find out if this is working or not if we will go to paycase.json not in the package in the EnV and I will change my database connection string and all this stuff all this stuff let's change all this stuff so this is my secret service key I will change this this is my nnn public key I will change this as well this is My URL I will change this and now we need our database in the database it is our connection stream and we need a new password so basically I will generate a new password again generated new password copy this thing reset this thing and here I will paste my password that's good now everything is new and we will generate everything from scratch delete the drizzle delete the migration now we will drive everything from scratch so if you go to yeah we can generate pnpm run and then we can generate SQL from our schemas so what we can do we can generate pnpm branch and rate it will generate all over SQL in the drizzle folder so you can see we have all our tables and relations here this is cool and now if you change this if you change something let's let's assume we want to insert something in the user stable so we will go to schema.ts here I will create a created it as well so I will say this is the timestamp I want to show you how you will do the work if you want to change something with the database in the future create it eight dot default now dot note null I just created it updated it like that and now we will generate over again so you can see now we have two migrations and it is saying altered table profiles and add a column which is time which time default is this can be null discontinental and this is now you can see and this is how we have we are generating all the things over here and we can push these changes to our database in single click so we can say pnpm run migrate and you can see migration running and we are successfully done over migration so if we go to migration okay we haven't got this but yeah it is done if you go to the tables okay so there is nothing let's see so then so cloak finished we will also log if something went wrong with that dot catch if we have any error then console.log yeah now let's do it again PNP and migrate something is here migration for okay so we don't have migration folder here we are specifying the wrong folder so that's why this console.log error is also useful sometimes so what we will do result now it will it should work pnpm return migrate migrations running migration finished and finished and here if we you can see all the tables and if you now go to the tweets you should be able to see some foreign gear so you can see this is a foreign key which is released related to the profiles public key and if you go to the tweets table the profile table basically you can see all the columns are here you can go to the replies as well here you can find out the reply ID you can see this is self-relation this is from tit relation indices so everything is working like we have expected and now we can easily QD over database and we can do all the stuff if we pnpm run do we will see something happen so this is our application and let's refresh the page we have also created a new database so that we can now integrate Result One freshly without worrying about our previous stuff okay so that's why we have created a new new database so you should enable row level policies for all the tables here so to do that you just need to follow what I am doing in ml row level policies for all the rows so people will not be able to access all these tables from anywhere it should be more protected if assumed like your public key supervisor public key code in wrong hands then they can utilize those keys to get all the data so we don't want our data to be stolen that's why we are enabling our own level security policies because from a super based public key these rows can be accessed if the row level security policy is not enabled enable all row level policies so you can see enable enable and now it's good now we have our database with our schema in sync so in the source directory in the library in the DB in the schema you can find all over schemas and it is in sync with overproduction or you can see over remote database but we want to integrate it for fetching getting in all this stuff so here we are saying that curing and mutating so instead of doing this what we will do if the current user exists so we don't need this all the stuff here we can directly fetch the rows using retrieval Oram so what we will do we will import the DB from the DB and we will say select and what the things we need okay so we need all the tweets we need all the we need profiles inside profiles we need username and we need full name now what we can do we can say from which table we want so we want from tweets so we will import you can see we are getting all the things so we are importing all the columns this means we if we don't specify anything then it means we are importing everything so now inside here so in the tweets if you do this you will find some Auto completion here and let's find out in the doc in the documentation of drizzle warm how to run a relational query so you can see DB dot query.user.find menu so we can query users and we can find many with post like that so we need to do the stuff we can also left or right join so here if you sign many point first queries so here they are using query fit post with comments like this is good so there we can do that as well so we can say query and we want tweets okay so we want to query okay so it will say Dot case but we are not getting any auto completion here you want the auto combination that's why we are using that result here so we are not getting any auto completion why is that for any nested with queries result will be infer type of infer model from core API good that's good but we want to okay so if you have schema so we have to specify the schema here basically so if you go to the DB here you can specify the schema and let's import everything import or copy the whole line and you can specify the schema now if you do this you can say ah we have 104 tables so we want to query the tweets don't find many and we will say what do we want with and it will give us the other thing which we have so let's find out how we can find many here we can specify the other columns as well or the other tables as well so so here what we want here we want the users or you can say where is this a field code to the tweets here we have profile ID it is related to yeah so here we can say we want the profile as well so profiles true we want the profiles so this is how we can do but we are not getting any auto completion here why is that find many columns what are the columns you need okay so it is saying that space are the columns let's see columns extra limit offset where with good so we want the columns all we want all the columns okay so that's not the case extras what is extras let's find out okay which in the width we have comments and then inside we can pass down the other things as well so let's pass the profiles but we are not getting any auto completion here why set because we are not using the relations here so what I'm saying is we have profiles and profiles each profile okay so profiles don't have anything inside it like profiles don't have any one too many relation here but tweet has something so a profile can have many tweets so what here we can do we can specify some things here like it is given here user relation the same thing which we can do here so instead of saying user relation can say profiles relations import the relations and here we will pass down the profiles here we will say many and it a user can have many tweets and this is into tweets like this a user can have many likes a user can have many bookmarks a user can have many replies as well so this is what we are doing here tweets let's forget about tweet hashtag now replies and likes and bookmarks the same thing we need to do for from the other direction so what I'm saying is copy this whole thing and we will Define tweets relations this doesn't effect over schema this is much more of a application iteration level interface thing so this is only is required for the application Level so here we can say tweets relation and profile info has user ID could can see this these both have the same thing but if the database doesn't support relations like Planet scale doesn't support relations so you have to use this schema otherwise you can use this thing okay so users relations user one user can have one profile good a user can have many comments and on the other side one post a comment yeah so we have to Define from both sides so you can see a post can have many comments and a comment can be only posted on one post so that's why we have to Define this thing here like this a post so here we will Define the profile we will say one and it has it accepts two things it X it will accept here we will pass down the Prof tweets tweets relation it we will pass down the tweets just like that in the comments we are passing down the comments like here and here we are saying a comment can be posted on one post and here we are specifying the posts here cool so here we will specify the profiles and here we will save the fields which are the fields basically so it is the tweets dot which field is this so is it is profile ID and what is the reference of this field so we will say profiles.id just like it post dot ID this is the reference which means this is a reference and this is the field which we want to reference so we can say this post ID is referenced to this ID so we have to do this for all the other was as well this is our profiles this solar profiles relations tweets tweets relations it replies now we have replies relations here instead of doing this we will say replace dot user ID okay so here we are saying user ID which is good profiles replies so if you have to pass down the replies here basically where then this will have the reply success now we have profiles okay now it is good to go every as well we will do the same for the likes table here instead of reprise relation we will say likes relations here we will pass down the likes table here we will say likes dot user ID just like that and the references profiles dot ID good here in the bookmarks we will do the same thing I know it is repetitive but yeah it it works it will help us when we are querying our database and it will be much more error prone here we will pass down the bookmarks it will say bookmarks towards user ID I would suggest you to name these profiles users and then you can specify the user ID as well here so let's save this it will it won't affect the schema but it will affect here so if you now see you can see we have a profile it will hit enter we can find out what columns we need so we need username and we need true and we need full name so this is because of here we have specified the tweets relations tweet if we want to find out on the tweets we have this thing that's why it is working and if we log this it will work but we want to left showing this profile stepping so for that we can do that we can do that if we go to joins here we can find out how to do that so DB dot select from users then we can left join things so this is what we need to do so let's comment this out for now and here we will try something out here we will say const result is equal to await DB dot select you can just select distinct select this technique we will just select and we want to select from tweets we want to select from tweets and then we want to left join basically so here you can find out all the things inner join left show and right join everything Behavior so we want to left join the table which is which table we want to lecture you can see we want to left join the likes table and then join the profiles as well so we are joining two tables so we will join the likes table then join add all element are the elements of an error into any string separated by specific separate so we are taking the reference of this SQL query which we have got from chat CPT now we will join the profiles but before that I think we need to specify something we need to left join and we need to find out Pro for which column you want to left showing so here we will specify something where we will say equal and we can say tweets dot which tab which column you want to join okay so we have ID profile ID everything so we want to join the twitch ID and likes dot tweet ID now this this is what we want after this we want to join the whole table which is the profiles table basically and it it will accept the same thing it will accept the tweets dot profile ID and we need profiles.id okay what it is saying okay left join required and full join code partial select then what is the join many to one example aggregate result so here we have joined all the twists basically here here we are selecting everything but what if we don't I don't want to select everything here length join I want to join the profiles and it's separator add all the element to an array into string left join for each row of the table includes value from a matching row of the join table if there is a matching row if not all of The Columns of the joint table will be set to null okay that's cool but this join is not a yeah this join is not a thing of our right join includes all the rows of joint table if there is no matching Row in the main table all The Columns of the main table will not be set to null so here we are joining the lift we are basically we are saying that give me the tweet and give me the likes count of this to it basically so we are saying that when when the Tweet ID is equal to likes to it ID give me all the rows as well and then we are joining the profile and let's lock the result out and we will see what we are getting here restored yeah so we should get something here dot returning and now what we can do here we can order them order by and we will say how do you want to order by so can set tweets tote created it taught okay so how this order Works cost to tier order by documentation let's find out what is this okay it is sending us to dot all so we can find all the rows and here we can specify the rows as well we don't need all the rows we can offset or we can find some rows note all of them and here we are also grouping them by tweet ID profiles username and profiles okay so we don't need that thing descending the result the GitHub one GitHub documentation is better let's go to there huh here you can see how we can select the users or how we can use this thing select from user where this is this this is this could limit offset and order by okay so we have to use this ascending or descending from here so we need to descending we need descending so what we will do we will trap tesc from drizzle worm we will import and we will say use in sorting and you can hover over it you can find from users order by descending users to created it and to sort created it that's what we are doing here that's totally good now it will work we can limit an offset offset means how many users or tweets you want to jump you can limit them let's limit to one tweet only dot yeah that's that's what we need to returning I think there is something called returning if you hover over it you can see what we are getting we are getting if we do this too we will receive an array if we do it one we will receive array of objects so here we have twits here we have profiles and here we have likes save this thing and here we will find out what we are getting we are getting undefined why is set so if we go to the main component let's comment everything out for now here we are creating the tweets let's pass this thing also console.log current user ID and yeah so basically the current user ID is undefined and we are getting nothing and if we remove this what we will get nothing okay because we don't have any tweets that's why we are getting all of these things so let's login and try to submit some tweets here then it will work save this thing here in the mutation if you go to compose tweet here we are submitting the tweets instead of this now you can use the treasure worm if you want so let's use the twizzle Orem so import the DB dot insert and we will specify our tweets tweets table schema and we can we will say the values are this profile ID is user data.user dot ID just like that dot yeah so this is how you can insert something using the drizzle warm result and let's lock the result as well console.log press what we are getting yeah we are getting the user and it's good node user we are getting the Tweet basically so we can now remove this we don't need Super based server we need only response actually we don't need to send anything if this went wrong dot catch we can set some error we can say let error is equal to empty string and if something went wrong we can say error something wrong with inside something wrong with server let's say for now and we can pass down the error as error that's good and we can pass down the data as Razer res why it is complaining if we go here yeah it is complaining because if we hover over this now we have some different things so just for the sake of demo we will do it any and now let's say how if we able to submit a tweet or not so first we need to sign in so Club of quarters.com gmail.com and username is Club of quarters hit enter now we should be received and yeah so we have received a link I will sign up now I am logged in you can see we are getting an ID here I will submit something this is a tweet this is my first tweet if I hit enter you can see something is happening something is happening so let's log this out what we are getting you can say error console.log error if we try to fit some yeah we are getting something we are getting insert or update on tweets we will list the foreign key constraint to its profile ID profile ID foreign go to profiles okay so we don't have any profiles here why because this is our new database and we haven't configured over trigger to in insert a row into our profiles table when a new user is created for that you could you can go to SQL editor you can go to there is a user management starter and you can just copy this whole trigger create function what it will do it will it will create a trigger whenever a new user will sign up on your application it will insert into the profiles table so new blank query create function public handle user insert into public dot profile ID full name of the URL we don't need the author URL we need the username username full name username these two things we need new DOT ID new DOT now let's try to run this now successfully done if we go to our profiles username for name these two things we need we need the ID as well so yeah we are getting the ID as well cool so now we will delete this user which just has signed up now if you refresh this it will ask us to sign up again love of quarters dot com and Delete gmail.com here we will say Club of coders now I will click on login it will send me a email ID code and email something went wrong let's see let's click on login again something is not working so we will find out what is happening here oath so in the provider we are opening the model here is our authentication model please sign in to continue here we are select okay so the username already exists please use and then we are signing using OTP if something is wrong we should show something here so I think it will give us some data an error if we got any error sign up error sign data so if we got any error then we should Source something and we should return it return those dot error error dot you can say sign up error Dot message and if it is successfully done we can send a we can show it tosh.success magic link sent successfully like that now it's good now if we try to do that again Club of orders.com gmail.com Club of folders login null value in the column full name of relation profiles okay so we are getting something let's lock the error so we can see what is happening we'll sign up error block of quarters okay I don't want to type again and again I think I should use type is email already it should show me auto completion but it is not showing okay so it is what is the problem we are facing is inside the authentication in the profiles username full name let's try this and see the error more carefully fixed error where is there okay in the terminal it should have so null value in the column full name of relations profile Violet null not null constraint at not null value in column yeah previously we were able to sign up and this time note what happened let's clear the whole data where is the storage clear the site data everything now everything is clear localhost go to localhost now let's do it again cloudforest.com gmail.com here we will say the username is Club of quarters hit enter and it is saying data is username preview failing 2 contains this null value in column full name of relation profile so we are not able to insert a new row that's why we are not able to sign up so let's pass down the full name as well so it needs a full name so what we can do we can do is same thing here and instead of placeholder we can say name type text minimum let's remove this and let's define a new state as well for the name full name it is empty here we will say okay the value is username and here the value is email why have I'll forward that thing here the value is e not email here is the value is full name and set the full name that's all now we need to send the full name as well to our server full name is full name that's good now let's write email is Club of quarters.com gmail.com username is Club of quarters name is pranjal Sony hit enter now it is done magic link sent successfully now it is done and we should have a new row inserted in our DB that's totally awesome and we will confirm our sign up now we are sign up and here we will this is my first tweet hit tweet to it sends successfully everything is working as expected and here now we are able to see the gateways and everything is now good so close close close close you can see this is how we are using digital aurum to insert something from note from inside our TV and here we are creating the TV and joining all the Stables here so you can see we are getting an array which has only one element it has something it has tweets which is the Tweet detail it has likes which is null because now the likes is null it has profiles which who is the user who created this to it this is what we are showing here that's totally good now we want all the likes okay so how to do that we want all the likes I want to count it can we do that no so we can send the whole response here and response and in the main component here we can catch the error if something went wrong let error is equal to empty string and here we can directly say like this and we can say error is equal to something went wrong while fetching all the tweets and here we can pass down the data is response and the error is the error now we have something and if we have place to data dot length is greater than 0 or or not like that if this is defined here we can remove this tweet why it is showing us this weekly line control set rest to data.map now we have this tweet void element undefined is not assignable to type react node type word is not a seven yeah two it is raised to data and raised to data.nint is greater than zero something is not working here something is very wrong we can say it is dot data yeah now it's happy it's basically happy it is saying yeah so here tweets tweet dot so we can split the profiles tweets here we can say tweets.id here we have our tweets and in the yeah here we have all the things here tweet.text here we don't need to give this thing here we can infer tweet type so if you go to the documentation of drizzle let's close this you can infer actually you can infer the types so if you go to schema declaration this is how you can infer the types of the everything so if you go to schema here we want to infer the twitch type so here we can say tweets instead of saying the so this is our users table we want to infer the user here we can say we want to infer the tweet and import from reservoirum and we can pass down type of tweets now we have a tweet type and here page we can get the Tweet type from schema good so here we can spread both things profiles like that now it has all the things here which are needed it has all these tweets it has all the profiles so we can Union we can Union both the types so here this is our tweets and here is our profiles so this is our profiles so we can say this is our profile infer from profile and here we can make a junior notice Union there is something Union type script if you search this you can find how we can Union a type yeah this is how you can Union simple we can say if this is profile or this is Street import the profile now it is happy it is also happy here you can say tweet okay not to be basically we don't want to Union this it will eliminate the common things we want to intersection let's try it and we want both so tweet dot yeah now we have both so here we want the full name here this is of yeah tweet tote created it now we don't have the likes count for now we can pass down this we can pass down the zero it can also make sure it is false everything is looking good for now we will see what we can do to make sure our like button also works like it was working previously so now if we go to our application you can see this is my first tweet we are getting everything we need so if you hit refresh everything is good now we want to like this field if you click this button it will like but it will not shows anything so here we are getting all the tweets likes and profiles if you like this thing insert or update on likes for tweet ID okay so we can't we are not able to insert into the likes table why is that let's find out it is our uuid for our thing for our tweet if we go to tweet inside like button here we are liking to tweet tweet ID user ID it's good why it is not working so instead of doing this we will use the digital alarm dot insert insert into the likes row and we want to insert some values dot values which are of tweet ID which are user ID and everything else will be Auto generated basically so now you can you can lock the error if we get anything error console.log in error yeah now let's do it again try to like this tweet it worked right thing if you go to the likes table nothing is here we also want to find out what is happening so const response is equal to console.loke response save this thing now we will refresh this I will like this yeah we are getting something insert or update on likes whether it's the foreign tweets for NK something is missing here something is not correct why is that let's find out let's log first let's look the IDS we are receiving here so we can find out what is happening so here is our cheat ID here is our user ID let's lock both of these out our user ID is this and our tweet ID over user ID is 4D something and our tweet ID is 10c something let's click on this button and see what is happening yeah okay so we are getting both same things here tweet ID and user ID both are same why is that why is why is this problem because we are not passing the Tweet ID correctly so if you go here in the light bit here we are getting the Tweet ID but where from where we are getting the Tweet ID in the like button and this is the ID of tweet and this is wrong why is that let's look the Tweet okay this is both same why is that oh okay okay okay these both are same why is that let's find out here we want to return this thing but to debug this thing we want to to console.log tweets so it is combining both of this ID and it is taking one so the problem is the ID so to fix this problem what we will do we will pass down the Tweet ID here we will say tweet ID it is it is confusing us okay so we are getting confused here what is tweets and what is not so we will do use Reserve profile and here we will pass down the profiles so now everything is clear tweets so now we have ID text and nicely so we we can differentiate which is Twitter ID and which is user ID so we have this user ID and this is the Tweet ID so that's why we are doing something here so instead of doing this we can make our type like this we can say roof file just like this bit user profile is profile and another thing which we have is tweet or we here we can specify or we can directly say we have Waits here tweets is to it it's still not happy so we need to fix the type here so I think we need to do something here user profile and tweet details and here I can we can pass the tweets now here we can the Tweet details is Tweet now both are satisfied and it's good save this save this thing also and here you can say user profile dot full name twitch.user profile dot username and here we want tweet details created it to tweet details and the Tweet IDs tweet details dot edit node the user and now it's good now it's totally differentiated it's good and if you click on this like button it will work it will work it will definitely work now if you go to here in the likes table you can see we have now our like which is created using Crystal orm now we can remove all the consulted look first remove all the controller block so why I have recorded this debugging path also because I want you to know that not all the times everything works out sometimes we get get some errors and we need to figure out and we need to debug the errors okay so that's cool we can do this or we can delete from using the tercelorm as well but you can do this by yourself now here we are getting something here so what I'm saying is let's log the likes and we will see what we are getting so we are getting the likes as well you can see and if you like this tweet one more time then we will also get that one tweet so I will open a new window which you seeked foreign so here as you can see we are saying that where if this exists or not so if this is doesn't exist then we can say undefined argument of type this node assignable we are getting this problem let's assume we do this okay because this can be undefined that's why it is not working so if we do this it will not show us any problem let's find out what we are getting here hit refresh now we get something this is straight this is likes profiles that's good that's not I want let's remove this whole thing let's find out console.log row dot okay we have three things likes profiles and tweets so I want to select some custom columns okay so how can we do that let's find out we can select partial select user.id user.name mapped1 map2 that's okay that's totally okay DB dot select as SQL number X from this generate series conditionally select fields we can also do this SQL thing here it's cool how about we try this the same thing here we can save the user has liked or not so what I'm saying is user has liked if the current user ID exist then has light otherwise null conditionally where is this conditionally yeah now it's good it's conditional with name name.users otherwise this that's good and we can say is liked and it is SQL import SQL from here and we can pass down over SQL string DB with SQ we can do a lot of things here basically as liked exist is we want to do this can we do that damn wait okay we can do that let's find out we are getting this thing here row Dot has liked okay so we have his leg now but we don't have the tweets or anything now we can say tweets is tweets likes his likes and we can say profiles is profiles let's find out what it gave us not working let's go to the main and something happened true so we have liked all of them so it is giving us two that's totally dope and what if we what if I remove all the likes let's delete all the tables so we have two users we have three tweets so we have light all of them I want to delete all of the tables okay why can't I delete this table note table we want to delete yeah delete six rows delete all the rows now it should be false if I hit refresh yeah it's zero it falls dim so our query which we have written in SQL just worked in drizzle orm so this is how you can do that it's totally awesome it's cool what if I go to local notes 3000 now it's good we are getting three likes if I hit refresh if I hit like now it has one like that's totally dope so we are getting all the results what we want and we can pass down the road.heslite into select is equal to row dot select this is a complex query and we have struggled a lot to achieve this but yeah it was totally fun now we can also specify this okay so it is saying unknown we can pass down like a Boolean why it is saying okay so we have to specify the as liked as Boolean here that's stop and now in the main component in the main component here we are getting the tweets and here we will also specify if the user has liked this tweet or not so here we have his liked and we will pass this down into our main thing so if user has light or not here it will go this is a Boolean save this thing save this thing save this thing now it will refresh and everything will work like charm okay why it is if I hit okay so it is getting all the true and false for older yeah why is that let's find out in the in the queries hereby here we are seeing if current user ID exists then here's like it exist otherwise not so something is fishy here something is not correct what we are doing we are selecting from likes we are saying if likes dot user ID is okay so this is wrong this is wrong this is not what we want we want to find if this current user has light or not so we have to Define two equal and we will say twist out like stored user ID and also the likes dot the Tweet ID is equal to the current tweet ID basically that's what we are doing so we are saying the tweets this this ID is equal to this ID or node so for that what we can do here we can instead of doing this we can say DB dot select Dot from likes dot aware dot where and here we can say equal likes tweet ID is equal to tweets dot ID and at the same time we need equal likes dot user ID is equal to the current user ID so this is not accepting to equal in the same way so we can pass down another where here and we can say this now save this thing now if you hit refresh everything is good if you hit like all the three tweets are like no this is not what you want something is still missing DB dot select from likes where likes to tweet IDs to it stored ID like stored user IDs current user ID and now we can remove the whole thing here basically let's remove this refresh this okay so we have to use this end operator here and that's how it will work instead of changing we can do and import the end and here we will use the same thing like that and here you can see where where these both conditions are satisfied where the user ID is equal to current user ID and the Tweet ID is equal to the current tweet ID let's find out yeah I think it worked if I remove this if I like this if I like this I like this if I refresh this now it's good if I remove this yeah two likes it has two likes I will remove one like it has one like I will remove this one like as well now it has zero like so it's working so yeah we can't change multiple where operators we can use end operator and we we can select multiple equal yeah that's good so that's how we have successfully fetching the tweets we are getting the tweets this is a fresh new tweet hit enter this is a fresh new tweet with zero likes if we hit click if you like this tweet if you are liking this tweet here we can see our fresh new tweet as well and we can like this tweet and everything is working like charm and we have successfully converted our row SQL query into the orm query which is long and honestly this is not looking good but yeah this is better than this where we don't have to define a lot of things and we can conditional chain multiple things so yeah thank you so much for continuing with me till now I know this must be hard for you at the first I am you very new to Teresa Orem this is my first time where I have tried laser over so here as you can see this is our application and we can like this and we can remove our like as well and if you refresh this everything is good and perfect we can also tweet this is a new Tweet now we want to implement a new function when we click this a new model will open and then we will be able to submit a new reply to this video so let's build that part first of all we need a new model for that we will use UI dot sharedcn.com that's the thing we need so let's go to the app page here we have main component left sidebar and right sidebar that's good in the component in the client component we have did a mistake that this like button is use client okay but this activities use server but as you can see we are getting everything in this component from as a props so if you even use this component as I use client component it will still work if you hit refresh you can see this is still working the same now it's good and now if someone clicks on the street so on click we will open a new model okay so we will open the reply model or we can say the dialog so let's go to the twitter.com and we will find out how it works so you can see if we hover over it you can see some a little bit of white color is here okay so if we click this and if we click on this reply it will open a new window where we can reply to this tweet so we want to build this thing so when we click this we will build this model so note the whole thing note the whole thing only when we click on this shade thing so this is a button and when we click this open the reply dialog so here we can Define our dialog so we can wrap this thing inside a fragment this is called react fragment and here we can Define our dialog we can copy and paste the dialog code from UI dot share cn.com get started in the dialog node in the alert dialog in the dialog you here you can copy and paste you can see there are two Styles but yeah now we will copy this thing this is our dialog also copy this and paste here it's good and when this is open when we click click our chat button so instead of here we can cut this thing we can paste it over here and for the trigger we can use this button cut this paste here button cut this save and for the trigger we can use a child so that when we click over this button it will assume that we are triggering our legs so now let's go to our application here you can see we can't able to hover it so let's give it some effects like we have given to the like button so here you can copy the classes same and we will use these classes for our button now if you hover over it okay it is still not working let's say press this something is missing here okay so our app got hang why is that localhost 3000 and now you can see we can hover over this like it like the like button you can like this we can remove the like if we click this you can see we are opening a nice model but we don't want a lot of white shadow you can see this is a much the opacity is much cleaner so we can improve our dialogue let's go to the dialogue and this is our dialogue overlay we can fix this so BG background 80. so instead of 80 let's do a 20 so it will refresh if you click this now it is much clearer let's do it then we can remove the blood as well let's remove the blur or we can keep it it's the blur looks good so now it's much much clearer here we can reply to the Tweet so just we need to create a new server component over here but remember but we can not use a server component inside client Commodore and am I right yeah here you can see Server component inside line component so you can summarize the differences between server component and client components here so on the top level if you can see this is our page and this is a server component in the we have another server component in this we can have a client component but in the client component we cannot have a server server component that is the main point in the server component we can have client component that's the thing to remember and which is pretty obvious if you think that if your client component has some interactivity and it is already gone to client which means this is publicly available and our server code is private that's why we can't code anything server inside our client and if we have a server component inside it we can create a client component this is pretty obvious and easy to remember this is a technique I use to remember which is client and what is this so in the client component we cannot declare a server action or anything okay so to use it basically we will use in the mutation if we go to the mutation just like we are using the light to it unlike tweet actions we will use this actions to do our stuff While submitting the reply so here we will Implement our reply thing let's create another model in the component in the client component it will create a new component which is reply moral or reply dialog dot TSX and it is a client component by default use server not your server use client rafce here we can say reply dialog here we can cut the whole thing and we can import the reply dialog just like that save this thing now we need to cut this also paste here import this everything is good okay so now it's good what we need we need to style it a little bit so go to this we need a tweet here so basically we need the Tweet details like this so we we just we are just rendering this whole component and we are showing it over here and then we will show a reply box here so what we can do we can import that tweet again inside this button that that would be not a good approach we can copy the whole thing and we can show this over here so this is only for image so if we try to reply this you can see we are only rendering the text and then we are showing the then the Twitter is showing the image URL we can actually remove the both of the things so if we do this yeah so we need to copy the whole thing copy the whole thing we are not going to copy everything but you will see what we are doing here remove the title as we don't need it remove the description as well remove the header we only need the content we need we don't need this yeah we need the username full name text we need the date you need to text and then we don't need this whole bottom thing so the data we need is we need the Tweet so replied dialog procs so here we will Define our props we will say type is reply dialog props which is tweet and that's all we need it will accept tweet import the stuff here like that import everything and here we will say it is the type of tweet which we are getting over here same import this icon and if we save this and we will go and we will see how it is looking refresh the whole thing it's slow it it is stuck sometimes but yeah let's go to localhost 3000 you can this happens sometimes when we are developing in early stage product okay it is stuck so we have to open okay so our browser is hang I don't know why it is happening but it may happen now it is gone we will open the localhost okay so we are not passing the tweet from here so we will say the two it is to it save it is getting us in the problem so what I will do I will open my new window and I will use this over here yeah so if we open this you can see we can see our model here oh it is not opening here yeah we can see if it open this we can see this but we don't want this inside or so the problem we are facing over here if we open this reply model this is the thing which we don't need what is this so let's PG slate this is a new tweet BG slate this is we don't need where is this yeah so this thing we don't need and the text is gray let's use that text white and we have to make this dialog content look as our tweet so for that we need to give some classes to it like PG black and the classes we are giving let's go here yeah it's good we can give it BG black it's black we don't need the Border as well so border is none it's good text is white everywhere we can remove this now it is looking much better and if you go to the Tweet here you can see this is over Avatar which we have removed by assuming it as a picture so now it's good we can give some space to it so m y 4 yeah so let's assume a big tweet create a big tweet generate paragraph it hit enter or tweet submitted in if you open this yeah now this is looking just like a Twitter timeline and this is awesome you can see now we can open tweet and now we want to reply to this tweet for that we need to create a reply thing or we can say the input thing so we will go to Twitter again here we are if we click over here you can see replying to pranzel Sony so we can also show that replying to this for that create another division replying to at the rate and here we will show the username tweet.user profile load username and if we go to here you can see replying to here and we can now use our input box here create a division we will use the input from UI it's totally good to use anything like one change or anything so save this this is our input here we can submit our reply let's make this look better just like our tweet so if we go to main component if we go to the compose compose Street form here you can see the all input put classes and we will use exact classes over here because it is much much similar you can see now it is good and we can use this simple input field we need to show the current user the author as well so what we can do we can name it Plex W full items Center space x 4 here we can create a author as well so instead of a dummy Avatar you can show the original Avatar of user now we have something we can type it's looking good let's make it too so now if we open any of the window you can see we can type over here and we can reply and that's okay that's cool I want to give it maximum width of LG let's see how it works SM after SM we are giving the maximum weight of LC so instead of that what I will do I will give it Excel maximum width of MD let's see what we are giving after SM maximum width of LG okay okay okay if I remove this after SM maximum width of let's go with SM yeah we have to refresh this let's go with Excel now if you open this you can see this is bigger we want to make it much bigger so we can go with to excel so if we open this you can see this is better this is the only single tweet and it is rendered twice yeah this looks good this looks good now we can reply something here and let's assume we have a bigger reply which is standard paragraph so it should get bigger so instead of text instead of input we can use something called text area if you hit save you can see this is bigger if you hit you can see we can also scroll and it's better and open this you can see we can see all the things over here this is good now we just need to submit this reply so for that we can use a use form book or something similar but what we are doing we are just we will just use the use State Hook and the on change this is simple and we can just use it reply reply text which is empty import it is string you can say but it is also it is already assuming it is a string because we have empty string over here so we can say it the value of it is apply text and when we on change it it has event and we can set the reply text to even though Target dot value just like that save this thing behave text area and now if we hit submit if you go to Twitter and we can show it reply button just like in the compose form tweet button so copy this thing also here I will paste this and we will see how it is looking so you can see we can tweet instead of tweet we will say reply and this is below the container so we can cut this container and we can paste it here so it is below the container you can see this is our container we can show a little border here so instead of this you can see this is our reply area and here we have over reply button which is exactly similar to just like Twitter here we can open this let's try to submit a reply and when we click on this button we will submit something we will do something so what we will do when with this is clicked we will submit a server action just like like tweet so in the like date whereas I would like tweet component close everything go to the like button here this is what we are going to do so we will copy the whole thing the whole thing copy this paste over here copy this paste over here instead of using this browser client now we can use the use supervis from our authentication provider Super Bass Just like that and here we can say super based dot so yeah like that here we can get the user and here we can do the things we like import the use transition Hook from react is reply pending start transition and here we can instead of it's like pending we can show its reply pending and here instead of this we can submit a or we can say insert insert a row into the DB which DB the reply table like that it is simple and we need to do something so we will do this and we can import the toast to show some Tosh please log into reply to reply please login to reply to a tweet and if this is called authentication failed that's good everything looks good now and we just need to insert Arrow into our database for that we'll go to our mutation here we will say export const reply and reply yeah that's good reply async and it will accept one thing it will accept tweet ID it can accept two things basically it can accept two things it can accept tweet ID for now just accept the Tweet ID and in the future I will tell you what it can accept more tweet ID which is string just like that and here we will await and DB dot insert which table you want to insert so we can say we we want to insert in the replies table so this table we want to insert it accepts two things text user ID and tweet ID or reply ID yeah we need the user ID as well this is if this is a must can say user ID which is string dot values here we can pass down the values the text is yeah basically we also need the text which is reply text copy this it is also a string so here we can say the text is reply text the user ID is user ID the Tweet ID is tweet ID that's all now it will work like Char that's all we need here if you want you can let's assume your replies HTML you are submitting Rich text into your database so you can sanitize or you can verify your reply text before saving to your DP so here you can see you can verify or instead of saying verify what we can say you can check the reply text is 2 3 or not wait for now we will just check if this is a string or not for that we can we can directly do if not reply which is which can't be happen because we are checking if it is reply here we can say if reply text is no not equal to empty string or we can say yeah then do this otherwise don't do this so we can say if reply is equal to empty string or reply text Dot length which is the reply text length is less than one character or two character okay okay so we can allow one character reply that's totally good we can return simply we can return so now we just need to use this reply over here so reply here it will accept few things reply text it will accept tweet ID it will accept user ID and we have all of them we have user dot ID the Tweet ID is we have tweet dot tweet details dot ID save this and when this is successfully done what we need to do we need to close the model which model we need to close the reply model for that first we have to control the model if we can open this or not so here we can define a state use State like that is reply mode if replied dialog open initially it is false initially it is false basically and here we can say on change set is reply change and yeah we can control it by status reply change and it is open which is is reply dialog open like that and we can make it close like that so start transition reply dot then here we can make it false we can disable this button and if we get something error we can show dot error something went wrong with Divi save this thing here we are we will click on here this is a reply we will click on reply and it is closed as you can see and now if we go to a database in the replies we should be able to see one row of our first reply so you can see this is a reply and this is a tweet and it's totally awesome tweet ID we have tweet ID and we have everything we need here and that is awesome that is totally awesome so now if you this is cheat if you click on the select record you can see it will select a record from the yeah this is a reply we have submitted to test it and B now can render this reply if we click on this whole tweet we should be able to see the reply so for that what we can do if we click on this reply we can show the reply account as well so now for this we have to create a new UI for that so if you go to the Tweet component here you can say when the user clicks this division we should open something or we should redirect to something okay and also we can hover when this is over PG white five so when this is hovered we are not able to say let's do it 20 refresh this and it will work sometime it code is stuck now you can see we are getting this white here so let's do it then refresh this is slow I can say this is slow now yeah five would work and let's give it some transition and also some timing so it will work let's open localhost again in the new window yeah it's good just like Twitter a little bit of whiteness and when we click this just like Twitter we should also make this cursor as a cursor pointer cursor pointer but the problem is for that if we open the localhost if we click this this is not opening okay so it is it is slow let's open again in new window if you click this you can see we are opening a new model which is totally good the model is good and if we click this we are clicking two things we are clicking this model and we are clicking this so if we click this this should open a new window but the problem is if we click this it will also get this clicked note this if we click this okay so let me tell you what I'm saying console Dot Lock hold tweet clicked this is hold bit clicked and if we go to the reply dialog here you can remove this yeah here you can see console.log we apply dialog clicked so now if you open the console if you I'm not sure why it is slow but it is painfully slow let's open it inside Firefox so you can see this is our Twitter and it is looking dope I can say this is looking dope if we go to tools if we go to browser tools if we go to browser console this is our console you can see okay browser console mode yeah and if I click on the street if I click on the street and nothing is happening or is the correct console let me open web developer tools this over console yeah so the problem I'm saying is if I click on this whole tweet this whole tweet clicked if I click on this button then first first of all the whole tweet will be clicked and then this button will be clicked so replied I look clicked hold tweet click so we want to prevent clicking the whole tweet when we click on that button so for that we can separate these things out so instead of clicking the whole tweet we can differentiate what we want to click so this is the whole division this is the whole text division and we can only make this thing clicked that's what I'm saying and we can use this all fancy animation over here so now our problem is gone and we should be able to fix this so let me open my browser as well localhost this is our console now you can see we are getting something and if I click on this whole it clicks if I click on this reply dialog clicked so there is no conflict in clicking between these things now if this is clicked what we want now if this is clicked this is opening reply this is okay this is totally fine if this is clicked we want to open a new timeline where the user can see all the replies of a tweet for that we can route this to whole different router so for that we can use next router const noter is equal to use router import from next router here we can redirect the user to tweet likes so if you go to Twitter and if you click on a single tweet like this if you click on the street you can see this is opening my username and then status and then the Tweet ID and then we can see all the tweets reply here so the same thing we want to do but we can make it a little bit of Easier by doing something if we click on this we can redirect the user to a nested route in the app directory we will create a new page and then we will redirect to there so you can say outer dot push this is spectix which means this now we can stream interpolate and you can use logic inside our string so we will say redirect the user to this tweet ID so we can set tweet slash the Tweet ID so tweet dot tweet details dot ID so redirect the user to this route and where you can see all this stuff so remove this now it is hang again I'm not sure why it is okay we are not able to see any of the tweets that's the part comes this part happens when we are building something new with the latest tech stack let's open this is in Firefox localhost 3000 we are getting empty over here can we use a use router think or can't I'm not sure so there is something router dot refresh yeah we have to use it from next navigation that's the problem we are getting here so now it should work it has router dot back forward push good so now it will work I think yeah it's working open the whole thing now if you click this you can see we are getting redirected to this tweet if we go back this is good if we click on this we are seeing the new reply tab or the new new reply dialog if you click this we are getting redirected to the Tweet so now we need to create a nested route and we will fetch all the replies or to treat building this part now if you search Dynamic routes next yes you will learn on this page routing in the routing you have Dynamic routes you can create a folder name inside folder name you can create page.tsx for your Dynamic routes just like here so if you now go to our application so if you go to Source in the app router and in the app you have page which is our main page let's create a new thing actually we don't need any API so we can we can delete this whole folder we can delete this whole thing here you can create a new folder which is tweets or tweet yeah tweet is good and inside the Tweet you can create a new folder called ID and inside the ID you can create page dot TSX it will render over tweet and basically what you can do we need the layout also we need the layout also so we can use this over here I think it will work just like charm so this is our layout and in the layout we need here left sidebar and right sidebar both all the things we need here so if you go to layout.tsx here in the body inside the body we can remove this component and we can import this left sidebar and we can import our right sidebar both links and if we go to our main page here we can remove this and we will render only one component which is main component save this thing save this thing now we have this left sidebar and right sidebar everywhere okay so if you go to here if you refresh this let's go to localhost 3000 and see if this is working and here we can Define our rafce here you can see this is home page here we will call it to it page this is tweet page save this now we can you can see this is working just like previously if you click here we can reply if you click here it will redirect us to the thesis tweet page you can see it's good so now if you go to the main component here we can copy the whole this thing over here which is this this is manageable and here we will render all our twists not all the tips here we need only one tweet which is we are getting from const router is equal to use router which is from next navigation that's console.log the okay so we need this ID basically we need this router query so can we do this from next router I'm not sure let's look to Theory out and we will see okay so we can't use router here we can use the navigation but we want the queries so how can we get the query okay so we can get the query from use path name and all the things available here so navigation here we have some things where you use params as you selected okay so you can use this use params and let's log this out and see what it gives us use programs only works in client components is a use cleaning okay so it is saying that it only works in client components so now what we can do can we get the use server okay okay so we need the query basically so we are directly getting the query here that's totally awesome we don't need anything we are getting like this so in the here we have ID and that's good see that generating generate static params page to learn how to generate parents that's totally good but this is let's remove this and now we will lock the parents and we we should see the ID over here you can see we have ID which is a tweet ID and now we can render our tweet here for that const tweet we will import our DB we will say select Dot from when we need from tweets basically we need the Tweet we need to join something as well we need to do a lot of things but for now let's join let's get the tweet and show the Tweet over here we need to show the tweet from the client component it accepts something it accepts his liked or not so we need to find out his liked as well and also we need we need one thing which is this user ID over here import everything we need and we can make it a sync as well here we can Define the things we need here we can say yeah so DB await don't forget the await here we are saying DB to select and just like in the get tweets here we can select what we need basically we need to copy the whole thing we need to copy the whole thing we are saying that the current ID this user the current ID is user data dot user dot ID if this exists yeah if user data.user.id exists then do this otherwise not we have to import all the likes table all the profiles as well and we don't need the order by but we need one thing and equal equal current user ID is user to this thing import exist as well so you can see we are importing a lot of things and we are joining we are joining profiles who has the submitted this state everything but we need a few more things here what we need we need to find out this tweet only single tweet basically you can see we have params.id inside the patterns so we don't need the all tweets from select this from tweets but basically instead of saying limit dot you can say where equal just like it where the equal is fields.id is equal to params.id like that so it will give us the current rate only so now if you lock this tweet console Dot Lock to it here we will see what we are getting to be taught yeah now we have the Tweet to so we are only getting the single why it is to limit select from left join so we can do the where here that's good it will only return us one tweet so let's comment this out for now and see what we are getting yeah we got this we got one tweet we code our one tweet which is this profiles has like true because we have like this so if you go to our home page this is localhost 3000 if you refresh this let's close this you can see this is a new trade let's go to this state we have liked this to it let's remove our like click click here we are on to this page here we can see we have not liked this to it likes Arnel because likes are zero the user who is the author of the street and the Tweet details we are getting all the details of this tweet that's okay that's good so here what we need we need the first element of the street zeroth element then we can say dot has liked or not and here we can do this instead of this sometime it may return so we can say Boolean has liked we need the likes count so we can set to it 0 tote likes if it is null then zero then we can show the Tweet detail as well tweet tote tweet zero thought that tweets okay it is saying the Tweet is all the details of ya so we need to specify what is the it needs to is detail which is tweet zero dot tweets it needs user profile which is tweet 0 dot profiles now it needs one more thing which is current user ID so we can pass the current user ID as user data dot user dot ID it is not required yeah that's good you can do this it is still saying that okay so we can count the number we can say likes dot so it is giving us a lot of things so we haven't joined all the tweets here so it's not a big thing to let's not show let's go to Twitter and see how Twitter works so this is our Twitter if you click on this we can see all the things here as well so okay that's not a problem let's do that thing as well so if you go to our queries here we are getting queries and here we are getting all the things here so we need the same thing here we can modify this tweet as well if you want one tweet or not so what we can do we can modify this same row as well or we can use this function to get the rows cut this whole thing we will export this export cost modify response is equal to it will get the rows and it will return the rows let's do it any and here we have rows it is saying untyped function calls may not accept type arguments if we remove this thing yeah but we need the type result okay okay so we need to modify a lot of types here I don't want that I want to make it easy so we can get the one tweet from here instead of getting 10 bits instead of limit so we can Define the limit here as well and the Tweet ID as well so we can we can say get single tweet which is basically this is Boolean we can say get single tit is Boolean so if this is true what we can do here instead of awaiting we can we can say query we can modify this query mode and we can say this is let query DB dot select all to this all things order this and we can also pass order by Boolean so what we can do we can say if over by is available then query is equal to query tote this thing query dot order by this here we can say if single tweet if we only want to get the single tweet which we want then we should have the Tweet ID here basically get single tweet and the Tweet ID so if this is true which means we have a string which is get single tweet ID so if this is true then we can say query is equal to query dot where dot where and we can pass down the equal thing we can say tweets dot ID is equal to get single tweet so this is the ID so instead of get single tit we can say get single date ID like that and that's totally awesome and if this is limit is default is if limit is defined I can say limit and this is a number limit is number so we can remove this thing here we can say if limit is defined query is equal to query tote limit and we can pass down the limit just like it it is very easy and after all we can say row is equal to await query const now it will give us all the things we need that's how it will work so if you want to get a single date we can get it from this whole thing we are modifying a single query to use here as well so instead of get tweets copy this thing get bits and yeah here we will go and we will remove the whole thing we'll say get tweets and here we will Define the current user ID the user data dot user dot ID the second thing we need is get single tweet ID yeah so we need the kit single ID and what is the ID payarms dot ID which is single ID order by we and we don't need anything and it will give us the Tweet we don't want so now we can remove this thing and we should all get the thing here tweet.30 dot hash select tweet is possibly undefined so here we can say if to it exist then render this otherwise render something like division no tweet found just like that and we can do this tweet zero thing for all the Tweet here total length dot tweet profile and it will work I'm sure it will work yeah you can see likes is an array and everything is like perfectly charm you can see we are also able to show this tweet over here so we are showing one tweet if we go to localhost when we click on home we should be redirected to home so for that if we go to our left sidebar here we are sending the user to home page so instead of item title lowercase we can send the user to home page so here we can say if item tote title is equal to home then send the user to home page otherwise send the user to their respective title page so let's go to previous page which is our single tweet you can see we are getting the new tweet we can like this to it as well and we are getting the updated tweet if we click on Home Market is still not working why is that left sidebar if item dot title is capital home basically so to fix it we can set to local lowercase and it will work like for now if I click on home you can see we are getting all the tweets if we click on this tweet we will get this to it and we click on again then it will send us to the Tweet again but we don't want that to fix this go to the Tweet here we are sending so instead of this we can use this so if we go to previous our tweet if we click here nothing happened if I click on home yes this is my first tweet click on this you can see we are getting everything nice and easy and we are showing now what we need to do we need to show all the replies here a sheet of tweet we need to show all the replies here reply is also a kind of tweet so basically we will fetch the reply same as we fetch a tweet okay so as you can see how to face them so it is pretty simple with fetching the replies we can say replies is equal to await DB dot query dot what we want to fetch we want to face the replies and we want to fetch the many replies here we can specify the extra columns we need for pitching you can say we want to fetch the profile as well so if we console.log now console.log replace we will be able to see all the replies you can see we are getting all the replies with the profile ID that's totally awesome okay but it is it is fetching all the replies we don't want all the replies we want a very close here we can say we want only replies with discrete page so we can say the so we can specify some things here dot DB dot query let's find out in the drizzle aurum documentation how we can use the query in the documentation index has SQL operator where is this we can directly use the select but I want to use the query thing which is new so where is this query tv.q yeah testing rational query so like this can we select and we can filter it or not yeah so we can filter it just like it so you can save where the equal operator import the equal operator which we have already imported we want to say that replies dot here you can see user dot ID just like that we are saying you reply is dot Okay so it replies response let's do it we want to say replies dot ID note ID we want to say the Tweet ID is equal to the parents dot ID so now it will fetch only one reply with the current Loop ID not one reply with it will fetch all the replies which the current tweet ID so let's log this out and we will see what is happening over here now you can see we are only getting one reply which I have created for this tweet if we go to home and you can configure this home thing if you go to Left sidebar here we are saying that if the item dot title is home then we are sending the user to backslash which means home now here let's create a new date new fresh tweet hit enter this is our fresh tweet we will click on this if we go here you can see over array is empty which means our replies are empty if we create a new reply so this is a new reply and click reply now you can see we so this is a new reply here and if you go to the mutation here we are revalidating our path that's why we have our reply just like that now what we need to do is we need to render this whole thing over here so we can use the same code just like it we can use the same code over here and we can render all the applies.map we can say reply replies response I think yeah and now we can render the whole thing here let's create a fragment and do this instead of fragment let's create a division with key of reply dot ID and paste everything we have copied from that tweet so this is our Circle this is a whole tweet okay so we can specify the Tweet ID here we can remove this extra division this is a tweet tote so here we have our reply so instead of tweet what we will do we will cut everything and we will paste reply dot profile dot full name reply dot profile dot username import this thing we can say reply tote when this is created so we don't have this filter so we can remove this thing as well what I would suggest you currently we are saving all the replies in a new reply table but you can save the whole thing in the tweetable as well you just need to create it a new column in the Tweet table so if you can go to schema you can create a new column which is is reply and you can say this is a Boolean so you just need a Boolean field which will say if this tweet is a reply then if it is a reply don't show on the home timeline it show on the Tweet page otherwise if it is a reply then it's good so we can do that that's totally up to you how you want to save this if you created a new table but that's not necessary at all now this is our tweet text so here we will render our reply dot text now we don't need to click this and we can remove everything from here we can remove this as well and that's how we are rendering all of our replies here so now if you go to here you can see this is a new reply and we are getting this reply over here and we can remove our cursor pointer over thing as well that's totally awesome if you go to home if you click on this you can see this is a reply another reply which is built which belongs to this tweet if you go here if you go to this this doesn't have any reply submit a reply hit reply and here you can see we have our reply and it is being rendered nice and easy go to here this also has doesn't this hasn't any reply this has two replies this tweet has no replies I'm just finding out if it is looking cool or not let's submit another reply another reply this is so cool it's good so let's hit reply and here you can see we are rendering replies here as well okay and it is from Club of quarters let's submit a reply from another account I will go to my new account which is new page I will go to localhost I will go here I will see two tweets I will apply I am replying to another from another account like this if you hit reply you can see YT bro box this is our current username and we are reply and here you can also see okay hit note here here you can see we are getting everything nice and easy so that's all that's all for this video we have built a lot of features we have built a lot of things we can also like this tweet and this is stop everything is looking good to me yeah this is now one this has now 2 likes so we have learned how to fetch the tables using drizzle orm we have learned how to reply to a tweet how to show the tweets how to do everything now if you want to learn more check out my course on cluboforders.com check out some more advanced courses where you can learn how to handle all the more complex stuff as well but yeah if you want to learn for free I also have some tutorials on my channel where you can learn everything for free but that's all for now and this is our Twitter clone and that's all we are creating okay if you want some more features you can Implement basically this is a simple approach where you can do all this stuff this is a similar approach so we will end our Twitter series here and I will see you in some another tutorial or seeing some another series thank you very much

Channel: freeCodeCamp.org

Views: 98,062

Keywords:

Id: QdxUZhLHZiA

Length: 375min 9sec (22509 seconds)

Published: Thu Jul 20 2023