Building a Twitter Clone: A Step-by-Step Guide

When building a Twitter clone, it's essential to create a robust and efficient system that can handle user interactions and data management. In this article, we'll explore the key features of our Twitter clone, from fetching tables using Drizzle ORM to rendering replies.

Firstly, let's talk about how we're storing our tweets in the database. We've created a new table called `tweets` with columns for the tweet text, username, profile name, and reply status. This allows us to easily fetch and display tweets on our home page.

To create a new tweet, we simply click the "New Tweet" button and fill out the form fields. Once we hit enter, our tweet is saved to the database and displayed on our home page. We've also implemented a feature that shows whether or not a tweet has any replies – this is useful for users who want to see if there are any responses to their tweets.

One of the most significant features of our Twitter clone is the ability to reply to tweets. When we click the "Reply" button on a tweet, it creates a new tweet with the user's response and assigns it as a reply to the original tweet. We've also implemented a feature that shows whether or not a tweet has any replies – this is useful for users who want to see if there are any responses to their tweets.

To render our replies, we use a map function that iterates over the replies array and displays each one on the page. We've also created a new table called `replies` to store replies specifically. This allows us to easily fetch and display replies on our tweet page.

We've also implemented a feature that shows whether or not a tweet has any replies – this is useful for users who want to see if there are any responses to their tweets. When we click the "Reply" button, it creates a new reply with the user's response and assigns it as a reply to the original tweet.

To render our replies, we use a map function that iterates over the replies array and displays each one on the page. We've also created a new table called `replies` to store replies specifically. This allows us to easily fetch and display replies on our tweet page.

Here's an example of how we're rendering our replies:

```javascript

// Render replies

const replies = getReplies(tweet.id);

const replyTemplate = `

`;

// Render all replies

allReplies.forEach(reply => {

const replyElement = document.createElement('div');

replyElement.innerHTML = replyTemplate;

replyElement.querySelector('.reply').textContent = reply.username + ' - ' + reply.text;

// Append reply element to parent element

tweetContainer.appendChild(replyElement);

});

```

In this example, we're using a map function to iterate over the replies array and render each one on the page. We've also created a template string that displays the username and text of each reply.

If you want to learn more about building a Twitter clone or how to handle complex features like user authentication and authorization, be sure to check out our courses on Club of.com or watch our tutorials on YouTube. With this article, you now have the knowledge and skills to build your own Twitter clone from scratch!

"WEBVTTKind: captionsLanguage: enlearn 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 nextjs 13 Tailwind CSS typescript and superbase key elements covered include designing the layout with Tailwind CSS managing the back end with superbase 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 pronal Sony is a fullstack developer and he teaches this course let's start learning welcome to fullish nous Twitter clone in this course we are going to build a fullish Twitter application it is a web application and the te St we are going to use is next year 13.4 version with latest server actions and server components we are going to use superas for authentication and for our POS SEC database we are going to use something called dzel orm for our database orm to make or 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. Shar cn. C you will find 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 typ script that is obvious part because typ script 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 watch all the tutorials on my YouTube channel you can watch the whole series and it will teach you a lot of concepts of next year 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 going to look after we have build it so if you have watched the the application and if you are excited to follow along follow this course and learn next year's 13.4 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 uh git terminal okay so you can install all the things you can install Visual 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 over application 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 Telvin CSS a lot and it will increase our productivity at least by 10x so that's why I love using telin CSS and that's why we are going to use telin CSS in this FTE 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 orm 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 at 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 sometime 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 so create next app at the 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 clone now it will ask us a few things you would you like to use typescript yes yes T 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 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 Al ultimate and I have made a ultimate blog application Udi 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 our code editor where we will write some code so code space do and hint 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 thing which will help us to make our life easier so now as you can see we are using using next font and here we are using inter 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 da because if you see in the package.json here you can see to run the da environment you just have to run pnpm Rand y Rand or npm Rand simp so as you can see we are using F 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 tape here and I will go to Local Host 3000 and you will be able to see how it looks so this is our basic nextjs application running as you can see now as I said we will use superp base for everything in in this project because why we are using superas 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 uh for our Twitter post so that it will be very easy for us to like use super base and it will handle all the complex stuff for us so we don't have to worry about anything so as you can see build and we can scale to Millions this video is not sponsored by super base 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 stch for building full web application and I love using super best so now as you can see it is totally free by the way you can uh sign up for a free account and now you can click on new project and I will say ultimate Twitter CL 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 featur super base offers so we will see all the features so you can see we have database we have storage we have age 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 AG functions it is just like serverless functions or it it is just like using versell API routes but it is much more capable of doing anything and it uses Doo as a framework of nodejs and we also have realtime thing where we can face realtime data we can get real time updates so let's assume you have some leaderboard inside your fully stake application then you can use superas realtime 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 going to need inside our project so it will take some time to provision the pro 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 our Twitter and we are going to copy this 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 trending 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 contain 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 excal 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 over 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 tabls 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 our database with our code so let's assume we are going to use an orm like Prisma to handle over 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 super base and plain stuff here with superas directly curing our database and directly mutating our database from our front end by using the super Bas 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 super base 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 G so we will we are going to implement all of these thing okay so post rute 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 time line which is infinite scrolling feature okay so this is the main feature where we can f 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 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 nextjs and super base and tvins so first let's jump right into building the UI part cool as you can see this is our basic next year 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 homepage 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 Redux native snippers this is a very useful extension which will give you a lot of Auto completion if you type rafc then you can see all the auto completion which it will give you but we need rafc even so this is so this is our homepage or Twitter homepage 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 we I if I refresh this it will ask us for I will sign up for a demo account for now yeah so this is the club of holders 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 excal R and here we will Design our whole UI we will understand it so this is our homepage as you can see this is our homepage 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'm 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 fixed width and now here we can see this is the sidebar so first we will make a division and we will give it fixed with after that we will make three divisions inside it sidebar this is the main layout which you can see this is the main timeline section and this is our trending 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 explod notifications all these things so Dash D Dash 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 D Dash and here we have our trending section what's happening so this is our trending section and this is who to follow section just like that so this is the whole UI 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 a scrollable and we will do all these things very easily by using telin CSS and you will see how much easy 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. hub.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 with thing so we can say class name is W full Edge full with 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 telin intellisense so you can install this so now we have with full Edge full and it is item Center and we will now make make a fixed width division inside it so class name maximum width is screen 1224 pixel okay this is good we can say with full Ed full 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 by default relative I think yeah so if you want to make a children absolute inside this division or inside this division then you can to give it relative so the absolute division will position itself absolutely according to its nearest parent that's how it work 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 Bar D into three so this is our sidebar this is our home timeline and this is our 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 side bar so it is class name now if you give it absolute with it will position itself according to this division but if you make it fixed withd 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 all windows height so we 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 I think and 72 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 H 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 throw them and we can Define over side bar 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 bird house bird house you can search 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 Twitter house I icon so here we can say bi home Circle and we will import this thing first so import from react icons /bi 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 /h now we have notifications notifications icon is kind of Bell so we can search Bell which looks similar to this Bell 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 envelope yeah so whichever looks similar yeah this is good import from react ion / hi2 okay so import it from BS now we have bookmarks and profile we will skip the 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 bi 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 H over this you can see this has the title and icon and we just need to render it over here so we can say navigation items. map and this is our item and now we can say render a division which has a key of item do 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 HF is also SL item do title do tool overc case like this and here we can give it some classes I will give it bz white of 50 rounded of 3 Excel padding I will give it padding of four and that's good here we will render two divisions first for the icon so here we can say item do icon just like it and here we can render another Division and inside this we can render item do title we can make it Flex we can give it item Center justify Center we can give space of X of two and now save this and let's have a look at the whole homepage 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 HF is Slash and this is just a Twitter icon so we can say PS Twitter now we have a look yeah it is looking good we can commment these two things for for now yeah also what we need to do is we can give it some class names for now m y of margin of y y means on the vertical axis so we can give it four M4 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 not so we can say when you H 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 justif 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 with 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 not here I think we can directly say so it will this class will also work on this item do icon we can say text is Xcel so it will make it a little bit bigger and I think it will 3 XEL 2 XL 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 what we can do we can say space of Y of 4 and and margin of Y of 4 yeah now it's good we should also give it P2 so it looks similar and also text of 2 XEL 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 excel yeah it it is exactly similar to the Twitter 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 for now we can es skipe that part for now we are just designing the home UI now at the bottom we have Club of orders here at the bottom so what we will do also we have this tweet button also if you see the Ping of X is a little bit bigger and here we don't have that ping so py is 2 and PX is 4 yeah it is good now I think it is more PX of six 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 do title is equal to Twitter don't render this when the item do title is not equal to 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 s Twitter now we have a one thing more here we have a tweet button so what we can see we have a button here which is tweet we'll design this button now we can say w is full rounded is 3XL BG is 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 tmin config so this is where we will modify so we'll 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 tellin config theme configuration now you can Define the colors like that so theme inside colors and you can Define the colors so theme 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 twiin 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 do documentation and look for the solution so now we have our BG primary color now we need to give it some padding so PX 6 py4 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 not 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 bigger so P4 would work I think because we have given it 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 give it margin for to decrease some width of the button 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 messages page so instead of this hi envelope we need a outline so envelope we need a 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 WRA 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 no it is not W full 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 xcal room so here we have a division so what I'm 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 B division justify between so it will stret those division to 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 M4 it is not at the bottom yeah so we will see what is happening here we will remove this myy 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 y4 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 as 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 you 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 bs3 dots 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 AAR we can make it busy slate 400 and what we can do here yeah it's good we can give it W8 h8 height and width this is already I think flex no this is not Flex so we will make it flex and item Center Space X of two 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 coders and here we have Club of coders my username and now he can say this whole thing and now we will see how it looks yeah so it is looking a little bit odd because we have given this BG primary but we don't need BG primary we need B transparent and the because of the text to XEL 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 EXs here we can give it text EXs and this is small and we can make it text to the left yeah 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 BG White and the opacity 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 tap this whole thing into a 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 two now you can see this is good but here you can see the text is bigger I think so we can give it a small yeah so now we have designed the similar looking Twitter sidebar we can make this thing this outar also bigger 12 watt yeah 10 would work so you can see that the phone 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 over 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 side barar 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 R fce 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 side bar in the main here left side bar just like it save this thing and now we have a separate component for our left side bar 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 side bar 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 lower M appm 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 contrl Z 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 save 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 we can see on the Twitter and let's give it text 3 XL font bold save this and we will see how it looks yeah now we need to also give it border left border right border left and right not 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 1 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 screen so now you can see it is taking the whole screen for Twitter and we have to give some padding to it and 3 XL is also a bit too much we can give it some 2 XL and let's give some ping 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 two of left yeah so we have to give it some padding to it so let's give it PX of 4 how about six now now it is good you can see this is our bottom whole thing and this a sidebar and this is looking good and the home is small small a bit so let's go into the page here we can say this is Excel this is good and now we will Design This compos box so for now here we can come and here can we 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 hit here it will be two borders 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 332 let's try this for now we will see what it and now it has a AAR which is the user profile and here it is the input which is what's happening the placeholder and now here we can write the hell lot of things so LM 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 is the character limit of Twitter Twitter character limit 2 80 characters okay so so it has two 80 character limit okay so we can now give it relative also and now inside it inside this division we have this AAR and AAR so we can make two division inside it first one is for AAR which is a W10 h10 height and width is 10 nbg is slate 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 to implement this this is pole 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 place holder is what's happening this has border of bottom 0.5 pixel and the Border 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 division 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 this has all the things like image icon GIF icon Emoji Pier 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 a similar button to this thing so we can copy this whole button for now the classes round 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 not 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 none save this now you can see this is cool if we remove this yeah this border is the color border is not working so we have to I think give 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 pedding bottom of four or the whole pedding is four we can remove this division rounded is full we can remove this margin 4 this ping is four is also a bit weird we can give PX 4 py of 2 W of full let's give it Max withd uh 400 pixel would work I think okay it is bit much 40 pixel and the text is bold font is bold basically text is 2 XL not 2 XL LG would work yeah it is similar to the Twitter one we have over 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 AIS instead of not taking the advantage of full height and now we can also give it some padding to Y forward 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 margin to 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 we 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 or4 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 this is a 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 placeholder is 2 XEL and placeholder color is also a bit dark so placeholder text Gray 800 how 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 P6 but we have given it a fixed height that's why it is not working so what if we remove the height yeah 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 top and bottom border and then it has some pedding outar 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 array. from the length of let's give it length of five for now do 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 AAR this division we have the outar 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 outar 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 space X of four and inside it we have two divisions first division here AAR only so here we can make another division class name W10 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 uh 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+ space on my make keyboard control+ space and if I hit enter this is AIT abbrevation and it will work like that so it is a name so we can say Club of coders this is my username Club of coders 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 it Flex item Center space of X of two of one one will work so this is our first one the second one is text so we can give it LM of let's assume 100 this is a bit much the Tweet can be this much longer I think yeah so this is what to be 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 to Excel or Excel would work this is media and now here we have all these things comment read twet like stats and this 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 two we can give it w full and that's how we have designed the single tweet and it should be rendering tweet for us and now let's go and now you can see all the tweets are being rendered over here cool but we have to tweak a few things for now we have to give it the ping of Y AIS so here we are giving ping X we also need to give pedding of Y so now it is good you can see this our 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 bold 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 give 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 T will contain a 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 blur back drop blur basically B droper 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 back droper 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 give 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 sticky 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 X is 4 which is good but space y of 4 is not needed two 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 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 our comment icon and let's import this this is our retweet search yeah we have a retweet icon import this from react icon SL aai this is over like which is like this will work this is the share icon no this is the states icon 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 uh instead of this what about justify around what about evenly you can try whichever looks good and I would go for justify start and Space X of 8 more space X of 20 24 20 would work now I need to give it extra of my2 it will not work let's give everyone my2 let's give my1 and it is also my1 yeah it is good My3 how about My3 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 so what we can do we can give it the top instead of full my we can give it also M top to yeah it is actually good and whenever we hover these icons there should be a nice looking rounded full let's give it this this parent round it full and the B is black 10 20 let's go for 24 now and only when we have over this otherwise don't make it look so let's try this also make it like cursor is pointer so it is not looking how about 50 yeah we need to give some ping to it now if we here 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 que the P mt2 will work cool that'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 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 isct to the base and this is the gray color 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 icons 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 bs3 dots we need to give this classes to this space of X don't need it here and it is good we can make it full width we can give it full width okay so not 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 padding we are giving it so let's see P4 so we need to give some more ping to it how about p8 no p y4 and PX six 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 width but you can Define some Maximum withd let's go for 512 Excel or a bit more Xcel a bit more to XEL 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 Twitter convention which is 600 pixel and we can make it is smaller 80 now it is good cool so it is looking perfect now now we need to design the right side bar so here as you can see this 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 rafc paste here so these all are server components because if you want to use client's components you have to put use client here like this because we are using next year's 13 version 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 our right section so this is also a fixed with so fixed now we need to give it something it is also Flex Flex column and space of Y of let's give it four 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 give 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 is pading of let's give it four and now we will find search icon here we'll find a search icon so we can find a search icon this BS search icon 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 AIS so we will create another division inside we have the 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 a 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 zero and we will make it height of full we will 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'm 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 0o and right Zer 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 zero and right zero 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 height we are saying that everything inside it we want to Center so we will Define icon and we want to center it that's why we are giving it flex and item Center and we will also give just Divine 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 none save this and let's see how it is looking so you can see this is our search so this is right Zer we instead want left zero so now you can see it is centered but we also need to give some extra extra pedding to x-axis so we can say the py is four good but we want PX to be 6 or let's go for8 now it's good and what we can do instead of division we can make it label and we can give it HTML for 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 fixed width so that's what we have to do here we can give it a fixed width to this section instead of right zero we can give it fixed with okay so and Edge 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 uto this has a width of 275 pixel that's okay but if we go for right zero 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 see this is relative and if you make it border of let's say four and now you can see this is to the left here but let's also so 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 side bar also the absolute and left zero cool and now give it this main component with full where is this maximum width let's give it with full it will take the full width instead of it will also take this withd okay so we need to make sure that it doesn't take more than this centered with 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 W is W is 275 pixel left side bar 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 1,24 pixel 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 the viewport it's good then what we need to do we need to give according to the withd not with full but we can give it like this is taking let's assume this is 100% then this is taking 30% this is taking 30% and the remaining is this 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 side bar is the width of 30% and the remaining section has the width of 30% yeah it's good but still it's not looking perfect we have to decrease some of the leftt high PX of 6 we don't need the px6 here PX of 4 would work and let's go for 20% yeah it's good so this is 20% this is also 20% 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 a too much of pedding here we are giving so I don't think we should give it pedding here we don't want to give the pedding 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% 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 sticky 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 side bar not the the the main component is not sticky the left side bar is 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 Al so 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 over tmin 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 Clos 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 grayish 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 9 90 yeah it is good it is good we will proceed with it now as you can see this is the search icon is looking a little bit weird so to fix this we can give it some pedding so this is our division which is relative so what we can do we can give it some pedding note here this is absolute division we can give it some pedding P 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 four by default let's make it 14 and also instead of top zero I would say yeah it's good but I will give some margin to top P4 yeah and now you can make it four so it will be sticky yeah you can see this is now good looking good okay so now it works four is a bit too much so I would go for to 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 as a blue border so we will also make this effect so to do that when it is active or 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 refresh this first no the border is not looking so border is primary and the border is let's give it border okay so we are giving border none that's why it is not working yeah 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'm say 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 H when this is Group H not H 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 this there is something I think Pier Pi first perer focus and then text of primary it may work okay some something is beer class Del before and after there is some class which I think we can make it work you can see group over thing works but we want when the item which is nearby is focused to do something okay so here it is so we will Define a peer class here we will say this is our pier and when it is focused it is visible you can say when it is in inval it 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 perer class and now we are using perer invalid visible won't work only previous sibling can Mark SP okay so we have to to we have to make it like this only previous siblings which means it won't work it will work like now this our this is our input and this is our and you can see okay so this is our input and and this is a ptag which is when it is invalid make it visible here it is saying that we have a spin 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 class name Pier Focus then make it visible otherwise it is invisible hello word 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 it text Gray and we are saying that text is primary so it will not work because telin CSS will mark this class as a priority so this will but not 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 Tailwind 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 watch sing part okay so here is our trending 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 the things here we can define a division inside division we have array do from another fake array we will create let's say 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 is item it is by default undefined because it's a fake ER so we can get the index for now and we can say here 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 900 and this is a bold text font is bold text is 2 XEL m y is 4 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 pading as well yeah also we can give it margin m y of4 cool and now now we can design a this section this section okay so this is a hashtag and Below we have number of T so we have two divisions div into two hit enter and here we can say trending item this instead of this we can say h trending I + 1 and here are the number of tweets this hashtag contains so how is this visible okay 35.8k so let's go with this 35.8k this has the color of grayish and this is bold class name font bold text large this has text is small text of gray save this and let's see how it is looking okay so it is too much gray it is also not gray I think it is neutral and we will make it 400 yeah it's good 400 will do the work and if we H over everything there is some background so we can also do that class name H BG white of 10 save this and now if you hold over this this is good but the pedding we don't want to give to the whole container we only want to give it to this and we can give the pedding 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 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 2 XL is bit much myy can be 2 P4 can be 2 PX PX can be 4 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 is duration now it is smooth a bit okay so now we have designed this what's happening section now let's Design This who to follow section another division here another fake array 4 map keys 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 go 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 scrollable now you can see this is sticky and the gone they are gone or I think there is another heck let's make this s sticky top zero it is not working because the parent container 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 hole with the soiler SK give it 25% now we can adjust the right m 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 scrollable 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 AAR this is a name this is a username and this is a follow and 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 AAR class name W10 S10 BG let's give it neutral rounded is full and that's all we need here and this is a class name Flex Flex column and we have space y of two this has two divisions first one is name which is other user and this is the username of user 1 2 3 4 okay and now this is a follow unfollow button so we will Design this button also so this is a basically a button so we can rap this button inside a button component or a button element class name rounded is full PX 6 py is 2 BG of white text is neutral 950 save this thing and let's see how it looks yeah it is much similar to the Twitter 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 text Gray and text is small it's better yeah so I think it is good but we need the follow this button to at the end so what we can do margin of left Auto this is a heck sometime this works and let's give it with full no it only works when margin of right how about 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 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 hack again what is that heck R this whole R these divisions to a another Division and where were we this is this Bo 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 X2 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 all these things are working so as you can see here I am in the folder and the app is running this is the 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'm 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 all the things so user can have multiple tweets this means 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 to 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 hashtag 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 has user ID and tweet 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 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 reply to a tweet we will save some text with the Tweet ID because why we are saving the Tweet ID in the reply R 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 give me 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 ID 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 ID and tweet ID both are optional both are optional so here this is a dbml language basically so this is the whole syntax of dbml language you can see how we are defining many 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 V is storing the username when this tweet is created who is posted this tweet and the likes a bookmarks and all the things and here you can see not null if this is the username is like this if the username is we want to be not null then we can justify it like that not 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. do/ 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 chair gbt to build a query for us because I don't want to manually create all the data inside our database so what I'm am saying is if we go to super base if I sign in now I can see this is Ultimate Twitter clone and here I have this is 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 this stuff manually and I don't want we want over productivity to be highest so for that we have to Leverage The CH GT you can see all the things are given here this is for storage this is for Edge functions super base is awesome I think and we will use this now so let's visit jgpt and build the cury so I will now open my another Chrome so now now I will open my another Chrome tab here so this is CH gbt and I will tell it that Q me the cury and I have already designed the DB so you can follow me just so I'm using zpt 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 dbml for the context like this and we will give it and now we it will you can see this is this has given us all the tables like this this is how much easier to use tgbt for us to write SQL now you can see idid U ID username email this is good and I think it is nice all the primary Keys forign 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 uh SQL editor create table you can see this is how it works ID B generated by default as identity primary key seted time St with time zone default UTC not null we will copy something from it and we will modify according to 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 users table and it will delete a user from our database when this is deleted from superas o table this is for the roow level policies this is handle new user 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 usern name 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 U ID primary key yeah so we need username text unique we can use text inside postgress whereare 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 author users table also I think if we use Google sign in then it is not required also this is not required const username length this is good we just need one thing here username and it it should be unique and that's all we need 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 usern name now we don't need AAR so it will values new. ID new. row user metadata is 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 UU ID cool updated it time stamp 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 Ro level 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 we will see if anything wrong with the security part and we will improve security for our web application okay so trigger on o user created it will be triggered each row execute processor public do yeah now we have a tweet uu ID it is a primary key so for that yeah it is also primary key reference so I think it's good p is ID Vare instead of Vare I think we can directly use string or not string text author ID is text created a timestamp now we need to do one thing more here this thing default not n this whole thing copy this for the time stamp part we will do this yeah this is hasht okay tweet ID uu ID 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 so this is for reference tweet hashtag so this is another table which means a tweet can have multiple hashtag and a hashtag can have multiple tweets so it 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 and 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 tweet we can say tweets this is better uh not here can where is tweet tweet hashtag is good tweets hashtags this is better programming practice to name your table like that tweets instead of tweet this is hashtag table this is tweet hashtags yeah this is fine now replies this is good here is tweets so be careful while 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 course but it will be fine if you used or not used here user ID good good good 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 instead of 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 constant bookmark is unique unique user ident twet ID 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 bookmark post we will not allow a user to like or bookmark multiple times or in the other words to save multiple rows inside our 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 to our database every time a new user is created this is our tweets table this is our hashtag tables this is a table which will Define a relationship between TS and hashtags table so this is tweets and this is hashtags like this cool now we have replies profiles tweets replies cool now we have likes this is also we are uh yeah inad of twiets we have tweets okay so this is good that's all the table we need and now we can run this query and and over all functions or tables will be created so click on run and it will be failed to run okay so let's see what is the problem here so it is saying that forign key constant replies user ID forign key cannot be implemented so in the replies so where it is here so ID 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 not null so if it can't be null then we have to Define or we have to say not null otherwise we can just skip null part yeah so now here we can say not null like this this is also not null a tweet must contain text here also this should be not null okay tweet hashtag tweet ID hashtag this is good not null not null good here also we will say not null here user ID can't be null but tweet ID or reply ID 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 time stamps we will use this whole thing here again yeah let's run it again and we will see what is happening so we will ask this error to chbt so that it will fix this for us now it is updated over so I will give it my new this whole query I'm saying that find any problem with this okay so it will say your modify query looks mostly correct but there is couple of issue that I sported in the reply table the forign key constant tweet ID reference to tweet table instead of tweet table 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 it to foreign key tweet ID so it is a foreign key okay so we are saying it is a foreign key so let's copy this thing if we can see the difference between the thing chg given us okay so this is uu ID cool user tweet ID now let's remove this and we will run it again repes user ID forign cannot be implemented so I think it is mostly because of this line because yeah uu ID okay user ID not null okay now how about it likes okay okay now it is working so what we have did is likes user ID forign key so so this is likes these both are uu ID we are saying that these are text that's why it is showing us the problem author ID cool a tweet a profile or we can say a tweet can have multiple users a tweet no a tweet can't have multiple a user can have or we can say a profile can have multiple tweets fix the TB 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 Tate and user now we have a forign key author ID and profile ID yeah but we don't need author and profile two things we can 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 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 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 idid everything looking good and now we should also have a trigger if 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 web hooks functions and we will utilize this according to our need you just saw how we have used CH GPT to create SQL cury for us and to fix the error and all these things okay and if you want this code let me just create a not here this one I will copy this whole thing and I will create a GitHub Guist so this is DB design dosq 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 read me file database I will save this for now I have haven't committed or post to GitHub let's let me post it 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 prel 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 subab base 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 section rafc I will press the whole thing here and this save this and I will import this here good to go now if you visit Local Host 3,000 you can see this is over 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. shed cn.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 telin 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 nextjs product with this UI Library you can directly use this command but we have already install all the things so we have to manually install this Library so first of all we will install this uh npm 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 telin 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 twiin classes so instead of using JavaScript so instead of doing C Braes and these brackets and all these things you can directly use clsx and you can Define logical class names for your telin CSS here we have class variance Authority it is for defining variants for your components like if you have a button which is primary button danger button or info button Etc and tnd animate is just a plugin now we will see how to proceed we have already defined this path so now if you open TS config.js 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 over Telvin CSS here yeah so we will copy everything inside the tnd config so where it is here we will use this so crl + a cr+ v so you can see container Center these all the things are defined for us already and these all 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 / Global CSS control+ a control+ V and these all the colors are being used here you can see variable primary forground 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'm saying is if you control press Z here a few times this is the color this is the Twitter color we have used so copy this color control+ shift plus Z now if 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 # 0000 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 and all the things now we have to do one thing more we have to Define this helper this will combine the clsx and the telin merge both these 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 dots 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 dialogue or we can say a model so that we can utilize our authentication for that so if you have previously used Twitter so if you are not logged in then it won't allow us to view anything and it ask us to first authenticate ourselves so that's how we are going to make this application flow first the user have to authenticate themselves then they can proceed and now as we can see everything is good but for now let's control+ close the terminal and restart everything so it will work pnpm rund there now visit your application refresh this you can see the T all the classes are gone why is that let's see maybe because if you delete the next folder here and there that's the problem restart the server refresh the page sometime this heck 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 a directory and find all the TS and TSX files find all the telin 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 over 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 font familyes font sense okay so I don't want it I want okay so 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 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 side bar where is our button here is our button okay so we are not giving okay so the primary color is not Define there's the problem so here instead of doing this here colors ring foreground primary yeah it should work so let's see the problem BG 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 will 29 155 240 29 155 to 45 to 40 and that's good this is the hex and this is the hsl so I want want 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 a less I don't like this thing this background also is not so 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 this variable into a hsl format 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 is 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 here into the colors input color all these things we have to modify border input rink okay so what we can do we can ask chair jbt to give us all the colors for Twitter because the chair jbt 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 jgpt 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 note 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 the 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 Twitter blue is Buton background and borders or accent colors okay the only color which needs to be Twitter blue is accent color okay okay so we have changed this thing body apply BG background text foreground text is foreground 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 so now you can see the border is good if you type the color is good yeah so you can also use the chair JP 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 dialogue 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 dialogue and I I think it should add all the things related to dialog so now we can copy and paste this command here and hit enter and it should add a dialogue button where would you like to install the components so in the/ do/ SRC SL components SL 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 dialogue 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 variance 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 super base Authentication next 13 so this is our authentication first we have to install this libraries so we will 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 superbase o helpers next year we also have to install this o react o helper so we can use all the hooks that are provided next just 13 is estable however the new app directory and server components are in beta check out our experimental guide yeah so we are using this app directly 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 environment file do EnV here do EnV not for now first we will check if we are using do here no so we have to ignore EnV file here first EnV now we can define a EnV do loal just like it so that it doesn't get tracked by our GitHub these are not secret next public means this keys can be public what can't be public are super Bas secret keys so we will see what are they in the future so yeah now it is good so your superbase URL and your superbase NN key we will find this key by going to superbase project so superb.com sign in in the ultimate loan 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 roow 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 have my NN key now we have my super base 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 middle Weare that will be called 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 super bation 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 base so we will also generate all the types so for that we have to use these things super base start first of all we will do super base in it now you can see the super base inside our application this is csql if you want to seed any data for seeding your data you can also use share GPT to write some queries for you you can use chare GPT always use CH GPT I would say to increase your productivity so now we will say super base I think it will startart the local instant which we don't need for now we will just use this thing if it works or not let's see it will generate over types in the library and database type dots okay you can use CLI to generate types but the point is I'm not using so first of all we have to install the super base here we still haven't installed the super base if we go to package.json we have installed the O helpers but we haven't installed the superbas Cs Library so pnpm install superbase CS this is how we create a client and now we can face the data so where should we generate the types so we I think we can generate the types in super base / database. types slts so it is asking us to install or to run the doer and then we have to run the super base local instance to 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 doer first install the doer for your machine so if you visit this you can download for your machine install this and make sure the toen is running fine and now I will open the toer so that we can run superas inside our local machine now if you visit the superas dashboard we are using the remote version but for development we want a local version 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 uh doer in that's why I want the remote support so super base generate types remote database okay so first login then we can use this command to generate the types cool so let's login npx super base login so we have to generate the excess token here so I will generate a excess 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 this super base we don't need it okay what I'm saying is first I will uh 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 base 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 Bas dashboard this is my ID I will copy this and I will copy here in the public yeah I will hit enter types subas to Let's create a file or can say a folder types now it should work 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 inms 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 it this can be null okay I'm not sure about that maybe we have did some mistake this is also R ID reply ID can be null tweet 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 another query then it doesn't override it again that's why the username can be null but we don't want the username to be null so we'll modify our database so in the profiles the username can't be null so I will say allow nullable so I will not allow this to be nullable and is unique yeah save this thing now we have dated our username table this is the must 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 dos 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 component in the client's component we can always use the superbas 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 subase client which comes from here and then we can p the data like this and these all data will be faced on the server so you can follow this repo for the whole example okay so this is a middle bear. TS which we need to create in the root of offer directory so middle v. TS go up copy this thing database to types what we can do instead of here we can paste this thing here or what we can inside the Library super base. types do 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 superas 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 super base provider which will provide the whole application uh and it will work like a context so superas provider. TSX copy everything and this is a client that's why we are using using uh instead of superbase do types yeah if you call it database. types it will be fine but yeah if we can call it superbase client database we are defining the types this is a context superbas provider we will provide the whole application or we can say we will rap over 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 use superbas superbas must be inside superbas provider and now we can use this use superas inside our application so we don't have to Define again and again and it will be only one instance of superas inside our whole application save this thing now we have to rape our whole application inside the super base provider here like this in the layout of TSX like this so inside the body we will say this is superas provider import this from superas provider save this thing and it will work now any of our client components base hook use super base hook to ensure they are using the same instance of superbase client 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 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 cat 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 log in now if we try to log this console do superbase do all the things Au do user get user it will give us let's AIT for it let's make this function as sync and we will log in the user here we'll see if the user is logged in or not save this thing and now you can see the data is user. data. user so instead of doing this we can see the data and the error and we can log both things now we have the user is null and error is missing sub claim or which means we are not authorized the status is 41 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 dos so to create the Google authentication you have to follow this steps you have to get the O 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 Ena for now okay so I think we can use the email if you want any other provider you can see their do DOS their dogs 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 they 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 authentic 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 dialogue we can create it here so we can see if the error. status is equal to 4 one 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. 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 dialogue here which we have created in the components so remember to import this from ui/ dialog so in the dialogue we have dialogue 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 why is that 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 local 3,000 you can see this is not visible now so we can say if the error do status 401 we have to open this so is open default open we can say if the error do 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 due 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 o model we can say not a folder it is a file o model. TSX here what we can do R fce this is a client component and to use a client component we can say use client why we can't use this as a server components because at any point we have to T something we have to send some data to our 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 to build a to 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 dialogue 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 false import the state here and we can say open is open and on open changes set is 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 directly 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 super base 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 dialogue from components copy the state import everything dialog and dialog content here import the dialogue from components from components from components save this thing so now we have a dialogue and we are entering the chck 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 we can say subscription dot not like that we can say Super base. O do get session dot then result if if result do error do status is equal to 401 then what we need to do is we need to open the model otherwise everything is good to go otherwise we don't need to do anything so just save this thing and that's all we don't need this o model anymore we have created all the logic we need for our authentication inside our superv provider so now this is good to go we can remove this components because there 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 log the result okay where is our local host 3,000 now you can see we got two things we got session 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. data do 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 our dialogue dialog overlay background at BG background we can change all the things here if you want you can see dialog trigger dialog content header footer title description cool so if you refresh 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 all look like Twitter so BG PL give some ping to it cool now this is a form and we need a 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 du or S3 please sign into continue give some classes to it text LG myy 4 save this and let's see how it looks no it's look good myy 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 we can make it gray somewhat 200 that's good oh we can also give it margin Y 2 yeah and what I need is M bright Auto the color is not looking good to me this is Twitter color but this is not looking good to me so I will say BG BG white and text is black I want it to be end so for that what we can do here is I can drap 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 butle will at the end text is text should be white white when text should be white and when the Border should also be white okay so what you need to do is to make this application beautyful you have to give some time here you have to select all the colors uh without using sh GPT because we always want to make sure that our app looks good inside telin CSS telin config inside the styles. CSS where it is inside the globals CSS here you should carefully Define all the colors and that's how it will work nicely otherwise you can see it is working OD 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 a default color in the future I can go for different color but for now I'm 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 h properties everything seems perfect instead of text gr I would go for 900 okay so and for our homepage what we can do here so for our homepage we can give it text white here so it will work good now our text is white instead of this tweet wherever we use the primary DH 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 tweet twitter color we can say Twitter and we can use the Twitter color hex Twitter color X 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 own submit it receives a 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 we can use State again use State snippet email first of all it is empty set email to whenever this state is change so on change ites event and set email event. target. 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 here 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 superbase function which is superbase do. 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. RM 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 is 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 we pass the username in the future we will also check if the username is exist or not first check if the username exist or not okay so we also need to show some TOS to users for that we will install a new library called sonar it's a great Library you can visit the sonar npm you can see this Library render a toast this is a beautiful toast and this is the same toast I'm using for my website Club of coders if you search Club of coders so I'm using this for my website and I can recommend it it's a great and awesome library to render the TOs 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 base 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 access like this error like this username already exist please use another one we have to check this so for checking we can find we can say superas await superas Dot from profiles Dot and make this function as a Asing 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 super base docs so we don't miss anything so in the fasing 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 accept two things column is username which is also a string and the value is which we have used usern name dot let's stream it if the user has typed any wi space we can find it it provides us data and error if data exist and let's console.log the data first of all and we can say username already exist 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 Avid this also we can Avid 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 our application refresh everything so we are making sure that everything is good extra attributes from server CJ shortcut listen okay I will will use my email which is Club ofers gmail.com Club of.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 states we have to use here uh button or we can say yeah we can say is 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 cod.com at 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 exist please use another so in the data you can see we have selected and we got nothing we got nothing so the array is empty so if we can see the data do length is equal to zero or we can say is greater than zero then show this otherwise don't data and end data do length is greater than zero then show this and return from there otherwise login the user with email now here we can remove everything let's also give some space to this input class name M2 now you can see it's good Club of orders.com at cmail.com Club of coders 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 we go to our tables and this authentication and this sign in with OTP also should create a trigger to create a username which we have passed as a data so we should see a username inside our profiles let's see yeah so you can see we have a club of coders username inside our profile and now we are signed in inside of 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 user which we have faced now you can remove this we can remove this we have successfully created the 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 US so I should have received a magic link for signing in you can see 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'm 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 laws inside our subase provider here we have created a dialogue 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 functionalities the like functionalities 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 our data and modify it and can Fage it so we don't want that so we will go to the superbase 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 tables have row level you are allowing Anonymous access to your table so we have to enable all to level Securities so to do that go to authentication and 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 cury but we are doing it manually because we don't have many tables and we can do this manually it is easy we we have enabled the roow 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 is string have privilege 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 Ro 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 run there and we will take a demo of 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 nextg features that's why so let's go to Local Host 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 zoom so let me yeah so 150% 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 onto it nothing exist for now the trending part the home to follow part 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 superbas provider so here we are providing everything okay and if we try to tweet something hello word 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 dialogue set is open yeah so we are logged in basically so to check if we are logged in or not console.log we will log the current subab base user so here we will conso l subab base. o. user dog user and that's all let's log 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 get session let's see the get S thing okay this is also returning the promise so what we can do we can look here we'll check the result here we 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 the authentication I think we can use something called server context or server session to see if we are logged in or not so now we will implement the TW functionality if I tweet something here or let's say I copy some paragraphs so this is the R cost extension you can also install this it is pretty handy you can install this it's great you can directly copy low MSM you can also do the confet 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 functional so in the main component this is our home this is our input text and this is our tweet button so to treat composer we will create another component so recently when I have created or when I have started building this street clone next has released a few more features like next has 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 server actions you can see this is how we will create a form and we will declare this as a server code and we can directly you can see save to DV and this is all running on 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 in 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 not we can also do it like this this is nothing bad in naming like this and we can say compos twet and this is a server component okay and what we will do rafc compose tweet okay so we have renamed wrong compose tweet so this is our compos tweet and what we will do we will just use the latest nextest server actions so as you can see we can face the data like that and we are doing that in the superas provider here you can see this is a client component you can see this is a client component okay so we are not fetching any data as for now so we will use this technique to fet our data directly you can see you can directly F the data we can Cas the data using the K 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 git static propes 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 TW it like this or submit to it you can do is submit to it also or save to it in RB whatever you want to name it save submit to it this will take a tweet text tweet and it is a stram simple and it is a used server you think you can see this is a used server but if I think we have to update our next year version because we are I haven't updated anything after after I left building this uh in the like past 2 months so this is the version we are using 13.3 and what is the latest version of next year next sh let's go okay so we I think we have to go to the GitHub so the latest version is 13.4.2 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 not here okay so it is uninstalled we have to do it again because I haven't saved the thing yeah now you can see next sh 13.4.2 so if you are watching this tutorial please update this thing otherwise the server extion may not work I don't know so you can see we have removed the 13.3 version and we are upgraded to next 1.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 compos we now we can use this thing so let's comment it out first so this is our server thing and we can get the data like this we'll 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 over server actions action and the a 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 exess like that inside the component that uses server components and in the separate files Cod I just want to know how how we are getting the data so this is the data and we are doing a item and it is getting the data from cookies but we want to know an 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 let's see 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 use 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 Out book Mark functionality we will use this thing and you can see this we this is saying that use verel KV which is a new feature or we can say the new integration in verel which is a KB or we can say the radi database inside under thehood it is using something called upage This is a serverless data for radi you can have a look at it if you want yeah 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 form data just like it and we will see how it is working so this is our form data and we will console.log this and it will console dolog in our server here not in the client in the browser this will log 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 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 action form data and form data good why it is complaining so import the compost 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 the screen is smaller so here we what we can do here we can use hidden and only be visible when the screen is greater than large screen we can do the same for right side bar here we can see this is hidden by default and only be shown after the screen is larger this is how so now if we refresh this you can see this is hidden so what we can do we can do after Excel so if the screen size is extra large hide both of those thing now it's good but you can see this is also breaking this thing and this is overflowing from the container so which is where so we have to fix some styling in our home so if you go to the main component okay so let's commment this out this is whole thing so let's remove this thing and yeah now it is taking the full width we can also do only after the XEL the width is 50% otherwise the width is full like this so now it is good you can see it is looking good but still when the screen is too small this is over flowing so we need to fix this thing this twet list so for the inside the here so let's give 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 be hidden we want this to be content 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 FL to be hidden we want it to be contained inside this so it is not contained it may because we are giving some fixed width to something okay so this is withd height and 10 this looks good to me but let's wait for some fix here yeah it's still broken so we want to 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 if you comment it out not this image where where is our 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 the 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'm showing you how I'm fixing this problem so you will also get the intuition behind everything how commenting this out border rate 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 second 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 thing later or I believe we can fix this by making it grid sometime that helps last try otherwise if it 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 withd 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 mix with when this is greater than Excel 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 word and we we should be able to see something here form data so for that we need to define something on submit or I think action which is submit tweet and this is taking the form data yeah so this is the text and the form data we don't know what is this but we will see if we TW 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 we try to submit this there is still nothing type is text action form data okay this 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 any is 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 script is not happy so to avoid that you can use as any this is a just temporary fix I hope next sh will fix 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 page which you can read over here you can go to log you can read that this server action is is still in Alpha phas 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 Pur us so we can use this thing but do not use this thing in production because this thing is still not 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 word 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 so put the name attribute over here and the type attribute over here so now it is working you can see Hello word server actions and we are getting all 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 dog 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 tweet then simply return and if this St is exist we can directly insert this into our super base table so we can say Co data and cost error we can say subab Bas import the subab Bas client but here we need our server subas client so for that where we can get our superas server client so inside the app directory layout this our superbase provider let's see if we have any superbase server client so first I think we need to create a server client so using super base with Nexus app router so this is the what we can say this is the blog article which we have followed to build our subab base authentication you can see we have also created a middleware called something this is a create middleware superas client and yeah so this is how we are getting 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 pause 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 superas import the database okay so it is being imported from o helper Nexus create server subab base client this is what we need create server subas clients and import the cookies from here I think we don't need this thing and it will ask us to something okay so create server subas client how about this so I think they have also changed the documentation and this is not exported from o helpers Nexus a lot of things have changed create server action client what are the create browser create middleware create route Handler create server component superas client so this is what we need create server component superas 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 Bas to from so the 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 table hashtags likes profiles tweets so inside the tweets we need to insert a row so tweets do 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 subase do o dot so first we need to get the user so here we will get the user const so await superbas do. get session or get user I think so it will return as the user which has data and error so in the user data we can say this is the user data it is user error if the user error exist return and if the user data exist then log this thing so we will log this and we will see how it is working first we will go here we'll tweet and you can see we are getting the user data so this is the user ID we are getting in 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 tweets 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 which is the same ID which is here we are getting so now we can see await superas do from and we can say tweets do 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 our things here ID will be created automatically so profile ID is user data do user. 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 uu ID and we can generate it by uu ID from the crypto and it is saying that form data entry value is not assignable to type string so tweet to we can convert this to 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 action 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 refres all our twiets so if you go to the main components here we are getting the twits so this is also a server component so what we will do we will create a con get tweets this is a server components and we will fetch all the tweets from our soab 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 subas server C just like that save this thing we will see if this is working or not remove this control 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 tww merge here so instead what I will do I will create a new library called superbase here super base. TS I will import everything inside this because it may it is conflicting with the client package which is this tailin merch and the CLX clxx package so now it is not conflicting and here we can import this again from our subas server client and now it will not conflict yeah you can see Hello word this is a new tweet we will tweet this so it is saying error something went wrong okay why it went wrong because of this extraction we have did 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 base server everywhere without getting worried so I think we can create create a client hook also and we can use this remove this and super base client import this thing we are using the database and here it will need superbase client new superbas client it will need the superbase URL which is EnV import can say the process. EnV dot it needs first argument is superbase URL so we can say superbase URL and the second one is process. do the subab key here we will use the secret key subas secret key which is a key that has privilege access to all the rows and it can bypass the security of row level secur we have 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 stake now we can remove these things we will try this thing first so I will now go to EnV here we have next public superbas URL this is the same thing which we will use here and this is the next public NN 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 subase secret key and I will go now to superv dashboard and I will copy that key here so in the API so this is service R this is what I'm talking about and I will reveal this I will copy this and I'm hiding this because this is a secret key and you should also keep this secure so now we have superas secret key and we have superas 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 super key here let's L this thing out so we can see what is happening here process. EnV do 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 contrl Z now this is good so we have to use this we have to use this Con to best we have to create this again and again we can't use this only once so we have tried it and we have tested it 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 a tweet we can tweet basically so this is a tweet and if we 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 tweet because if you go to the main component in the main component we have a main form a compos tweet here we are submitting the Tweet just like that it is saying that o user yeah Miss so let's let 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 and error console.log we will log the data and 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 is 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 the server actions so if we showing error on client in server actions next just how to handle the errors so we will see how to handle the errors okay so we can submit the error and we can do like this cool we can return anything we can return the data and error from here so what we can do we return data and it just like that and here we can do this thing action Asing form data await action form 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 a data you return from an action so put it into the state it create R if ER set there would also be built in thece P mod 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 or now and it should give us some data or the response and we will print out the response I'm not sure it will work or not but 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 for 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 errors just like we handle in the client component if we 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 pro store server action and form 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 that trpc is still ahead of time if you use trpc you will life 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 not so first we will say use client and we will receive the propes in here like this we are typing it and we will say we will receive a form 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 errors everything let's install the package first pnpm install son this is a package which will help us to show some toast messages and nice toast messages so you can see the torch by 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 we'll say props to 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 for 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 this things let's copy this and paste here simple directly I'm 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 here is our data and action Dot this is our action and we will pass the data inside it submit 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 years so we can we may face more such a problem in the future okay so it's a functions yeah now we will paste it here and we can say as any we will see if this is working or not but there is a chance that it will not work functions cannot be passed directly to client components unless you explicitly expose it by marking it with Ed 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 return value the action must be C from a client component to toties 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'm saying is if we remove this thing let's refresh this and now it's good it's good it's happy and if we do this it's happy yeah and let's try to submit something hello word okay so something so are we getting anything from here or not basically this is this is working we can pass the server action as a submit tweet and here we are calling this thing but I am not sure if we are hello word server actions yeah we are getting this console.log rest okay 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 th do eror is there then to do error and we can say res do error do 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 do Suess 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 super base provider this is our client component 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 St we can create a client component 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 an API which is working yeah I got this this is just an API so you still have to do this things here so to. error is not working so let's console.log let's see what is happening here there's do error and if we try to hit it is it is being l but I think it is been log 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 console. Lo I'm not sure how this is we are able to see the conso Lo 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 it wrong got it now it will work it will work now yeah something happened this time something happened good let's try it again we can WRA this thing into try catch the whole thing if we hit the Tweet yeah now we are able to see 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 we were facing the program so now we can remove this and now we are getting 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 trpc 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 viers so now over this is saying that it violates 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 our tables we need a secret key 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 base provider and I think in the super base context somewhere we were using in the library in the middleware yeah is good so I think we are missing something we need to create a server client which will handle all this stuff so super base client this is not what what we want so from the JS Library what I'm saying is from Super Bas JS here we have super based client and we need to create a server client this super base 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 superbase client superbas server client you can say which is confidential and which will use a secret key so super client you can say this is a new superbas client and it will accept first one is superbas URL so it is in the process Dov do superbase URL and the another thing is superbas secret Kee so process Dov do 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 base URL is equal to const super base secret key this is a secret key which I I have shown you already in this in your subase table editor in the project setting in the API this is what is secret this key has the ability to bypass Ro level security so it is secure and you can use this thing process. env. superbas 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 we can return a message super base 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 what we can do here we can use this and here we can use this so it will not complain now so it will not complain now we have our super base server client and here instead of superbase server client we will use the superbase server so to insert into our table we will use superbase server from twiets like this and to get the to get the user to get the user we need to use the previous super base thing what I'm saying is Con super base is equal to the previous thing which we have removed create server component client this thing it accept cookies and it accepts headers so this is our client component this variables know that we have loog in no node so subas client here we will say superbas client do.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 post error so what we can do here is post error it is complaining that now we have two things data and error error has message but here error is say said to be post error but here we are sending the error IND differently so as any does it work so a typ 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 POS error or the error can be the error object which has message so now let's try this and this should work this time hello word if you create a tweet superas 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 superbase provider I think here okay so this this should work now click on TR superbase 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 wrongly it is s e c t it is a conf confidential key and you should not show this to public I'm saying it again it is a very confidential and it has all the access to your database and you everything so this is superbas secret key and this is next next public superas 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 we so that's how we have where is this in the compos Treet 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 twet let's do it again copy some LM MSM a long paragraph Maybe so you can see this is a long paragraph if we tweet this this TW tweet is sent successfully and in the network tape you can see all the request these all are the request which is working on in the back end 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 okay so now let's close this thing I just want to show you that it is basically sending a API request nothing much and here we are able to see our tweets we just now how to F 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 tws function first we will create our super base server client and 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 super URL everything is good and here we have our superas client 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 s sync function and here we have over superas server client if subase didn't 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 super server we just need to fetch all the tweets for that I can show you the example how the data is being ped so in the fetching you can see get data here we are fing 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 super base gives us two things data and error we can await we can say super base server not secret key server Dot from twits 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 twiets you can see you can read the foreign table 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 and 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 secate or confidential thing so it is ID updated at username profile so we can select the username and full name basically for now so we can say Here full name and we can say we need the username 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 put to Avid 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 of ERS and the name is null you can see the full name is null and we are getting the table as well you can see we are getting the profiles and we are getting the main data as well to so here we can say what it returns so it will be type save so what it returns so here if you over over it you can see overrides the type of return data so how to do this let's see if the subas Dos has anything related to returning the sub base returns type from table type script TS with super Bas yeah so here you can see export as sync 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 want to show the correct response here I think there must be docs related to returns 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 a string or null 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 for 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 Prof files 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 over over the data you can see we are getting something but in the twist you can suggest what you need it is a row and it is also Arrow now you H 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 H over it you can see the profiles is now an array not 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 zero element and we go to profiles and now here we can print the full name and but we 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 ERS and N which is the first element of our thing so we are getting all the things we need and now we can return this all data and this will be nice and easy so we 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 not available okay treats or we can show server something wrong with server something wrong with the super base or we can say the server and here we want to show the data if it is available so if we can say data do data is here so instead of data we can say the return data or the response response. data is available then rest. data. map directly and here we have our tweet and inside our tweet now we have a tweet ID you can see everything is type safe now here we can say tweet do profiles do 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 a DJs library for it and the relative time plugin so if you search DJs we will use this thing so go to new terminal install pnpm install DJs and if you search if you go to the documentation display and time from now so it requires relative time plug-in to work so if you search we just need to also import this thing so what I'm saying is import TS from TS import relative time plugin and you can what you can do here you can djs. extend and you can extend the plugin like this so import relative time from this and now you can extend this thing and now we can use this format here from now so here we are what we can do TS TS here we can give it 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 tweet. 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 a tweet let's copy some another low M some now tweet this tweet sent successfully but now this is not refreshed so we have to refresh this and then it it should be available okay so it is not available why why is this so let's log this thing should we should have three tweets for now more than three tweets right we have three so here we should also have three tweets but it is not showing us three twiets wi is that console.log we can always use console.log to get what we want if press this you can see we are only getting the two tweets as for now okay it may be because of the caching you can say this we are hitting the cache so we don't want any caching enabled for now 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 revalid revalidates the data at a specific time interval on demand revalid data based on the event such as an update yeah to it is fing and next it will deil it yeah so we can do something like this so in the next catch we have something so in the revalidate tag here we should have something console.log revalidate t Okay so this is the API route I'm 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 not hitting the default so when we have created the Tweet we are on to revalidate the data so to revalidate the data we need to we can directly do 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 devalidate 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 this thing Dynamic data FES are F request that specifically opt out for caching Behavior by setting the cach option to no store or revalidate to zero that's what we are doing we are revalidating this to zero so instead of here this is our main component so inside of defining the revalidation 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 twiets because we have disabled over caching if we try to submit again we are not seeing we have to refresh this thing we able to see two hello words now yeah this is hello word we are seeing to hello this is hello word second tweet tweet said successfully we should see three hello word now if you hit refresh hello word hello word hello word to yeah it's working so we have disabled the caching for now you can see the cach is missed and it is taking some more time now what is our main concern is when we submit any tweet we want to revalidate the whole thing okay so revalidate the path not path we want to revalidate or there is some called mutation success mutation in the compost it let's go to here sub server from insert when this is successfully done you want to refresh the page so router 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 nexj features use router H yeah this this is a thing I'm saying in validating the cash server actions can be used to revalidate the data on Demand by path or by cash take what is this revalidate tag here so if we are using the nexts API routes then we can revalidate a tag like this but we want to do inside or server actions that's why I think we need ralated path so I think here we can revalidate our path revalidate what it is saying revalidate no this is not revalidate the path and it will accept the path as a homepage so now if we submit anything yeah you can see that we haven't refreshed and this is automatically getting populated Auto revalidate tweet you can see we are Auto revalidating this thing so this is working nicely now we can remove our conso log which is here in the page in the main component we can remove this thing we can also put this thing into the separate component or the functions in the app or in the library create a super base create a new folder I think super base in the create a new file get tweets. TS export conk 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 form HTML cool there is something called a type reset which will reset everything thing you can see this is action. PHP the page if we try to do at theate submit this image is this yeah everything is good but I want to reset form which we can basically this is a client component you can see so we can just do it directly what I mean with 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 a reference to this I haven't use 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 send the Tweet we can click this button like this it will this is a tweet with auto reset hit enter you can see it automatically reset over four 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 may be hard for you because I know next year 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 site so if you hit refresh then you will see all the tweets rendered instantly or like it is not being rendered on C 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'll 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 a smaller case so here I will say left sidebar like that we will also auto update the Imports as well so here you can see this is looking good so that we we have consistent naming in our whole application here we will say main component component yes let's change this here we have a 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 its return type is not a valid CSX element let's see that okay so we have to if we remove this this is not working okay so maybe we need to do use server here then it will work and we can also have a look at okay this can't be here I will search and we will see how this works so in the a router we have file convention error loading page.js this is export default function and what we need to do is we need to find the server components functions next sh server components 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 nexs has some type for it server no okay so to use ASN server component with typescript 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 see 5.0.1 and it is not updated that's why we are facing that problem let's update the typ script as well we don't need typ script as a dependency we can use it as a d dependency and types react is 18.2.1 this is also not updated so we can put all these things inside D dependencies so open a new terminal because the project I building I'm building it for like 2 months and I haven't touched anything for 2 months 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 add as save da and we will update all these things inside our da dependencies also the type script let's remove all the 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 point8 yeah it is higher so now it will work nice save this and now if we hit the refresh let's pnpm R again and if we reload our window now our error should be gone because it is still here let's search in on Google and see if this works or not so it is showing that it is Asing 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 type drought 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 maybe we are not using the version which we have operated to so here we can and select our typescript version to use workpace version 5.1.3 which is this here 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 we have 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 typescript version and use the 5.1.3 version and it will be fixed or you can use the use work workpace version as well also update your react types both so inside package do this version and this version these 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 we 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 so 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 tws it is for our timeline and things are now good to go so now we can create our other 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 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 entering everything so first of all we will create a new client component which is tweet tweet. TSX we can also update this form client component so we can say compose tweet compost tweet form and then we need to also update all the namings I'm fixing the naming compost tweet form like that now we can also update this props it's cool and in the client comp compos TW form and here we are importing not this compose tweet form so it is correct and now it is good to go we have fixed over naming we have fixed a few things here and there so in the now we need to go inside main component so here is our tweet RFC 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 over ID as well so we can say key is tweet. ID and other than that we can pass the whole tweet as a propes so tweet is equal to tweet and here we can say we are accept accepting tweet and this is tweet props so type tweet props is equal to tweet and here we will Define our tweet so let's H over this tweet and we can copy this whole thing or what we can do go to k tweets and here we are returning so this is our type so copy this and this thing import the database from library super base types and here we have our bit just like this or we can define a type and we can use this everywhere so what I'm saying is type tweet type so we are sure that we are using the same thing here and there save the thing to type and we can export from here export type to type and we will use this over here so instead of doing this it can do tweet type import the other things as well these icons CR X and that's how import the DJs 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 good 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 like feature is nothing we just need to insert a row inside our likes table so if we go to super base or our project dashboard and here is our tweet clone in the table editor here you can see we have our likes table here we need to insert Arrow insert some data we will say who the user so who is the user who has liked 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 likeed this tweet 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 the users who have likeed this post so we will say select all the users from likes table where the Tweet ID is this simple so now what we will do here we will create another server action so this time we are new 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 we are committing or 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 state by waiting for content to load before transitioning to next so it's good you we can take a reference to this what is this is gives us 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 tab cool just a 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 what 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 click we can name it Button as well so this is much better so when this is Click you can copy the whole thing I will Implement a function called like tweet 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 toe it feature or like tweet function as well is equal to a sync 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 superbase URL and superbas secret key then we need to await superbase server Dot from we have likes table dot insert and it will ask us to insert some thing okay so we here we are not defining the database that's why it is not giving us Auto completion now we should have our Auto completion yeah we have Auto completion so here we can say random Q ID the Tweet ID is which is passed as 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 called use user this is a o helper which is given to us by react it gives us two things I think it gives us user which can be user or null okay so here we can also make it condition if the user exist then only like this to it otherwise don't like this if the user exist user and user do ID exist which is by the way exist if user exist then like this tweet otherwise toast do info or we can say toast do 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 string you can say we have tweet ID which is a 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 devalidate or we can update our UI that it is liked that's how it is simple so here we can import and we can pass down things here tweet ID is tweet. ID and user ID is user do 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 data and error and we can also log this so it will be more descriptive so here is our application if we click on the like button so we are liking our tweet ourself so it is saying please login to like a tweet which means the user is not defined so we can look 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 signed in y user is why is user not logged in if we can tweet yeah if we can tweet which means we we are logged in then why it is not showing we go to application Local Host so there is some there is not other place where we have used this so if we go to our context our main context where we have Define all the logic for authentication which is in the app directory we have components we have library in the ab directory yeah we have superbas provider here we are using everything yeah the router to refresh is a thing which we can use to refresh our router Super base. O so I think we can use this also we have to use this state create browser superbase CLI and then here we can call this whole thing we can say superbase do get user do then 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 if do data which is data is user then we can say rest. user data do user. ID otherwise we 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 of data exist and this exist then do this okay so what it is saying is having some problems with that const user is equal to r. data do user and here we have our user we can say user do ID like that yeah and we can show a loading indicator when this is being phased but we will see what it is you can also show if this failed so we can say cash cas P the error and show a toast message authentication failed and instead of doing it in line 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 this like okay something worked this time and here we can see or like that's what I'm talking about if you go here and user ID and we can reference this to ourself because we have likeed this street and you can see we are able to see and we if we go to refres this pis we can see select a record okay so this is a tweet ID and we can find out which tweet is this we can filter our table with the Tweet ID so you can see Hello word we have liked hello word and let's like this time this whole text if we click on this a new like row will be inserted into our table which you can see and this tweet is the long text you can see so this is how we have created over main Logic for implementing like now what we can do here we also have is like pending so when it is pending we can show three dots or something we can disable the button if it's like it's pending and we can change it to a red heart if the user has lagged it or not so as you can see this is our project and here is our app if you refresh this all of our tws 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 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 uh what is the property I don't it's hidden sticky and then after Excel it is flexed yeah so it's good but I think the hidden property dewind so I use so much that I forgot what is the visible property so it is not visible I 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 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 H screen we can give it 90 of the view boort yeah now it's sticky and it's good 90v Port 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 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 let look it's looking good so where we were we want to implement our like functionality we want to show all the likes so there are different different approaches how we can show the likes on our timeline so the first approach is f 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'm worried about if you f for each post you have to send a lot of API request 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'm saying is let's Implement that so if you go to the main component this is our server component and here we are getting the twits and the other thing we want to improve is this is super base and this is get tweets instead of get tweets we can rename this two functions or queries or two different things so we can make two different things so this is for queries Q to re yes and then what we can do we can cut this thing because this is a mutation this is a database mutation so inside superas create a new field called mutation so we are separating out cues and mutation now this is good okay and the other thing is if you go to the queries this is also used server and this is also used 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 subase server for that we also need these things in the index.ts we can import and then we can import the super based client as well and for the for the fix we can do as string and as string super based server client so this is a superbas server Library okay so let's name This superbas Server this is good so now we can use this thing over here so we can remove all of this we can import like this sub server from here and we can import the random U ID from to 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 we have 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 we want to F the likes count with all the tweets we are fing 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 superas stage boards so let's go to superas 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 twists so here are our twists 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 our tweet okay so we want to query the count also so for that we have to look for the documentation inside API docs here we can see how to get that we can also paginate we will do this uh at the end of our course what we will do we will fetch only a few twiets for once and then when the user Scrolls down we will fetch more twiets so read a specific column some column other column other table for and key good but other table is fix and we want to with filtering okay so we can this is how we can filter also insert a row insert menu update subscribe to changes read for in tables so this is what we want to do let's assume we have likes table then we can fetch who has liked this tweet or who which TW 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 lik table and in the likes table let's go here and the forign 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 we are getting any error or something I think this will not work but let's try if we were using Prisma or some or that's another thing but let's see what it gives to us data and error return data yeah column tweets. likes does not exist yeah 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 user ID so we can fish the user details or the author of the Tweet fet the author details who tweeted this twet on the other hand we have our likes table inside we have two foreign 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 that so here is the thing we can't directly face the count of the tweets which is related to directly tweets 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 ANM this is something which superv 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 tweet so we can say return AIT superas server. from and which is the likes table give me all the count of the tables 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 console.log or we can directly log this thing yes so con 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 that 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 there'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 this is our ser component we you can see this is our server thing this is a server function we can't F directly using this function on the client so that's why we need to define a 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 use State here so we have to remove the use 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 the 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 US state inside our client component import the use browser subas 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 treat 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 we can say const get tweet 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 console.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 between likes and count in the schema but no matches for f okay 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 sub client how to get count start okay so we can pass around the count exit it 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 planed so we can say exact so it will return as the exact count of a single tweet so you can see count is f we 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 this tweet has one this tweet has zero count this tweet has one this tweet 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 our 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 to get likes get tweet likes count this is what we need so it is dot you can see we have count so we 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 we can see one like and 0 like 0 like one like that's cool and it is sending too much request to the server but this is okay because this is the only choice we have if you use super best client just Library if you are using an or 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 give 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 Tweet 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 that's good that's looking good and now we need to do one more thing 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 like the twe then we will show the red heart so in the cues here we are getting the likes count so here we can also get export Co get is liked if the Tweet is liked or not as sync and we can get the Tweet ID and we can so we just need to find out that if this row exist or not in the database if this row exist with the TW ID this and the user ID is is then we will show the R heart otherwise we will we will not show the head heart this is twet ID it is string string and user ID it is also a string then here we can return we just need to to to 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 account we can say tweet ID is this and do 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 fish this detail here can const is liked oh wait so if user is liked so is liked and import from library and here we will pass down the Tweet ID as well to do ID 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 super base server is equal to super base not this things super base o client create server superbase client this thing we need the exact the exact thing which we have used to compose over dat so if you go to the composed withit server component here you can find out we have used this thing so there's the there thing we need copy this paste here superbase client superbas server component suas client import this import cookies and 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 base client and it has the user detail details or do this is how user data superbas client or 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 a twet 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 do user do 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 we will go to is likeed 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 liked so now we will console.log what it is giving to us console.log is user has liked and in the queries instead of directly returning we can return that user hasn't like this otherwise we can find out if this is exist or not and we can return a true here so const data error not this error we can say we can also say that single the user can only like single time nice and we can say if data dot ID exist then it and we can directly deter if use data. ID exist can say Boolean data. ID so if this exist then this is the TW is liked by the current user otherwise it doesn't liked by 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 false true false false false yeah this is the whole thing so true means we have likeed this stre false means we don't have like this Treet cool so now we just need to show this over here we will was 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 do this import the CN helper which will merge all the Delwin glasses we can say if his user has liked then show the color of rate so we can say text rows yeah now let's see now it is so we need to find out a Goode component so we can show here SVG element so react icons so hard 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 F HT 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 rate 600 let's try this refresh this whole thing okay now we are not able to see if it is we can use the fill property I think fill from the color let's give it black for some time cuz we have already like this this should show a like here but it is not showing why is this console log let's see so it is giving us undefined why is that is user has likeed okay we haven't saved this save this now refresh this okay so refresh this again now you can see we have some play COD true or false here good now it is working remove this fill yeah so now it is red and we have like like this twe you can see this is good if you hit refresh it will show that we have likeed this tweet 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 TW it here we can do the same thing unlike tweet unlike tweet the same thing which will just delete the tweet from the database subas server from likes. delete do 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 we don't need these two things we just need like ID like ID which is string so now it will delete from likes table 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 dat also that's why we are console loging everything so now unlike to it 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 liked 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 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 propes so what I'm 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 cheet 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 1 2 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 uh but here you can see this is gone and here this will also gone but because we are changing our window that's why it is being refreshed but if we do it here again if we click the like button this is created Arrow 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 light but we want to refresh it instantly so now for the simplification for the simplification purpose you can devalidate 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 your 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 revalidate the whole page which is not recommended but we are going to do here revalidate the whole page just like it when user like or dislike the tweet revalidate 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 tweet this tweet is liked if we remove this this is removed so now it is working like charm so now only one tweet is liked and which is liked by us we can remove this by clicking on this it is removed and you can see this row is removed if we like this tweet again a row will be inserted and this St is liked let's log into a different account and see if it is can be liked by multiple accounts so let's do that also so this is my other account and you can see this is asking me for liking to 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 we hit refresh it will ask us to sign in so let's sign in I will put my email white blogs. gmail.com I will put my email YT blogs. it is my recent product which generates blogs Twitter SE 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'm 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 and 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 tweet 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 realtime feature by using real time updates from subase but there 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 the reply features so anyone can reply to this post we have faced 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 sub B dashboard the request are 14,786 here what we are doing wrong so let's assume we have 10 tweets and we have 100 users 100 users are minimal not 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 users will send each request for each twet so this means each user will send th000 request every time user refreshes the page or if the user has liked any tweet then he also fetch like 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 get tws 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 rended two times so we will fetch this request two times so this is very bad so we can't do 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 CH GPT so in this video I will tell you how you can utilize CH GPT 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 tweet or not so how should we do that so we can run a plain SQL query because sub B client Library doesn't provide a query like that it is a complex query so we have to build a plain s Square cury on our own because we are not using any orm for now if you 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 in orm that's why we have to define a single performant SQL query so for that as I said I'm not good at writing SQL so I have used chbt to help me here so you can see these are my SQL tables and I have pasted all the SQL tables which we cre I want to fetch all the tweets with likes count can you give me the best way what you this so it gave me how you can get all the tweets with like count so we don't have to fetch the likes count again and again for a single tweet so it will give us the likes account and another thing which I have 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 twist. all so this means give me all the rows and it is saying that count all the likes is likes count and it is finding that if likes. tweet ID is current tweet ID and likes. user ID is current user ID exist or not if it exist then user has like this stre otherwise it is not so this is how it is finding the twits and from twits and this is left joining the likes table and it is grouping the twitters by twitch. ID so this is how it works and then I told CH GP 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 ID 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 of U ID so let's find out the correct uu 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 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 a new tweet from another account and we can also find out the likes we can also find out if the current user has likeed this post or not so if you go to bottom you can see we haven't liked 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 queres again and 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 pool so if you search PG pool po pool on the internet you can find out this package and we will use this package to query or database like this so let's install this let's remove this thing because you can see we are sending a lot of request to the server and it is very bad we don't want to send too many request to our server so we will install PNP install pz pool in the source here we will inser 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 to TS and here you can Define your pool 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 PG 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 PG pool to create our instant database instant and then we can cury 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 poisk 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 pool from PG pool like that you can see we don't have the types that's why it is not showing us auto complete so we will install the types pnpm install PG pool types so it we are installing the PG pool types as d dependencies as you can see now if you over over it you can see all the types and if you try you can see all the stuff here so the database is press and the connection string which we will get from the database uh note andv we need it from import okay so we will Define process. EnV tot our connection 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 superbase on the project setting in the database here you can find the nodejs database connection is 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 string 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 cury okay so let's see all the things SSL is true yeah so now we can cury like that pull do connect then and then catch like this play nice with a syn of so we want to use a syn of it so let's use that also so what we will do we will export it export con pool so pool do connect and then we can use this so instead of directly exporting this we will Define our client and then we will use this cons DV is equal to a wait or instead of doing this we can use this thing this is a self calling function const pool is we already have a pool and then we will say pool to 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 quy and return the client the pool afterwards PG pool has dis spilled in so we directly curate this that's good so let's do this one thing first export this pool and then we will use this export this for now so we will go to our main component inside here where we getting all the tws so instead of this we need to run the query so return is equal to await we import the tool from DB and then we will directly cury the stuff we will directly cury the stuff so like this select dollar one means this thing text S name so we will copy our whole query which is this copy this thing we use this you can see to store with star and here we are using the current user ID so we want to pause this as a so we will pause 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 here you can see this is over so we can ask Cher GPT to return the query with the PG pool so we can say return the cury with using the PG pool and random U ID variable so you can see this is our connection string and this is dollar one so we will say instead of this this is our dollar one which is the parameter and then we can directly cute it like that don't forget to release the pool so this is how you can leverage CH GPD here so we'll copy the whole thing paste it here we will also copy the quy yeah so this is our query and we are passing the current user ID and here we can get the current user ID as well which is string here our query and here we are getting everything so now if you 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 do user. ID like that and we can cut it from here we can paste it and here in stet 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 cury 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 has liked simple so we can run this simple query so what we need to do is if the current if the current user ID exist then cury so we can Define the Cy temporary here which is a string let cury is string or we can say this is cury without current user ID and if the current user ID exist then we can say the cury is cury with current user ID and then we will run the query we will pass the parameters and we will process the query result like that pull. end and that's all what we are doing now let's remove this for 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 run there and we should be able to see something for now so now if you go to loc if you try to refresh we should be able to see something here yeah something went wrong cannot use a pool after calling and on the pool so something went wrong error password authentication failed for user post okay okay password authentication has failed so why is that this is our pool datab okay so we don't need this database thing here we can directly use without connection string like that and connection directly and from PG yeah so now if we try to hit the refresh and we will see what is happening yeah we get something now authentication failed executing query authentication failed for user post chis so this means our connection string is not correct so let me correct my connection string so to check if this is connecting or not we will first let me reset my database password again res set the whole password and I will use here again good po mode 6534 okay so connection string is this connection pulling is this let's copy this thing this is for the connection pulling 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 getting ID text profile ID created it updated likes count and user has liked or not and that's totally awesome and we can just return this for whole cury result from here so if this doesn't exist we can return nothing and if it exist we can return result do row like that so what you need to do is you need to use this pool here this one connection string for connection poing not this one this one and then it will work and now we are efficiently curing everything okay but it still getting some problems like cannot use a pool after coiling and on the pool now we can remove this thing and we can modify our treat Ty type and we will return everything so here we are returning all the tweets and here we will render everything we need so rest do error is so if this is error so we can return the error inside error we can return a mage DB curing failed and here we are returning all the row restore data and we can WRA 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 chj gave 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 to likes count and the other thing is which we are getting is in the queries you can see tweets. Li count and otherwise his user has liked so tweet do user has liked so this thing but there is a chance that this doesn't exist so we will rap this whole thing in the Boolean here we are saying tweet type but we will Define any for the moment so it doesn't show us any error save this whole thing raise to data let's log this thing so we can see if we are getting something on the client not to 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 request to the server which is O request we are sending a lot of auth request why is that do we in the like button so in the like button queries index console. talk let's log the result as well so we can see what is happening result yeah something is working here yeah we are getting the result basically result to Rose 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 as sync AIT not this not this thing I don't like this so let's cut the whole thing const result is equal to await p. query because it is a promise and we can see now the curity result and we can rap the whole thing into try cage block so if something went wrong we can conso do log error otherwise we can return the data as r dot you can see Rose because full name is not defined so why is that cannot read the property of full name this is this okay okay so we want to also fetch the whole profile of the user so we can ask the chgb to modify our our query so we also want to fet the user author details as well it will say that profiles. user yeah so we can now face the whole thing here as well so let's copy this thing crol d crl 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 okay something is wrong here missing from close from entry okay okay okay so we haven't copy 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 join likes join and group buy yeah so we have to correctly fix our query group buy and then order Buy so this is a big quer 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 hustle 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 likes count okay so this is likes 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 our database with a lot of request so if you hit refresh we now have something 16,000 or 177,000 request in the last 60 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 specific 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 not you can see 4,39 if you hit refresh if you try to refresh this it is not changed a lot you can see this is cool so now we can like this tweet remove our like and here as well okay so so if we are not logged in we are not able to see any twiets that is not the way I want so if I open this T in the new tab this is not we are not able to see any why 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 QD without current user ID if current user exist then Q is Q 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 like St P ID profiles everything seems good to me let's remove this current ID thing 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 request from clients now if you refresh you can see we are not bombarding over server facing some problems with this cury 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 po. query is query without current user ID there our query so it is yeah and if the current user exist then our query will be cury with current user ID and then we will pause this current user ID with our cury okay so this is for the parameter this dollar one then we can aade this query here we can aade this query and here we have our result and then we can save this thing and now we have all the TW 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 quy but yeah with the help of CH GPT we can query our database efficiently so this is what chair GPT 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 I save this now this is good so we are rendering everything and everything looks good to me so now what we need to do if we go to the like button so everything is good so we can like we can dislike we are not bombarding our server with the lot of API request you can see this is still the same yeah o request are a lot of O request 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 o 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 to the like button and that's all there that's how you can also remove a lot of like and what what we can say the O request to the superbas server that's all now our application is looking good where is this so this is our application we can tweet this is a latest tweet you can tweet and you can see this is being rendered here instantly this 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 function 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 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 the street 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 Local Hood 3000 and we are running our application nicely but if you go to the Curious part we are doing all these things so this is looking B and there is a great chance that you might do a typo here like we have did in the last part like if you type a comma here and then it will break your whole 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 type safe orm you can go to the drizzle orm website you can go to the documentation and you can find out that it's very could or 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 es schema. TS file so this is our source directory inside the DB we have this TB think okay so we will create a new file called schema. here we will Define all our schemas which we have created in the superway 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 sh GPT to do this also fastly so how to do that using this chair GPT 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 here we are creating all the tables so now what we need to do we need to create or schema using all these tables okay so let's copy this thing and this is my SQL tables these we 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 CH jity to generate over schemas so generate the orm schemas as you know that CH GPD don't have the latest data so what we will do generate the RM schema From Below TOS so we will paste the relevant information here so we'll go to chair GPD or we will go to the drizzle one because we are using post SQL here you can go to the docs 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 the main data yeah so see four docks so this is a post SQL so you can see these are all the docks here so just CR a contrl 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 the response 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 CH only accept 4,000 tokens so we will 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 schema declaration this is our main thing this is also relevant yeah this is relevant indexes forign case composite Prim that's all we need and you can now send this and it will generate all the tables for us you can see CH gbd is generating all the schema so we don't have to write all these things by over it's like a product activity H you can use this and it's good I will tell you if this has any error that we will also fix this so now we just need to copy whole thing copy the whole thing paste here dzel orm PG code so PG enm popularity so we don't need this popular thing here so we can remove this The UU ID column we also don't need this we can just pause The UU ID so this may have some error so we are fixing this we are checking if CH GPT has done anything wrong so this is good PG table profiles ID is U ID which is a primary key it's totally okay and we can also pass autogenerated default random it means it is generated default so now we can copy every ID using this thing uu ID primary key default random updated it time Stam default now not n okay username so this unique constant is not available in the dle now so we can remove this also instead of U ID column we can replace it with only uu ID now can say 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 reference to the profile ID is 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 capital I and then D so profile it it's the best practice to do like that profile ID created it updated it so the database will be saved or but I'm saying is the database column will be named after this but in the application we will use this for our typ script generation so it's cool we have hhts so it's also cool default random the hinal 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 tweet hashtag we can do this tweet hashtag this is the table tweet id hhag id and then this one this is school tweet # primary key so we will say that this is tweet ID and this is Hash 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 curate the table we can say give me all the tweet tweets of this particular hashtag ID we can quate this table and then we can join the Tweet table with each ID of the Tweet is equal to this tweet ID so it will join the Tweet table 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 U ID as a primary key we have text that's good user ID so notal reference is profile. 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 user ID we can say user capital I tweet Capital ID reply Capital ID over productivity after this after creating this schema it's 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 raow things the native things like curing the database from row queries that that is we Tory so you should always use orm so I thought why not use orm in this tutorial that's why I'm creating this part also when integrating the waterm part okay so replies text user ID tweet ID reply ID you can see this is a self reference not this you can see self reference a user can reply to okay so we have ID tweet so if we comment this out yeah it will work so this is not working it is saying that it can't reference the current table so if you you go to the documentation here you can find out an example that for sure which is self- reference you can see that sister city ID and it is self referencing foreign key and that's cool you can see country ID is country S ID inline for key that is good country ID this is and sister city ID which is referencing to same table n EPG column and then so reply ID is also referencing to the same table which is replies and it 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 exist that means it is a reply for for another reply if it doesn't exist this mean it is a top level reply if it exist then 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 forign keys which is columns forign columns yeah but we don't need this thing we are already refer in things here reply user forign key columns reply. user id profiles. id explicit forign key with one column explicit foreign key with multiple columns inline foreign 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 1 2 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 in line you can do that so we will remove now this thing and it's good now we have likes table which is likes that's good default random uu ID which is user ID and it is referencing to the profile St 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 ID you can see we have to do a lot of fixes after we have use chair GPT chair GPT 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 uh if we have created the indexes but it is not required but yeah we can create that so let's create an index on user ID and TW ID so we can query them faster so here you can find out about the indexes if you search index not this index you can see 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 can 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 likees to first one is user ID likes tot and the second one is tweet ID like that so we have defined our index like that 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 can't be null so we can say it can't be null so this bookmark feature is same as the like feure nothing much so you can also okay so we are already saying it can be n that's good this reference things can't be null basically yeah this reply can be null but it can't be null okay so these both can be null but yeah these both can be null 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 reply 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 docks 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 we can remove this thing import the drizzle import the drizzle from the drizzle post 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 our orm just like that DB select from users and it is simple let's reload over 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 theate types slpg 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 do 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 for reference when we create the same cury using that resum so we have seen three methods first of all we have used super base client J library to fet 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 two whichever you want it is not like must for you to use this dzel if you want to go with Prisma you can I just want to explore this new thing that's why I'm creating a tutorial for it and let's see we have tweet hashtag table it's good can see many to many this is a many to many relationship between tweet and htic otherwise we have one too many relationship like a tweet can have many likes a tweet can have many book marks a reply can have many replies a tweet can have many replies so this is a one to many but a tweet can have many hashtags and a hashtag can have many tweets so this is a many to many relationship code so now we have our DB now we will create another script for migrating our database migrate Dots here we will do we will Define a function which is main function we will call it as sync and what we will do await migrate so we need to find a 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 import these two things import the DB now we have DB okay so it is migration folder of migration folder is our res when we will generate the migrations it will create a new folder dzel and in which we have all our migrations node PG database record string yeah so white is complaining let's see dzel SQL let's use this Max connection and also the postgress thing here over here so I think we need to we need this thing postris and then here we can use the postris and we have all the 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 is using pool and here it is using postgress so two things we have here but at the end we have the database let's use the process. EnV okay it doesn't need the new thing and now let's see what the things 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 is string and we can pass down all this stuff here we can say Max connection is one so we have our SQL can pass down our SQL here inside the drizzle which we will import from post shs yeah and now it is not complaining it is good po GS database and we will run this main function we will say main do then process. exit we will say console.log migrations running console.log migration finish cool so now we have our dzel warm with the schema proper with proper SQL DB and with proper migration system now we here 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 the res kit generate PC so here you can use result kit generate 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 called bun to run over script one Dosh so it will automatically handle all the stuff for us like getting the environment variables and handling the types 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 npx one you can say run and then you can copy the migrate copy the path the migrate so instead of this we can directly say Source go to Source in the library in the DB migrate dots 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 npx you can type pnpm as well pnpm run what is over script generate okay so it is failed result config to Json doesn't exist so we have to define the configs of this thing let's import this as well in the root of our directory create a result config TS and past this stuff so we can find out we can Define our schema in the source in the library in the TB we have our schema schema TS and where we want to Output the SQL we can say it is 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 con 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 parameters C options we can also do the in instro Spec command here and instro spec so in should of directly saying digal kit yeah so we Face an error so what is the error if you go to the TS config.js file you will find that es 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 pnpm run generate again it will run so this is the version thing typ 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 any stuff awesome so now we have all our things and now we can run the migrations as well so if you run PN PM run and then you can sa int let's do inro spec okay so pnpm run and St spec what is this like you go to the package or just you can find out introspect it is what like this and here yeah introspect instro note not instro introspect let me fix that introspect and it is also introspect so pnpm run intro introspect so it will only PG is available option for Drive command field only PG is available option for Drive okay so something is happening here so connection string we have to Define our connection string over here if you want to install expect our stuff so we can go to our config which is drizal config and here we can provide our connection string yeah it is saying DB credentials inside DB credentials we have connection string and this is process. EnV do what is our connection let's go to command P or if you are on Mac if you are on Windows contrl 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 instro spec it is saying that it is only available for the driver what is that okay so you can Define over driver PG either connection ising database are required for database connection so for the temporary purpose what I'm going to do I'm going to paste my database connection string over here it is not necessary let's not do that if you want to install introspect 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 dle config you can see we have this tle config and we don't want to GitHub to tr over database connection instring 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 page door Json contrl P command P package J Json here we are saying generate kit instro spe PG so here we can say npx result kit intro PG and here we can pass over connection string as well out migration and then we can pass our connection string so we don't have to copy and paste H so kup won't be able to track yeah so I will now paste my EnV my secret connection string over here and let's try this pz is available option for driver okay so what it is sometime it doesn't work yeah so we can say the driver is p something yeah now it worked driver is PG and if you go to the migrations in the schema you have all the things okay what is this you can see it is commanded hold current SQL files were 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 id twet id because if you see in our database in our superbase database we have tweet uncore ID this is not the naming convention 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 inspect for now let's generate the migration file once more so let's delete the migration in the drizzle yeah we 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 migrate file which is this migration folder is we are saying that this is Diesel 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 DA 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 Buton so if if you don't have the bun installed it will say please install the bun and you can hit the enter and it will work now we have got some errors you can see migration running bookmarks table already exist relation already exist hashtags so this stuff all all of this stuff already exist 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 say 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 twits 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 we try to change something then it will do something so if we go to the migrate folder and let's try to run the migrations on the migration folder and go to here UNC commmand the whole thing so we can can generate over migration so now let's try it again pnpm 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 dzel already exist schema hashtags already exist bookmarks already exist likes profiles replies tweet tweet hashtag 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 da database Twitter ultimate Twitter clone da generate a password I will copy this choose your region and we will create a new database let's find out if this is working or not if we will go to package.json not in the package in the en 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 NN 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 string and we need a new password so basically I will generate a new password again generate a 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 Brun and then we can generate SQL from our schemas so what we can do we can generate pnpm BR generate it will generate all our SQL in the driel 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 users table so we will go to schema. TS here I will create a created it as well so I will say this is the time stamp 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 it dot default now do not n like this created it updated it like that and now we will generate over again so you can see now we have two migrations and is saying alter table profiles and add a column which is time time default is this can be null discount be null and this is now you can see and this is how we we are generating all the things over here and we can push these changes to our database and 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 dot then so clog finished we will also log if something went wrong with that do catch if we have any error then consolle log yeah now let's do it again pnpm run 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 run migrate migration 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 forign key here so you can see this is a forign key which is Rel related to the profiles public key and if you go to the twits 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 te relation and this is so everything is working like we have expected and now we can easily query over database and we can do all the stuff if we pnpm run there 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 Tel one freshly without worrying about our previous stuff okay so that's why we have created a new database so you should enable r low level policies for all the tables here so to do that you just need to follow what I'm doing enable 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 assume like your public key superas public key got 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 Ro level security policies because from a super based public key these rows can be accessed if the roow level security policy is not enabled enable all Ro 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 our schemas and it is in sync with over production or you can see our remote database but we want to integrate it for fetching getting and all this stuff so here we are seeing that curing and mutating so instead of doing this what we will do if the current user exist so we don't need this all the stuff here we can directly fetch the rows using ralm so what we will do we will import the DB from the DV 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 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 twet 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 autoc comption here and let's find out in the doc in the documentation of disal warm how to run a relational query so we can see db. cy. user. find menu so we can query users and we can find many with post like that so we need to do that stuff we can also left or right join so here if you sign many find first cury so here they are using cury with post with commments like this is good so there we can do that as well so we can say query and we want twits okay so we want to query okay so it will say dot gu but we are not getting any auto completion here we want the auto completion that's we are using that result here so we are not getting any auto completion wi state for any n with queries result will 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 see we have all four tables so we want to query the tweets do 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 here what we want here we want the users or you can say where is this if you go to the twiets 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 specify 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 width 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 is that 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 affect over schema this is much more of a application 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 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 it will accept here we will pass down the pro twist twist relation it we will pass down the twiets 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 by the profiles and here we will say 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 so we will say profiles. ID just like it post. 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 referen to this ID so we have to do this for all the other tables as well this is our profiles this is our profiles relations twits twits relations replies now we have replies relations here instead of doing this we will say replies dot user ID okay so here we are saying user ID which is good profiles replies so we have to pause down the replies here basically where then this will have the replies exess now we have profiles okay now it is good to go as well we will do the same for the likes table here instead of reply relation we will say likes relations here we will pass down the likes table here we will say likes do user ID just like that and the reference is profiles. 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 quering our database and it will be much more error prone here we will pass down the bookmarks and we will say bookmarks do user ID I would suggest you to name this profile 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 if we 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 a specifi the tweets relations TW if we want to find out on the tweets we have this thing that's why it is is working and if we log this it will work but we want to left join this profile St 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 do select from users then we can left join things so this is what we need to do so let's command this out for now and here we will try something out here we will say const result is equal to await TB do select you can say select Destin select this on 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 join right join everything we have here so we want to left join the table which is which table we want to left join 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 ele all the elements of an ARR into an string separated by specific separate so we are taking the reference of this SQL quy which we have got from CHT 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 for for which column you want to left join so here we will specify something here 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 twist 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 do profile ID and we need profiles do ID okay what it is saying okay left join required and full join good partial select then what is the join many to one example agre great result so here we have joined all the twists basically we 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 a separator add all the element to an array into an string left join for each row of the table includes value from a matching row of the joint 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 how about right join includes all the rows of join 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 LIF we are basically we are saying that give me the tweet and give me the likes count of this tweet basically so we are saying that when when the Tweet ID is equal to likes to tweet ID give me all the rows as well and then we are joining the profile and let's log the result out and we will see what we are getting here rest do yeah so we should get something here do 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 I can say tweets to created it to okay so how this order by works cost to here 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 not 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 D the GitHub one GitHub documentation is better let's go to there 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 good 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 DP thec from res we will import and we will say you is inserting and you can H over it you can find from users order by descending users to created it and Twi creat that's what we are doing here that's totally good now it will work we can limit and offset offset means how many users or tweets you want to jump we can limit them let's limit to one tweet only dot yeah that's that's what we need do returning I think there is something called returning if you over over it you can see what we are getting we are getting if we do this two we will receive an array if we do it one we will receive array of objects so here we have twiets here we have profiles and here we have likes save this thing and here we will find out what we are getting getting we are getting undefined why set so if we go to the main component let's comment everything out for now here we are getting the twists let's pass this thing also console CL current user ID and yeah 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 twiets that's why we are getting all of these things so let's log in 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 dzel warm if you want so let's use the drizzle warm so import the DB do insert and we will specify our twiets twiets table schema and we can we will say the Valu are this profile ID is user data do user. ID just like that tot yeah so this is how you can insert something using the DZ warum result and let's log the result as well console. log press what we are getting yeah we are getting the user and it's good not user we are getting the Tweet basically so we can now remove this we don't need Super Bas server we need only response actually we don't need to send anything if this went wrong do 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 inser something wrong with server let's save for now and we can pass down the error as error that's good and we can pass down the data as RoR res why it is complaining if we go here yeah it is complaining because if we over over this now we have some different things so just for the sake of demo we will do it any and now let's see how if we able to submit a tweet or not so first we need to sign in so Club ofcers doc gmail.com and username is Club of corders 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 can say error console.log error if we try to fit submit yeah we are getting something we are getting insert or update on twits WE the forign key constraint twits profile ID profile ID foreign key something is wrong basically it is saying something is wrong so if now 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 insert a row into our profiles table when a new user is created for that you 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 in 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. profile ID full name of URL we don't need thear URL we need the username username full name username these two things we need new do ID new do now let's try to run this now successfully done if we go to our profiles username full 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 Club of cs.com at gmail.com here we will say Club of coders now I will click on login it will send me a email I didn't Cote any 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 o 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 exist please use and then we are signing using OTP if something is wrong we should show something here so I think I think it will give us some data and error if we C any error sign up error sign up data so if we got any error then we should Source something and we should return it return to do error error dot we can say sign up error do message and if it is successfully done we can send a we can show a to. success magic link sent successfully like that now it's good now if it try to do that again Club of ers.com gmail.com Club ofers login null value in the column full name of relation profiles okay so we are getting something let's log the error so we can see what is happening pull sign up error CL of coders okay I don't want to type again and again I think I should use type his email already it should show me autocompletion 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 we fix the error where is the error okay in the terminal it should have so null value in the column full name of relations profile voet null not null constate at note null value in column yeah previously we were able to sign up and this time not what happened let's clear the whole data where is the storage clear the side data everything now everything is clear Local Host go to Local Host now let's do it again Club of orders.com gmail.com here we will say the username is Club of quers hit enter and it is saying data is username preview failing draw 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 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 forgot 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 that's good now let's write email is Club of.com gmail.com username is club ofcers name is ranel 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 tweet send successfully everything is working working as expected and here now we are able to see the get BS and everything is now good so close close close close you can see this is how we are using resal orm to insert something from not from inside our TV and here we are getting the DV and joining all the tables 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 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 that 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 rest. data. length is greater than zero or or not like that if this is defined here we can remove this tweet why is showing us the sly line control Z ra do data map now we have this twet void element undefined is not assignable to type react Noe type void is not assign yeah tweet is raise. data and raise. data. length is greater than zero something is not working here something is very wrong we can say it is do 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 dzel 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 esema here we want to infer the twiets type so here we can say twiets instead of say the so this is our user table we want to infer the user here we can say we want to infer the tweet and import from resum and we can pass down type of tweets now we have a tweet type and here we can get the Tweet type from esema good so here we can spread both things to to to profiles like that now it has all the things here which are needed it has all the tweets it has all the profiles so we can Union we can Union both the types so here this is over TW and here is our profiles so this is our profiles so we can say this is our profile in for from profile and here we can make a union of this 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 twet import the profile now it is happy it is also happy here you can say tweet okay not tweet basically Al 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 dot created it now we don't have the likes count for now we can pass down this we can pass down the zero we 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 tweet if we click this button it will like but it will not show anything so here we are getting all the tweets likes and profiles if you like this thing insert or update on likes will 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 uu ID 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 dzm do insert insert into the likes row and we want to insert some values do values which are tweet ID which are user ID and everything else will be autogenerated basically so now you can you can log the error if we get anything error console not log and error yeah now let's do it again try to like this Treet it worked I think if we go to the likes table nothing is here we also want to find out what is happening so const response is equal to console clog response save this thing now we will refresh this we will like this yeah we are getting something insert or update on likes wellers the fork consent like tweet ID twiets Fork something is missing here something is not correct why is that let's find out let's log first let's log the IDS we are receiving here so we can find out what is happening so here is our TW ID here is our user ID let's log both of these out our user ID is this and our tweet ID our 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 TW 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 like tweet 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 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 user profile and here we will pass down the profiles so now everything is clear tweets so so now we have ID text and nicely so we we can differentiate which is tweet 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 profile just like this tweet 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 tweets here tweets is TW 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 say tweet details is Tweet now both are satisfied and it's good save this save this thing also and here we can say user profile do full name tweet. user profile. username and here we want tweet details created it to tweet details and the Tweet ID is tweet details. ID not 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 dzel orm now we can remove all the conso Lo first remove all the conso Lo so why I have recorded this debugging part also because I want you to know that not all the times everything works out sometimes we 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 drizzle or 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 we like this tweet one more time then we will also get that one tweet so I will open a new window which you see so here as you can see we are saying that where if this exist or not so if this is doesn't exist then we can say undefined argument of type this not 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 we hit refresh now we get something this is tweet this is likes profiles that's good that's not I want let's remove this whole thing let's find out console.log Road 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 map one map 2 that's okay that's totally okay DV do 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 say if the user has liked or not so what I'm saying is user has liked if the current user ID EX exist then has light otherwise null conditionally where is this conditionally yeah now it's good it's conditionally with name name users otherwise this that's good and we can say has 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 we can do that let's find out if we are getting this thing here Ro dot has likeed okay so we have H likeed now but we don't have the tweets or anything now we can say tweets is tweets likes is likes and we can say profiles is profiles let's find out what it gave us not working let's go to the men yes something happened true so we have liked all of them so it is giving us two that's totally top 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 so we have light all of them I want to delete all of the tables okay why can't I delete this table no 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 false d so our cury 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 3000 now 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 top so we are getting all the results what we want and we can pass down the row do H light into like is equal to row dot is like 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 is liked as Boolean here there 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 has liked and we will pass this down into our main thing so if user has liked 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 all the yeah why is that let's find out in the in the cues here why here we are saying if current user ID exist then has liked 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 do 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 liked or not so we have to Define two equal and we will say tweets do likes. 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 that tweet this this ID is equal to this ID or not so for that what we can do here we can instead of doing this we can say DB do select from likes do where do where and here we can say equal likes do tweet ID is equal to tweets do 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 DV do select from likes where likes. tweet ID is tweet. ID likes. user ID is 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 chaining we can do end import the end and here we will do 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 here I think it worked if I remove this if I like this if 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 we operators we can use end operator and we can select multiple equal yeah that's good so that's how we have successfully faing the twiets we are getting the twists this is a fresh new tweet hit enter this is a fresh new tweet with zero likes if we hit if we like this tweet we 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 treer Orum this is my first time where I have tried derer 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 we refresh this everything is good and perfect we can also tweet this is a new Tweet now we want to implement a new functionality when we click this a new new model will open and then we will be able to submit a new reply to this tweet so let's build that part first of all we need a new model for that we will use ui. shed cn.com that's the thing we need so let's go to the app page here we have main component left side bar and right side bar that's good in the component in the client component we have did a mistake that this like button is used client okay but this DV is used server but as you can see we are getting every thing in this component from as a props so if you even use this component as a 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 dialogue so let's go to the twitter.com and we will find out how it works so you can see if we H over it you can see some a little bit of white color of 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 not the whole thing only when we click on this chat 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 WP this thing inside a fragment this is called react fragment and here we can Define our dialogue we can copy and paste the dialog code from ui. share cn.com car started in the dialogue not in the alert dialogue in the dialogue 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 dialogue also copy this and paste here it's good and when this is open when we 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 as child so that when we click over this button it will assume that we are triggering our likes so now let's go to our application here you can see we can't able to hold it so let's give it some if effects like we have given to the like button so here you can copy the classes same and we will use this classes for our button now if you H over it okay it is still not working let's refresh this something is missing here okay so our app got hang why is that Local Host 3000 and now you can see we can H over this like it like the like button we 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 dialog 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 we click this now it is much clearer let's do it 10 we can remove the blur 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 deply the Tweet so just we need to create a new server component over here but remember we cannot use a server component inside client component am I right yeah here you can see Server component inside client 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 Ser 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 going 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 like tweet 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 here we will create a new component which is reply model Orly dialog. TSX and it is a client component by default use server not use server use client R Ace here we can say reply dialogue here we can cut the whole thing and we can import the reply dialogue just like that save this thing now we need to cut this 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 the Tweet again inside this but and that that would be not a good approach we can copy the whole whole thing and we can show this over here so this is for image so if we try to reply this you can see we are only rendering the text and and 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 need this yeah we need the username full name text we need the date we need text and then we don't need this whole bottom thing so the data we need is we need the Tweet so reply dialog props 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 local 3,000 you can this happen sometimes when we are developing an 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 on the Local Host okay so we are not passing the tweet from here so we will say the Tweet is tweet save this thing okay so 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 or it is not opening here yeah we can see if we open this we can see this but we don't want this inside our 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 BG slate this is a new tweet B 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 BG PL 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 our AAR which we have removed by assuming it as a picture so now it's good we can give some space to it so M4 yeah so let's assume a big tweet create a big tweet generate paragraph 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 you click over here you can see replying to prel Sony so we can also show that replying to this for that create another division replying to atate and here we will show the username tweet. userprofile do 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 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 the simple input field we need to show the current user AAR as well so what we can do we can name it Flex W full items Center space X4 here we can create a AAR as well so instead of a dummy AAR you can show the original AAR of user now we have have something we can type it's looking good let's make it two 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 smm we are giving the maximum width of LG so instead of that what I will do I will give it Xcel maximum width of MD let's see what we are giving after SM maximum withd of LG okay okay okay if I remove this after SM maximum withd 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 let's assume we have a bigger reply which is gener 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 use form hook or something similar but what we are doing we are just we will just use the US state Hook and the own change this is simple and we can just use it reply reply text which is empty import it ising 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 reply text and when we unchange it it has event and we can set the reply text to event. target. Value just like that save this thing we have text area and now if we hit submit if you go to Twitter and we can show it reply button just like in the compos 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 tweet where is our 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 super base from our authentication Pro provider super base just like that and here we can say super base to 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 his like pending we can show his 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 apply 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 toast please log to reply to reply please log to reply to a tweet and if this is failed 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 as sync 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 a string just like that and here we will await DB dot insert which table you want to insert so we can say we we want to insert in the repes 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 this is must can say user ID which is string do 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 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 CH that's all we need here if you want you can let's assume you reply is HTML you are submitting Rich text into your database so you can sanitize or you can verify your reply text before saving into 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 to three or not we 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 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 Mt string or reply text do 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 do ID the Tweet ID is we have tweet do tweet details. 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 is reply dialogue or one 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 set is reply change and it is open which is is reply dialogue 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 toast to error something went wrong with DV 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 our 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 Tre if you click on the select record you can see it will select a record from the yeah so this is a reply we have submitted to this twet and we 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 count 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 H when this is H PG white 5 so when this is HED we are notable to say let's do it 20 refresh this and it will work sometime it code stuck now you can see we are getting this white here so let's do it 10 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 Local Host 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 Local Host 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 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.log hold tweet clicked this is hold tweet clicked and if we go to the reply dialog here you can remove this yeah here you can see console.log 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 you go to browser tools if you go to browser console this is our console you can see browser console mode yeah and if I click on this tweet if I click on this street and nothing is happening or is the correct console let me open web developer tools this or 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 reply dialog clicked whole tweet clicked 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 a 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 Local Host this is our console now you can see we are getting something and if I click on this hold to 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 Router 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 this tweet 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 nest route in the app directory we will create a new page and then we will redirect to there so we can say router. push this is backx which means this now we can string interpolate and we can use logic inside our string so we will say redirect the user to this tweet ID so we can say tweet SL the Tweet ID so tweet do tweet details. ID so redirect the user to this route and where we 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 twists there's the part comes this part happens when we are building something new with the latest tech St let's open this is is in Firefox Local Host 3,000 we are getting empty over here can we use a use router thing or can't I'm not sure so there is something router do 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 is working open the whole thing now if we 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 dialogue if we click this we are getting redirected to the Tweet so now we need to create a Ned route and we will fetch all the replies or the Tweet building there now if you search Dynamic routes next year you will land 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. DSX it will tender 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 side bar and we can import our right side bar both things 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 side bar and right side bar everywhere okay so if you go to here if you refresh this let's go to local 3000 and see if this is working and here we can Define our ra fce here you can see this is homepage here we will call it tweet 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 deply if you click here it will redirect us to the this is tweet page you can see it's good so now if you go to the main component and we can copy the whole this thing over here which is this this is man as well and here we will render all our twists not all the twists here we need only one tweet which is we are getting from const router is equal to use router which is from next navigation let'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 log the quy out and we will see okay so we can't use router here we can use the navigation but we want the cury so how can we get the cury okay so we can get the query from use path name and all the things available here so navigation here we have some things and we have use params use selector okay so we can use this use perams and let's log this out and see what it gives us use pams only works in client components is a use cting okay so it is saying that it only works in client components so now what we can do can we get the used server okay okay okay so we need the Cy basically so 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 the Genera generate static params page to learn how to generate params that's totally good but this is let's remove this and now we will log the perams and 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 it const tweet we will import our DB we will say select Dot from we 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 has liked or not so we need to find out has 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 tws 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 is user the current ID is user data dot user. ID if this exist yeah if user data. user. ID exist 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 the exist as well so you can see we are importing a lot of things and we are joining we are joining profiles who has submitted this street 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 pam. ID inside the pams so we don't need the all tweets from select this from tweets but basically instead of saying limit dot we can say where equal just like it where the equal is fs. ID is equal to pams do ID like that so it will give us the current tweet only so now if you log this tweet console.log tweet here we will see what we are getting tweet to yeah now we have the Tweet to so we are only getting the single why is not limit select from left Jo so we can do the we 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 CAU this we c one tweet we C our one tweet which is this profiles has like true because we have like this so if you go to our homepage this is local horse 3000 if you refresh this let's close this you can see this is a new tweet let's go to this tweet we have likeed this tweet let's remove our like click click here we are onto this page here we can see we have not liked this twet likes are null because likes are zero the user who is the author of this tweet 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 this tweet zero 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 say tweet zero to likes if it is null then zero then we can show the Tweet detail as well tweet to tweet zero to the tweets okay it is saying the Tweet is all the details of here so we need to specify what is it needs TW detail which is tweet0 do tweets it needs user profile which is tweet0 do profiles now it needs one more thing which is current user ID so we can pass the current user ID as user data do user do D it is not required yeah that's good we can do this it is still saying that okay so we can count the number you can say likes dot so it is giving us a lot of things so we haven't joined all the twits 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 we 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 or 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 tw or note 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 row 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 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 tweets 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 dat is Boolean so if this is true what we can do here inste of ating we can we can say query we can modify this query more and we can say this is let query DB do select all to this all things order this and we can also pass order by poan so what we can do we can say if order by is available then Cy is equal to cury to this thing cury do 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 string which is get single TW ID so if this is true then we can say cury is equal to cury dot where dot where and we can pass down the equal thing we can say tweets Dot ID is equal to get single twe so this is the ID so instead of get single T we can say get single T 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 tot limit and we can pass down the limit just like it it is very easy and after all we can say row equal to await Cy 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 TW 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 tweets and yeah here we will go and we will remove the whole thing we will say get tweets and here we will Define the current user ID the user data do user. ID the second thing we need is get single tweet ID yeah so we need the K single ID and what is the id pam. 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 twe dot dot twe Z dot has like tweet is possibly undefined so here we can say if tweet 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 to length to 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 Charmed you can see we are also able to show this tweet over here so we are showing one tweet if we go to Local Host when we click on home we should be redirected to home so for that if we go to our left sideb here we are sending the user to homepage so instead of item title lower case we can send the user to homepage so here we can say if item to title is equal to home then send the user to homepage 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 we are getting the new tweet we can like this tweet as well and we are getting the updated tweet if we click on home look at is is still not working wi set left side bar if item do title is capital home basically so to fix it we can set to local lower case and it will work like for now if we click on home you can see we are getting all the tweets if we click on this tweet we will get this tweet 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 happen if we 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 in sh 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 F them so it is pretty simple with fetching the replies we can say replies is equal to await DB do quy dot what we want to fet we want to F the replies and we want to fet the many replies here we can specify the extra columns we need for fetching we can say we want to fetch the profile as well so if we console log now console.log replies 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 switching all the replies we don't want all the replies we want a we close here we can say we want only replies with dist page so we can say the so we can specify some things here dot db. quy let's find out in the drizzle orm documentation how we can use the cury the documentation index say SQL operator where is this we can use a select but I want to use the query thing which is new so where is this query tv. query yeah this thing relational query so like this can we select and we can filter it or not yeah so we can filter it just like it so we can save where the equal operator import the equal operator which we have already imported we want to say that repes dot here you can see user dot ID just like that we are saying you repes dot okay so replies response let's do it we want to say replies do ID not ID we want to say the Tweet ID is equal to the pams do ID so now it will F only one reply with the current TW ID not one reply with it will fetch all the replies with 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 twet if we go to home and you can configure this home thing if you go to Left Side bar here we are saying that if the item do title is home then we are sending the user to back slash which means home now here let's create a new tweet new fresh tweet hit enter this is ref fresh to it we will click on this if we go here you can see our 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 we can see we have 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 replies do map we can say reply repes 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 the key of reply do 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 Tot so here we have over reply so instead of tweet what we will do we will cut everything and we will past reply do profile. full name reply do profile do username import this thing we can say reply dot when this is created so we don't have this buil 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 Tweet table as well you just need to create 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 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 we have created a new table but that's not necessary at all now this is our tweet text so here we will render our reply. 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 H 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 which belongs with this tweet if you go here if you go to this this doesn't have any reply submit a a reply hit reply and here you can see we have our reply and it is being rendered nice and easy code 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 quers let's submit a reply from another account uh I will go to my new account which is new page I will go to Local Host I will go here I will see two tweets I will reply I am replying to another from another account like this if you hit reply you can see YT blocks this is our current username and we are reply and here you can also see okay here not 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 twet and this is top everything is looking good to me yeah this is now one this has now two likes so we have learned how to fetch the tables using drizzle Orum 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 Club of.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 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 in another series thank you very muchlearn 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 nextjs 13 Tailwind CSS typescript and superbase key elements covered include designing the layout with Tailwind CSS managing the back end with superbase 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 pronal Sony is a fullstack developer and he teaches this course let's start learning welcome to fullish nous Twitter clone in this course we are going to build a fullish Twitter application it is a web application and the te St we are going to use is next year 13.4 version with latest server actions and server components we are going to use superas for authentication and for our POS SEC database we are going to use something called dzel orm for our database orm to make or 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. Shar cn. C you will find 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 typ script that is obvious part because typ script 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 watch all the tutorials on my YouTube channel you can watch the whole series and it will teach you a lot of concepts of next year 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 going to look after we have build it so if you have watched the the application and if you are excited to follow along follow this course and learn next year's 13.4 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 uh git terminal okay so you can install all the things you can install Visual 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 over application 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 Telvin CSS a lot and it will increase our productivity at least by 10x so that's why I love using telin CSS and that's why we are going to use telin CSS in this FTE 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 orm 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 at 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 sometime 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 so create next app at the 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 clone now it will ask us a few things you would you like to use typescript yes yes T 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 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 Al ultimate and I have made a ultimate blog application Udi 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 our code editor where we will write some code so code space do and hint 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 thing which will help us to make our life easier so now as you can see we are using using next font and here we are using inter 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 da because if you see in the package.json here you can see to run the da environment you just have to run pnpm Rand y Rand or npm Rand simp so as you can see we are using F 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 tape here and I will go to Local Host 3000 and you will be able to see how it looks so this is our basic nextjs application running as you can see now as I said we will use superp base for everything in in this project because why we are using superas 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 uh for our Twitter post so that it will be very easy for us to like use super base and it will handle all the complex stuff for us so we don't have to worry about anything so as you can see build and we can scale to Millions this video is not sponsored by super base 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 stch for building full web application and I love using super best so now as you can see it is totally free by the way you can uh sign up for a free account and now you can click on new project and I will say ultimate Twitter CL 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 featur super base offers so we will see all the features so you can see we have database we have storage we have age 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 AG functions it is just like serverless functions or it it is just like using versell API routes but it is much more capable of doing anything and it uses Doo as a framework of nodejs and we also have realtime thing where we can face realtime data we can get real time updates so let's assume you have some leaderboard inside your fully stake application then you can use superas realtime 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 going to need inside our project so it will take some time to provision the pro 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 our Twitter and we are going to copy this 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 trending 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 contain 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 excal 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 over 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 tabls 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 our database with our code so let's assume we are going to use an orm like Prisma to handle over 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 super base and plain stuff here with superas directly curing our database and directly mutating our database from our front end by using the super Bas 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 super base 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 G so we will we are going to implement all of these thing okay so post rute 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 time line which is infinite scrolling feature okay so this is the main feature where we can f 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 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 nextjs and super base and tvins so first let's jump right into building the UI part cool as you can see this is our basic next year 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 homepage 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 Redux native snippers this is a very useful extension which will give you a lot of Auto completion if you type rafc then you can see all the auto completion which it will give you but we need rafc even so this is so this is our homepage or Twitter homepage 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 we I if I refresh this it will ask us for I will sign up for a demo account for now yeah so this is the club of holders 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 excal R and here we will Design our whole UI we will understand it so this is our homepage as you can see this is our homepage 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'm 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 fixed width and now here we can see this is the sidebar so first we will make a division and we will give it fixed with after that we will make three divisions inside it sidebar this is the main layout which you can see this is the main timeline section and this is our trending 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 explod notifications all these things so Dash D Dash 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 D Dash and here we have our trending section what's happening so this is our trending section and this is who to follow section just like that so this is the whole UI 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 a scrollable and we will do all these things very easily by using telin CSS and you will see how much easy 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. hub.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 with thing so we can say class name is W full Edge full with 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 telin intellisense so you can install this so now we have with full Edge full and it is item Center and we will now make make a fixed width division inside it so class name maximum width is screen 1224 pixel okay this is good we can say with full Ed full 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 by default relative I think yeah so if you want to make a children absolute inside this division or inside this division then you can to give it relative so the absolute division will position itself absolutely according to its nearest parent that's how it work 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 Bar D into three so this is our sidebar this is our home timeline and this is our 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 side bar so it is class name now if you give it absolute with it will position itself according to this division but if you make it fixed withd 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 all windows height so we 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 I think and 72 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 H 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 throw them and we can Define over side bar 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 bird house bird house you can search 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 Twitter house I icon so here we can say bi home Circle and we will import this thing first so import from react icons /bi 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 /h now we have notifications notifications icon is kind of Bell so we can search Bell which looks similar to this Bell 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 envelope yeah so whichever looks similar yeah this is good import from react ion / hi2 okay so import it from BS now we have bookmarks and profile we will skip the 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 bi 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 H over this you can see this has the title and icon and we just need to render it over here so we can say navigation items. map and this is our item and now we can say render a division which has a key of item do 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 HF is also SL item do title do tool overc case like this and here we can give it some classes I will give it bz white of 50 rounded of 3 Excel padding I will give it padding of four and that's good here we will render two divisions first for the icon so here we can say item do icon just like it and here we can render another Division and inside this we can render item do title we can make it Flex we can give it item Center justify Center we can give space of X of two and now save this and let's have a look at the whole homepage 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 HF is Slash and this is just a Twitter icon so we can say PS Twitter now we have a look yeah it is looking good we can commment these two things for for now yeah also what we need to do is we can give it some class names for now m y of margin of y y means on the vertical axis so we can give it four M4 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 not so we can say when you H 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 justif 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 with 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 not here I think we can directly say so it will this class will also work on this item do icon we can say text is Xcel so it will make it a little bit bigger and I think it will 3 XEL 2 XL 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 what we can do we can say space of Y of 4 and and margin of Y of 4 yeah now it's good we should also give it P2 so it looks similar and also text of 2 XEL 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 excel yeah it it is exactly similar to the Twitter 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 for now we can es skipe that part for now we are just designing the home UI now at the bottom we have Club of orders here at the bottom so what we will do also we have this tweet button also if you see the Ping of X is a little bit bigger and here we don't have that ping so py is 2 and PX is 4 yeah it is good now I think it is more PX of six 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 do title is equal to Twitter don't render this when the item do title is not equal to 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 s Twitter now we have a one thing more here we have a tweet button so what we can see we have a button here which is tweet we'll design this button now we can say w is full rounded is 3XL BG is 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 tmin config so this is where we will modify so we'll 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 tellin config theme configuration now you can Define the colors like that so theme inside colors and you can Define the colors so theme 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 twiin 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 do documentation and look for the solution so now we have our BG primary color now we need to give it some padding so PX 6 py4 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 not 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 bigger so P4 would work I think because we have given it 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 give it margin for to decrease some width of the button 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 messages page so instead of this hi envelope we need a outline so envelope we need a 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 WRA 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 no it is not W full 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 xcal room so here we have a division so what I'm 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 B division justify between so it will stret those division to 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 M4 it is not at the bottom yeah so we will see what is happening here we will remove this myy 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 y4 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 as 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 you 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 bs3 dots 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 AAR we can make it busy slate 400 and what we can do here yeah it's good we can give it W8 h8 height and width this is already I think flex no this is not Flex so we will make it flex and item Center Space X of two 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 coders and here we have Club of coders my username and now he can say this whole thing and now we will see how it looks yeah so it is looking a little bit odd because we have given this BG primary but we don't need BG primary we need B transparent and the because of the text to XEL 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 EXs here we can give it text EXs and this is small and we can make it text to the left yeah 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 BG White and the opacity 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 tap this whole thing into a 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 two now you can see this is good but here you can see the text is bigger I think so we can give it a small yeah so now we have designed the similar looking Twitter sidebar we can make this thing this outar also bigger 12 watt yeah 10 would work so you can see that the phone 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 over 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 side barar 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 R fce 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 side bar in the main here left side bar just like it save this thing and now we have a separate component for our left side bar 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 side bar 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 lower M appm 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 contrl Z 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 save 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 we can see on the Twitter and let's give it text 3 XL font bold save this and we will see how it looks yeah now we need to also give it border left border right border left and right not 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 1 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 screen so now you can see it is taking the whole screen for Twitter and we have to give some padding to it and 3 XL is also a bit too much we can give it some 2 XL and let's give some ping 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 two of left yeah so we have to give it some padding to it so let's give it PX of 4 how about six now now it is good you can see this is our bottom whole thing and this a sidebar and this is looking good and the home is small small a bit so let's go into the page here we can say this is Excel this is good and now we will Design This compos box so for now here we can come and here can we 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 hit here it will be two borders 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 332 let's try this for now we will see what it and now it has a AAR which is the user profile and here it is the input which is what's happening the placeholder and now here we can write the hell lot of things so LM 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 is the character limit of Twitter Twitter character limit 2 80 characters okay so so it has two 80 character limit okay so we can now give it relative also and now inside it inside this division we have this AAR and AAR so we can make two division inside it first one is for AAR which is a W10 h10 height and width is 10 nbg is slate 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 to implement this this is pole 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 place holder is what's happening this has border of bottom 0.5 pixel and the Border 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 division 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 this has all the things like image icon GIF icon Emoji Pier 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 a similar button to this thing so we can copy this whole button for now the classes round 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 not 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 none save this now you can see this is cool if we remove this yeah this border is the color border is not working so we have to I think give 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 pedding bottom of four or the whole pedding is four we can remove this division rounded is full we can remove this margin 4 this ping is four is also a bit weird we can give PX 4 py of 2 W of full let's give it Max withd uh 400 pixel would work I think okay it is bit much 40 pixel and the text is bold font is bold basically text is 2 XL not 2 XL LG would work yeah it is similar to the Twitter one we have over 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 AIS instead of not taking the advantage of full height and now we can also give it some padding to Y forward 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 margin to 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 we 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 or4 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 this is a 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 placeholder is 2 XEL and placeholder color is also a bit dark so placeholder text Gray 800 how 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 P6 but we have given it a fixed height that's why it is not working so what if we remove the height yeah 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 top and bottom border and then it has some pedding outar 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 array. from the length of let's give it length of five for now do 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 AAR this division we have the outar 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 outar 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 space X of four and inside it we have two divisions first division here AAR only so here we can make another division class name W10 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 uh 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+ space on my make keyboard control+ space and if I hit enter this is AIT abbrevation and it will work like that so it is a name so we can say Club of coders this is my username Club of coders 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 it Flex item Center space of X of two of one one will work so this is our first one the second one is text so we can give it LM of let's assume 100 this is a bit much the Tweet can be this much longer I think yeah so this is what to be 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 to Excel or Excel would work this is media and now here we have all these things comment read twet like stats and this 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 two we can give it w full and that's how we have designed the single tweet and it should be rendering tweet for us and now let's go and now you can see all the tweets are being rendered over here cool but we have to tweak a few things for now we have to give it the ping of Y AIS so here we are giving ping X we also need to give pedding of Y so now it is good you can see this our 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 bold 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 give 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 T will contain a 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 blur back drop blur basically B droper 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 back droper 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 give 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 sticky 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 X is 4 which is good but space y of 4 is not needed two 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 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 our comment icon and let's import this this is our retweet search yeah we have a retweet icon import this from react icon SL aai this is over like which is like this will work this is the share icon no this is the states icon 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 uh instead of this what about justify around what about evenly you can try whichever looks good and I would go for justify start and Space X of 8 more space X of 20 24 20 would work now I need to give it extra of my2 it will not work let's give everyone my2 let's give my1 and it is also my1 yeah it is good My3 how about My3 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 so what we can do we can give it the top instead of full my we can give it also M top to yeah it is actually good and whenever we hover these icons there should be a nice looking rounded full let's give it this this parent round it full and the B is black 10 20 let's go for 24 now and only when we have over this otherwise don't make it look so let's try this also make it like cursor is pointer so it is not looking how about 50 yeah we need to give some ping to it now if we here 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 que the P mt2 will work cool that'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 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 isct to the base and this is the gray color 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 icons 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 bs3 dots we need to give this classes to this space of X don't need it here and it is good we can make it full width we can give it full width okay so not 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 padding we are giving it so let's see P4 so we need to give some more ping to it how about p8 no p y4 and PX six 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 width but you can Define some Maximum withd let's go for 512 Excel or a bit more Xcel a bit more to XEL 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 Twitter convention which is 600 pixel and we can make it is smaller 80 now it is good cool so it is looking perfect now now we need to design the right side bar so here as you can see this 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 rafc paste here so these all are server components because if you want to use client's components you have to put use client here like this because we are using next year's 13 version 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 our right section so this is also a fixed with so fixed now we need to give it something it is also Flex Flex column and space of Y of let's give it four 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 give 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 is pading of let's give it four and now we will find search icon here we'll find a search icon so we can find a search icon this BS search icon 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 AIS so we will create another division inside we have the 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 a 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 zero and we will make it height of full we will 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'm 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 0o and right Zer 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 zero and right zero 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 height we are saying that everything inside it we want to Center so we will Define icon and we want to center it that's why we are giving it flex and item Center and we will also give just Divine 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 none save this and let's see how it is looking so you can see this is our search so this is right Zer we instead want left zero so now you can see it is centered but we also need to give some extra extra pedding to x-axis so we can say the py is four good but we want PX to be 6 or let's go for8 now it's good and what we can do instead of division we can make it label and we can give it HTML for 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 fixed width so that's what we have to do here we can give it a fixed width to this section instead of right zero we can give it fixed with okay so and Edge 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 uto this has a width of 275 pixel that's okay but if we go for right zero 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 see this is relative and if you make it border of let's say four and now you can see this is to the left here but let's also so 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 side bar also the absolute and left zero cool and now give it this main component with full where is this maximum width let's give it with full it will take the full width instead of it will also take this withd okay so we need to make sure that it doesn't take more than this centered with 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 W is W is 275 pixel left side bar 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 1,24 pixel 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 the viewport it's good then what we need to do we need to give according to the withd not with full but we can give it like this is taking let's assume this is 100% then this is taking 30% this is taking 30% and the remaining is this 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 side bar is the width of 30% and the remaining section has the width of 30% yeah it's good but still it's not looking perfect we have to decrease some of the leftt high PX of 6 we don't need the px6 here PX of 4 would work and let's go for 20% yeah it's good so this is 20% this is also 20% 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 a too much of pedding here we are giving so I don't think we should give it pedding here we don't want to give the pedding 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% 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 sticky 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 side bar not the the the main component is not sticky the left side bar is 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 Al so 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 over tmin 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 Clos 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 grayish 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 9 90 yeah it is good it is good we will proceed with it now as you can see this is the search icon is looking a little bit weird so to fix this we can give it some pedding so this is our division which is relative so what we can do we can give it some pedding note here this is absolute division we can give it some pedding P 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 four by default let's make it 14 and also instead of top zero I would say yeah it's good but I will give some margin to top P4 yeah and now you can make it four so it will be sticky yeah you can see this is now good looking good okay so now it works four is a bit too much so I would go for to 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 as a blue border so we will also make this effect so to do that when it is active or 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 refresh this first no the border is not looking so border is primary and the border is let's give it border okay so we are giving border none that's why it is not working yeah 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'm say 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 H when this is Group H not H 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 this there is something I think Pier Pi first perer focus and then text of primary it may work okay some something is beer class Del before and after there is some class which I think we can make it work you can see group over thing works but we want when the item which is nearby is focused to do something okay so here it is so we will Define a peer class here we will say this is our pier and when it is focused it is visible you can say when it is in inval it 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 perer class and now we are using perer invalid visible won't work only previous sibling can Mark SP okay so we have to to we have to make it like this only previous siblings which means it won't work it will work like now this our this is our input and this is our and you can see okay so this is our input and and this is a ptag which is when it is invalid make it visible here it is saying that we have a spin 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 class name Pier Focus then make it visible otherwise it is invisible hello word 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 it text Gray and we are saying that text is primary so it will not work because telin CSS will mark this class as a priority so this will but not 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 Tailwind 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 watch sing part okay so here is our trending 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 the things here we can define a division inside division we have array do from another fake array we will create let's say 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 is item it is by default undefined because it's a fake ER so we can get the index for now and we can say here 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 900 and this is a bold text font is bold text is 2 XEL m y is 4 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 pading as well yeah also we can give it margin m y of4 cool and now now we can design a this section this section okay so this is a hashtag and Below we have number of T so we have two divisions div into two hit enter and here we can say trending item this instead of this we can say h trending I + 1 and here are the number of tweets this hashtag contains so how is this visible okay 35.8k so let's go with this 35.8k this has the color of grayish and this is bold class name font bold text large this has text is small text of gray save this and let's see how it is looking okay so it is too much gray it is also not gray I think it is neutral and we will make it 400 yeah it's good 400 will do the work and if we H over everything there is some background so we can also do that class name H BG white of 10 save this and now if you hold over this this is good but the pedding we don't want to give to the whole container we only want to give it to this and we can give the pedding 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 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 2 XL is bit much myy can be 2 P4 can be 2 PX PX can be 4 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 is duration now it is smooth a bit okay so now we have designed this what's happening section now let's Design This who to follow section another division here another fake array 4 map keys 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 go 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 scrollable now you can see this is sticky and the gone they are gone or I think there is another heck let's make this s sticky top zero it is not working because the parent container 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 hole with the soiler SK give it 25% now we can adjust the right m 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 scrollable 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 AAR this is a name this is a username and this is a follow and 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 AAR class name W10 S10 BG let's give it neutral rounded is full and that's all we need here and this is a class name Flex Flex column and we have space y of two this has two divisions first one is name which is other user and this is the username of user 1 2 3 4 okay and now this is a follow unfollow button so we will Design this button also so this is a basically a button so we can rap this button inside a button component or a button element class name rounded is full PX 6 py is 2 BG of white text is neutral 950 save this thing and let's see how it looks yeah it is much similar to the Twitter 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 text Gray and text is small it's better yeah so I think it is good but we need the follow this button to at the end so what we can do margin of left Auto this is a heck sometime this works and let's give it with full no it only works when margin of right how about 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 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 hack again what is that heck R this whole R these divisions to a another Division and where were we this is this Bo 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 X2 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 all these things are working so as you can see here I am in the folder and the app is running this is the 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'm 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 all the things so user can have multiple tweets this means 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 to 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 hashtag 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 has user ID and tweet 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 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 reply to a tweet we will save some text with the Tweet ID because why we are saving the Tweet ID in the reply R 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 give me 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 ID 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 ID and tweet ID both are optional both are optional so here this is a dbml language basically so this is the whole syntax of dbml language you can see how we are defining many 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 V is storing the username when this tweet is created who is posted this tweet and the likes a bookmarks and all the things and here you can see not null if this is the username is like this if the username is we want to be not null then we can justify it like that not 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. do/ 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 chair gbt to build a query for us because I don't want to manually create all the data inside our database so what I'm am saying is if we go to super base if I sign in now I can see this is Ultimate Twitter clone and here I have this is 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 this stuff manually and I don't want we want over productivity to be highest so for that we have to Leverage The CH GT you can see all the things are given here this is for storage this is for Edge functions super base is awesome I think and we will use this now so let's visit jgpt and build the cury so I will now open my another Chrome so now now I will open my another Chrome tab here so this is CH gbt and I will tell it that Q me the cury and I have already designed the DB so you can follow me just so I'm using zpt 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 dbml for the context like this and we will give it and now we it will you can see this is this has given us all the tables like this this is how much easier to use tgbt for us to write SQL now you can see idid U ID username email this is good and I think it is nice all the primary Keys forign 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 uh SQL editor create table you can see this is how it works ID B generated by default as identity primary key seted time St with time zone default UTC not null we will copy something from it and we will modify according to 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 users table and it will delete a user from our database when this is deleted from superas o table this is for the roow level policies this is handle new user 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 usern name 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 U ID primary key yeah so we need username text unique we can use text inside postgress whereare 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 author users table also I think if we use Google sign in then it is not required also this is not required const username length this is good we just need one thing here username and it it should be unique and that's all we need 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 usern name now we don't need AAR so it will values new. ID new. row user metadata is 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 UU ID cool updated it time stamp 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 Ro level 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 we will see if anything wrong with the security part and we will improve security for our web application okay so trigger on o user created it will be triggered each row execute processor public do yeah now we have a tweet uu ID it is a primary key so for that yeah it is also primary key reference so I think it's good p is ID Vare instead of Vare I think we can directly use string or not string text author ID is text created a timestamp now we need to do one thing more here this thing default not n this whole thing copy this for the time stamp part we will do this yeah this is hasht okay tweet ID uu ID 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 so this is for reference tweet hashtag so this is another table which means a tweet can have multiple hashtag and a hashtag can have multiple tweets so it 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 and 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 tweet we can say tweets this is better uh not here can where is tweet tweet hashtag is good tweets hashtags this is better programming practice to name your table like that tweets instead of tweet this is hashtag table this is tweet hashtags yeah this is fine now replies this is good here is tweets so be careful while 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 course but it will be fine if you used or not used here user ID good good good 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 instead of 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 constant bookmark is unique unique user ident twet ID 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 bookmark post we will not allow a user to like or bookmark multiple times or in the other words to save multiple rows inside our 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 to our database every time a new user is created this is our tweets table this is our hashtag tables this is a table which will Define a relationship between TS and hashtags table so this is tweets and this is hashtags like this cool now we have replies profiles tweets replies cool now we have likes this is also we are uh yeah inad of twiets we have tweets okay so this is good that's all the table we need and now we can run this query and and over all functions or tables will be created so click on run and it will be failed to run okay so let's see what is the problem here so it is saying that forign key constant replies user ID forign key cannot be implemented so in the replies so where it is here so ID 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 not null so if it can't be null then we have to Define or we have to say not null otherwise we can just skip null part yeah so now here we can say not null like this this is also not null a tweet must contain text here also this should be not null okay tweet hashtag tweet ID hashtag this is good not null not null good here also we will say not null here user ID can't be null but tweet ID or reply ID 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 time stamps we will use this whole thing here again yeah let's run it again and we will see what is happening so we will ask this error to chbt so that it will fix this for us now it is updated over so I will give it my new this whole query I'm saying that find any problem with this okay so it will say your modify query looks mostly correct but there is couple of issue that I sported in the reply table the forign key constant tweet ID reference to tweet table instead of tweet table 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 it to foreign key tweet ID so it is a foreign key okay so we are saying it is a foreign key so let's copy this thing if we can see the difference between the thing chg given us okay so this is uu ID cool user tweet ID now let's remove this and we will run it again repes user ID forign cannot be implemented so I think it is mostly because of this line because yeah uu ID okay user ID not null okay now how about it likes okay okay now it is working so what we have did is likes user ID forign key so so this is likes these both are uu ID we are saying that these are text that's why it is showing us the problem author ID cool a tweet a profile or we can say a tweet can have multiple users a tweet no a tweet can't have multiple a user can have or we can say a profile can have multiple tweets fix the TB 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 Tate and user now we have a forign key author ID and profile ID yeah but we don't need author and profile two things we can 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 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 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 idid everything looking good and now we should also have a trigger if 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 web hooks functions and we will utilize this according to our need you just saw how we have used CH GPT to create SQL cury for us and to fix the error and all these things okay and if you want this code let me just create a not here this one I will copy this whole thing and I will create a GitHub Guist so this is DB design dosq 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 read me file database I will save this for now I have haven't committed or post to GitHub let's let me post it 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 prel 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 subab base 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 section rafc I will press the whole thing here and this save this and I will import this here good to go now if you visit Local Host 3,000 you can see this is over 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. shed cn.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 telin 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 nextjs product with this UI Library you can directly use this command but we have already install all the things so we have to manually install this Library so first of all we will install this uh npm 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 telin 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 twiin classes so instead of using JavaScript so instead of doing C Braes and these brackets and all these things you can directly use clsx and you can Define logical class names for your telin CSS here we have class variance Authority it is for defining variants for your components like if you have a button which is primary button danger button or info button Etc and tnd animate is just a plugin now we will see how to proceed we have already defined this path so now if you open TS config.js 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 over Telvin CSS here yeah so we will copy everything inside the tnd config so where it is here we will use this so crl + a cr+ v so you can see container Center these all the things are defined for us already and these all 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 / Global CSS control+ a control+ V and these all the colors are being used here you can see variable primary forground 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'm saying is if you control press Z here a few times this is the color this is the Twitter color we have used so copy this color control+ shift plus Z now if 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 # 0000 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 and all the things now we have to do one thing more we have to Define this helper this will combine the clsx and the telin merge both these 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 dots 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 dialogue or we can say a model so that we can utilize our authentication for that so if you have previously used Twitter so if you are not logged in then it won't allow us to view anything and it ask us to first authenticate ourselves so that's how we are going to make this application flow first the user have to authenticate themselves then they can proceed and now as we can see everything is good but for now let's control+ close the terminal and restart everything so it will work pnpm rund there now visit your application refresh this you can see the T all the classes are gone why is that let's see maybe because if you delete the next folder here and there that's the problem restart the server refresh the page sometime this heck 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 a directory and find all the TS and TSX files find all the telin 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 over 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 font familyes font sense okay so I don't want it I want okay so 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 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 side bar where is our button here is our button okay so we are not giving okay so the primary color is not Define there's the problem so here instead of doing this here colors ring foreground primary yeah it should work so let's see the problem BG 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 will 29 155 240 29 155 to 45 to 40 and that's good this is the hex and this is the hsl so I want want 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 a less I don't like this thing this background also is not so 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 this variable into a hsl format 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 is 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 here into the colors input color all these things we have to modify border input rink okay so what we can do we can ask chair jbt to give us all the colors for Twitter because the chair jbt 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 jgpt 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 note 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 the 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 Twitter blue is Buton background and borders or accent colors okay the only color which needs to be Twitter blue is accent color okay okay so we have changed this thing body apply BG background text foreground text is foreground 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 so now you can see the border is good if you type the color is good yeah so you can also use the chair JP 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 dialogue 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 dialogue and I I think it should add all the things related to dialog so now we can copy and paste this command here and hit enter and it should add a dialogue button where would you like to install the components so in the/ do/ SRC SL components SL 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 dialogue 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 variance 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 super base Authentication next 13 so this is our authentication first we have to install this libraries so we will 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 superbase o helpers next year we also have to install this o react o helper so we can use all the hooks that are provided next just 13 is estable however the new app directory and server components are in beta check out our experimental guide yeah so we are using this app directly 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 environment file do EnV here do EnV not for now first we will check if we are using do here no so we have to ignore EnV file here first EnV now we can define a EnV do loal just like it so that it doesn't get tracked by our GitHub these are not secret next public means this keys can be public what can't be public are super Bas secret keys so we will see what are they in the future so yeah now it is good so your superbase URL and your superbase NN key we will find this key by going to superbase project so superb.com sign in in the ultimate loan 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 roow 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 have my NN key now we have my super base 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 middle Weare that will be called 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 super bation 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 base so we will also generate all the types so for that we have to use these things super base start first of all we will do super base in it now you can see the super base inside our application this is csql if you want to seed any data for seeding your data you can also use share GPT to write some queries for you you can use chare GPT always use CH GPT I would say to increase your productivity so now we will say super base I think it will startart the local instant which we don't need for now we will just use this thing if it works or not let's see it will generate over types in the library and database type dots okay you can use CLI to generate types but the point is I'm not using so first of all we have to install the super base here we still haven't installed the super base if we go to package.json we have installed the O helpers but we haven't installed the superbas Cs Library so pnpm install superbase CS this is how we create a client and now we can face the data so where should we generate the types so we I think we can generate the types in super base / database. types slts so it is asking us to install or to run the doer and then we have to run the super base local instance to 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 doer first install the doer for your machine so if you visit this you can download for your machine install this and make sure the toen is running fine and now I will open the toer so that we can run superas inside our local machine now if you visit the superas dashboard we are using the remote version but for development we want a local version 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 uh doer in that's why I want the remote support so super base generate types remote database okay so first login then we can use this command to generate the types cool so let's login npx super base login so we have to generate the excess token here so I will generate a excess 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 this super base we don't need it okay what I'm saying is first I will uh 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 base 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 Bas dashboard this is my ID I will copy this and I will copy here in the public yeah I will hit enter types subas to Let's create a file or can say a folder types now it should work 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 inms 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 it this can be null okay I'm not sure about that maybe we have did some mistake this is also R ID reply ID can be null tweet 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 another query then it doesn't override it again that's why the username can be null but we don't want the username to be null so we'll modify our database so in the profiles the username can't be null so I will say allow nullable so I will not allow this to be nullable and is unique yeah save this thing now we have dated our username table this is the must 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 dos 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 component in the client's component we can always use the superbas 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 subase client which comes from here and then we can p the data like this and these all data will be faced on the server so you can follow this repo for the whole example okay so this is a middle bear. TS which we need to create in the root of offer directory so middle v. TS go up copy this thing database to types what we can do instead of here we can paste this thing here or what we can inside the Library super base. types do 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 superas 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 super base provider which will provide the whole application uh and it will work like a context so superas provider. TSX copy everything and this is a client that's why we are using using uh instead of superbase do types yeah if you call it database. types it will be fine but yeah if we can call it superbase client database we are defining the types this is a context superbas provider we will provide the whole application or we can say we will rap over 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 use superbas superbas must be inside superbas provider and now we can use this use superas inside our application so we don't have to Define again and again and it will be only one instance of superas inside our whole application save this thing now we have to rape our whole application inside the super base provider here like this in the layout of TSX like this so inside the body we will say this is superas provider import this from superas provider save this thing and it will work now any of our client components base hook use super base hook to ensure they are using the same instance of superbase client 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 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 cat 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 log in now if we try to log this console do superbase do all the things Au do user get user it will give us let's AIT for it let's make this function as sync and we will log in the user here we'll see if the user is logged in or not save this thing and now you can see the data is user. data. user so instead of doing this we can see the data and the error and we can log both things now we have the user is null and error is missing sub claim or which means we are not authorized the status is 41 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 dos so to create the Google authentication you have to follow this steps you have to get the O 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 Ena for now okay so I think we can use the email if you want any other provider you can see their do DOS their dogs 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 they 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 authentic 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 dialogue we can create it here so we can see if the error. status is equal to 4 one 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. 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 dialogue here which we have created in the components so remember to import this from ui/ dialog so in the dialogue we have dialogue 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 why is that 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 local 3,000 you can see this is not visible now so we can say if the error do status 401 we have to open this so is open default open we can say if the error do 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 due 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 o model we can say not a folder it is a file o model. TSX here what we can do R fce this is a client component and to use a client component we can say use client why we can't use this as a server components because at any point we have to T something we have to send some data to our 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 to build a to 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 dialogue 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 false import the state here and we can say open is open and on open changes set is 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 directly 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 super base 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 dialogue from components copy the state import everything dialog and dialog content here import the dialogue from components from components from components save this thing so now we have a dialogue and we are entering the chck 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 we can say subscription dot not like that we can say Super base. O do get session dot then result if if result do error do status is equal to 401 then what we need to do is we need to open the model otherwise everything is good to go otherwise we don't need to do anything so just save this thing and that's all we don't need this o model anymore we have created all the logic we need for our authentication inside our superv provider so now this is good to go we can remove this components because there 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 log the result okay where is our local host 3,000 now you can see we got two things we got session 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. data do 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 our dialogue dialog overlay background at BG background we can change all the things here if you want you can see dialog trigger dialog content header footer title description cool so if you refresh 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 all look like Twitter so BG PL give some ping to it cool now this is a form and we need a 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 du or S3 please sign into continue give some classes to it text LG myy 4 save this and let's see how it looks no it's look good myy 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 we can make it gray somewhat 200 that's good oh we can also give it margin Y 2 yeah and what I need is M bright Auto the color is not looking good to me this is Twitter color but this is not looking good to me so I will say BG BG white and text is black I want it to be end so for that what we can do here is I can drap 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 butle will at the end text is text should be white white when text should be white and when the Border should also be white okay so what you need to do is to make this application beautyful you have to give some time here you have to select all the colors uh without using sh GPT because we always want to make sure that our app looks good inside telin CSS telin config inside the styles. CSS where it is inside the globals CSS here you should carefully Define all the colors and that's how it will work nicely otherwise you can see it is working OD 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 a default color in the future I can go for different color but for now I'm 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 h properties everything seems perfect instead of text gr I would go for 900 okay so and for our homepage what we can do here so for our homepage we can give it text white here so it will work good now our text is white instead of this tweet wherever we use the primary DH 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 tweet twitter color we can say Twitter and we can use the Twitter color hex Twitter color X 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 own submit it receives a 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 we can use State again use State snippet email first of all it is empty set email to whenever this state is change so on change ites event and set email event. target. 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 here 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 superbase function which is superbase do. 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. RM 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 is 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 we pass the username in the future we will also check if the username is exist or not first check if the username exist or not okay so we also need to show some TOS to users for that we will install a new library called sonar it's a great Library you can visit the sonar npm you can see this Library render a toast this is a beautiful toast and this is the same toast I'm using for my website Club of coders if you search Club of coders so I'm using this for my website and I can recommend it it's a great and awesome library to render the TOs 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 base 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 access like this error like this username already exist please use another one we have to check this so for checking we can find we can say superas await superas Dot from profiles Dot and make this function as a Asing 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 super base docs so we don't miss anything so in the fasing 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 accept two things column is username which is also a string and the value is which we have used usern name dot let's stream it if the user has typed any wi space we can find it it provides us data and error if data exist and let's console.log the data first of all and we can say username already exist 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 Avid this also we can Avid 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 our application refresh everything so we are making sure that everything is good extra attributes from server CJ shortcut listen okay I will will use my email which is Club ofers gmail.com Club of.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 states we have to use here uh button or we can say yeah we can say is 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 cod.com at 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 exist please use another so in the data you can see we have selected and we got nothing we got nothing so the array is empty so if we can see the data do length is equal to zero or we can say is greater than zero then show this otherwise don't data and end data do length is greater than zero then show this and return from there otherwise login the user with email now here we can remove everything let's also give some space to this input class name M2 now you can see it's good Club of orders.com at cmail.com Club of coders 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 we go to our tables and this authentication and this sign in with OTP also should create a trigger to create a username which we have passed as a data so we should see a username inside our profiles let's see yeah so you can see we have a club of coders username inside our profile and now we are signed in inside of 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 user which we have faced now you can remove this we can remove this we have successfully created the 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 US so I should have received a magic link for signing in you can see 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'm 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 laws inside our subase provider here we have created a dialogue 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 functionalities the like functionalities 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 our data and modify it and can Fage it so we don't want that so we will go to the superbase 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 tables have row level you are allowing Anonymous access to your table so we have to enable all to level Securities so to do that go to authentication and 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 cury but we are doing it manually because we don't have many tables and we can do this manually it is easy we we have enabled the roow 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 is string have privilege 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 Ro 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 run there and we will take a demo of 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 nextg features that's why so let's go to Local Host 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 zoom so let me yeah so 150% 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 onto it nothing exist for now the trending part the home to follow part 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 superbas provider so here we are providing everything okay and if we try to tweet something hello word 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 dialogue set is open yeah so we are logged in basically so to check if we are logged in or not console.log we will log the current subab base user so here we will conso l subab base. o. user dog user and that's all let's log 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 get session let's see the get S thing okay this is also returning the promise so what we can do we can look here we'll check the result here we 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 the authentication I think we can use something called server context or server session to see if we are logged in or not so now we will implement the TW functionality if I tweet something here or let's say I copy some paragraphs so this is the R cost extension you can also install this it is pretty handy you can install this it's great you can directly copy low MSM you can also do the confet 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 functional so in the main component this is our home this is our input text and this is our tweet button so to treat composer we will create another component so recently when I have created or when I have started building this street clone next has released a few more features like next has 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 server actions you can see this is how we will create a form and we will declare this as a server code and we can directly you can see save to DV and this is all running on 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 in 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 not we can also do it like this this is nothing bad in naming like this and we can say compos twet and this is a server component okay and what we will do rafc compose tweet okay so we have renamed wrong compose tweet so this is our compos tweet and what we will do we will just use the latest nextest server actions so as you can see we can face the data like that and we are doing that in the superas provider here you can see this is a client component you can see this is a client component okay so we are not fetching any data as for now so we will use this technique to fet our data directly you can see you can directly F the data we can Cas the data using the K 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 git static propes 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 TW it like this or submit to it you can do is submit to it also or save to it in RB whatever you want to name it save submit to it this will take a tweet text tweet and it is a stram simple and it is a used server you think you can see this is a used server but if I think we have to update our next year version because we are I haven't updated anything after after I left building this uh in the like past 2 months so this is the version we are using 13.3 and what is the latest version of next year next sh let's go okay so we I think we have to go to the GitHub so the latest version is 13.4.2 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 not here okay so it is uninstalled we have to do it again because I haven't saved the thing yeah now you can see next sh 13.4.2 so if you are watching this tutorial please update this thing otherwise the server extion may not work I don't know so you can see we have removed the 13.3 version and we are upgraded to next 1.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 compos we now we can use this thing so let's comment it out first so this is our server thing and we can get the data like this we'll 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 over server actions action and the a 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 exess like that inside the component that uses server components and in the separate files Cod I just want to know how how we are getting the data so this is the data and we are doing a item and it is getting the data from cookies but we want to know an 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 let's see 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 use 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 Out book Mark functionality we will use this thing and you can see this we this is saying that use verel KV which is a new feature or we can say the new integration in verel which is a KB or we can say the radi database inside under thehood it is using something called upage This is a serverless data for radi you can have a look at it if you want yeah 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 form data just like it and we will see how it is working so this is our form data and we will console.log this and it will console dolog in our server here not in the client in the browser this will log 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 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 action form data and form data good why it is complaining so import the compost 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 the screen is smaller so here we what we can do here we can use hidden and only be visible when the screen is greater than large screen we can do the same for right side bar here we can see this is hidden by default and only be shown after the screen is larger this is how so now if we refresh this you can see this is hidden so what we can do we can do after Excel so if the screen size is extra large hide both of those thing now it's good but you can see this is also breaking this thing and this is overflowing from the container so which is where so we have to fix some styling in our home so if you go to the main component okay so let's commment this out this is whole thing so let's remove this thing and yeah now it is taking the full width we can also do only after the XEL the width is 50% otherwise the width is full like this so now it is good you can see it is looking good but still when the screen is too small this is over flowing so we need to fix this thing this twet list so for the inside the here so let's give 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 be hidden we want this to be content 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 FL to be hidden we want it to be contained inside this so it is not contained it may because we are giving some fixed width to something okay so this is withd height and 10 this looks good to me but let's wait for some fix here yeah it's still broken so we want to 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 if you comment it out not this image where where is our 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 the 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'm showing you how I'm fixing this problem so you will also get the intuition behind everything how commenting this out border rate 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 second 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 thing later or I believe we can fix this by making it grid sometime that helps last try otherwise if it 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 withd 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 mix with when this is greater than Excel 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 word and we we should be able to see something here form data so for that we need to define something on submit or I think action which is submit tweet and this is taking the form data yeah so this is the text and the form data we don't know what is this but we will see if we TW 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 we try to submit this there is still nothing type is text action form data okay this 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 any is 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 script is not happy so to avoid that you can use as any this is a just temporary fix I hope next sh will fix 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 page which you can read over here you can go to log you can read that this server action is is still in Alpha phas 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 Pur us so we can use this thing but do not use this thing in production because this thing is still not 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 word 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 so put the name attribute over here and the type attribute over here so now it is working you can see Hello word server actions and we are getting all 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 dog 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 tweet then simply return and if this St is exist we can directly insert this into our super base table so we can say Co data and cost error we can say subab Bas import the subab Bas client but here we need our server subas client so for that where we can get our superas server client so inside the app directory layout this our superbase provider let's see if we have any superbase server client so first I think we need to create a server client so using super base with Nexus app router so this is the what we can say this is the blog article which we have followed to build our subab base authentication you can see we have also created a middleware called something this is a create middleware superas client and yeah so this is how we are getting 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 pause 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 superas import the database okay so it is being imported from o helper Nexus create server subab base client this is what we need create server subas clients and import the cookies from here I think we don't need this thing and it will ask us to something okay so create server subas client how about this so I think they have also changed the documentation and this is not exported from o helpers Nexus a lot of things have changed create server action client what are the create browser create middleware create route Handler create server component superas client so this is what we need create server component superas 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 Bas to from so the 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 table hashtags likes profiles tweets so inside the tweets we need to insert a row so tweets do 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 subase do o dot so first we need to get the user so here we will get the user const so await superbas do. get session or get user I think so it will return as the user which has data and error so in the user data we can say this is the user data it is user error if the user error exist return and if the user data exist then log this thing so we will log this and we will see how it is working first we will go here we'll tweet and you can see we are getting the user data so this is the user ID we are getting in 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 tweets 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 which is the same ID which is here we are getting so now we can see await superas do from and we can say tweets do 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 our things here ID will be created automatically so profile ID is user data do user. 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 uu ID and we can generate it by uu ID from the crypto and it is saying that form data entry value is not assignable to type string so tweet to we can convert this to 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 action 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 refres all our twiets so if you go to the main components here we are getting the twits so this is also a server component so what we will do we will create a con get tweets this is a server components and we will fetch all the tweets from our soab 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 subas server C just like that save this thing we will see if this is working or not remove this control 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 tww merge here so instead what I will do I will create a new library called superbase here super base. TS I will import everything inside this because it may it is conflicting with the client package which is this tailin merch and the CLX clxx package so now it is not conflicting and here we can import this again from our subas server client and now it will not conflict yeah you can see Hello word this is a new tweet we will tweet this so it is saying error something went wrong okay why it went wrong because of this extraction we have did 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 base server everywhere without getting worried so I think we can create create a client hook also and we can use this remove this and super base client import this thing we are using the database and here it will need superbase client new superbas client it will need the superbase URL which is EnV import can say the process. EnV dot it needs first argument is superbase URL so we can say superbase URL and the second one is process. do the subab key here we will use the secret key subas secret key which is a key that has privilege access to all the rows and it can bypass the security of row level secur we have 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 stake now we can remove these things we will try this thing first so I will now go to EnV here we have next public superbas URL this is the same thing which we will use here and this is the next public NN 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 subase secret key and I will go now to superv dashboard and I will copy that key here so in the API so this is service R this is what I'm talking about and I will reveal this I will copy this and I'm hiding this because this is a secret key and you should also keep this secure so now we have superas secret key and we have superas 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 super key here let's L this thing out so we can see what is happening here process. EnV do 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 contrl Z now this is good so we have to use this we have to use this Con to best we have to create this again and again we can't use this only once so we have tried it and we have tested it 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 a tweet we can tweet basically so this is a tweet and if we 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 tweet because if you go to the main component in the main component we have a main form a compos tweet here we are submitting the Tweet just like that it is saying that o user yeah Miss so let's let 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 and error console.log we will log the data and 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 is 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 the server actions so if we showing error on client in server actions next just how to handle the errors so we will see how to handle the errors okay so we can submit the error and we can do like this cool we can return anything we can return the data and error from here so what we can do we return data and it just like that and here we can do this thing action Asing form data await action form 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 a data you return from an action so put it into the state it create R if ER set there would also be built in thece P mod 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 or now and it should give us some data or the response and we will print out the response I'm not sure it will work or not but 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 for 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 errors just like we handle in the client component if we 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 pro store server action and form 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 that trpc is still ahead of time if you use trpc you will life 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 not so first we will say use client and we will receive the propes in here like this we are typing it and we will say we will receive a form 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 errors everything let's install the package first pnpm install son this is a package which will help us to show some toast messages and nice toast messages so you can see the torch by 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 we'll say props to 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 for 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 this things let's copy this and paste here simple directly I'm 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 here is our data and action Dot this is our action and we will pass the data inside it submit 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 years so we can we may face more such a problem in the future okay so it's a functions yeah now we will paste it here and we can say as any we will see if this is working or not but there is a chance that it will not work functions cannot be passed directly to client components unless you explicitly expose it by marking it with Ed 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 return value the action must be C from a client component to toties 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'm saying is if we remove this thing let's refresh this and now it's good it's good it's happy and if we do this it's happy yeah and let's try to submit something hello word okay so something so are we getting anything from here or not basically this is this is working we can pass the server action as a submit tweet and here we are calling this thing but I am not sure if we are hello word server actions yeah we are getting this console.log rest okay 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 th do eror is there then to do error and we can say res do error do 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 do Suess 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 super base provider this is our client component 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 St we can create a client component 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 an API which is working yeah I got this this is just an API so you still have to do this things here so to. error is not working so let's console.log let's see what is happening here there's do error and if we try to hit it is it is being l but I think it is been log 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 console. Lo I'm not sure how this is we are able to see the conso Lo 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 it wrong got it now it will work it will work now yeah something happened this time something happened good let's try it again we can WRA this thing into try catch the whole thing if we hit the Tweet yeah now we are able to see 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 we were facing the program so now we can remove this and now we are getting 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 trpc 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 viers so now over this is saying that it violates 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 our tables we need a secret key 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 base provider and I think in the super base context somewhere we were using in the library in the middleware yeah is good so I think we are missing something we need to create a server client which will handle all this stuff so super base client this is not what what we want so from the JS Library what I'm saying is from Super Bas JS here we have super based client and we need to create a server client this super base 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 superbase client superbas server client you can say which is confidential and which will use a secret key so super client you can say this is a new superbas client and it will accept first one is superbas URL so it is in the process Dov do superbase URL and the another thing is superbas secret Kee so process Dov do 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 base URL is equal to const super base secret key this is a secret key which I I have shown you already in this in your subase table editor in the project setting in the API this is what is secret this key has the ability to bypass Ro level security so it is secure and you can use this thing process. env. superbas 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 we can return a message super base 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 what we can do here we can use this and here we can use this so it will not complain now so it will not complain now we have our super base server client and here instead of superbase server client we will use the superbase server so to insert into our table we will use superbase server from twiets like this and to get the to get the user to get the user we need to use the previous super base thing what I'm saying is Con super base is equal to the previous thing which we have removed create server component client this thing it accept cookies and it accepts headers so this is our client component this variables know that we have loog in no node so subas client here we will say superbas client do.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 post error so what we can do here is post error it is complaining that now we have two things data and error error has message but here error is say said to be post error but here we are sending the error IND differently so as any does it work so a typ 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 POS error or the error can be the error object which has message so now let's try this and this should work this time hello word if you create a tweet superas 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 superbase provider I think here okay so this this should work now click on TR superbase 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 wrongly it is s e c t it is a conf confidential key and you should not show this to public I'm saying it again it is a very confidential and it has all the access to your database and you everything so this is superbas secret key and this is next next public superas 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 we so that's how we have where is this in the compos Treet 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 twet let's do it again copy some LM MSM a long paragraph Maybe so you can see this is a long paragraph if we tweet this this TW tweet is sent successfully and in the network tape you can see all the request these all are the request which is working on in the back end 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 okay so now let's close this thing I just want to show you that it is basically sending a API request nothing much and here we are able to see our tweets we just now how to F 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 tws function first we will create our super base server client and 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 super URL everything is good and here we have our superas client 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 s sync function and here we have over superas server client if subase didn't 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 super server we just need to fetch all the tweets for that I can show you the example how the data is being ped so in the fetching you can see get data here we are fing 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 super base gives us two things data and error we can await we can say super base server not secret key server Dot from twits 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 twiets you can see you can read the foreign table 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 and 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 secate or confidential thing so it is ID updated at username profile so we can select the username and full name basically for now so we can say Here full name and we can say we need the username 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 put to Avid 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 of ERS and the name is null you can see the full name is null and we are getting the table as well you can see we are getting the profiles and we are getting the main data as well to so here we can say what it returns so it will be type save so what it returns so here if you over over it you can see overrides the type of return data so how to do this let's see if the subas Dos has anything related to returning the sub base returns type from table type script TS with super Bas yeah so here you can see export as sync 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 want to show the correct response here I think there must be docs related to returns 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 a string or null 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 for 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 Prof files 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 over over the data you can see we are getting something but in the twist you can suggest what you need it is a row and it is also Arrow now you H 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 H over it you can see the profiles is now an array not 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 zero element and we go to profiles and now here we can print the full name and but we 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 ERS and N which is the first element of our thing so we are getting all the things we need and now we can return this all data and this will be nice and easy so we 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 not available okay treats or we can show server something wrong with server something wrong with the super base or we can say the server and here we want to show the data if it is available so if we can say data do data is here so instead of data we can say the return data or the response response. data is available then rest. data. map directly and here we have our tweet and inside our tweet now we have a tweet ID you can see everything is type safe now here we can say tweet do profiles do 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 a DJs library for it and the relative time plugin so if you search DJs we will use this thing so go to new terminal install pnpm install DJs and if you search if you go to the documentation display and time from now so it requires relative time plug-in to work so if you search we just need to also import this thing so what I'm saying is import TS from TS import relative time plugin and you can what you can do here you can djs. extend and you can extend the plugin like this so import relative time from this and now you can extend this thing and now we can use this format here from now so here we are what we can do TS TS here we can give it 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 tweet. 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 a tweet let's copy some another low M some now tweet this tweet sent successfully but now this is not refreshed so we have to refresh this and then it it should be available okay so it is not available why why is this so let's log this thing should we should have three tweets for now more than three tweets right we have three so here we should also have three tweets but it is not showing us three twiets wi is that console.log we can always use console.log to get what we want if press this you can see we are only getting the two tweets as for now okay it may be because of the caching you can say this we are hitting the cache so we don't want any caching enabled for now 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 revalid revalidates the data at a specific time interval on demand revalid data based on the event such as an update yeah to it is fing and next it will deil it yeah so we can do something like this so in the next catch we have something so in the revalidate tag here we should have something console.log revalidate t Okay so this is the API route I'm 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 not hitting the default so when we have created the Tweet we are on to revalidate the data so to revalidate the data we need to we can directly do 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 devalidate 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 this thing Dynamic data FES are F request that specifically opt out for caching Behavior by setting the cach option to no store or revalidate to zero that's what we are doing we are revalidating this to zero so instead of here this is our main component so inside of defining the revalidation 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 twiets because we have disabled over caching if we try to submit again we are not seeing we have to refresh this thing we able to see two hello words now yeah this is hello word we are seeing to hello this is hello word second tweet tweet said successfully we should see three hello word now if you hit refresh hello word hello word hello word to yeah it's working so we have disabled the caching for now you can see the cach is missed and it is taking some more time now what is our main concern is when we submit any tweet we want to revalidate the whole thing okay so revalidate the path not path we want to revalidate or there is some called mutation success mutation in the compost it let's go to here sub server from insert when this is successfully done you want to refresh the page so router 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 nexj features use router H yeah this this is a thing I'm saying in validating the cash server actions can be used to revalidate the data on Demand by path or by cash take what is this revalidate tag here so if we are using the nexts API routes then we can revalidate a tag like this but we want to do inside or server actions that's why I think we need ralated path so I think here we can revalidate our path revalidate what it is saying revalidate no this is not revalidate the path and it will accept the path as a homepage so now if we submit anything yeah you can see that we haven't refreshed and this is automatically getting populated Auto revalidate tweet you can see we are Auto revalidating this thing so this is working nicely now we can remove our conso log which is here in the page in the main component we can remove this thing we can also put this thing into the separate component or the functions in the app or in the library create a super base create a new folder I think super base in the create a new file get tweets. TS export conk 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 form HTML cool there is something called a type reset which will reset everything thing you can see this is action. PHP the page if we try to do at theate submit this image is this yeah everything is good but I want to reset form which we can basically this is a client component you can see so we can just do it directly what I mean with 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 a reference to this I haven't use 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 send the Tweet we can click this button like this it will this is a tweet with auto reset hit enter you can see it automatically reset over four 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 may be hard for you because I know next year 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 site so if you hit refresh then you will see all the tweets rendered instantly or like it is not being rendered on C 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'll 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 a smaller case so here I will say left sidebar like that we will also auto update the Imports as well so here you can see this is looking good so that we we have consistent naming in our whole application here we will say main component component yes let's change this here we have a 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 its return type is not a valid CSX element let's see that okay so we have to if we remove this this is not working okay so maybe we need to do use server here then it will work and we can also have a look at okay this can't be here I will search and we will see how this works so in the a router we have file convention error loading page.js this is export default function and what we need to do is we need to find the server components functions next sh server components 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 nexs has some type for it server no okay so to use ASN server component with typescript 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 see 5.0.1 and it is not updated that's why we are facing that problem let's update the typ script as well we don't need typ script as a dependency we can use it as a d dependency and types react is 18.2.1 this is also not updated so we can put all these things inside D dependencies so open a new terminal because the project I building I'm building it for like 2 months and I haven't touched anything for 2 months 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 add as save da and we will update all these things inside our da dependencies also the type script let's remove all the 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 point8 yeah it is higher so now it will work nice save this and now if we hit the refresh let's pnpm R again and if we reload our window now our error should be gone because it is still here let's search in on Google and see if this works or not so it is showing that it is Asing 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 type drought 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 maybe we are not using the version which we have operated to so here we can and select our typescript version to use workpace version 5.1.3 which is this here 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 we have 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 typescript version and use the 5.1.3 version and it will be fixed or you can use the use work workpace version as well also update your react types both so inside package do this version and this version these 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 we 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 so 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 tws it is for our timeline and things are now good to go so now we can create our other 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 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 entering everything so first of all we will create a new client component which is tweet tweet. TSX we can also update this form client component so we can say compose tweet compost tweet form and then we need to also update all the namings I'm fixing the naming compost tweet form like that now we can also update this props it's cool and in the client comp compos TW form and here we are importing not this compose tweet form so it is correct and now it is good to go we have fixed over naming we have fixed a few things here and there so in the now we need to go inside main component so here is our tweet RFC 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 over ID as well so we can say key is tweet. ID and other than that we can pass the whole tweet as a propes so tweet is equal to tweet and here we can say we are accept accepting tweet and this is tweet props so type tweet props is equal to tweet and here we will Define our tweet so let's H over this tweet and we can copy this whole thing or what we can do go to k tweets and here we are returning so this is our type so copy this and this thing import the database from library super base types and here we have our bit just like this or we can define a type and we can use this everywhere so what I'm saying is type tweet type so we are sure that we are using the same thing here and there save the thing to type and we can export from here export type to type and we will use this over here so instead of doing this it can do tweet type import the other things as well these icons CR X and that's how import the DJs 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 good 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 like feature is nothing we just need to insert a row inside our likes table so if we go to super base or our project dashboard and here is our tweet clone in the table editor here you can see we have our likes table here we need to insert Arrow insert some data we will say who the user so who is the user who has liked 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 likeed this tweet 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 the users who have likeed this post so we will say select all the users from likes table where the Tweet ID is this simple so now what we will do here we will create another server action so this time we are new 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 we are committing or 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 state by waiting for content to load before transitioning to next so it's good you we can take a reference to this what is this is gives us 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 tab cool just a 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 what 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 click we can name it Button as well so this is much better so when this is Click you can copy the whole thing I will Implement a function called like tweet 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 toe it feature or like tweet function as well is equal to a sync 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 superbase URL and superbas secret key then we need to await superbase server Dot from we have likes table dot insert and it will ask us to insert some thing okay so we here we are not defining the database that's why it is not giving us Auto completion now we should have our Auto completion yeah we have Auto completion so here we can say random Q ID the Tweet ID is which is passed as 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 called use user this is a o helper which is given to us by react it gives us two things I think it gives us user which can be user or null okay so here we can also make it condition if the user exist then only like this to it otherwise don't like this if the user exist user and user do ID exist which is by the way exist if user exist then like this tweet otherwise toast do info or we can say toast do 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 string you can say we have tweet ID which is a 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 devalidate or we can update our UI that it is liked that's how it is simple so here we can import and we can pass down things here tweet ID is tweet. ID and user ID is user do 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 data and error and we can also log this so it will be more descriptive so here is our application if we click on the like button so we are liking our tweet ourself so it is saying please login to like a tweet which means the user is not defined so we can look 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 signed in y user is why is user not logged in if we can tweet yeah if we can tweet which means we we are logged in then why it is not showing we go to application Local Host so there is some there is not other place where we have used this so if we go to our context our main context where we have Define all the logic for authentication which is in the app directory we have components we have library in the ab directory yeah we have superbas provider here we are using everything yeah the router to refresh is a thing which we can use to refresh our router Super base. O so I think we can use this also we have to use this state create browser superbase CLI and then here we can call this whole thing we can say superbase do get user do then 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 if do data which is data is user then we can say rest. user data do user. ID otherwise we 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 of data exist and this exist then do this okay so what it is saying is having some problems with that const user is equal to r. data do user and here we have our user we can say user do ID like that yeah and we can show a loading indicator when this is being phased but we will see what it is you can also show if this failed so we can say cash cas P the error and show a toast message authentication failed and instead of doing it in line 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 this like okay something worked this time and here we can see or like that's what I'm talking about if you go here and user ID and we can reference this to ourself because we have likeed this street and you can see we are able to see and we if we go to refres this pis we can see select a record okay so this is a tweet ID and we can find out which tweet is this we can filter our table with the Tweet ID so you can see Hello word we have liked hello word and let's like this time this whole text if we click on this a new like row will be inserted into our table which you can see and this tweet is the long text you can see so this is how we have created over main Logic for implementing like now what we can do here we also have is like pending so when it is pending we can show three dots or something we can disable the button if it's like it's pending and we can change it to a red heart if the user has lagged it or not so as you can see this is our project and here is our app if you refresh this all of our tws 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 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 uh what is the property I don't it's hidden sticky and then after Excel it is flexed yeah so it's good but I think the hidden property dewind so I use so much that I forgot what is the visible property so it is not visible I 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 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 H screen we can give it 90 of the view boort yeah now it's sticky and it's good 90v Port 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 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 let look it's looking good so where we were we want to implement our like functionality we want to show all the likes so there are different different approaches how we can show the likes on our timeline so the first approach is f 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'm worried about if you f for each post you have to send a lot of API request 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'm saying is let's Implement that so if you go to the main component this is our server component and here we are getting the twits and the other thing we want to improve is this is super base and this is get tweets instead of get tweets we can rename this two functions or queries or two different things so we can make two different things so this is for queries Q to re yes and then what we can do we can cut this thing because this is a mutation this is a database mutation so inside superas create a new field called mutation so we are separating out cues and mutation now this is good okay and the other thing is if you go to the queries this is also used server and this is also used 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 subase server for that we also need these things in the index.ts we can import and then we can import the super based client as well and for the for the fix we can do as string and as string super based server client so this is a superbas server Library okay so let's name This superbas Server this is good so now we can use this thing over here so we can remove all of this we can import like this sub server from here and we can import the random U ID from to 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 we have 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 we want to F the likes count with all the tweets we are fing 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 superas stage boards so let's go to superas 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 twists so here are our twists 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 our tweet okay so we want to query the count also so for that we have to look for the documentation inside API docs here we can see how to get that we can also paginate we will do this uh at the end of our course what we will do we will fetch only a few twiets for once and then when the user Scrolls down we will fetch more twiets so read a specific column some column other column other table for and key good but other table is fix and we want to with filtering okay so we can this is how we can filter also insert a row insert menu update subscribe to changes read for in tables so this is what we want to do let's assume we have likes table then we can fetch who has liked this tweet or who which TW 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 lik table and in the likes table let's go here and the forign 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 we are getting any error or something I think this will not work but let's try if we were using Prisma or some or that's another thing but let's see what it gives to us data and error return data yeah column tweets. likes does not exist yeah 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 user ID so we can fish the user details or the author of the Tweet fet the author details who tweeted this twet on the other hand we have our likes table inside we have two foreign 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 that so here is the thing we can't directly face the count of the tweets which is related to directly tweets 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 ANM this is something which superv 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 tweet so we can say return AIT superas server. from and which is the likes table give me all the count of the tables 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 console.log or we can directly log this thing yes so con 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 that 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 there'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 this is our ser component we you can see this is our server thing this is a server function we can't F directly using this function on the client so that's why we need to define a 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 use State here so we have to remove the use 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 the 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 US state inside our client component import the use browser subas 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 treat 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 we can say const get tweet 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 console.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 between likes and count in the schema but no matches for f okay 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 sub client how to get count start okay so we can pass around the count exit it 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 planed so we can say exact so it will return as the exact count of a single tweet so you can see count is f we 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 this tweet has one this tweet has zero count this tweet has one this tweet 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 our 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 to get likes get tweet likes count this is what we need so it is dot you can see we have count so we 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 we can see one like and 0 like 0 like one like that's cool and it is sending too much request to the server but this is okay because this is the only choice we have if you use super best client just Library if you are using an or 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 give 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 Tweet 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 that's good that's looking good and now we need to do one more thing 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 like the twe then we will show the red heart so in the cues here we are getting the likes count so here we can also get export Co get is liked if the Tweet is liked or not as sync and we can get the Tweet ID and we can so we just need to find out that if this row exist or not in the database if this row exist with the TW ID this and the user ID is is then we will show the R heart otherwise we will we will not show the head heart this is twet ID it is string string and user ID it is also a string then here we can return we just need to to to 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 account we can say tweet ID is this and do 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 fish this detail here can const is liked oh wait so if user is liked so is liked and import from library and here we will pass down the Tweet ID as well to do ID 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 super base server is equal to super base not this things super base o client create server superbase client this thing we need the exact the exact thing which we have used to compose over dat so if you go to the composed withit server component here you can find out we have used this thing so there's the there thing we need copy this paste here superbase client superbas server component suas client import this import cookies and 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 base client and it has the user detail details or do this is how user data superbas client or 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 a twet 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 do user do 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 we will go to is likeed 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 liked so now we will console.log what it is giving to us console.log is user has liked and in the queries instead of directly returning we can return that user hasn't like this otherwise we can find out if this is exist or not and we can return a true here so const data error not this error we can say we can also say that single the user can only like single time nice and we can say if data dot ID exist then it and we can directly deter if use data. ID exist can say Boolean data. ID so if this exist then this is the TW is liked by the current user otherwise it doesn't liked by 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 false true false false false yeah this is the whole thing so true means we have likeed this stre false means we don't have like this Treet cool so now we just need to show this over here we will was 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 do this import the CN helper which will merge all the Delwin glasses we can say if his user has liked then show the color of rate so we can say text rows yeah now let's see now it is so we need to find out a Goode component so we can show here SVG element so react icons so hard 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 F HT 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 rate 600 let's try this refresh this whole thing okay now we are not able to see if it is we can use the fill property I think fill from the color let's give it black for some time cuz we have already like this this should show a like here but it is not showing why is this console log let's see so it is giving us undefined why is that is user has likeed okay we haven't saved this save this now refresh this okay so refresh this again now you can see we have some play COD true or false here good now it is working remove this fill yeah so now it is red and we have like like this twe you can see this is good if you hit refresh it will show that we have likeed this tweet 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 TW it here we can do the same thing unlike tweet unlike tweet the same thing which will just delete the tweet from the database subas server from likes. delete do 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 we don't need these two things we just need like ID like ID which is string so now it will delete from likes table 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 dat also that's why we are console loging everything so now unlike to it 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 liked 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 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 propes so what I'm 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 cheet 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 1 2 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 uh but here you can see this is gone and here this will also gone but because we are changing our window that's why it is being refreshed but if we do it here again if we click the like button this is created Arrow 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 light but we want to refresh it instantly so now for the simplification for the simplification purpose you can devalidate 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 your 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 revalidate the whole page which is not recommended but we are going to do here revalidate the whole page just like it when user like or dislike the tweet revalidate 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 tweet this tweet is liked if we remove this this is removed so now it is working like charm so now only one tweet is liked and which is liked by us we can remove this by clicking on this it is removed and you can see this row is removed if we like this tweet again a row will be inserted and this St is liked let's log into a different account and see if it is can be liked by multiple accounts so let's do that also so this is my other account and you can see this is asking me for liking to 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 we hit refresh it will ask us to sign in so let's sign in I will put my email white blogs. gmail.com I will put my email YT blogs. it is my recent product which generates blogs Twitter SE 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'm 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 and 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 tweet 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 realtime feature by using real time updates from subase but there 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 the reply features so anyone can reply to this post we have faced 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 sub B dashboard the request are 14,786 here what we are doing wrong so let's assume we have 10 tweets and we have 100 users 100 users are minimal not 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 users will send each request for each twet so this means each user will send th000 request every time user refreshes the page or if the user has liked any tweet then he also fetch like 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 get tws 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 rended two times so we will fetch this request two times so this is very bad so we can't do 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 CH GPT so in this video I will tell you how you can utilize CH GPT 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 tweet or not so how should we do that so we can run a plain SQL query because sub B client Library doesn't provide a query like that it is a complex query so we have to build a plain s Square cury on our own because we are not using any orm for now if you 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 in orm that's why we have to define a single performant SQL query so for that as I said I'm not good at writing SQL so I have used chbt to help me here so you can see these are my SQL tables and I have pasted all the SQL tables which we cre I want to fetch all the tweets with likes count can you give me the best way what you this so it gave me how you can get all the tweets with like count so we don't have to fetch the likes count again and again for a single tweet so it will give us the likes account and another thing which I have 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 twist. all so this means give me all the rows and it is saying that count all the likes is likes count and it is finding that if likes. tweet ID is current tweet ID and likes. user ID is current user ID exist or not if it exist then user has like this stre otherwise it is not so this is how it is finding the twits and from twits and this is left joining the likes table and it is grouping the twitters by twitch. ID so this is how it works and then I told CH GP 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 ID 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 of U ID so let's find out the correct uu 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 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 a new tweet from another account and we can also find out the likes we can also find out if the current user has likeed this post or not so if you go to bottom you can see we haven't liked 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 queres again and 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 pool so if you search PG pool po pool on the internet you can find out this package and we will use this package to query or database like this so let's install this let's remove this thing because you can see we are sending a lot of request to the server and it is very bad we don't want to send too many request to our server so we will install PNP install pz pool in the source here we will inser 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 to TS and here you can Define your pool 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 PG 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 PG pool to create our instant database instant and then we can cury 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 poisk 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 pool from PG pool like that you can see we don't have the types that's why it is not showing us auto complete so we will install the types pnpm install PG pool types so it we are installing the PG pool types as d dependencies as you can see now if you over over it you can see all the types and if you try you can see all the stuff here so the database is press and the connection string which we will get from the database uh note andv we need it from import okay so we will Define process. EnV tot our connection 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 superbase on the project setting in the database here you can find the nodejs database connection is 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 string 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 cury okay so let's see all the things SSL is true yeah so now we can cury like that pull do connect then and then catch like this play nice with a syn of so we want to use a syn of it so let's use that also so what we will do we will export it export con pool so pool do connect and then we can use this so instead of directly exporting this we will Define our client and then we will use this cons DV is equal to a wait or instead of doing this we can use this thing this is a self calling function const pool is we already have a pool and then we will say pool to 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 quy and return the client the pool afterwards PG pool has dis spilled in so we directly curate this that's good so let's do this one thing first export this pool and then we will use this export this for now so we will go to our main component inside here where we getting all the tws so instead of this we need to run the query so return is equal to await we import the tool from DB and then we will directly cury the stuff we will directly cury the stuff so like this select dollar one means this thing text S name so we will copy our whole query which is this copy this thing we use this you can see to store with star and here we are using the current user ID so we want to pause this as a so we will pause 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 here you can see this is over so we can ask Cher GPT to return the query with the PG pool so we can say return the cury with using the PG pool and random U ID variable so you can see this is our connection string and this is dollar one so we will say instead of this this is our dollar one which is the parameter and then we can directly cute it like that don't forget to release the pool so this is how you can leverage CH GPD here so we'll copy the whole thing paste it here we will also copy the quy yeah so this is our query and we are passing the current user ID and here we can get the current user ID as well which is string here our query and here we are getting everything so now if you 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 do user. ID like that and we can cut it from here we can paste it and here in stet 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 cury 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 has liked simple so we can run this simple query so what we need to do is if the current if the current user ID exist then cury so we can Define the Cy temporary here which is a string let cury is string or we can say this is cury without current user ID and if the current user ID exist then we can say the cury is cury with current user ID and then we will run the query we will pass the parameters and we will process the query result like that pull. end and that's all what we are doing now let's remove this for 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 run there and we should be able to see something for now so now if you go to loc if you try to refresh we should be able to see something here yeah something went wrong cannot use a pool after calling and on the pool so something went wrong error password authentication failed for user post okay okay password authentication has failed so why is that this is our pool datab okay so we don't need this database thing here we can directly use without connection string like that and connection directly and from PG yeah so now if we try to hit the refresh and we will see what is happening yeah we get something now authentication failed executing query authentication failed for user post chis so this means our connection string is not correct so let me correct my connection string so to check if this is connecting or not we will first let me reset my database password again res set the whole password and I will use here again good po mode 6534 okay so connection string is this connection pulling is this let's copy this thing this is for the connection pulling 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 getting ID text profile ID created it updated likes count and user has liked or not and that's totally awesome and we can just return this for whole cury result from here so if this doesn't exist we can return nothing and if it exist we can return result do row like that so what you need to do is you need to use this pool here this one connection string for connection poing not this one this one and then it will work and now we are efficiently curing everything okay but it still getting some problems like cannot use a pool after coiling and on the pool now we can remove this thing and we can modify our treat Ty type and we will return everything so here we are returning all the tweets and here we will render everything we need so rest do error is so if this is error so we can return the error inside error we can return a mage DB curing failed and here we are returning all the row restore data and we can WRA 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 chj gave 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 to likes count and the other thing is which we are getting is in the queries you can see tweets. Li count and otherwise his user has liked so tweet do user has liked so this thing but there is a chance that this doesn't exist so we will rap this whole thing in the Boolean here we are saying tweet type but we will Define any for the moment so it doesn't show us any error save this whole thing raise to data let's log this thing so we can see if we are getting something on the client not to 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 request to the server which is O request we are sending a lot of auth request why is that do we in the like button so in the like button queries index console. talk let's log the result as well so we can see what is happening result yeah something is working here yeah we are getting the result basically result to Rose 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 as sync AIT not this not this thing I don't like this so let's cut the whole thing const result is equal to await p. query because it is a promise and we can see now the curity result and we can rap the whole thing into try cage block so if something went wrong we can conso do log error otherwise we can return the data as r dot you can see Rose because full name is not defined so why is that cannot read the property of full name this is this okay okay so we want to also fetch the whole profile of the user so we can ask the chgb to modify our our query so we also want to fet the user author details as well it will say that profiles. user yeah so we can now face the whole thing here as well so let's copy this thing crol d crl 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 okay something is wrong here missing from close from entry okay okay okay so we haven't copy 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 join likes join and group buy yeah so we have to correctly fix our query group buy and then order Buy so this is a big quer 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 hustle 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 likes count okay so this is likes 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 our database with a lot of request so if you hit refresh we now have something 16,000 or 177,000 request in the last 60 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 specific 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 not you can see 4,39 if you hit refresh if you try to refresh this it is not changed a lot you can see this is cool so now we can like this tweet remove our like and here as well okay so so if we are not logged in we are not able to see any twiets that is not the way I want so if I open this T in the new tab this is not we are not able to see any why 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 QD without current user ID if current user exist then Q is Q 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 like St P ID profiles everything seems good to me let's remove this current ID thing 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 request from clients now if you refresh you can see we are not bombarding over server facing some problems with this cury 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 po. query is query without current user ID there our query so it is yeah and if the current user exist then our query will be cury with current user ID and then we will pause this current user ID with our cury okay so this is for the parameter this dollar one then we can aade this query here we can aade this query and here we have our result and then we can save this thing and now we have all the TW 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 quy but yeah with the help of CH GPT we can query our database efficiently so this is what chair GPT 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 I save this now this is good so we are rendering everything and everything looks good to me so now what we need to do if we go to the like button so everything is good so we can like we can dislike we are not bombarding our server with the lot of API request you can see this is still the same yeah o request are a lot of O request 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 o 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 to the like button and that's all there that's how you can also remove a lot of like and what what we can say the O request to the superbas server that's all now our application is looking good where is this so this is our application we can tweet this is a latest tweet you can tweet and you can see this is being rendered here instantly this 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 function 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 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 the street 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 Local Hood 3000 and we are running our application nicely but if you go to the Curious part we are doing all these things so this is looking B and there is a great chance that you might do a typo here like we have did in the last part like if you type a comma here and then it will break your whole 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 type safe orm you can go to the drizzle orm website you can go to the documentation and you can find out that it's very could or 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 es schema. TS file so this is our source directory inside the DB we have this TB think okay so we will create a new file called schema. here we will Define all our schemas which we have created in the superway 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 sh GPT to do this also fastly so how to do that using this chair GPT 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 here we are creating all the tables so now what we need to do we need to create or schema using all these tables okay so let's copy this thing and this is my SQL tables these we 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 CH jity to generate over schemas so generate the orm schemas as you know that CH GPD don't have the latest data so what we will do generate the RM schema From Below TOS so we will paste the relevant information here so we'll go to chair GPD or we will go to the drizzle one because we are using post SQL here you can go to the docs 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 the main data yeah so see four docks so this is a post SQL so you can see these are all the docks here so just CR a contrl 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 the response 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 CH only accept 4,000 tokens so we will 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 schema declaration this is our main thing this is also relevant yeah this is relevant indexes forign case composite Prim that's all we need and you can now send this and it will generate all the tables for us you can see CH gbd is generating all the schema so we don't have to write all these things by over it's like a product activity H you can use this and it's good I will tell you if this has any error that we will also fix this so now we just need to copy whole thing copy the whole thing paste here dzel orm PG code so PG enm popularity so we don't need this popular thing here so we can remove this The UU ID column we also don't need this we can just pause The UU ID so this may have some error so we are fixing this we are checking if CH GPT has done anything wrong so this is good PG table profiles ID is U ID which is a primary key it's totally okay and we can also pass autogenerated default random it means it is generated default so now we can copy every ID using this thing uu ID primary key default random updated it time Stam default now not n okay username so this unique constant is not available in the dle now so we can remove this also instead of U ID column we can replace it with only uu ID now can say 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 reference to the profile ID is 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 capital I and then D so profile it it's the best practice to do like that profile ID created it updated it so the database will be saved or but I'm saying is the database column will be named after this but in the application we will use this for our typ script generation so it's cool we have hhts so it's also cool default random the hinal 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 tweet hashtag we can do this tweet hashtag this is the table tweet id hhag id and then this one this is school tweet # primary key so we will say that this is tweet ID and this is Hash 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 curate the table we can say give me all the tweet tweets of this particular hashtag ID we can quate this table and then we can join the Tweet table with each ID of the Tweet is equal to this tweet ID so it will join the Tweet table 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 U ID as a primary key we have text that's good user ID so notal reference is profile. 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 user ID we can say user capital I tweet Capital ID reply Capital ID over productivity after this after creating this schema it's 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 raow things the native things like curing the database from row queries that that is we Tory so you should always use orm so I thought why not use orm in this tutorial that's why I'm creating this part also when integrating the waterm part okay so replies text user ID tweet ID reply ID you can see this is a self reference not this you can see self reference a user can reply to okay so we have ID tweet so if we comment this out yeah it will work so this is not working it is saying that it can't reference the current table so if you you go to the documentation here you can find out an example that for sure which is self- reference you can see that sister city ID and it is self referencing foreign key and that's cool you can see country ID is country S ID inline for key that is good country ID this is and sister city ID which is referencing to same table n EPG column and then so reply ID is also referencing to the same table which is replies and it 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 exist that means it is a reply for for another reply if it doesn't exist this mean it is a top level reply if it exist then 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 forign keys which is columns forign columns yeah but we don't need this thing we are already refer in things here reply user forign key columns reply. user id profiles. id explicit forign key with one column explicit foreign key with multiple columns inline foreign 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 1 2 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 in line you can do that so we will remove now this thing and it's good now we have likes table which is likes that's good default random uu ID which is user ID and it is referencing to the profile St 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 ID you can see we have to do a lot of fixes after we have use chair GPT chair GPT 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 uh if we have created the indexes but it is not required but yeah we can create that so let's create an index on user ID and TW ID so we can query them faster so here you can find out about the indexes if you search index not this index you can see 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 can 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 likees to first one is user ID likes tot and the second one is tweet ID like that so we have defined our index like that 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 can't be null so we can say it can't be null so this bookmark feature is same as the like feure nothing much so you can also okay so we are already saying it can be n that's good this reference things can't be null basically yeah this reply can be null but it can't be null okay so these both can be null but yeah these both can be null 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 reply 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 docks 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 we can remove this thing import the drizzle import the drizzle from the drizzle post 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 our orm just like that DB select from users and it is simple let's reload over 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 theate types slpg 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 do 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 for reference when we create the same cury using that resum so we have seen three methods first of all we have used super base client J library to fet 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 two whichever you want it is not like must for you to use this dzel if you want to go with Prisma you can I just want to explore this new thing that's why I'm creating a tutorial for it and let's see we have tweet hashtag table it's good can see many to many this is a many to many relationship between tweet and htic otherwise we have one too many relationship like a tweet can have many likes a tweet can have many book marks a reply can have many replies a tweet can have many replies so this is a one to many but a tweet can have many hashtags and a hashtag can have many tweets so this is a many to many relationship code so now we have our DB now we will create another script for migrating our database migrate Dots here we will do we will Define a function which is main function we will call it as sync and what we will do await migrate so we need to find a 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 import these two things import the DB now we have DB okay so it is migration folder of migration folder is our res when we will generate the migrations it will create a new folder dzel and in which we have all our migrations node PG database record string yeah so white is complaining let's see dzel SQL let's use this Max connection and also the postgress thing here over here so I think we need to we need this thing postris and then here we can use the postris and we have all the 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 is using pool and here it is using postgress so two things we have here but at the end we have the database let's use the process. EnV okay it doesn't need the new thing and now let's see what the things 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 is string and we can pass down all this stuff here we can say Max connection is one so we have our SQL can pass down our SQL here inside the drizzle which we will import from post shs yeah and now it is not complaining it is good po GS database and we will run this main function we will say main do then process. exit we will say console.log migrations running console.log migration finish cool so now we have our dzel warm with the schema proper with proper SQL DB and with proper migration system now we here 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 the res kit generate PC so here you can use result kit generate 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 called bun to run over script one Dosh so it will automatically handle all the stuff for us like getting the environment variables and handling the types 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 npx one you can say run and then you can copy the migrate copy the path the migrate so instead of this we can directly say Source go to Source in the library in the DB migrate dots 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 npx you can type pnpm as well pnpm run what is over script generate okay so it is failed result config to Json doesn't exist so we have to define the configs of this thing let's import this as well in the root of our directory create a result config TS and past this stuff so we can find out we can Define our schema in the source in the library in the TB we have our schema schema TS and where we want to Output the SQL we can say it is 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 con 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 parameters C options we can also do the in instro Spec command here and instro spec so in should of directly saying digal kit yeah so we Face an error so what is the error if you go to the TS config.js file you will find that es 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 pnpm run generate again it will run so this is the version thing typ 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 any stuff awesome so now we have all our things and now we can run the migrations as well so if you run PN PM run and then you can sa int let's do inro spec okay so pnpm run and St spec what is this like you go to the package or just you can find out introspect it is what like this and here yeah introspect instro note not instro introspect let me fix that introspect and it is also introspect so pnpm run intro introspect so it will only PG is available option for Drive command field only PG is available option for Drive okay so something is happening here so connection string we have to Define our connection string over here if you want to install expect our stuff so we can go to our config which is drizal config and here we can provide our connection string yeah it is saying DB credentials inside DB credentials we have connection string and this is process. EnV do what is our connection let's go to command P or if you are on Mac if you are on Windows contrl 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 instro spec it is saying that it is only available for the driver what is that okay so you can Define over driver PG either connection ising database are required for database connection so for the temporary purpose what I'm going to do I'm going to paste my database connection string over here it is not necessary let's not do that if you want to install introspect 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 dle config you can see we have this tle config and we don't want to GitHub to tr over database connection instring 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 page door Json contrl P command P package J Json here we are saying generate kit instro spe PG so here we can say npx result kit intro PG and here we can pass over connection string as well out migration and then we can pass our connection string so we don't have to copy and paste H so kup won't be able to track yeah so I will now paste my EnV my secret connection string over here and let's try this pz is available option for driver okay so what it is sometime it doesn't work yeah so we can say the driver is p something yeah now it worked driver is PG and if you go to the migrations in the schema you have all the things okay what is this you can see it is commanded hold current SQL files were 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 id twet id because if you see in our database in our superbase database we have tweet uncore ID this is not the naming convention 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 inspect for now let's generate the migration file once more so let's delete the migration in the drizzle yeah we 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 migrate file which is this migration folder is we are saying that this is Diesel 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 DA 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 Buton so if if you don't have the bun installed it will say please install the bun and you can hit the enter and it will work now we have got some errors you can see migration running bookmarks table already exist relation already exist hashtags so this stuff all all of this stuff already exist 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 say 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 twits 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 we try to change something then it will do something so if we go to the migrate folder and let's try to run the migrations on the migration folder and go to here UNC commmand the whole thing so we can can generate over migration so now let's try it again pnpm 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 dzel already exist schema hashtags already exist bookmarks already exist likes profiles replies tweet tweet hashtag 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 da database Twitter ultimate Twitter clone da generate a password I will copy this choose your region and we will create a new database let's find out if this is working or not if we will go to package.json not in the package in the en 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 NN 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 string and we need a new password so basically I will generate a new password again generate a 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 Brun and then we can generate SQL from our schemas so what we can do we can generate pnpm BR generate it will generate all our SQL in the driel 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 users table so we will go to schema. TS here I will create a created it as well so I will say this is the time stamp 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 it dot default now do not n like this created it updated it like that and now we will generate over again so you can see now we have two migrations and is saying alter table profiles and add a column which is time time default is this can be null discount be null and this is now you can see and this is how we we are generating all the things over here and we can push these changes to our database and 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 dot then so clog finished we will also log if something went wrong with that do catch if we have any error then consolle log yeah now let's do it again pnpm run 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 run migrate migration 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 forign key here so you can see this is a forign key which is Rel related to the profiles public key and if you go to the twits 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 te relation and this is so everything is working like we have expected and now we can easily query over database and we can do all the stuff if we pnpm run there 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 Tel one freshly without worrying about our previous stuff okay so that's why we have created a new database so you should enable r low level policies for all the tables here so to do that you just need to follow what I'm doing enable 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 assume like your public key superas public key got 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 Ro level security policies because from a super based public key these rows can be accessed if the roow level security policy is not enabled enable all Ro 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 our schemas and it is in sync with over production or you can see our remote database but we want to integrate it for fetching getting and all this stuff so here we are seeing that curing and mutating so instead of doing this what we will do if the current user exist so we don't need this all the stuff here we can directly fetch the rows using ralm so what we will do we will import the DB from the DV 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 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 twet 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 autoc comption here and let's find out in the doc in the documentation of disal warm how to run a relational query so we can see db. cy. user. find menu so we can query users and we can find many with post like that so we need to do that stuff we can also left or right join so here if you sign many find first cury so here they are using cury with post with commments like this is good so there we can do that as well so we can say query and we want twits okay so we want to query okay so it will say dot gu but we are not getting any auto completion here we want the auto completion that's we are using that result here so we are not getting any auto completion wi state for any n with queries result will 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 see we have all four tables so we want to query the tweets do 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 here what we want here we want the users or you can say where is this if you go to the twiets 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 specify 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 width 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 is that 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 affect over schema this is much more of a application 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 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 it will accept here we will pass down the pro twist twist relation it we will pass down the twiets 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 by the profiles and here we will say 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 so we will say profiles. ID just like it post. 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 referen to this ID so we have to do this for all the other tables as well this is our profiles this is our profiles relations twits twits relations replies now we have replies relations here instead of doing this we will say replies dot user ID okay so here we are saying user ID which is good profiles replies so we have to pause down the replies here basically where then this will have the replies exess now we have profiles okay now it is good to go as well we will do the same for the likes table here instead of reply relation we will say likes relations here we will pass down the likes table here we will say likes do user ID just like that and the reference is profiles. 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 quering our database and it will be much more error prone here we will pass down the bookmarks and we will say bookmarks do user ID I would suggest you to name this profile 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 if we 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 a specifi the tweets relations TW if we want to find out on the tweets we have this thing that's why it is is working and if we log this it will work but we want to left join this profile St 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 do select from users then we can left join things so this is what we need to do so let's command this out for now and here we will try something out here we will say const result is equal to await TB do select you can say select Destin select this on 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 join right join everything we have here so we want to left join the table which is which table we want to left join 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 ele all the elements of an ARR into an string separated by specific separate so we are taking the reference of this SQL quy which we have got from CHT 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 for for which column you want to left join so here we will specify something here 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 twist 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 do profile ID and we need profiles do ID okay what it is saying okay left join required and full join good partial select then what is the join many to one example agre great result so here we have joined all the twists basically we 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 a separator add all the element to an array into an string left join for each row of the table includes value from a matching row of the joint 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 how about right join includes all the rows of join 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 LIF we are basically we are saying that give me the tweet and give me the likes count of this tweet basically so we are saying that when when the Tweet ID is equal to likes to tweet ID give me all the rows as well and then we are joining the profile and let's log the result out and we will see what we are getting here rest do yeah so we should get something here do 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 I can say tweets to created it to okay so how this order by works cost to here 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 not 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 D the GitHub one GitHub documentation is better let's go to there 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 good 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 DP thec from res we will import and we will say you is inserting and you can H over it you can find from users order by descending users to created it and Twi creat that's what we are doing here that's totally good now it will work we can limit and offset offset means how many users or tweets you want to jump we can limit them let's limit to one tweet only dot yeah that's that's what we need do returning I think there is something called returning if you over over it you can see what we are getting we are getting if we do this two we will receive an array if we do it one we will receive array of objects so here we have twiets here we have profiles and here we have likes save this thing and here we will find out what we are getting getting we are getting undefined why set so if we go to the main component let's comment everything out for now here we are getting the twists let's pass this thing also console CL current user ID and yeah 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 twiets that's why we are getting all of these things so let's log in 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 dzel warm if you want so let's use the drizzle warm so import the DB do insert and we will specify our twiets twiets table schema and we can we will say the Valu are this profile ID is user data do user. ID just like that tot yeah so this is how you can insert something using the DZ warum result and let's log the result as well console. log press what we are getting yeah we are getting the user and it's good not user we are getting the Tweet basically so we can now remove this we don't need Super Bas server we need only response actually we don't need to send anything if this went wrong do 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 inser something wrong with server let's save for now and we can pass down the error as error that's good and we can pass down the data as RoR res why it is complaining if we go here yeah it is complaining because if we over over this now we have some different things so just for the sake of demo we will do it any and now let's see how if we able to submit a tweet or not so first we need to sign in so Club ofcers doc gmail.com and username is Club of corders 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 can say error console.log error if we try to fit submit yeah we are getting something we are getting insert or update on twits WE the forign key constraint twits profile ID profile ID foreign key something is wrong basically it is saying something is wrong so if now 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 insert a row into our profiles table when a new user is created for that you 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 in 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. profile ID full name of URL we don't need thear URL we need the username username full name username these two things we need new do ID new do now let's try to run this now successfully done if we go to our profiles username full 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 Club of cs.com at gmail.com here we will say Club of coders now I will click on login it will send me a email I didn't Cote any 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 o 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 exist please use and then we are signing using OTP if something is wrong we should show something here so I think I think it will give us some data and error if we C any error sign up error sign up data so if we got any error then we should Source something and we should return it return to do error error dot we can say sign up error do message and if it is successfully done we can send a we can show a to. success magic link sent successfully like that now it's good now if it try to do that again Club of ers.com gmail.com Club ofers login null value in the column full name of relation profiles okay so we are getting something let's log the error so we can see what is happening pull sign up error CL of coders okay I don't want to type again and again I think I should use type his email already it should show me autocompletion 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 we fix the error where is the error okay in the terminal it should have so null value in the column full name of relations profile voet null not null constate at note null value in column yeah previously we were able to sign up and this time not what happened let's clear the whole data where is the storage clear the side data everything now everything is clear Local Host go to Local Host now let's do it again Club of orders.com gmail.com here we will say the username is Club of quers hit enter and it is saying data is username preview failing draw 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 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 forgot 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 that's good now let's write email is Club of.com gmail.com username is club ofcers name is ranel 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 tweet send successfully everything is working working as expected and here now we are able to see the get BS and everything is now good so close close close close you can see this is how we are using resal orm to insert something from not from inside our TV and here we are getting the DV and joining all the tables 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 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 that 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 rest. data. length is greater than zero or or not like that if this is defined here we can remove this tweet why is showing us the sly line control Z ra do data map now we have this twet void element undefined is not assignable to type react Noe type void is not assign yeah tweet is raise. data and raise. data. length is greater than zero something is not working here something is very wrong we can say it is do 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 dzel 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 esema here we want to infer the twiets type so here we can say twiets instead of say the so this is our user table we want to infer the user here we can say we want to infer the tweet and import from resum and we can pass down type of tweets now we have a tweet type and here we can get the Tweet type from esema good so here we can spread both things to to to profiles like that now it has all the things here which are needed it has all the tweets it has all the profiles so we can Union we can Union both the types so here this is over TW and here is our profiles so this is our profiles so we can say this is our profile in for from profile and here we can make a union of this 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 twet import the profile now it is happy it is also happy here you can say tweet okay not tweet basically Al 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 dot created it now we don't have the likes count for now we can pass down this we can pass down the zero we 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 tweet if we click this button it will like but it will not show anything so here we are getting all the tweets likes and profiles if you like this thing insert or update on likes will 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 uu ID 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 dzm do insert insert into the likes row and we want to insert some values do values which are tweet ID which are user ID and everything else will be autogenerated basically so now you can you can log the error if we get anything error console not log and error yeah now let's do it again try to like this Treet it worked I think if we go to the likes table nothing is here we also want to find out what is happening so const response is equal to console clog response save this thing now we will refresh this we will like this yeah we are getting something insert or update on likes wellers the fork consent like tweet ID twiets Fork something is missing here something is not correct why is that let's find out let's log first let's log the IDS we are receiving here so we can find out what is happening so here is our TW ID here is our user ID let's log both of these out our user ID is this and our tweet ID our 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 TW 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 like tweet 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 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 user profile and here we will pass down the profiles so now everything is clear tweets so so now we have ID text and nicely so we we can differentiate which is tweet 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 profile just like this tweet 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 tweets here tweets is TW 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 say tweet details is Tweet now both are satisfied and it's good save this save this thing also and here we can say user profile do full name tweet. user profile. username and here we want tweet details created it to tweet details and the Tweet ID is tweet details. ID not 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 dzel orm now we can remove all the conso Lo first remove all the conso Lo so why I have recorded this debugging part also because I want you to know that not all the times everything works out sometimes we 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 drizzle or 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 we like this tweet one more time then we will also get that one tweet so I will open a new window which you see so here as you can see we are saying that where if this exist or not so if this is doesn't exist then we can say undefined argument of type this not 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 we hit refresh now we get something this is tweet this is likes profiles that's good that's not I want let's remove this whole thing let's find out console.log Road 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 map one map 2 that's okay that's totally okay DV do 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 say if the user has liked or not so what I'm saying is user has liked if the current user ID EX exist then has light otherwise null conditionally where is this conditionally yeah now it's good it's conditionally with name name users otherwise this that's good and we can say has 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 we can do that let's find out if we are getting this thing here Ro dot has likeed okay so we have H likeed now but we don't have the tweets or anything now we can say tweets is tweets likes is likes and we can say profiles is profiles let's find out what it gave us not working let's go to the men yes something happened true so we have liked all of them so it is giving us two that's totally top 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 so we have light all of them I want to delete all of the tables okay why can't I delete this table no 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 false d so our cury 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 3000 now 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 top so we are getting all the results what we want and we can pass down the row do H light into like is equal to row dot is like 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 is liked as Boolean here there 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 has liked and we will pass this down into our main thing so if user has liked 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 all the yeah why is that let's find out in the in the cues here why here we are saying if current user ID exist then has liked 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 do 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 liked or not so we have to Define two equal and we will say tweets do likes. 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 that tweet this this ID is equal to this ID or not so for that what we can do here we can instead of doing this we can say DB do select from likes do where do where and here we can say equal likes do tweet ID is equal to tweets do 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 DV do select from likes where likes. tweet ID is tweet. ID likes. user ID is 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 chaining we can do end import the end and here we will do 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 here I think it worked if I remove this if I like this if 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 we operators we can use end operator and we can select multiple equal yeah that's good so that's how we have successfully faing the twiets we are getting the twists this is a fresh new tweet hit enter this is a fresh new tweet with zero likes if we hit if we like this tweet we 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 treer Orum this is my first time where I have tried derer 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 we refresh this everything is good and perfect we can also tweet this is a new Tweet now we want to implement a new functionality when we click this a new new model will open and then we will be able to submit a new reply to this tweet so let's build that part first of all we need a new model for that we will use ui. shed cn.com that's the thing we need so let's go to the app page here we have main component left side bar and right side bar that's good in the component in the client component we have did a mistake that this like button is used client okay but this DV is used server but as you can see we are getting every thing in this component from as a props so if you even use this component as a 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 dialogue so let's go to the twitter.com and we will find out how it works so you can see if we H over it you can see some a little bit of white color of 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 not the whole thing only when we click on this chat 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 WP this thing inside a fragment this is called react fragment and here we can Define our dialogue we can copy and paste the dialog code from ui. share cn.com car started in the dialogue not in the alert dialogue in the dialogue 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 dialogue also copy this and paste here it's good and when this is open when we 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 as child so that when we click over this button it will assume that we are triggering our likes so now let's go to our application here you can see we can't able to hold it so let's give it some if effects like we have given to the like button so here you can copy the classes same and we will use this classes for our button now if you H over it okay it is still not working let's refresh this something is missing here okay so our app got hang why is that Local Host 3000 and now you can see we can H over this like it like the like button we 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 dialog 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 we click this now it is much clearer let's do it 10 we can remove the blur 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 deply the Tweet so just we need to create a new server component over here but remember we cannot use a server component inside client component am I right yeah here you can see Server component inside client 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 Ser 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 going 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 like tweet 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 here we will create a new component which is reply model Orly dialog. TSX and it is a client component by default use server not use server use client R Ace here we can say reply dialogue here we can cut the whole thing and we can import the reply dialogue just like that save this thing now we need to cut this 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 the Tweet again inside this but and that that would be not a good approach we can copy the whole whole thing and we can show this over here so this is for image so if we try to reply this you can see we are only rendering the text and and 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 need this yeah we need the username full name text we need the date we need text and then we don't need this whole bottom thing so the data we need is we need the Tweet so reply dialog props 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 local 3,000 you can this happen sometimes when we are developing an 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 on the Local Host okay so we are not passing the tweet from here so we will say the Tweet is tweet save this thing okay so 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 or it is not opening here yeah we can see if we open this we can see this but we don't want this inside our 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 BG slate this is a new tweet B 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 BG PL 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 our AAR which we have removed by assuming it as a picture so now it's good we can give some space to it so M4 yeah so let's assume a big tweet create a big tweet generate paragraph 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 you click over here you can see replying to prel Sony so we can also show that replying to this for that create another division replying to atate and here we will show the username tweet. userprofile do 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 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 the simple input field we need to show the current user AAR as well so what we can do we can name it Flex W full items Center space X4 here we can create a AAR as well so instead of a dummy AAR you can show the original AAR of user now we have have something we can type it's looking good let's make it two 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 smm we are giving the maximum width of LG so instead of that what I will do I will give it Xcel maximum width of MD let's see what we are giving after SM maximum withd of LG okay okay okay if I remove this after SM maximum withd 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 let's assume we have a bigger reply which is gener 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 use form hook or something similar but what we are doing we are just we will just use the US state Hook and the own change this is simple and we can just use it reply reply text which is empty import it ising 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 reply text and when we unchange it it has event and we can set the reply text to event. target. Value just like that save this thing we have text area and now if we hit submit if you go to Twitter and we can show it reply button just like in the compos 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 tweet where is our 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 super base from our authentication Pro provider super base just like that and here we can say super base to 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 his like pending we can show his 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 apply 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 toast please log to reply to reply please log to reply to a tweet and if this is failed 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 as sync 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 a string just like that and here we will await DB dot insert which table you want to insert so we can say we we want to insert in the repes 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 this is must can say user ID which is string do 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 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 CH that's all we need here if you want you can let's assume you reply is HTML you are submitting Rich text into your database so you can sanitize or you can verify your reply text before saving into 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 to three or not we 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 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 Mt string or reply text do 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 do ID the Tweet ID is we have tweet do tweet details. 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 is reply dialogue or one 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 set is reply change and it is open which is is reply dialogue 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 toast to error something went wrong with DV 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 our 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 Tre if you click on the select record you can see it will select a record from the yeah so this is a reply we have submitted to this twet and we 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 count 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 H when this is H PG white 5 so when this is HED we are notable to say let's do it 20 refresh this and it will work sometime it code stuck now you can see we are getting this white here so let's do it 10 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 Local Host 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 Local Host 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 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.log hold tweet clicked this is hold tweet clicked and if we go to the reply dialog here you can remove this yeah here you can see console.log 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 you go to browser tools if you go to browser console this is our console you can see browser console mode yeah and if I click on this tweet if I click on this street and nothing is happening or is the correct console let me open web developer tools this or 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 reply dialog clicked whole tweet clicked 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 a 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 Local Host this is our console now you can see we are getting something and if I click on this hold to 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 Router 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 this tweet 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 nest route in the app directory we will create a new page and then we will redirect to there so we can say router. push this is backx which means this now we can string interpolate and we can use logic inside our string so we will say redirect the user to this tweet ID so we can say tweet SL the Tweet ID so tweet do tweet details. ID so redirect the user to this route and where we 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 twists there's the part comes this part happens when we are building something new with the latest tech St let's open this is is in Firefox Local Host 3,000 we are getting empty over here can we use a use router thing or can't I'm not sure so there is something router do 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 is working open the whole thing now if we 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 dialogue if we click this we are getting redirected to the Tweet so now we need to create a Ned route and we will fetch all the replies or the Tweet building there now if you search Dynamic routes next year you will land 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. DSX it will tender 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 side bar and we can import our right side bar both things 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 side bar and right side bar everywhere okay so if you go to here if you refresh this let's go to local 3000 and see if this is working and here we can Define our ra fce here you can see this is homepage here we will call it tweet 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 deply if you click here it will redirect us to the this is tweet page you can see it's good so now if you go to the main component and we can copy the whole this thing over here which is this this is man as well and here we will render all our twists not all the twists here we need only one tweet which is we are getting from const router is equal to use router which is from next navigation let'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 log the quy out and we will see okay so we can't use router here we can use the navigation but we want the cury so how can we get the cury okay so we can get the query from use path name and all the things available here so navigation here we have some things and we have use params use selector okay so we can use this use perams and let's log this out and see what it gives us use pams only works in client components is a use cting okay so it is saying that it only works in client components so now what we can do can we get the used server okay okay okay so we need the Cy basically so 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 the Genera generate static params page to learn how to generate params that's totally good but this is let's remove this and now we will log the perams and 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 it const tweet we will import our DB we will say select Dot from we 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 has liked or not so we need to find out has 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 tws 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 is user the current ID is user data dot user. ID if this exist yeah if user data. user. ID exist 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 the exist as well so you can see we are importing a lot of things and we are joining we are joining profiles who has submitted this street 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 pam. ID inside the pams so we don't need the all tweets from select this from tweets but basically instead of saying limit dot we can say where equal just like it where the equal is fs. ID is equal to pams do ID like that so it will give us the current tweet only so now if you log this tweet console.log tweet here we will see what we are getting tweet to yeah now we have the Tweet to so we are only getting the single why is not limit select from left Jo so we can do the we 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 CAU this we c one tweet we C our one tweet which is this profiles has like true because we have like this so if you go to our homepage this is local horse 3000 if you refresh this let's close this you can see this is a new tweet let's go to this tweet we have likeed this tweet let's remove our like click click here we are onto this page here we can see we have not liked this twet likes are null because likes are zero the user who is the author of this tweet 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 this tweet zero 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 say tweet zero to likes if it is null then zero then we can show the Tweet detail as well tweet to tweet zero to the tweets okay it is saying the Tweet is all the details of here so we need to specify what is it needs TW detail which is tweet0 do tweets it needs user profile which is tweet0 do profiles now it needs one more thing which is current user ID so we can pass the current user ID as user data do user do D it is not required yeah that's good we can do this it is still saying that okay so we can count the number you can say likes dot so it is giving us a lot of things so we haven't joined all the twits 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 we 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 or 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 tw or note 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 row 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 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 tweets 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 dat is Boolean so if this is true what we can do here inste of ating we can we can say query we can modify this query more and we can say this is let query DB do select all to this all things order this and we can also pass order by poan so what we can do we can say if order by is available then Cy is equal to cury to this thing cury do 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 string which is get single TW ID so if this is true then we can say cury is equal to cury dot where dot where and we can pass down the equal thing we can say tweets Dot ID is equal to get single twe so this is the ID so instead of get single T we can say get single T 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 tot limit and we can pass down the limit just like it it is very easy and after all we can say row equal to await Cy 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 TW 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 tweets and yeah here we will go and we will remove the whole thing we will say get tweets and here we will Define the current user ID the user data do user. ID the second thing we need is get single tweet ID yeah so we need the K single ID and what is the id pam. 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 twe dot dot twe Z dot has like tweet is possibly undefined so here we can say if tweet 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 to length to 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 Charmed you can see we are also able to show this tweet over here so we are showing one tweet if we go to Local Host when we click on home we should be redirected to home so for that if we go to our left sideb here we are sending the user to homepage so instead of item title lower case we can send the user to homepage so here we can say if item to title is equal to home then send the user to homepage 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 we are getting the new tweet we can like this tweet as well and we are getting the updated tweet if we click on home look at is is still not working wi set left side bar if item do title is capital home basically so to fix it we can set to local lower case and it will work like for now if we click on home you can see we are getting all the tweets if we click on this tweet we will get this tweet 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 happen if we 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 in sh 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 F them so it is pretty simple with fetching the replies we can say replies is equal to await DB do quy dot what we want to fet we want to F the replies and we want to fet the many replies here we can specify the extra columns we need for fetching we can say we want to fetch the profile as well so if we console log now console.log replies 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 switching all the replies we don't want all the replies we want a we close here we can say we want only replies with dist page so we can say the so we can specify some things here dot db. quy let's find out in the drizzle orm documentation how we can use the cury the documentation index say SQL operator where is this we can use a select but I want to use the query thing which is new so where is this query tv. query yeah this thing relational query so like this can we select and we can filter it or not yeah so we can filter it just like it so we can save where the equal operator import the equal operator which we have already imported we want to say that repes dot here you can see user dot ID just like that we are saying you repes dot okay so replies response let's do it we want to say replies do ID not ID we want to say the Tweet ID is equal to the pams do ID so now it will F only one reply with the current TW ID not one reply with it will fetch all the replies with 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 twet if we go to home and you can configure this home thing if you go to Left Side bar here we are saying that if the item do title is home then we are sending the user to back slash which means home now here let's create a new tweet new fresh tweet hit enter this is ref fresh to it we will click on this if we go here you can see our 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 we can see we have 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 replies do map we can say reply repes 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 the key of reply do 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 Tot so here we have over reply so instead of tweet what we will do we will cut everything and we will past reply do profile. full name reply do profile do username import this thing we can say reply dot when this is created so we don't have this buil 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 Tweet table as well you just need to create 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 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 we have created a new table but that's not necessary at all now this is our tweet text so here we will render our reply. 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 H 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 which belongs with this tweet if you go here if you go to this this doesn't have any reply submit a a reply hit reply and here you can see we have our reply and it is being rendered nice and easy code 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 quers let's submit a reply from another account uh I will go to my new account which is new page I will go to Local Host I will go here I will see two tweets I will reply I am replying to another from another account like this if you hit reply you can see YT blocks this is our current username and we are reply and here you can also see okay here not 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 twet and this is top everything is looking good to me yeah this is now one this has now two likes so we have learned how to fetch the tables using drizzle Orum 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 Club of.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 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 in another series thank you very much\n"