Full-Stack Next.js Blog App with Prisma and Tanstack React Query

welcome back everyone so today we are going to building this really nice block with nexgs the AC UI for styling and Prisma to connect with database and also react hook form to create nice form so as you can see it is the final project really simple look really clean and as you can see in the home here we just have the header and some card in here so when I click this create post it should be redirect me to the form if we not put any value here when I click create it should be as you can see autofocus in this input here and anyway I'm not at any validation in this form because I'm not focused on that I just focus on how to create crude operation in next Cs and Prisma so you will learn how to do that in this video so let's try to say pose one when I click create as you can see now it's focused on the post content because we not put any value in here so let's just copy the lorem episode I'm gonna copy that and post that in here when I click create as you can see the select tag now it's required so let's select that I'm going to say JavaScript let's click create as you can see now we have both one the name is same so let's change that I'm going to click edit and let's say pose 3 like so if I click update now let's go back here and as you can see this is post three really cool and also we can delete that it's gone really fast and yep that's what we are going to be building and hopefully you learn a lot from this video and let's get started so let's first generate next application let's go to the nextgs.org click get started and let's click installation and I'm going to copy this command npx create next app at lettuce and I'm going to give a name next let's say next to S blocks just like that and hit enter and now we should have some question in here would you like would you like to use tab script of course I'm gonna say yes yes Lane yes Halloween we are going to say yes because we are going to use days UI this UI is component by uh library for login CSS okay so let's go back here click yes Source directory I must say yes app router yes import Les let's say no okay let's just wait for that alright it's done so now let's CD into next year as blocks folder and inside in here I'm going to open Visual Studio code let's open the terminal let's say npm run Dev it should be open localhost 3000 let's open that in the browser all right it's great so let's go back to source and then page here I'm going to remove all the content make it simple remove all of that and here I just want to say heading 1 and let's say home and also let's remove all this class name like so now we just have home right here as you can see we get weird background color here so let's go to Global CSS and I'm going to remove all this root and body class styling here let's remove that and we have clean here nice so the next thing what I'm gonna do is let's go to days UI and let's start let's just install the days UI first and we can use this command here so let's just copy that npm install as a Dev dependency this UI so let's paste that in here and hit enter all right it's done so let's say npm run Dev again let's go back to this UI documentation and inside the talvin config we need to put this plugin so let's go back to Italian config and inside this plugin let's put this require this UI just like that nice so now let's try to go to the nav bar because the first component that we are going to create is navbar so let's see where is the nav bar this one so let's click on that and I'm gonna use really simple enough bar so I'm going to use this one I think I think this one so let's click the GSX and I'm going to copy that go to Source let's click create another component called grid folder called components and then inside the folder I'm going to say navbar.dsx like so and I can say error fce and put the content in here just like that and now we can use this nut bar into the layout let's go to layout and in here I can put the nav bar like so save and let's see what we have uh we don't see anything let's refresh to make sure we get this error so let's click on that and see what we have it region failed because the internet UI does not match what was rendered on the server okay so let's go back into layout and I think this div you know the navbar is diff right we need to put the nav bar inside the body tag We cannot put that inside in here so let's go to body and put it like so and it should be work just fine right now great so I like to wrap all these navbar and Main tag inside the container so let's go to talvin.config and I like to create one container object inside this theme here so let's add it's called container and inside this container I'm going to say Center is true and padding I'm gonna add one one ram and also for the it's screen let's do to XL and the value is 100 000 pixel like so and let's go back to the navbar and now we can use that so let's wrap everything here with diff with the class name container let's put I'm going to make it small I'm going to put this div here inside the container just like so and as you can see now it starts from here and then here if you want to see I can say background red 400 and this is the container look like nice so let's remove the background so now let's styling the enough bar let's go back to component and in here I'm going to remove the background let's change that into the I'm gonna say background to neutral 100 here we go and also I'm going to jinx this anchor attack into link let's use Lincoln from next link and it's gonna be icon and in here I'm gonna put hitch rough and let's see or slash because when I click this icon it should appear redirect me to the home page and for this icon here I'm going to remove the SVG let's remove that and in here I'm gonna say create pose just like that and less things the BTN Square I'm gonna remove that so anyway we're not gonna use button because when I click the button it should be redirect me to the create page so in here you can say link and this link should be have create post like so and have each ref when I click the create post it should be redirect me to the create page and then in here I'm going to add class name called BTN and BTN goes like so let's remove this button and here we go all right we're done with the enough bar so now let's wrap the children into the layout here these children here with uh some container because I need to wrap all the body here all the main inside the container so let's cut that out and here I'm going to put diff and put the children inside a div and in this diff I'm going to add container so let's say container and the heck I'm going to say full and also the padding top I'm going to say 12 because in here we have now bar right so let's save and here we go we have home look Lin nice let's go to the page here so what we are going to do in here is when we have some this is basically real card will be card and as you can see it will be like so column I'm going to styling that so we can see something like card in here so let's say class name called grid and item it should be Center and just the file it should be Center and also for the medium I'm gonna say grid template not template adding grid columns into what a medium I'm going to say 2 and for the large and more I'm going to say grid columns I'm going to say three and the gap between the card it should be four and also I'm gonna add margin top to let's just say 10. like so and as you can see now we have uh three column in here when I do the mobile it should be responsive as well as you can see this is in a small medium and large nice great and now let's create a card so let's go to component and in here I'm going to create a component call let's call that pose card.tsx let's do error fce let's go back to the Tao in not telling AC UI and I'm going to looking for cart so the card here I'm gonna use this one so let's just go to jsx copy the content go back and paste that in here too simple as that and now we need to put the postcard into the page here so let's remove all of this and put the pose card like so and copy and paste that couple time so let's see what we have nice at least so let's go back to the postcard and in here for the width I'm gonna say are full it is 100 look nice and also I'm going to add the Border here so we have some border around the cart okay nice and also for the button here it should be I'm not gonna use this button I'm gonna use Link because when we click that it should be redirect me to the detail put a detailed page so here I'm going to say href it what happened it's rough and here I'm gonna say slash block slash whatever the ID so in this case I want to say wine for example and in here I'm going to say let's say read more just like that and let's add some class name in this link last name this should be uh let's say when I hover that it should be half underline let's see when I hover we have underline so now let's create the form if I click discrete post it should be redirecting to the slash create and as you can see there's no page in here the create page in next yes it's really simple in app here we can say just whatever the page we want in this case we can say create like so inside the grid we should create the file called page dot TSX the name it should be page to make it work and we can see error ifce and here I can just say like create page like so now when I refresh as you can see we have create page so basically I'm not going to create the form in this page because we are going to create a reusable component call I want to say form pose so we can use that into the create and then into the edit so inside a components folder let's create another file call form pose dot TSX like so let's do error ifce and we can just import the form posts in here so we can say form pose like so so now we have form pose great and in here I'm going to put heading 1 and let's say add new pose and let's styling this a little bit I'm going to say class name to the text to XL to make it a little bit bigger the margin vertically I'm going to say four I'm gonna do bold and also the attacks must do in the center as you can see we have add new Boost great so now let's go to form pose and in here we are going to create the form so I'm going to close the others and we just have the form post and I'm going to make it bigger let's close this terminal great so now let's install the react hook form so let's go to get started and this is installation so let's do npm install react Hulk form I want to copy that let's go back open the terminal again say Ctrl C and I'm going to space that right here and PM install real code form it's done really fast my internet's so really fast anyway so in here what we need to do let's go back to the record form and what we need to do is let's see I'm going to first let's just remove this return and I'm going to save form so this form is don't have any action and inside this form we are going to put some input so basically we have three right input field text area and I call that let's see what select all right so let's see to the input field first text input and we are going to use this one here with this border so I'm going to copy that and go back here we start in here like so now we have this beautiful input here nice and also let's go back to this UI and I'm going to looking for text area this one and I'm going to use this one so let's copy that paste it here nice and for the select I want to use this one to click GSX copy that base so really simple let's take a look what we have it should be look like this so let's starting that a little bit in this form I'm gonna do first name this is going to be Flex the flex it should be Flex column and then the item I'm going to say Center the justify Center and also the gap between the input field I'm going to say five and also the margin top I'm gonna say 10. great it's going to be look like this nice and as you can see here we have the maximal width so I'm going to change this to maximal width into I'm going to say large like so and for the text area I'm gonna say the width let's say full and the maximal width into large as well here we go nice we have this input field great job and now let's go to the placeholder we need to change this to something like pose title and it's going to be pose content and what else this one it should be selected so let's go to option here and I'm going to say select text here we go nice so now let's create the button so let's go back and let's create button this button have a text call create and in here I'm going to add class name call let's do BTN BTN primary and also the width I'm going to say full and also the maximal width let's say large really nice so now let's use react hook form to get the value it's really simple to use that by the way so in here we need to use use form come from reactor form so let's do that in here I'm gonna do here let's say cons set let's say con set equals to use form it's come from Ria cook form like so and inside this use form we can get this I'm going to make it bigger we can get the register and handle submit so let's grab the register and handle submit like so and to register we can just simply say register and then name of the field really simple so let's go to input here and I'm going to register this so we can say register title for this and we can do in here as well register I'm gonna say content and for this one I'm going to say register and then this is going to be back just simple as that so now let's go back here and as you can see we get some warning that is because when we use this register here and we use use form come from reactor form we need to change this component as a client component so let's put the use client in the top here so we can say use use coin simple as that and it working so now inside this form we can say on submit set equals to handle submit and put the function in here so for now I'm going to say submit let's create the function I want to say cons submit set equals to error function and for now I just want to console lock it's like a data in here in the submit function and we can console log the data like so let's try I'm going to open my terminal and let's see not terminal but console so let's see in the console here let's refresh and yeah we have the warning here we are going to fix letter and now I'm going to put value and let's hit create as you can see we have the title the title the content and the tag here because we are going to use this form pose into the create page and edit page there's no reason we need to add this on submitting here so the better way is the summit should become from the props so if we need to get something from the props we need to create the interface first because we working with the typescript right so we can say form posts props and then here I can grab we need to grab the submit and this submit here it should be let's go back to the browser it will be half type submit Handler come from the reactive form so let's say submit Handler come from record form and we need to put the E form input so first we are going to create that so in here I'm going to create insert Source I'm going to do folder call let's say folder call pipes and inside these types I'm going to create file call let's say index.d.ts and in here I'm going to export type all warm in both like so and it should be half equal object and here we have title in the form we have title should be string we have content the content it should be string as well and also we have back and attack it should be string as well so now we can use this form input pose into this Summit Handler so you can say form let's say form input pose just like that so now we need to remove this and now we can say this component should be functional component that have the form pose props like so and now we can grab the submit as you can see and it should be we get this warning here because the use form it should be have the form input pose as well so in here I can say form input pose like so and as you can see the error is gone great let's close this pipe here so now let's go back to create page let's go to app and then create and then page here and in here as you can see we get the warning because we don't put the submit function so this submit should be a handle let's say handle create post so we need to create a function let's say cons Ole create post set equals to Arrow function and it should be get the data and this handle create pose it should be half a type submit Handler like so and this Summit Handler have form input props form input pose like so and now we can just console lock the data so we can see the value let's say console log data like so and let's go to the browser and here uh what we have wrong here oh yeah we need to change the component here into client component as well so let's do use client like so let's save and here we go nice so let's try to say pose one this is suppose one and the text I'm gonna say create and here we go we have the content here nice to add validation in real quick form it's really easy so let's go back to reactor form and let's see this is apply validation let's see down here as you can see we can say require true and the maximum line any value here minimal value maximum value the pattern you can do that so for this video we are going to you just use the require validation so I'm going to say comma here let's do comma and then here I'm gonna say require to true just like that so I think we need to just copy this because all field will be required just like so so now we need to change this button into [Music] type submit like so let's go back and see when I click create uh we we can see the value because as you can see here we have value I'm gonna remove that as you can see you cannot see the value because the post title is require nice the one thing I'm going to change here is the post it should be uppercase nice and this should be half let's say JavaScript and we have PHP and also we have maybe python here just like so and I think we should get this error here we are going to fix this because use the default value or value props on select instead of selected we cannot use selected in here we can just say value into empty string like so let's refresh and the error is to be gone and the default value so let's go to select and in here I'm going to put the default or default check but default values it should be I'm gonna say empty string for now let's refresh by default issue we select this option here which is disable so now we are going to create the detail so let's go back to home and then when I click this detail it should be crossed as you can see so now let's close everything here and we are going to create the detail so let's go to app and in here I'm going to create folder called let's say block and inside the block we have the folder called let's do ID inside array because the ID will be dynamic and inside the ID we should create page Dot TSX like so and we can see our ifce and we can say uh I don't know let's say block detail page Maybe and when I save that and let's take a look we have blog detail page nice so in here I'm going to now heading to and this is going to be the title I'm going to say pose a one maybe let's add class name here the class name should be half margin bottom to ache and this title here I'm going to make it bigger let's say text to XL and also the foreign should be bold also the Martin vertically I'm going to say four just like that as you can see we have both wine and down here we have the PTEC which is the content so I'm going to say content say pose one content we get warning here because we need to return to single pack HTML here not HTML but GSX so I'm going to put div and let's wrap all this inside this parent div nice so here I'm going to styling this little bit the text it should be let's say slate let's say 700. like so great and into the final project as you can see uh we cannot see that so anyway we have the button edit and button delete in here so I'm going to put that button into the components here and the component name is should be by an action so let's do button Shin dot DSX to error ifce and I'm going to put the button action down here let's do button action just like that and insert this button action what I'm gonna do is let's remove the text here and I'm going to render link ing should be come from the next link like so and this have kind of like edit text and let's say it's rough into slash edit slash ID just like so and down here we have pine this one here have attacks call delete and this button let's Now link that little bit you have ptn and also ptn Dash error to see red color here we go nice and for the link we need to add class name into BTN and also the margin right I'm gonna say two nice we have edit and delete great so now we are going to install Lucid react to get nice icon so let's say Lucid react Lucid dot Dev and here you can find the pickets inside the react native view Etc but using react so we need to just use this command here let's copy that go to the terminal and I'm going to paste that right here and let's go to icons and in here there's a lot of Icon so I can say edit for example and or maybe pencil yeah we are gonna use this pencil icon so let's click on that as you can see we can just copy the jsx copy that and we can use it in here like so and we need to import the band sale from Lucy to react let's restart the server npm run Dev and now we should be able to see the icon let's refresh and here we go as you can see really nice and now I'm going to looking for trash and I'm going to use this simple truss here I'm going to copy that and copy GSX go to delete here and paste that right here and of course we need to import the the rest unless the click this is what we have nice and also for the icon here for the logo icon let's go back to navbar and here we are going to use icon call let's sort that I'm going to use icon call book open check this one let's click that copy GSX go back here and paste that right here and import that just easy as that and as you can see now we have this beautiful logo and we can also change the color to for example blue and here we go the color is change really nice so now let's create the edit page when I click on that as you can see we have 404 because we don't yet create the edit page but as you can see we we go to edits less ID and there's something wrong with the button action here this should be any ID for example one when I click that it should be good to edit slash one so let's go to app here a folder and I'm gonna create folder called edit and inside the edit I'm going to create a folder called array ID and inside the ID we are going to create file call page.tsx and in here we can say here ifce and I'm going to change that to edit edit posts page like so let's remove the react and let's refresh as you can see we have edit post page nice so the edit paid edit postpaid it's really similar like the create so I think we need to just copy all this content here and paste that to the page and we need to paste that right here like so of course we need to import form pose we need to import submit Handler and form input forms and again we need to change this to client you can say use client and as you can see we have this form and of course we need to change this to edit post I want to change this to uppercase E edit pose and what else I want to change the function name I'm going to change this handle edit post and I'll edit both just like that nice and the text here it should be added or update so I'm going to add some props call is editing and of course we need to grab this from the form pause let's open that compose and in this interface we need to add is editing like so and this should be a Boolean value let's grab that here I'm gonna do is editing and we need to add the condition in this button here so in here I'm going to add condition if the is editing is true I'm going to render text call [Music] update what else let's put create so now it should be update nice but as you can see in the create we have warning here because we don't send the is editing to false like so and yep everything look working I go back a detail edit go back and the next thing is I'm going to grid button back here so let's create another component called back pattern let's close everything to make it look simple and inside a source component I'm going to create folder called not folder but file call back button dot DSX and yeah this is your P uppercase p like so and let's say rifce and it's going to be back button like so and let's remove this diff I'm going to use pine like so and this button have a text back and also I'm gonna looking for icon let's say self run saffron back except for left um this one click on that call ptsx and put that in the front of back text like so and also in this button I'm going to add class name called BTN and when I click that on click event it should be running the router of course we need to say cons and then router set equals to use router it should become from next last navigation not from router should become from navigation like so and we can say a router dot back just like that it's Error because we don't invoke the use router and now we need to use the back button into the detail so let's go back to app Block page in here we need to put the back button I think in the top here let's put back button like so let's save and let's take a look uh it's only work in client yep so here we need to change that to client component because we're using use router so let's say use client as you can see we have this back button and it working nice and also I'm going to put the back button into this create page let's go to create and then page I'm going to put that in here let's do back button just like so and we have some warning here because the back button it should be B uppercase just like that and now as you can see we can go back when I in the create pose I can go back here and yep it is working after we're done create the UI and I think now we need to just save this we can say git at all let's say git commit test M let's do create the UI hit enter and now it's clean great nice so now we can say npm run Dev again great so now let's working with Prisma and database which is the back end stuff okay so first we need to go to the Prisma and let's just install the Prisma let's click this installation instructions and um I'm use npm let's copy this open another terminal and in here I'm going to paste npm install Prisma as a Dev dependency okay it's done so let's go back to Prisma documentation let's go back here and the first thing what we need to do is let's say uh after we install Prisma we need to see npx Prisma in it so let's do that npx press my init then it will create pretty smart folder and schema Prisma file and also it will it will create the EnV file nice so first I think we are going to create the model so let's go to schema Prisma and let's create a model with the name hack this will be the attack of the pose the value is like a JavaScript PHP python Etc so in here the first thing is ID and the ID here is B string and this ID have a default value Co ID like so and also we have name the name it should be string and this name here have a let's say character I wanted to 100 variable character so let's do 100 and also we have another model called I'm going to say posts it should be in the top here let's say both and this model have ID I think we can just copy from here let's just copy this ID and name let's copy that and this name here it should be title the title is half a 225 character and the content let's do content it should be string and also we have created let's say create that add it should be half date time and also the default value should be now like so and also we have the update that should we have date time as well let's say update at like so uh we have warning here because yeah cool so we also have uh like ID which is string in here I have pose so let's do pose and let's put this pose like so and when I save it's automatically create this attack here nice so after we create the schema Prisma we need to go back here and what we need to do is we need to say npx please Mommy grid let's copy this and open the terminal and I'm gonna say npx Prisma migrid we get this warning here uh that is because in any Vermont variable we don't yet change that so anyway I have my let's open the postgres install on my local I'm going to stop that first go to server setting and as you can see it's running over 5432 which is this one and also uh the user is postgres and the password I'm watching step to one two three one two three one two three one two three all right let's click Start and the name here issue the username it should be both Grace like so and the password one two three one two three let's run again and pick Express mommy grid and anyway I have some data in my my DB database I'm going to remove all of that so I'm going to say yes for some reason it's stuck in here but it's done anyway so let's I'll draw C and I'm gonna say npx Prisma Studio to open the Prisma Studio on localhost 5555. as you can see we have two models both we have ID title content create ad update at Tech ID tag okay and also we have the attack here nice we have ID name and pose great everything looked working perfectly fine and I'm going to open another terminal here to run my app so I can say npm run def so first I'm going to create a road that handle the get requests on the tax so in Source app I'm going to create folder called API and then inside the API I'm going to grid folder called tax and inside of text a grid folder called Road the name it should be a road.ds okay so in here I'm going to export the async function let's do async function and the name should be get because we are going to make get requests if you want to make a post request the name should be post but it should be bad still it should be delete all right so in here I'm going to say try and catch let's say catch I grab the error and then in this try what I'm going to do let's say cons packs and in here I'm going to wait for DB oh we don't yet create a DB right anyway let's go back to the uh Prisma here and I think um [Music] in order to use pretty smart we need to install the Prisma client so let's copy this npm install Prisma client and we are going to install that and also let's scroll down and after we install we need to say prismamic grid Dev or Prisma DB boost so let's copy that and just wait for that alright so it's done so now we can say npx Prisma DB boost here we go so now we can see npm run Dev again and yeah it should be def like so and now we need to create the folder called lib inside this source so I'm going to say lib folder and inside the lip folder I'm going to create db.ts like so and we are going to copy this I'm going to copy all of that so I'm going to copy that and paste that right here and also instead of using Prisma name I'm going to use DB name so in here I'm going to say export cons DB set equals to Prisma just like that and yep just like that and now we can use the DB in here let's import the DB from the lib DB and then we can say deep dot pack and Dot find many to get all the data inside attack and in here I'm going to return next response dot Json and then I'm going to send the text like so and also the status I'm gonna send 200. like that if something wrong happened let's just copy this return paste that in here and I'm going to send message and the message it should be cannot fetch tax like so and the status it should be 500. just like that and now let's go to the browser I'm going to open localhost three thousand slash API is less hacks and hit enter as you can see we have MTN array because we don't have any data in these tags here so I'm going to add records to make it bigger so you can see and the first thing is I'm going to put Javascript hit enter and let's do PHP and let's do python all right so when I click save as you can see the ID is automatically create and here when I refresh as you can see we have the response we have ID Name ID name we have three data because we set this to three I three data okay great so now let's go back to form create pose here as you can see in create posts we have this select here so in this selection showing this data come from the database so what we need to do is inside the form let's see form posts we need to fetch data in here so basically you can just use simple axios and just use access.get but I like to use uh then stack query so let's say 10 star query I'm going to use this because I just don't want to use a lot of state it creates State like uh it's loading data Etc it's Error I don't want to do that I just want to make it simple as possible so I love to use 10 stack query anyway so let's go to installation and I use npm so let's say npm install then stack rear query so let's put that here and hit enter alright so now let's install the axios npm install axios so basically I have another video tutorial in YouTube about 10 stack query I'm going to put a link on the description if you want to watching that okay so now what we need to do it's done we need to let's say npm run Dev first here we go and let's go to documentation and let's go to queries and this is how we fetch the data it's really simple we need to just use Query and we get the slotting variable it's Error variable we get the data and error simple as that so in here what we need to do let's create a comment and I'm going to say fetch please tax so in here I'm going to say cons like so and I'm going to say use query like that and this use Query here inside of this use Query we have the as you can see here query key so let's do query query key it should be array and I'm going to put that text in here and also the query function it should be async and async function let's do that and in here I'm going to say cons brass set equals to weight axios dot get I'm going to get so let's import the axios here we go and I'm going to get for from slash API slash backs nice so down here we need to return response dot data just like that and in here we can grab the data and I'm going to change the name to data text like so and also you can grab the is loading and I'm going to change that to a slotting X just like that and here I can say console log.tx and we should see the data into the console let's see so let's go back to uh this app and I'm going to open the console let's do the console and let's refresh first I hope you can see it oh we get an error because we've done a wrap our application with query client provider so let's go back here and basically we need to let's go to quickstart.here and I hope I can find it here yeah we need to wrap our app with query client provider so let's go back to vs code so in vs code I'm going to open my let's say layout you can directly put the query provider here but the better way is to create another component and you need to change the component to client and you need to put import that in here so let's try so here I'm going to create profilers dot DSX and let's do rfce like so and here we are going to use Query client provider query client provider like so and insert this query client provider we need to grab children come from the props so here we can say children and we need to return the children here just like that and as you can see we have some warning because if these props here have a type any let's fix that interface providers props you can say children and this is going to be a react node and now let's put the props I can say this is going to be functional component and then the props it should be profiler props just like that and as you can see she should have client let's go back uh we need to just copy this and paste that right here we need to import the query client and here we can say lion set equals to query client just simple as that so let's use that to layout so we are going to wrap our app here the nav bar and also the children inside the profiler that we already create here we go now as you can see function cannot pass directly in client component unless you explicit alright so let's see what we have here so let's go back to the oh yeah that is because this profiler should be client component let's say use client nice as you can see in the console the first time is we get that under fine and then we have this data here come from the API great so it's working let's close the layout and the provider so now what we need to do is I'm going to uh let's map through this data here data text into this option so what we need to do is in here I'm going to say data text let's say dot map I'm going to grab the item and then in here I'm gonna return option so let's do option like so let's remove this hardcode option and the value it should become from item dot ID as you can see we don't get the type here that is because we don't yet import here inside this use Query we can put the tag like so come from Prisma client like that and it should be inside the array like so so now as you can see if I say item dot we have ID and name great so here we are going to put the item dot name like so and also we have some morning because we don't put key so let's say key set equals to item dot ID nice so now let's refresh and see as you can see we have JavaScript HP Etc and anyway the first thing is we get an undefined we need to check that first here we can cut this select and here I'm going to render is loading if it's loading tag is true I'm going to render text called loading dot dot and else I'm going to render this select just simple as that to know when I refresh as you can see we're floating and then we get the select tax or if you want you can go to town in here go to this UI and found the loading here and you can use any loading you want so maybe we are gonna use this loading Rings just to make it simple we are going to use this loading ring so I'm going to say jsx of course let's select medium and I'm gonna change this loading to this loading all right so let's try I'm gonna go back here let's refresh as you can see we're floating and then we have the select all right so everything look working nicely perfect and what next we need to do so next I want to when I go back here on the home page here I want to get the data from the database but in the case that I'm going to showing I'm showing you in this form is we get that as a client component in this home here I'm going to get the data as a server component so we don't need to create the API because we can directly fetch the data inside this page component here all right so the first thing what we need to do is I'm going to say corns pose set equals to because we need to fetch data here we need to change this function component here into a sync weight so here I'm going to change that to a sync like so so we can await the get pose and then let's create the get pose function I'm going to create up here this is going to be a sync function as well get pose and let's do in here we can say cons response set equals to wait I can say DB Dot pose and then dot find many just like that and down here we can just say return not respond but return what I'm doing return response like so and in here I'm going to console log the post so we can see the data so let's see as you can see here we have uh empty array because this is a server component we cannot see it into the console it should be inside this terminal as you can see we have empty array nice so now let's add data manually inside a pose here so I'm going to click add record and uh here for the title I'm going to say pose one for the content let's say this is pose one and tag here I'm going to use JavaScript and let's save all right so are you ready for magic happen I'm gonna refresh here and you will see data on the console on the terminal let's refresh bam as you can see here we get the data how beautiful is this great so now what we need to do is we need to map through here so we can say pose dot map we don't need to handle it's loading or any kind of weight until we get the data because these come from server so this is really fast so it's happened when we refresh the browser anyway so post.map I get the individual post and then here I'm gonna return the both card just like that uh yeah we need to put the key set equals to Bose dot wait pause dot ID so now when I go back here we should have this one our title and anyway I'm going to put a pose set equals to both just like that let's go to postcard pose cart and we grab the pose here and of course if we get some props in this component we need to create the interface so let's say interface call post card props and it's like a pause and dispose have ID call string have a title string and also have a content string just like that but as you can see we have in the terminal here we have the create ad we have the ID Waits where is that this one if you just want to returning title content what you need to do is let's go back to uh page here you can simply add a object inside the file menu and you can say select this is will be select any field that you need to return you need to ID I'm going to say true you need to title I'm going to say true and you need to content let's say true as well so when I save let's try to refresh my path will not console anything so we cannot see so we can see console log pose and then as you can see now we just have ID title and content and also you can order by I'm going to order by created at and it's going to be descending nice if you want to showing the tag you can also add pack and you can say true like so and you get the tag here so now let's go back to Poor's card and here we have ID title content and also tag this tag here it should become from the Prisma client just like that nice so now we can distracting the title let's do pose here like so we need to grab the title wait the title um oh my bad we don't yet put the props in here so we can say functional component and then we put the post card props like so and now we can just say uh uh what else pack like so and the title we need to put that in here let's do title and also the body let's do content and let's take a look what we have on the browser and as you can see we have both one and this is post one and this one so anyway I'm going to put the tag down here I'm going to use let's go back to base UI I'm going to use um I believe it's called batch yeah this one I'm going to copy this and paste that to anyway let's put that here and here I'm gonna put tag dot name so now let's take a look what we have as you can see we have this JavaScript here and let's paste that here let's take a look yeah post one this is post one the which is Javascript and we have read more in here Okay cool so let's try to add another pose I'm going to add manually first let's go back here at record let's do pose two let's say this is supposed to and also the pack I'm gonna set PHP and Save let's take a look I'm going to refresh and Bam we have both two and the tag is PHP and the content as well really great so let's click read more of course we don't get any data in here it's hardcore so let's fix that so let's close everything here and I'm gonna open the details so app Block page here and again for the detail block I'm going to use server component so we can directly fetch the data in here okay so the first thing is how do we get the params this one here uh I think let's go back to components I think I need to change the ID let's go to postcard and this one we need to change this ID to use this idcon from this uh props so we need to grab and put that in here oh what happened in here and also we need to uh text that in here so I think we are going to use spec thick and also wrap this and for the oh wait for this number we need to put the ID just like so when I go back and when I click this read more as you can see oh we need to refresh that first let's click read more and as you can see blocks less the ID nice how do we get the ID so simply let's go back to page detail and in here first I'm going to create the interface interface call block detail page props and we grab the bottoms and in here we have ID because we have ID folder that's why we can get the ID and it's going to be string and we can put the functional component here and put the props block detail page props and we can grab the params like so and in here we can just console lock params Dot ID like so and now let's go to terminal as you can see here we get the ID right what I'm going to do here is I'm going to say cons we grab the individual post set equals to await of course we need to change this component into a sync so we can await here so wait DB dot of course we're not used DB in here we use DB on the function so in here we can say get pose like so get both and let's create the get pose here so I'm going to do a sync function uh get pose like so and this get boost is basically attack ID this ID should be string and this ID should become from params.id nice and in this get post function what we need to do let's say cons set equals to 08 for a DB dot need to import the DB first with DB import that and then we can say dot pose dot find First and then inside in here we need to set the where the ID is equal to ID like so and what we need to return here is let's select I'm going to return ID let's say through wait true I'm going to return by Toll let's do true and let's return content I'm going to say true and also the pack it's also true nice so down here we need to return the response return response just like so and here I can console log pose so we can see the data on the console as you can see we have title content tag cool so we can use the title in here so I think we need to destruct ring again so here I'm going to do cons set equals to post like so and in here we grab the title as you can see when I hover the title we have the title that's not axis on type ID title content that is because sometime the post is null so you can just check if pose have a value you need to return all of this or I think the better way is just remove this destruct ring and we are going to directly put the title in here so we can say post.title so let's do Post Dot title and let's put that inside the content here so we can say pose post dot content just like that and let's go to postcard we are going to copy this badge here I'm going to copy that let's go back to page here and I'm going to put that in here and this is going to be both dot tag dot name and when I save let's go back to the browser as you can see we have the title the content and this batch here okay great this is working for the detail let's go to post one and it's called post one this is post one and also the batch it's JavaScript okay it's working so the next thing what we need to do is let's make the create pose work so let's go to create pose let's go back to vs code I'm going to close all of this let's close that close all and I'm going to open the create let's go to Source app and then create pitch.tsx in here we need to make a post request into database so normally you can say access.pose in here but again we're using 10 stack query so we can use use mutation in here so constant equals to use mutation like so and in here we can put mutation function and this mutation function is basically function and that returning axios dot pose so of course we need to import the axios first like that and let's say axios.pose we are going to make a post request into slash API slash pose slash create and then in here I'm going to put the new pose the new post it should become from these props here so you can grab that new post this new post basically as you can see it should be half value from form input boss as you can see when I hover it if this is have title content and also attack and here we can grab the mutation function not rotation but muted function and then is loading State like that and this is what we need to run in this function so it's better to change the name to something called create post Maybe let's say create I cannot type create posts great so now we need to run the create pose in the handle create post that we send into the form post component all right great so in here we can say on error if something error happen we can basically handle in here you can use those or something like that but for now I just want to say console log or or maybe you can just say console error and we put the error in here the error should become from this on error function like that and finally here we have on success and this unsuccess also running function and in here I'm gonna say router so of course we need to create a router variable and this is going to be use router come from next navigation and down here we can say router dot push wait dot push into first class so now let's try to make a post request let's go back to create page and in here I'm going to open the network and let's see what we have so I'm going to post three and this is pose three and the attacks I'm going to do python let's click create and as you can see we have 404 that is because we don't yet have the router right but as you can see the payload is uh right which is we send title content and also attack all right we don't have that route so let's create that let's do inside API slash I think it should be both API slash post slash create like so and inside the create again we need to create Road .ts so I think from the tags here we can just copy this and go to the create and what we need to change in here this function it should be post because we are going to make a post requests and then how do we get the request from the API from the client here so basically you can grab the request the request here is basically have a type of request like so to get the request value we can say cons body set equals to await request dot Json like so this is basically the payload that users and let's change this stack to posts or individual posts and we need to wait for DB Dot pause and we're not using find many in here but we need to use create like so and when we create data with Prisma we need to put data in here data object and let's put an object in here we send the title the title is basically come from the body dot title and also we send the content it's come from the body dot content and also we need to send the tag ID should become from body Dot ID here we go and down here what we need to do let's return next respawn Json and we need to send respond the post that we already created and start this issue be 200 and the error if something ever happened we need to say could not create both just like that and the respawn E5 is 500. all right so let's try that I'm going to refresh and let's do pose three as the content this is both three and I'm gonna select python let's try to create as you can see we have 500 error I'm not sure what happened cannot create let's try to console log the body so just just make sure we send the payload let's try to send that again and as you can see we send the title content and tag uh it should be back here I think let's do that again create and as you can see it's work but again I think we need to use stack ID like so and let's go back to the form and I'm gonna close this let's go to form pose let's go to form and the name here it should be Tech ID like so and we need to also change the the form input props it should be a tech ID not just tag let's put tag ID and really take a look working now great so yeah there's no error so let's try to create another pose so I'm going to create pose this is going to be pose 5 and let's do this is pose five and I'm going to select PHP let's create as you can see there's no data but the create here is 200 that means we successfully create we also get the response back when I refresh we get the post five and also that the batch here is PHP so let's go back and what we need to do after we unsuccess create the pose we need to basically say router dot refresh so let's try that again let's do pose uh six and the content should be this is pose 6. and let's do python let's create and as you can see we have both six and also the detail is should be also work all right nice we successfully making this create boost work and now we are going to create the API for edit and also delete so let's go back to the vs code I'm going to close this terminal and let's just close everything so now let's go to API API folder and inside the post here we are going to create folder called pose ID so let's do both ID like so and inside a post ID the post ID should be same level with the create folder let's drag to the pose and here we go it should be Sam level and inside of post ID we are going to create a file called road.ts nice so in here again we can just copy and paste the content from the create let's copy that and paste that in here and for the function we are going to use delete because we are going to make a delete request in this delete function we can also get the context params in here so you can say I'm going to give a name context these contacts have a contacts props let's do props this context props is basically the interface the interface should be have power arms and inside the params we have both ID that's because we create the folder named post ID so here this would be string and now the try here inside a try I'm going to remove the body here we don't need that and also this is going to be I'm not going to return anything so let's just remove the variable pose and here we can see DB dot post dot delete like so and what we need to delete is where the ID is equal to contacts Dot I think we can just distracting the params here we can say cons uh let's set it equals to context and in here we can grab the params so we can say params like so and then here we can say params.post ID we are going to delete the value where the ID is equal to param that we sign here nice so in here because this is a delete request so we cannot use nextresponder.json instead of we are going to use new respawn new response and here I'm going to returning null and also the status I'm gonna say two zero four nice and also when something ever happened I'm going to say could not delete both great so now let's create the paths function the patch function it should be handled update so let's copy the delete and paste that in here the function it should be patch like so and it's like a request and contacts we get the params here and in here what I'm gonna do is I'm going to await DB post Dot I'm gonna do update because we need to update the data and first we are going to select the post that we need to update where the ID equals to params.post ID and here we are going to send the new data so let's do theta and then the title it should be come from the body so let's grab that once body set equals to it should be a wait for DB dot season this is the payload that we send it's like the create in here request to adjacent all right it's not TP but request.json and here we can send the body dot title and let's copy this couple of times this should be the content and this should be the like ID just like that and the response we are going to make a decent response so I'm going to paste in here next respond.json and I'm going to say message here into let's do update success and the status it should be 200. also when something wrong happen cannot let's do update post cannot update both the status is 500 so now let's go to the button action because as you can see on the post detail on the Block detail here we render this button action this is basically this two button in here so let's go to button action and here I'm going to close others like so and we are going to working with the delete first alright so again because we need to change something into database we need to use use mutation come from 10 stack query so here we can see cons we grab the mood date set equals to use mutation and in here we are going to specify the mutation function so let's do mutation function it should be a row function here and we are going to change this to a sync function and then in here I'm going to return axios dot delete we are going to delete and then in here I'm going to use pactic I'm going to say for slash API slash pose and then slice whatever the ID we have in this detail so basically this ID should become from the props here let's go back to block ID block detail and we are going to send the ID in here this ID here so let's do ID set equals to ID and let's go back to button action we are going to create the interface so let's do interface button action in props is going to be half ID and the ID it should be string so now let's put the props here so you can say functional component and then button action props so in here we can grab the ID here we go and ID is going to be in here let's go to create page and basically all this here it's same so I'm going to copy that go back here to the button action and just paste it right here so of course we need to create the router so you can say cons router set equals to use router come from next last navigation like so and we run that down here nice so now let's change the muted function name into I'm going to do delete post like so and the delete post here will run every time we click the button here so let's handle the on click event and in here I'm going to run delete pose just like that so let's try to go back and see ID is not defined so let's go back to block detail and this ID is not defined that's because it should be params.id yep so let's refresh and uh yeah use router it should be used client I client component let's go back to button action and we are going to change this component to this client and here we go so as you can see we own the Post 6 when I delete the Box 6 it should be gone all right so let's go to post 5 when I delete it's gone but we don't see any loading uh happening here right so let's add loading let's go back to the connection and we are going to grab the is loading and in here we are going to add the spinner loading so in here I'm gonna do if it's loading is true I'm going to render span span tag like so and this pen have a class name called loading and then loading this spinner like so and also here I'm going to wrap that out if the is loading is true I'm going to render something in here let's do that like so first we need to wrap this inside the react fragment just like so and paste that in here and of course this should be I'm gonna put text call loading something like that and let's try to delete I'm going to click delete as you can see it's so fast I'm going to open my let's do Network and I'm going to change my connection into fast 3G let's go to read more and I'm going to click delete as you can see we're floating and then boom so next we are going to working with the edit page here when I click the edit should be open the edit page here we go and in here the first thing what we need to do is let's showing the data in here the initial value how do you do that so normally we fetch the data it from the let's close everything we fight the detail block into the app and then edit page here on here so but as you can see this is client components so normally we use use Query come from 10 stack query right but inside API we don't have the we don't yet have the uh get requests from Individual posts so I think we need to just copy come from the tags here I'm going to copy it go back to the post ID here and paste that in here of course we need to delete this import here and this cat should be half the requests and contacts let's copy that and put it in here and also we are going to use DB dot it should be both or individual post it should be a wait for a DB dot pose it's not find many we're not going to return all the posts but we are going to return for the specific posts so we can say fine first and then here we are going to specify the ID where the ID is equal to of course we need to use the ID come from the params so let's copy paste it here ID is equals to params.id like so and also I'm going to include as to include the pack attack it should be true just like that and in here we need to return the next responsation and then we need to send the individual pose just like that so now when I make a post request for example so let's go to this here and I'm going to change to localhost 3000 slash API slash pose slash ID and as you can see we have the specific ID here and we get all the data we also have the tag here but as you can see when I click the edit it should be opened at its last one so let's go back to the button action and in here where's the button this one we need to change this and we are going to use backtick let's do it's going to be edit slash ID all right so now let's save and I'm going to refresh let's click edit as you can see it's opened up let's click edit as you can see it's open the blocks less edit oh it should be half four slice in here in the front of the edit so now when we click edit as you can see we are on the localhost 3000 slash edit slash boss ID nice so now first let's make a get request in this edit edit page and we are going to do that on this page component here so now we are going to use the use Query come from 10 stack query in here so we can say cons we grab the data set equals to use query come from 10 stack real query and then in here we are going to specify the query key it should be array and I'm going to say both and then whatever the ID and also oh wait the ID here it should be come from the param so it can create the interface first interface edit post page props it should be half params wait should we have forums and inside the bottoms we have ID and the ID is should be string and now we can put the interface in here I can do functional component and then here I'm gonna put the edit page props like so and we get the params in here and let's destructuring the ID so we can grow up we can grab that so we can say cons and then ID set equals to params just like so and now the ID should be in here the next thing what we need to paste inside the use Query is the query function so let's do query function this is should be the async function so let's do a sync I'm going to use our function and in here I'm going to say cons response set equals to oh wait I'm going to use axios dot get and let's put the Road here so I'm going to say slash API slash post slash whatever the ID let's put the ID here just like that and here it should be cons and in here we need to return response dot data just like that so now let's try to just change the data name to data both and I just want to console lock that just make sure the data is available so data posts like so let's go to the oh my bad let's go to inspect and then console so let's see what we have uh let's refresh as you can see the first thing is undefined and then we get the data so now let's also get the is loading I'm going to change the name to it's loading both like so and in here I'm going to check first because this is client component so it's like a time to get the data so we need to check if the is loading posts is true I'm going to return let's do div here this div have a class name called let's say Tech Center and inside this text enter we have span that have the class name called loading and loading I'm going to use this loading spinner and loading large so now let's send the data post into the form post here so I'm gonna send that let's do I'm going to give a name initial value initial value set equals to data posts we don't have the handle the initial value on the form post so let's go to form pose and here we are going to get the initial value it is going to be form input pose and the initial value it should be optional because we're using this from both also on the create we don't need to send the initial value when we create post right so here I'm going to get the initial value like so and we are going to use this initial value into the form here so I'm going to put object inside the use form and I'm going to say default value into initial value just like that and let's see what we have on the form so let's refresh and let's see we don't get anything basically and let's go back and let's see what we're doing wrong let's go to page here and let's hover this uh Yep this should be initial not in ital initial value like so let's go back to the browser refresh hopefully as you can see we have the post one content text as well great let's go back here I'm going to create another pose let's do pose to this is the post awesome too like so and attack PHP let's create and as you can see we have this post to and when I click read more beyond the detail when I click edit as you can see we also have the value nice so now let's use mutation to update the data I'm going back to my create and then page here I'm going to copy all this use mutation come from the create and then I'm going to go through my edit here and let's paste that right here like so and let's import the use mutation this should be uh let's just say new post it's okay and also this is going to be axios dot patch and the URL it should be a dynamic so let's change that to forward slash API slash uh posts slash ID like so and also I want to change this name to update posts the router let's do up here I'm going to say cons router set equals to use router come from next navigation also the slotting here I'm going to change the name to is loading submit so now let's run the update post into this function here handle edit post so let's put that in here just like that so as you can see here the first thing is we create the use mutation this use mutation here we have this update post and we run the update post inside the handle edit boost we send the handle edit post into this submit props inside the form pose and here we get the submit and then we run the submit whatever we've click on submit in this form alright so now let's try to edit I'm going to open the network and in here I'm going to change the title to updated post to update so let's click update and let's see as you can see we have post to updated great it's working and the next thing I'm going to add is the is loading when we create both or edit both I need to have loading when we create posts or edit posts so now we need to send the is loading where's the is loading let's go to page here we have the is loading submit I'm going to put that into this form pose so let's say it's loading submit set equals to A slotting submit and we are going to get the slotting submit into the form post so let's do is loading submit and the value here it should be Boolean and let's grab that in here slotting submit and also I'm going to scroll down and in here we are going to handle the is loading so inside this button here I'm going to add condition if the is loading submit is true I'm going to render span this span it should be half class name call loading and loading I'm gonna do spinner and also here I'm going to jinx when it's loading let's say is loading submit to true I'm going to showing updating here let's do updating like so and else just showing update string like so and also I'm going to change this create when the is loading is loading submit through I'm going to change this to creating like so else I just want to say create just like that so now let's try to edit but as you can see on the page here we have some what is this oh yeah on the create we don't yet send is loading that's why we get this warning so let's say is loading I'm going to change the name to is loading submit like so and let's send the is loading submit in this form pose just like so as you can see nice and now let's try to make a post requests and as you can see the network now is still fast 3G it's a little bit slow of course that's why we get this loading here just wait for that so we can see the loading in this grid so now let's create the new pose and the content this is new post I'm going to select JavaScript let's click create as you can see we have the loading and that is QB redirect me to the home page as you can see we have this new pose great and now let's try to edit I'm going to click edit I'm going to change the title to new pose update and let's click update and as you can see we have this loading and then it should be redirect me to the home and we have new Boost update nice so now let's try to delete and when I click delete we have the loading and then it's also work nice so the last thing I'm going to showing you is when I try to create posts with long content so let's try to see uh both three and the post content I just want to copy and paste come from the lorem ipsum so let's copy all this content here I'm going to copy that go back to the add new post and this is going to be PHP let's click create as you can see it's look like this it's look not nice so let's go back to uh postcard and what we are gonna do inside the all right so in here I'm gonna do is let's say content dot slice and I'm going to do 0 and then 30. so let's save let's take a look as you can see now it should be like this and when I click read more it should be showing all the data great so when I click delete it's also delete the pose alright so finally we successfully create all the root operation we already make this create boost work we already make the delete work and also the edit work so hopefully you'll learn something new from this video and see you in the next video

Channel: Cand Dev

Views: 18,468

Keywords: Next.js tutorial, blog creation, Prisma database, React Query, CRUD operations, Tailwind CSS styling, React Hook Form tutorial, full-stack development, web development guide, blog app, Next.js blog, Tanstack query, Daisy UI, Lucide icons, web forms tutorial, JavaScript, web application development, step-by-step tutorial, coding tutorial, beginner-friendly, practical web development, hands-on tutorial, programming guide., prisma, nextjs with react query, prisma and tanstack

Id: HCF6vN-1SLc

Length: 108min 7sec (6487 seconds)

Published: Sat Sep 16 2023