CRUD in NextJS and mongoDB. A simple todo app in NextJS

hello and welcome to our channel in this video we will be building a simple Cloud application for how to do a next series and mongodb we will be using XC or make HTTP request remove step 5 photo UI design first we will create a Next Step as npx create Next Step at latest and I will name the app as Cloud underscore next.js and I will not be using typescript and Telvin CSS now let's run the application npm round Dev the application started with localhost 3000 let's open under instance of the terminal and install the packages first one is Mongoose to help node interact with mongodb and second one is xcos to make HTTP request to node.js the Nexus app is running now let's go to the website and copy this lines of code to digital link.css file Cooling and then I will go to underscore app.js file and I'll first import it from next head then I will make these changes to the app function I will put the hit text website I will also have to make the older text self closing all the meta texture pushing then I will import skip from netscript website I will copy the CDN script and paste it on the web.js file and then save it and bootstrap is integrated in the next step now for the net part what I am going to do in the before I for this application in the index.js file there will be a form over here I'll be fill in the to-do's and I don't need please call this code it was generated when the Next Step originated so I will just remove them let's save it to display the to those I am going to create another page here display to do dot Js this page is going to be a rear component so rafce this react error function component Now to create the net bar I am going to get another file in the in the components folder by the name of the bar.js this is also going to be your arrow function component or fce now I'm going to double step 5 website here for the components tab I am going to copy an appar and I'm going to paste it into another JS file and first of all I'm going to rename all the class to class name then I'm going to remove some of the very Minister that I'm going to require like the top down the search bar and I'm going to rename the since the logo to next is to do now I'm going to import our link the link component from next link and in next is we don't use encodex we use Link to navigate through the website and the first component is going to be add to do that is index space and the next one is for the display to those now in the app underscore app.js file let's import the network component now to remove the grid gradient design I'm going to the style see the global.css style sheet and I'm going to remove all the background gradient from the body yes for the to-do link you put a display to the link the strips would be slash display to those that is the name of the file over page is going to be displayed now let's save it doing okay the number is working now go to index.js file and we will be a form from the bootstrap 5 website and paste it in the index.js file with a title create to do now I will change the class to class name and close the input text and in place of email it will be title and input type will be text and ID and the 4 will also be titled now let's copy this div in the paste it over two and since the title to to do let's go to the website let's go to the browser and check it I know it's better yeah so now I will import react and new state and create two states one will be title and the other one will be to do all right and there will be a function call handle submit that will save that to do to the database now let's say event designers on Saints to the input text hey copy this and paste it on the next input tag and change set title to set to do in the form on submit we'll call the function under submit now in the Intel Summit function I will create a object called to do object it will contains the content will contain the values for the title and to do you control of the to-do object to check if the page is working or not let's go to the browser open the console in title one and to do one we have to create a mongoose schema photo now create a folder content called motor container file called to dot Js import a mongoose package as mongoose then Define a new schema by the name to do schema it will contain title with type string and to do also with the type screen string it will also contain the date in which the to-do was created type date by default it or now now we'll export the model .export you can do Mongoose dot model to schema to those next yes compile System model only once so it will save the first to do but when we create another one it will show an error in order to work around this problem we will have to add the line module store models is equal to empty braces the line resets among custom modules to an empty object now let's go to the API folder and create a file called new to do.js which will be the API endpoint to add new to those the different files in this folder will be treated as different API endpoints importing mongoose and a nodes model in the today's model we will Define a asynchronous function call Handler that will handle the API request exporting the Handler function in the inside the function block we will first say keep the request dot method is post it is not we will send response status s405 and enter connection then we will set up a package block inside the try block we will first desstructure the request for body object sent from the front end and extract the values of title and node and also create two new variables of the same name sorry not sorry to do not note and then we will use Mongoose to connect in mongodb database setup in the localhost The Collection name is next car in the used Unified topology and use new URL parser or mongodb drivers new connection management engine in his new URL personal respectively we should set them both to true then if the connection is made we will console log database connected the variable new to do is a new instance of the to-do model created using mongoose with a loser title and node so to do T shape is Among Us command that creates a new record in the collection then we will console look the new node new to do in the catch block will console login there is any error and Center response it does yes internal error finally we will close the Mongoose connection then we will go back to the index file and use excuse to make a post request to the backend click your stud post slash API Slash new to do which is the name of the file in case it is the in this case it is a API endpoint then we will send the to-do object and then put up a alert is to do edit we will also need to import excuse now so let's try it now Title One to do one submit and let's go to the terminal okay it is directly to do is saying here let's check the compass so whatever record is being saved so the create part of the app is working for the operation go to the display dot to do page displays remove this here the class name container then from the booster website copy your table and paste it and change the class to class name for the first make these changes titanium to do and give your access toxins column will contain the buttons for edit and delete in the task last column and remove the last two rows also save it check it is here now in the final column add two buttons one for delete endangered same button dot BT and this primary condition will do for editor and save it now you have to make a slight correction since the display to the file is already a component the file name should start with a capital letter also in the network change the display to do to capital D to display the to those we could have used the use effect tool just like in react we could have created an API to send the to-do's from the database and use the user backup to effect and display them but if we do so then it will defeat to another domain regions for using xas that is SEO as the HTML is generated by the JavaScript at the runtime inclined site after the requisite received so here we are going to use case study props which are built in next as function that allows us to pre-render our Pages at Real Time with the server and not in one time it is used to face data that is required to render the page and percentage problems to the place component and serve the aesthetic HTML to the user this improves the pages performance in the SEO so just create a function Express synchronous function called the S3 pops foreign okay to do now go to the new to-do API and copy the Mongoose connection code and paste it here and uh okay to do the fine is a Mongoose common it will face holder to those folder mongodb database and it will sort them in the sending order the database is props to the base component not to lose property in the Box object contains the database this data will be available in the face component as props dot to those the to those needs to be converted to a Json string to be rendered by the browser so we first converted to do every day to adjust on the stringify then immediately pressing the string back into a new area using this one of purse [Music] in the display to do function to render the to those we will map over to those to do today to render a row for each of the element for each other element we will create a row containing a unique key let's copy design paste it within the written parenthesis in the Dr deck will give the unique key to give a video element ID given by your given to the mongodb and the first row will be the title even though title and the second one will be done to the Elementor to do let's save it and one more thing we are also have to we also have to pass into products then given by the aesthetic box yes arguments in the display tutor function save it and let's check here okay foreign we will see that the to do one to all the data that is Facebooked or database are being shown here instead available in the HTML this is not possible in the GF so this is using the XCS foreign operation first of all I will import you state from react then I will create a few States one of them will be a visibility state so what is going to happen is when we click on ID button a form will be will be displayed at the bottom of the place this form will be similar to the one on the edit base or it will be populated with the title and to do corresponding to that edit button so let us create a stage the first one will be the visibility internship visibility this will be initially set as false and I also have to make the display to those start to give it a letter in the next I will Define three more States one of them will be for a title initially it will be blank the next one will be photo to do and the third one will be the ID of that to do now let's use the visibility state within calibrations visibility then I will copy the form of the index.js page and paste it here since the visibility set is false initially it won't be displayed in the place then I will remove the Intel circuit function let's change it to update then under edit button I will add up one event listener phone click little caller function edit form let's declare the function cons edit form on call this functions and just a visibility to true stay finish if it is false and vice versa so set visibility visibility not equal to visibility so it is wrong this should be if it turns on visibility we will also pass the title to do and to do ID s parameters to this function yes arguments to discussion that to do and to do ID should be element dot title and then element to do in the element underscore ID so the visibility is working now let's need to pull later form let's add the value press title to increase the input Tab and the next one has to do now add one more button to the form this will cancel the cancel the phone we don't want to make any changes you want to click index visibility for visibility in the edit form let's set the title in to do set title title now let's see the browser again okay monitor okay the phone is getting populated now also the setter to do ID now I'm going to declare another function call update to do this will send a put request so that they can which changes that we have made to the particular to do it will receive the argument of Ester ID or to do ID this function will be similar to the handle some will function in the intex.jspad that is used to create to-do's underscore to index.jspace and computers function paste it and send the sensor URL I will create an API for endpoint call update to do it will received a idea for today and this is the put request a recent happen sorry with the asynchronous function and I will also change remove the alert in its place I will reload the window once you have put request is made because if I don't know any changes that will be that I will send between me will not be reflected in the paste this they've been listening to the sub in button which one click we will call the update to do function now let's create an API for update operation go to the API folder you can create a new file here called update22.js see URL will also be updated to do and then first import mongoose then import the to-do schema then create the asynchronous function Handler request and just to enter the questions response then export the Handler function first I will check if the request is request method is put or not it is not in a standard response data says 405 and enter Quest then I will query object and get the ID value declared a new ID at the same name same time then I will succeed a request body to get the title under to do then I will create a typist block let's copy the Mongoose connection API and paste it here click there is any error in the connection then I will console look under error then I will create another diecast block here I will declare a new variable called constant call update to do in this defined by ID and update is a mongoose function Network updater to do foreign status has 500 will be turned update to do and then let's we create a cash block if you have any error I will control the error and send a response status is 500 with the error message yes generally finally I will close the Mongoose connection these should be to do now let's go to display and everything seems okay let's try it they did you updated import excuse in the update to the base let's try it again okay it is not working let's hit the compass no it's not working at all let's see type here endpoint is your typo here foreign it is getting okay straight one more time updated submit okay that you have edit is working now for the delete operations let's go to the display to the file and I will create a new function here accounts delete to do this function will take me in the argument of the ID click enter know that to IDs argument and use excuse to make a request to delete them to do the URL B API and delete to do and so it will also Center ID of that particular to do foreign will be reflected in the browser now let's create an event listening a delete button to call the function foreign now let's create the API first import mongoose me then input to do schema then create asynchronous function Handler the function is nearly similar to the other EPS API inputs that we have already created so I will just go over to the update to do API endpoint and copy the function and paste it and delete to do anyway let's take it up in request method is delete or not I will be editing this title to do and in the type in this package block this will be certified by ID and update this will be delete one these are Mongoose command to delete a data I will rename this to delete to do I'll remove the console log s other this one will be status response status only 200 and I will in the call utilization error I will give the response to the 6500 and now your message is not deleted then I will export the Inlet function let's take it and try it delete okay it is working so the app is complete I hope you like this video and I will see you on the next one

Channel: Dhriti

Views: 4,950

Keywords: CRUD, NextJS, MongoDB

Id: IWFgj_fJvHU

Length: 49min 45sec (2985 seconds)

Published: Fri Apr 28 2023