Full-Stack Blog App Tutorial | Next.js and Prisma

in this video we are going to create blog post with nextjs Prisma and postgress scale so as you can see this is the final project I can add uh just log out first when I log out I cannot create post as you can see the button is disabled and also this is uh text area that have ability to aoiz this is really cool package and also when I go to blocks as you can see we have couple block here and I can read I can see other people comment and of course I cannot submit comment because I'm not loging great so let's try to login I'm going to use this one which is my Chand def account click on that and see what we have okay so now we can create new post so let's do this is new I'm going to say say post new let's click submit and as you can see now we on the detail this is new written by Chev post new and the commment is empty so I can say this is first this is my first comment if I hit submit as you can see now we have the comment and I can also view other post like this is written by enter me and I also can add the comment bro so let's add uh emoji and here we go great so this is what we are going to be building yeah hopefully you learn a lot of things and let's get started so the first thing what we need to do let's generate next application so I can just copy this command here npx create next app at letters and here I'm going to give a name uh let's just say nextjs blog app just like so and hit enter let's just hit enter and it will uh give you some question we use typescript we use ESL talwin um just say yes Source I'm going to say yes app rouder yes import Al yes no just enter all the equation all right it's done so now let's CD into nextjs blocks app and here I'm going to open that into Visual Studio code let's say code and then dot it will open the folder into Visual Studio code all right so now let's start the development server we can say npm run def it will open Local Host 3000 let's click on that and yep it open on another screen I'm going to open that in here and it take a time and here we go so now the first thing is I just want to remove all the content inside page. DSX here so I think I'm going to close this terminal and let's remove all the main here I'm going to remove all of that let's remove it and here I'm going to say Main and just say app for now now we should see just app Here Also let's remove this image and the first thing is inside a source I'm going to create folder called components so let's do comp components folder and inside the components folder we are going to create header so let's do header I'm going to use uh just lowercase header. DSX it doesn't really matter you can use uppercase it's depend on what you styling so in this header I can say RFC and yeah this diff I'm going to change that to header Tex or I think yeah header Tech I think let's use header TCH and and here I'm going to render the header on the layout so here I can say header like so and now we have header and also the children let's go back and as you can see we have this header and also app nice so let's go back to header and here I'm going to let's say backround to I'm going to use blue 500 and also the padding I'm going to say four also here I just want to put my na styling like so and inside this na I have my link also I'm going to copy that let's paste it here so this link is going to become from next link it will redirect me to the homepage and this is the uh it's kind of like logo I think so as you can see we have my block nice so down here we also have the UL and Li another list and list item inside the list item we also have the uh link this link here is going to be when we click on that it will open the API SL out/ sign in so we can be able to sign in okay nice so inside this Ur I'm going to add the class name and it's going to be display flex and also so the Space X I'm going to say four because in here I'm going to create another uh link for blocks I think yeah so let's just copy this Li and I'm going to copy that paste that in here and here we have the blocks page I say blocks like so and thef should be SL uh blocks just like so and we have blocks and also login nice we done with the header great so when we click the block of course now say 404 because we don't have the page now great so uh let's first create the form in this uh homepage so first on the app here page I'm going to render component here the component should be form new post so first let's create that I want to say form new post like so. TSX and here I can say RFC and T the component name to form new post just like so and let's go back here and we are going to render that in here post not post but form new post just like so and in this class name I also want to add maximal weight to 4 XL and also the MX I'm going to say Auto and margin vertically I'm going to say five all right so now we have to form new post here great so let's go to form new post uh should be form new post just like so uh let's change this form new post so now let's just change this div into form let's use uh form and inside this form here I have diff and inside this diff we have input let's do input and let's styling this form a little bit class name maximal weight to 4 XL also the MX I'm going to say Auto also the padding I'm going to do four just like so and also inside this diff here I have class name called margin bottom 4 okay so now we should be able to see this input look really nice so I think we are going to add class name uh let's give uh I'm going to create another variable and it will have this uh styling input class so first I'm going to put my input class class styling on here just like so and as you can see if there's have with full padding y Etc doesn't really matter so as you can see we have this input nice let's go back and another thing I'm going to add in here is the placeholder so let's do placeholder I'm going to say enter the title and also um the name I'm going to do title just like so and as you can see we have this nice form uh it's too big I think it's too large let's change the maximal we to medium okay it's more better and also now let's copy this diff and paste that down here and in here we are going to render text area but the text area I like to use the react text area Auto zze react text area Auto zze this is a package and I think the package is really cool so let's just install that copy the command here and go back to terminal and here I'm going to I'm going to hit enter nbm install react text area AO all right so here I'm going to render that inside this da so I can say react text area aoiz just just like so and now as you can see when I go back and uh refresh what we have it's still compiling down here so um oh yeah it should be client component because we use the input field there's no reason the input input field inside the server component so we can say use client to change this component into the client component so as you can see now here we have this really nice uh text area the beauty about this text area of those eyes is when I hit enter as you can see it's aoiz the form nice all right so let's go back to uh react text area so I'm going to do here is I'm going to change the Min minimal row to five and also the name I'm going to do content and also class name I'm going to use the input class like so also I'm going to add the placeholder let's say enter the content just like so and save let's go back and as you can see we have this really nice content form Okay cool so now let's create the button so down here we are going to put button tag and this button have a tag submit and also this button have a type submit like so and also we have some styling here I just want to copy and paste The Styling because this tutorial is not about styling so as you can see we have this submit nice so now we are going to store this value into the state so let's go back and first we are going to create the state I'm going to close this terminal and let's go to form new post and inside in here I'm going to create State and State name I'm going to say form data like so and let's import the use State and this form data have a type uh let's do form data we don't have yet so I think instead of source here I'm going to create folder called types and inside the types here I have file called blocks so let's do block blocks. DS I think block DS and inside in here I'm going to export it's export interface call form let's do form data and this form data have a title the title it should be string and also have content the content is also string and now let's import the from data from types nice so by default of course this should have the title and also the content and also by default it should be empty string just like so and now let's put the value in this input this input here it should be have value form data. title and for this text area we have content so we can say value set equals to form data do content like so now as you can see we cannot typ in here because we don't handle the uh on change so let's do here I'm going to add onchange event and let's say handle change and I'm going to copy this and paste that right here just like so so now let's create the handle change function I can say cons handle change set equals to we grab the event and then this event here is basically uh my B so let's do change event and this is going to be HTML input element and also HTML uh Auto not Auto but I think it should be text era text area element so now it's gone nice so in this handle change what we need to do is first I'm going to grab the name the name and also the value from event set equals to e. Target like so so basically the name should be this name props as you can see we have the name inside this two input so we can grab that in here and also the value so here we can can say set form data into we grab the last value from data and also we can say name the name it depend on the value here it can it can be title and it can be content so we grab the name and here I'm going to put the value nice so now we can type in here great so uh on this form I'm going to add on submit event so let's do on submit set it equals to handle submit like so so let's create the handle submit function s to here cons handle submit set equals to rrow function like so and in here we need to prevent the form so we can grab the E and I can do console log let's say uh form submit so when I save and as you can see when I click it will uh refresh the browser so that's why we need to say e do refen default we don't have the auto prefent default here that is because we don't put uh type of this event this basically form event and I can say HML form element like so and now we are going to see the prefer default nice so now I just want to console lock the form data so you can see the value and I'm going to open the console and see what we have so I'm going to make it bigger so let's do Title One content one hey when I hit submit as you can see we have the title and content nice next we are going to store this value on the database but for now leave it like so okay great we done with the form so now let's go to blocks we don't have anything inside this blocks so let's go to app and let's create folder called blocks and instead of blocks we are going to create page. TSX here we can say RFC and I'm going to say block page just like so when I save we should be able to see this block page so as you can see here have this weird color going on so let's just fix that go to global. CSS and here I'm going to say he into 100 view he let's save and it will uh fix the problem nice so let's go back again to the blogs post here blog page here and what we need to do is first I'm going to add class name into maximal we again we are going to say for XL and also MX2 Auto and also the padding vertically I'm going to do uh let's say a all right so here I'm going to remove the block bit TX and I'm going to put the heading one here so let's do heading one it's basically text 3 XL and Bol color bolt phone we have block nice and in here I'm going to create the grid so let's put the diff and inside in here we are going to uh map through the post but first uh let's say heading one I'm going to say post copy and paste this couple time and you will see this post post post post so basically we have three column I'm going to create uh data this is just for example so inside the data here I'm going to create uh post do DS like so we have these blocks with uh content inside in here ID title content username Etc so we are going to use this uh instead of block I'm going to use post variable name so uh we are going to use that so in here I'm going to do is post of course we need to import that from data post and here I'm going to do is uh let's say post. map I'm going to grab the individual post and in here I'm going to render uh let's say link this link have uh each ra and it's going to be good to the wait it's going to be go to the slash blocks SL post. 8 like so and inside this link we have uh heading to and also the paragraph tag so let's put that in here and we have some warning because we don't have the key so we need to put the key set equals to post. ID okay so as you can see we have this link and um we don't have this outer I think so let's go back into the data and we have this username so we are going to use that post. username all right so as you can see we have this uh block post one block post two block post three nice let's go back here I'm going to add some uh styling in this link so let's do class name set equals to the background I'm going to set that to I'm going to say white and also the padding let's do four also the rounded I'm going to do medium and just a little bit Shadow save save and here we go we have the list of the blocks so let's go back to the data and if I have another block let's say four and block post four and when I save as you can see we have this block post for nice it's working so now let's work in with the detail okay we don't have anything here say 404 to create the detail we can just simply go to block and and inside this block here because the detail is a dynamic we can go to block block one block two so we need to add folder called uh the the names doesn't really matter but you should put you should put that inside the array okay I'm going to use ID because in here we are going to grab the ID you can use title you can use SL or anything you want doesn't really matter so inside this ID I'm going to create file called page TSX and again I'm going to say R RFC and for the page name I'm going I'm going to say blog detail page the name is really doesn't matter but the file it should be page if you not create bit it's not going to be work so as you can see we have the block bits detail nice all right so let's go back to code and we're going to styling this little bit the class name I'm going to add maximum Al weight to 4XL the maximal the MX margin horizontally to AO and Bing vertically I'm going to say eight and inside the diff here I'm going to put heading one and it's going to be have class name what I'm doing class name let's say three XL for the large and the pH I'm going to do B and this is going going to be the title so I think we can just say po one like so so we have this spose one and down here we are going to put the written by so say written by uh I don't know say Jon do or something here we go and also I'm going to put the diff and this diff here is basically the content so I'm going to say class name to Martin top 4 and this is the content I'm going to use lurm uh I don't know 20 so we have this Lam is the content so next under the content here I'm going to put the list of the comment so I'm going to put the comment on another component but let's render that in here so it can we can say comments should be comments like so and the comment should be inside set a components folder let's here I'm going to do commands dot it should be commands. DSX like so and we can say RFC and I'm going to use command with capital c and we can just I think just close this uh we can where is my uh yep we are going to render in here so we should see this commment so let's go to commment here and I think I'm going to close another tab let's to we just have uh detail and also the command DS file here so inside the command here I'm going to first let's add class name call margin top to AEG to give us space and also I'm going to let's do heading to here this heading to is should be have a title comment like so with bold content B text and also down here we have another list with list item so in here we have list item and I'm going to add class name called margin bottom I'm going to say four and background I'm going to I'm going to use slate uh let's say 300 and also the padding let's say two and also inside in here we have a diff like so we have this flex and also inside in here I'm going to put my outer name so it should be inside another diff like so and here I'm going to put maybe jono so we have this jono with blue color nice and also we have the uh another div else also in here so I'm going to do div and here I'm going to add class name called T I'm going to gray 500 and this is the time maybe I'm going to uh I don't know 10 [Music] November let's say 2023 I'm going to say Pac and this is the commment I'm going to say w awesome awesome bro I think that's it for the commment and next thing is we are going to create the input for the comment so let's go back to comment here and I'm going to uh render form let's do form command like so and let's create the form command component inside the components folder here I can save form Das command I always wrong typing commands I'm not sure why so we have form commands and in here I'm going to say RFC and we going to use C case form command and we can import that in here just like so we should be able to see this form command nice so now what we need to do is let's create um input here and I'm going to use diff and I'm going to add a class name let's say margin top I'm going to say four and also inside this diff I have the label so this level here have a text at command again I Wrong typing comment so uh the HTML 4 is doesn't really matter but you can in put maybe command like so and also I'm going to add class name and it's going to be display block text grade to uh I'm going to say 700 and small text also the for I'm going to do bolt also the margin bottom let's say two okay we have this add command nice and also we have the input field we have the input and this input here have a class name like so and as you can see we have this nice commment and also we are going to add the uh let's say name to commment again I Wrong typing comment comment and also down here we have the button to submit the comment so button and we can say submit submit commment like so nice so inside this button here we also have some uh class name for the styling so I'm going to do class name and paste that right here okay nice it should be look really nice so now let's start the value I want to when I click submit content it should be showing the value on the console so let's first create the state here I'm going to create State call command let's do command like so and this command here it should be string also we need to import the usate like so by default it's empty string nice uh this value this input here have a value command and also have on change and this on change change here I'm going to handle change handle uh command command change like so and let's create the function up here I'm going to do cons handle change handle commenting set equal to we grab the event and in here what we need to do is the event it should be uh event change event and this change event is basically HML input element like so and we can set the command into e. Target do value uh yeah because we use use State here we need to change this component to use client because by default this is uh server component by default so we need to change that to client component nice so we don't have handle the submit so let's create the handle submit here I'm going to create uh let's do on click handle submit command let's do submit command all right let's copy that and here I'm going to create a function let's say cons handle submit command equals to arror function and in here what I'm going to do is uh just going to lock the comment okay I can say hello and I click this submit as you can see we have this hello hopefully you still follow along this tutorial and now we are going to working with the uh I think I'm going to get at all and get commitm let's say create the UI nice so now let's close all of this so now we need to working with the Prisma database and next authentication okay so now let's working with the authentication I'm going to use next out so let's go to documentation and click getting started and first I'm going to install the package npm install next out and also I'm going to use Prisma so let's go to uh I believe it should be on the adapters and let's go to Prisma and this one we need to install the uh I think we need to just install all of this let's copy that and paste that right here and hit enter let's go back to next out here let's go to getting started and basically we are going to create this um variable so I'm going to copy that go to Source I'm going to create lip folder and inside in here I'm going to to create out. DS and I'm going to paste that right here and yep we need to close the out option object and also we need to import the um I'm not going to use GitHub provider so let's just space that right here but instead of GitHub I'm going to use Google also change this import to Google let's say Google provider like so and instead of GitHub provider I should use Google provider so Google provider and the client ID we need to get the Google client ID and Google client secret I have video about that and I'm going to put the link on the description and also what we need to do next go to Prisma here and we need to put adapter adapter Prisma adapter like so so we need to copy this and put that in here so the Prisma ad adapter it should be come from the out/ Prisma adapter and this Prisma is basically uh we need to First create DB here db. DS and I like to use this best practices here so I'm going to copy that copy that and I'm going to paste that right here as you can see this is export default Pres so we can use the Prisma in here so let's grab that Prisma like so uh let's see how we create the road so uh we need to we're using the app router so we need to click this guide and I'm going to copy this API SL out/ whatever it is and I'm going to go to app and create file baste that right here and hit enter so now we have API folder out folder next out folder and inside the next out we have route. DS so I'm going to copy this copy that go back here and in here that basically we need to put the out option so let's remove this and put the out option come from the leap SL out which is this one okay everything look working so now let's do npm run def when I click login I need to to the link it should be go to this uh route here so let's go to headers uh component and then header when I click this Link login as you can see it should be go to API SL out/ sign in so let's click that and as you can see now we have the oh Prisma generate okay so I think we need to go back here and and the next thing what we need to do is create the Prisma schema so uh let's open the Prisma JS and click on this quick started and I'm going to see the documentation first because I forget what should I do and now we need to say npx Prisma in it copy that and here I'm going to paste by doing this we we have this Prisma folder schema Prisma and also EnV uh file nice so on this schema Prisma we are going to copy and paste the schema here so let's just copy all of this the model here let's go back and paste that right here so after we're doing this just make sure the EnV variable is your own link here so I'm going to change couple things here so the first thing is my username should be by default is post crass and I don't know the password by default but my password is random password and the database I just want to create new database I'm going to say uh my blog post just like that and then what we need to do next is we need to say npx Prisma Deb push so when I hit that okay it's nice so I can say npx Prisma Studio it will open the local host on 5,555 and here we go as you can see we have account session user and verification token nice so here what I'm going to do let's say npm run def so let's open that again the Local Host 3,000 and when I as you can see when I reload we have the sign in with Google this is the uh sign in look like by default if you want to see how to change this uh custom login I have video about that and I'm going to put link on the description and what we need to do next is just make sure when we log in we have the account here so let's try I'm going to sign in uh uh oh yeah that is because we don't have yet uh the Google client ID and Google client secret so I'm going to copy my Google client ID and secret and let's click login and just try to sign in with Google and I'm going to use this account here so let's try as you can see I'm logging now and then uh how do we know that we are successful login so basically we can use something called get server session I'm going to create function called get current user and we can use it on our server component so let's do session. TS on lip folder and in here I'm going to export and I'm going to use a sync function and I'm going to give a name get current user like so and in here I'm going to say cons session set equals to 8 for get server session like so and we need to put the out option just like that and here we need to return session do uh user just like that so let's go to app and then page here and in here I'm going to say cons let's say cons and then user set equals to like so and of course uh let me console lock user and see what we have uh we get the error here because we need to wait so let's try to wait and let's try to see of course we need to change this function to sync like so and let's try as you can see we have this uh user that login just the name email and image and also if I go to the Local Host 5555 as you can see here on the user we have the email that log in here nice so everything look working and of course we don't need this here let's just remove all of this because this is client component we cannot use the session function here get current user we cannot use it inside the use client and components so uh to do that we need to use use session and we need to wrap our layout here with a provider so let's go to components and I'm going to create file called providers let's do provider. DSX and here I'm going to say RFC this provider have a functional component that have this provider props so let's create the profer props I'm going say interface profer props and should be half children the children it should be react node like so and we can grab the children here and then now we need to wrap this inside the session provider like so and we need to put the children inside the session provider so we can say t turn like so and then we can use this provider inside our layout so let's do that in here and then the provider should be uppercase I think [Music] provider like so and we need to put the header and also the children inside the provider um oh my bad it should be um uppercase P provider and and provider like so and now we can import that nice um we had some error going on so we get this error that is because provider is should be client component so we need to change this provider to use client like so let's save and everything should be working so now let's try to get the user on the client so inside the form new post this is client comp component so we can get the session with use session so we can grab the data inside the use session like so and now we can just console log data and see what we have on the browser so let's go to console and see what we have we have this object and let's see I'm going to open that as you can see we have this user so basically we have data. user and when I see as you can see we have the name email and image nice so now let's go back to the schema Prisma so we need to user be able to create new post here so before we working with this form we need to create the schema first so in here I'm going to do a model called I'm going to give a name post should be post like so and this post here have a ID the ID it should be string and then the ID by default it should be CU ID like so and also we have the title title it should be string we also have content and it's also string let's scroll up inside this model user I'm going to add post and here I'm going to put post and then empty array on like that when I save as you can see this automatically create the relation that mean one user can create multiple post so for now the relation using the user ID just the ID from the user here and just leave it like so for now and I'm going to also add the create ad let's say create ad and the type should be date time and the default value I'm going to do now just like so and also I'm going to create model and I'm going to give a name commands like so and this commments also have a ID and also have a text the text should be string also we have the uh I think I'm going to add also comment here so let's do commments commments and we are going to put the comment here like so when I save again it should be automatically create the relation for us that mean one user can add multiple comment so instead of post one post can have multiple common so we can do comments and then here I'm going to put commment on array something like that and we have automatically uh relation in here okay nice so the next thing I'm going to add in here is the created ad I'm going to copy this and just paste it right here just like so after recreate the model post and command now we need to say npx Prisma Deb push going I hit enter and let's go back to Local Host 555 here I'm going to hit enter and as you can see now we should be able to see um no we cannot see the post and comment uh I think let's just restart the Prisma studio and as you can see now we have the post and we have title content Etc and also we have uh I believe comment okay everything look working and now what we need to do is Let's Make A uh post okay so first let's create the road so inside API folder I'm going to create folder called uh post and inside the post let's create a road just like so and in here what I'm going to do is I'm going to export it's going to be aing function and the function name should be post because we are going to make a post request and here we can grab the request the request have a type request like so and inside in here I can do cons let's say user set equals to A wait for get current user so this get current user is returning user that login right so we can access that on the server component and also inside the road so in here we are going to use try and catch I say catch we grab the error and then down here what I'm going to do just uh return next respond and next respond is going to become from next last server and we send the Json message something went wrong just like that and the status is 500 so instead in here inside a try what I'm going to do is first I'm going to check so let's to if the user. email doesn't access that mean if user not log in I'm going to let's say return what I'm doing let's say return next response. Json and in here I'm going to say message let's say message and the message is not authenticated so let's put it in here and and also the status I'm going to send 401 just like so and in here if user login we can say cons new post set equals to I'm going to wait for Prisma do post. create and we can put object inside this create function and we can say data and the data that we need to store in this post is title content so let's do title where we get the title so basically we can grab that from the body so we can say cons and then here I can grab the value from the wait request dojason this is how we get the request body so we grab the title and also the content like so and in here I'm going to do title and title set equals to title and content set equals to content so before we create a new post I just want to uh let's say console lock or maybe I'm going to say return next respond. Json and I'm going to send back the user also title also content okay so we send back this user title and content just for example and let's go back to the form new post and in here let's make a post request so as you can see um I just want to remove this in said the handle submit here what I'm going to do is change this function to a sync and let's remove this console we don't need that and in here I'm going to use try and catch so let's do catch grab the error just like so and down here I just want to when something wrong happen I just want to say console do error the error just simple as that so inside the try let's make a uh post requests in here and going to say cons response set equals to uh you can use fatch uh I just want to make it simple so I'm I'm going to use xuse npm install xuse all right so it's done read so npm run def again and in here I can say oh wait for AOS dot post of course we need to import AIO do post and here we need to make a post request on API SL poost and the data that we need to send is basically form data form data is object that have uh title content okay so we got grab the resp point and then down here I think just just save that like so and let's try so let's go back here and I'm going to refresh so now let's go to network so I can see the respon so now let's do Post one this is post one so when I click submit as you can see we make a post request on the uh Local Host 3000 NPI poost and the respond back is user and title and content because remember on the road we make a respond in here so basically inside the oit Prisma here I'm going to copy commend it out first so we need to send title content and also the ID because as you can see on the the Prisma here um we connecting the post and the user with ID okay so we should send ID here but as you can see inside the session we don't get ID so we can customize the respond of the session I'm going to put video on the description I have video about that but we're not going to do that in this video so we need to change the Prisma so instead of using ID we need to using email because email also is unique so let's go back and uh as you can see because email is unique so we need to use email okay so here we are going to change something so for the user um just leave it user I think or maybe we can use outer like so and the relation I'm going to say outer ID and I'm going to put outer ID here and the reference instead of ID I'm going to use email just like so and also this comment instead of user I'm going to use outer and also this is going to be outer ID and outer ID and the reference I'm going to use email okay because we change this um schema of course we need to do npx Prisma Deb Bush and done you can see npx Prisma uh Studio again like so nothing really happened basically so of course the uh uh field is going to be alter an alter ID great so here instead of send ID we can send the uh email okay so let's say outer ID should be outer email I think oh my bad yeah this is going to be outer email not outer ID I'm sorry about that let's just grab this value I'm going to change to Outer email okay just to make it consistent so let's do that again n npx Prisma deit boost okay so let's do the npx Prisma Studio again okay nice so let's go back to here and of course we need to use outer email and outer email have a value which is user. email let's save this and I'm going to cut this and put it down here and we are going to return next respond and what we need to return here is basically the new post so let's do new post and also I'm going to send the status it's going to be 200 so now let's go back to the form and in here I'm going to check so if the respond dot status is 200 that mean is if everything okay I'm going to uh redirect user to the detail page so to do that we need to use something called router so router set equals to use router it's going to become from next SL navigation and we can use that in here so we can say router do push it's going to be push the user into this slash block slash and I'm going to go to response. data dot new post because we send the new post here as you can see new post and then we can access the ID just like so okay so now let's try to make a post so here I'm going to refresh and let's do post one and I can say this is post one so if I hit submit okay we get something wrong happened I'm not sure uh the respon something went wrong I'm really not sure what the problem but I restarted the code and everything work perfectly fine so let's go back here and I'm going to add post one let's say this is post one and and when I hit submit as you can see it's make a post request here and we have the respond back and now we on the detail with this ID here so now let's try to go back and I'm going to create another post let's say post two this is post two so let's hit submit now we should be able to see to pose here okay great we have the content outer and the the outer email the create ad and the comment now is empty nice so let's go back to blocks and I think I need to um yeah I think when we not log in oh yeah we should have one button here called log out because when we log in we cannot log out so let's try to go to the uh header and in here can change this component to a sync and here we can grab the user cons user set equals to A wait for get current user just like so now we get the user here and then down here I'm going to add condition so let's do user if the user. name have a value I'm going to render this should be question mark and else I'm going to render this so if user not login I'm going to render this login button if not uh where it's if not let's do button log out okay so let's go back and now we should see this button log out so in this button we need to add onclick event when we change that the whole component here it should be becoming uh client component I don't want to do that so that's why I need to put the button on another component so here I'm going to create component called let's say button log out. TSX and in here I'm going to say RFC and let's do button log out like so and let's render that in here button log out so now this button log out it's basically just a button that have onclick event so now we can change this component into client so in this button I'm going to add class name call the text it should be white and when I hover the text should be half underline and here here I'm going to add on click event and when I click the log out button it should be running the sign out function sign out is basically come from next out/ react okay so uh let's change the text to just log out okay so let's try the log out I'm going to click this and boom We logging out nice so now let's log in with another account I think let's log in with Google and I'm going to log in with my email here so let's go to block and we cannot see block because the data is a hard code for now so let's think start uh yep we need to just go to the blogs page here and let's close others like like so and in here we need to basically fet the data from the uh database so we can change this function into a sync and inside in here I'm going to say cons post set equals to A wait for Prisma do Po and here I'm going to say dot find many like so and I'm going to put order by let's say created at I'm going to say descending like so so here I can say console lock post and then uh I'm going to just comment that out so we don't get any warning so here as you can see magic will happen we get this post so basically we have post two post one and the outer email is this one so we need to get the name of the user that create this email so we can add include in here so we can say include include and outer is true when I save and as you can see now we have outer table here outer data basically so we have ID name email and Etc so now let's close this and I'm going to render the post in this uh map here and the post we can grab post do .name just like so when I save and let's take a look what we have we have post one and post two written by enter me this is my Google account that create this post so now let's create post this post from me and let's say this is going to be long content so when I hit submit be on the detail but let's go back to blocks here as you can see it's written by Chanda nice so the crate post is working and now what we need to do is uh we need to fix the detail so let's go to blocks and then ID and then page here so because this is server component again we can use the something like this really really similar so let's copy that and let's paste that right here because we wait in here we need to change the component to a sync like so we need to grab the Prisma and instead of fine many we are going to use fine first and the fine first I'm going to just remove the order by I'm going to say where like so where the ID it's equal to param so how do we get the parum so basically here I can say uh this is going to be functional component and then first I'm going to create the interface the interface going to be block detail page BMS or maybe props and inside in here I have BMS and ID it should be string because the folder here is ID so we can grab the ID and then let's put the interface in here so I can say block detail page props and here we can grab the bars and here we can say bars do wait bams do ID just like so and I can just console lock post and see what we have so as you can see we on the um maybe post one and as you can see in the console here we have the post one and the outer as well nice that is going to be just single post and I'm going to put the title in here so I can say post. title where is that so let's say post do title and this is going to be post. of do name and also this content here it should be post. content so you can say post. content nice so inside this comment here I'm going to send the pars ID so I can say post ID set equals to bars uh let's say params do ID and also I'm going to send the post ID as as well into the form comment okay so let's go back to the detail and as you can see it's working I can go back to blocks and when I click this post for for me click that and as you can see we get the detail all right great the commment is still hard code so let's go back and inside a commment here let's open the commment and here we need to First create the interface so we can grab the the props we can say interface command props and this is should be have post ID and this post ID should be string so now we can put the interface in here functional component and then commment props just like so and we can grab the post ID just like so and in here so now we can uh basically we can just copy and paste from here let's paste that right here but of course CHS that to assn but instead of post now we need to get the command so let's do command and yep we need to say find many because we are going to showing all the command in here that corresponding with this ID post ID so here just change this to where the post ID post ID it's equal to post ID so we can say post ID equal to post ID because this is same name which is can just remove that it's do the same thing so the post here I'm going to change that to commands like so and then now we can map through the comment down here so inside this UL here I'm going to just cut that out for now cut that out and here I'm going to say comments do map I grab the comment individual comment let's say comment and here I'm going to render the LI just like so and we get the error because we don't put the key so the key is should be come from the command Dot D outer it should be let's say command command. outter do name and also the text of course is going to become from command. text just like so and we get the we don't have the command in this post so let's hit submit commment and yeah of course this is not working because we don't hand all the uh uh post request so I think uh I'm going to add manually so let's do the text I'm going to say this is example command like so and also the uh outer I'm going to select this enter me and also the post let's say I think this one this is post for me okay so let's try to refresh and um no we not get anything oh that is because we don't save this things so let's save that and let's try to refresh as you can see magic happen we have this uh outer and we have the commment and the date we need to change that so we we need to make it better format so I'm going to use date FNS so I'm going to say npm install date FNS like so okay it's done so let's say npm runev and then in this date here I'm going to say format it's going to be come from the package so let's say format dat FNS and in here I'm going to put the command do created at and the format that I'm going to use is month and I going to say day and year just like so let's save nice great everything look perfectly nice so let's go back to uh blog ID here we get some warning yeah instead of form comment we need to grab also the params so form command yep we need to use this something like this so I think I can just copy that and paste that in here and the name should be form command props and in here I'm going to specify this is functional component that have form command props like so and the error is will be gone okay nice so everything look nice and and the last thing what we need to do is let's working with the submit of this commment so I'm going to close everything here just open the form comment before we make a post request in this handle submit commment of course we need to create the API road so let's go to API and here I'm going to create folder called let's say commment commments and inside the comments folder I'm going to create road. TS and I'm going to open the post here and I think it really similar so I think I just want to paste that right here and let's see what we need to change so if user not authenticate I'm going to return this it's okay error is okay uh what we need to send here basically we need to send the post ID D and also the text and then here I'm going to change that to command. create data and then I'm going to send the post ID the text and also the outer email nice so yep it's yeah everything should be working so now let's go back to form command and in here we need to change the function here into async function so let's do async so the first thing is I'm going to check if the common dot trim is going to remove all the space is not equal let's say trim is not equal to empty string that mean if user just typing space here it's not going to be submit to form okay so in here I'm going to check let's use try and catch first try catch we grab the error like so and then for the error I just want to conso log the error and for the try let's say cons and say new command set equals to oh wait for AOS Dot like a post request and in here I'm going to say slash API slash commments and the data that we need to send is basically post ID the post ID should become come from the props we can grab that post ID and also the text the text should become come from the common state here we need to try to save that and just try to create new comment so so here I'm going to say hello I click submit and uh as you can see in the network is successfully here but we don't see the comment because we need to refresh I think yep so now we have that so how to refresh the page it's really simple we can use router I think so let's try uh inside this component here form comment I'm going to say say cons router set equals to use router like so and in here I'm going to say if new command do status it's equal to 200 that mean if everything okay so let's go back here just make sure we have a 200 and then I'm going to say router do refresh okay so let's try I going to say hello to click submit and as you can see we have the commment nice really good so now let's go back here I'm going to log out and when user not log in it should be cannot create new post so let's go to the page here and go to the form new new post and I think I'm going to add the disabl button here so let's do disable is true when the data do user dot when use email as you can see if we not loging we cannot create new post so let's go to block and just click this one and uh I I think we need to also disable this button submit commment so let's go to the form command and we need to disable this button so we can say disable set equals to uh I think we need to just copy this copy that and paste that in here but the data is undefined so let's grab that cons data set equals to use session just like that and now it's disabl so if user not log in user cannot create or add comment nice so let's log in with my enter me account so let's do that okay we successfully log in and see on the blocks we have this uh block here it's written by me by Chanda and in here I can also add comment uh awesome and I can submit and here we go we have that nice so yep we can also create post new let's grab the content from the loram Ipson and I'm going to paste that right here and subit as you can see we have this post and I can say this is cool and I I can click submit and as you can see this is cool written by enter me and comment by enter me I can log out and let's try log in with my Chanda account so let's click sign in with Google okay so now I'll log in with my Chanda so let's see uh awesome bro so when I hit submit as you can see it's going to become from Chanda and awesome Brew nice everything look working perfectly nice and the next thing you guys need to add is the user can have ability to like and dislike so you can go to Prisma here and add another model called likes and just play around with that if you have question just put on the comment section below thank you so much for watching see you in the next one

Channel: Cand Dev

Views: 4,408

Keywords: next.js tutorial, prisma tutorial, postgresql integration, next-auth authentication, web development guide, full-stack blog app, react.js, coding tips, programming series, web application, server-side rendering, data storage, developer tutorial, modern web development, practical coding, hands-on learning, software development, javascript framework, database management, tech tutorial, coding journey insights

Id: T3Ic1vT0iO8

Length: 79min 54sec (4794 seconds)

Published: Sat Nov 11 2023