Building a URL Shortener MERN Stack App with Node.js, TypeScript, MongoDB & React Ep.1

hey what's going on guys welcome back to another video so I'm starting a new series on monack or fullstack development where we will build different projects and learn about Technologies like react nodejs typescript API integration Tailwind CSS Firebase and many more and in this episode we will build our first Monch project from scratch and we will start by building backend apis using nodejs and typescript understand about node one configuration TS node Tob connection with mongus and express server in the next episode we are going to build the front end part of this application if this sounds interesting then stick around also don't forget to subscribe the channel and press the Bell icon so that you don't miss the videos like this one so let's get [Music] started zoc cloud is a Global Communication service provider which provides developer friendly and Powerful SDK and apis to build many communication features on the app such as video call chat video conference live streaming and many more now the pre-built UI kits and components help in building and shipping applications to the market in the shortest possible time instead of building everything from the scratch zoc clouds have more than 20 plus UI kits and 50 plus components with easy customization and ready to use and these UI kits are suited for different use cases like testing tools when you build an MVP be for funding or in app plugins to our existing apps and it is very less time consuming economical and we really need to focus on the core businesses the UI kits covers the needs of various Industries and offers features like onetoone calls group calls video conferencing live streaming in app chat and many more and zoc Cloud provides an easy guide for developers to integrate the SDK and build apps faster you can also get the fully customized SDK for your project to integrate features like video call Audio call live streaming and inapp chat you can start building your projects by simply signing up to zoc cloud and you will get 10,000 Minutes for free so I'm going to click on start building and this is going to take me to the login page where you will just create your account I already have an account so I will just do a login now once you login you will be redirected to this console and where you will see your dashboard you can simply click on create a project then you can select any of the use case that you want to build I will select voice and video call you can click on next then you need to provide your project name and then you can choose either the UI kits or you can start with the custom SDK and use the configuration in your project you'll find all the links related to the zoc cloud in the description of the video so that you can check it out later on now let's get back to our project all right guys so I have opened my visual studio code and here we will see that we have a blank folder which is the URL shortener so what we will do is first first let's create two directories so I'm going to have the directory for the client app where we will put our react code so we will have our front end and then we are going to create another directory which will be our back end so I'm going to have the server app so now we have these two folders where we are going to have our front end and the back end part now first we are going to build the backend system and then we are going to work on the front end part so for the back end what we will do is we are going to use the nodejs along with the mongod DB and we will also have the typescript so we are going to build this project into Express typescript so what I will do is let's check the node version so I'm going to have the node hyphen V and I have the version 20 I will also check the npm version so we have this npm version as 10.2.3 now you need to install the nodejs into your machine that is a prerequisite but if you don't know how to install it what you can do is you can just go to the official Doc of the nodejs and then you can just download this recommended for most users all right you just need to click on it and you will get an installer file which you just want to open it and then you will do next next next and you install nodejs into your machine once the node.js is installed into your machine you can do node hyphen V and check the version and you can also do npm hyphen V to check the version of your npm so we have this now I will just clear it now to build our backend app let's go to the backend directory so I'm going to have the CD server app and here we need to create a package Json file so what I will do is I'm going to do npm in it all right and this is going to ask us the package name so I'm going to give the name as URL hyphen shortner hyphen API I'm going to hit enter next we will keep the version as it is then for the description I will give this project contains URL shortener apis all right then I'm going to hit enter for the main point I'm going to give the server.js all right test command I'm not going to give anything no good repository no keywords author I'm going to put my name you can put your name license I'm going to hit enter and then we're going to type yes and we have our packet Json file all right so this is how our packet Json file looks like now the next thing what we need to do is we need to install the dependencies for our project which we'll need so what I will do is I will just clear it and then for the dependency I will have the npm install Express then we will also use the do NV package then we will have the mongus and we going to use the Nano ID so for the Nano ID I'm going to use the version as three so make sure you have the proper version otherwise it will not work so I'm using the version as three and then we'll also have the course all right I'm going to hit enter and this is going to install all the dependencies into our project so it's going to take some time and all the dependencies are now installed let's go to the package Json and let's check so we have the course. NV Express mongos and noo ID now I need to create the server.js so what I will do is I'm going to go to the server and I'm going to create the file as server.js all right now let's start importing so I'm going to have the constant Express and this will be equals to the require Express all right and we see that we can just change it to the es module so I'm going to click on fix and convert to es module so this is going to convert it to the es module next I'm going to import the EnV and that will be coming from the EnV then I will also import the course and that will be coming from the course now I'm going to use the env. config so that I can fetch the values from myv file now I'm going to create a simple app from the express so let's have the express app all right and then what I will do is uh we will also need to create a EnV file but for now what I will do is I'm going to have a constant I will have the port which will be equals to the I'm going to take it from the process. env. port or I can also give the port as 5001 all right so we have the express app now let's create a simple get API so what I will do is I'm going to have the app.get and I'm going to have the Slash and then I'm going to have the request response all right and I'm simply going to saying rest do send and I'm going to send hello world all right so we have the simple get end point and now the last thing what we'll do is we going to listen to the app so app. listen and we going to pass the port and I'm going to have the arrow function here and then I'm going to Simply do a console.log I'm going to use backtick and I will have server started successfully on Port and then let's give the port number so I'm going to have the port number here so this this is a very simple basic Express app we have created and now let's try and run it so what I will do is let's go to the packet Json file and in the package Json file let's do a start script so I'm going to have the start and then I will simply have the node server.js all right I will save it and now let's give a try so I'm going to clear the terminal first and then I will have the npm start I get an error because I miss a comma here let's give a try again so I'm going to start all right so we get an error which is that cannot use import statement outside a module so to fix that for now what we can do is we can go to the packet Json and in the packet Json we can just have the type as module all right I will save it and let's give a try so I'm going to clear the console and I'm going to give a try now and we see that the server started successfully on Port 5001 we can also check our endpoint which is the slash so I'm going to use the Thunder client I'm going to click on new request let's go to the Local Host so I'm going to have the Local Host colon 5001 and I'm going to send the request and we see that we have the hello world all right so now our Express server is working fine we can also see the hello world and if you don't know what the Thunder client is it is just a simple extension which I am using so I can show you if we go to my extensions and then we see that this is the thunder client which I'm using so I don't have to switch between the postman and my vs code you can also give a try and use the Thunder client now the next thing what we need to do is we're going to build this project in typescript instead of the JavaScript so let's add typescript into a nodejs project all right so I'm going to close this let's clear the terminal and the first we need to do is we need to install typescript into our project so what I will do is I'm going to have the npm install typescript I'm going to use hypen D because I want it as a Dev dependency all right now this is going to install typescript into my project along with that I will also need the node mod so that our file changes can be watched and just restart our server so what I will do is I'm going to have the npm install node modon hyen D so I'm going to hit enter and now this is going to install the node one as well all right now we will also need a typescript configuration so to get the typescript configuration what we will do is we are just going to use the npx TSC and I'm going to use hyphen hyphen in it and this is going to generate a TS config file for us now we can go to the TS config file and here what we will do is we are not going to change anything we'll just change the output directory so let's go and let's change the out directory and to this out directory what I will do is I'm going to add dist here so whenever I build my app it is going to generate a dist folder and we going to have all our typescript files converted to a JavaScript files all right so we have this types configuration also I'm going to use the default configuration file and not going to change much all right and then what we will do is we are also going to create a source folder and move our server.js into the source folder so I'm going to go here and I'm going to create a source folder and let's move this server.js into the source folder I will save it all right and we see that there is an error that no input files were found in the config file and this is because we don't have any of the typescript file so usually we need at least one typescript file into our project so now the next task will be let's convert the server.js into the server. TS so I'm going to have this server. TS and you will see that now we don't have any errors all right I will also remove the type as module because now we have added the typescript file here and also the TS config so we don't need to add anything like packet. Json all right because here we have already specified that we are going to use the module as commonjs now the next thing what we need to do is you will see that we get an errors here and since we have already converted into a typescript file file we will have the type errors and here you will see that could not find a declaration file for the module Express so now let's add the types here let me clear the console first I'm going to have the npm install I will have the types and those types will be for the express all right I will also have the types and these types will be for the course so for each of the package we need to add the types as well all right I will have the type for mongos so let me add for the mongos then I will have the types for node all right and we need to add this as a Dev dependency so I'm going to add hyphen D and I'm going to hit enter and now if we go back then we see that we don't have any errors now the next part is that we are using this as a TS file now if you want to run our application so if I run npm start then we are going to get the errors because module not found and you will see that they cannot find the JS file all right so what we need to do is let's have a script in our packet Json so I'm going to go to the packet Json file and I'm going to create a build script first and for the build script what we will do is we are going to have npx TSC so this is the typescript compiler now if I go and use the npm build then in that case it is going to oops we need to use npm run build all right so this is going to create a disc folder so now you see that we have this folder and everything is converted into a JS file now all right now if you want to use it then what I can do is we can go here and here we need to take the file from the disc folder so I'm going to have the d/s server.js now I'm going to run the npm start and this is now starting my server so we have already converted our nodejs project into the typescript so we are using typescript and we also want to use the node modon so whenever we make a change in the file our server should should reload automatically all right so what we will do is I will also add a npx TSC here and then I'm going to add it like this all right so that whenever my server gets started it will first build and then it was going to serve the server.js file from the dis folder now the next I will add is the dev so we are going to have a Dev and to the dev I'm going to add the node mod all right now if we go and run directly npn run dev then we are going to get into the aror all right now let's fix this error so what we are going to do is we are going to create a file which will be node Monon Json file which will contains some config related to the node one so I'm going to go here I will have the noon. Json and to this noon. Json what I will do is I'm going to have a Json here and I will have the watch we need to watch all the files into our source directory so I'm going to have SRC here because we're going to create all our files into the source so that's why we are watching The Source folder the next we will need to have an EXT extension for our files and we are going to look for all the typescript file and all the JS files and the last one we need to have is the EXC and for this what we will do is we need to serve our server. TS file directly from where it is we don't need to go to the dis folder because we are not going to build our project every time so for that what I will do is I'm going to have the SRC and I will have the server. TS but to make this work we will also need to have one more package which is called the TS node all right so what we will do is I'm going to go here so our node mod is crashing now so I'm going to cancel I will clear the console and I will also install the DS node hyphen D all right and this is also a Dev dependency the package is installed now if we go to the package Json we will be able to see TS node all right now let's go here and here what we will do is I'm going to add the TS node and I'm going to save it now let's go and let's have npm run Dev and this should start our Dev server all right so we have this server and we can also try our API so we will go here and we're going to send the request and we see we have the hello world all right so till now our project is set up completely using node.js Express mongus and our typescript all right so let's go back to our files and the first thing we will do is we are going to connect our application to the datab so we need to have the mongodb database so let's go to the browser all right I'm going to go here I will have the mongodb atlas so let's use the mongodb atlas I'm going to log in all right so I have log to my account and I'm going to create a new project which will be the URL shortener app I'm going to click on next and I will be the project owner I will create the project all right then I'm going to click on Create and let's do a project deployments all right and here I'm going to select the free Tria so I will have the the m0 I will use the Frankfurt EU Which is closest to me then we are going to have the cluster all right and then I'm going to click on create so this is a free account so here you can give the username and the password and then you can have your IP address whitelisted so that you can access your project so once you create the username and then you Whit list your IP address you will go to the database deployments where you can click on the connect and you will go on drivers and we going to use nodejs and then to add the connect we can use this connection string so I'm going to copy this connection string and let's go to our Visual Studio code we need to create anv file so I'm going to go here and I will have the EnV and in this EnV file I'm going to have a connection string so I will have the connection string and then I'm going to add the connection string which I have just received all right so here you will see that we have this as a connection string where you just need to replace your password all right so I have added the connection string in my EnV file and now what we will do is let's try to connect to our mongodb database so to connect to the mongodb database uh I'm first going to create a folder so I will go here and I'm going to create a folder and I'm going to name the folder as config all right and inside the config I'm going to create a file which will be DB connection so I'm going to have the DB let's have DB config dots and then inside here what I will do is I will first import the mongos so we are going to use Mong and then I'm going to have a constant I will create a function with a connect DB this is going to be an arrow function and I'm going to use a Sync here all right then let's use the try and catch so in the try what I will do is I'm going to have a constant as connect I'm going to use a weit let's use mongus do connect and in the mongus do connect we need to pass our connection string so let's have the connection string so I'm going to use back pick I will have the dollar and here I will use the process Dov do connection string so let's have the connection and then I'm going to have the string all right now if the connection is established I will console lock some information so that I can know okay my connection is established so I'm going to have the database connected and let's have some information so here I will have the connect do connection. host name so we're going to log the host name and we will also log the connection name so I'm going to have the connect do connection do name so there should be host instead of the host name so I'm going to have the host here and in case if it's an error then we will just console log the error and then we will exit the program so I'm going to have the error here and I will use the process. exit to exit my program so I will have the process do exit and I'm going to have it here as one now let's export this so I'm going to have the export default we're going to have the connection DV so we have this now let's go and let's use it in our server.js so I'm going to go to my server.js and inside the server.js what I will do is let's import it here so I'm going to have the import connect DB and here in the end what I will do is I'm going to call this connect DB all right and I will save and now here you will see that if we go and see our server started at 5001 and our database is also connected and this is our database host and this is the name now we will also use the course so that we can later on connect our front-end application and access the apis so what I will do is uh I'm going to go here and let's add some configs so I will have the middleware app.use all right I will use the express. Json so that we can have the Json responses then I will also use another middleware which is the inbuilt middleware and I'm going to use the express do URL encoded all right and to this we are going to use the extend and we're going to use true all right then what we will do is we are also going to use the course so I'm going to have the app. use and in this we are going to have the course and here we're going to use the origin so which domains we need to allow to access our apis so it is the cross origin so I'm going to use for now HTTP colon sl/ Local Host and I assume that my front end application will run on 3,000 then I will also have the credentials true so we have added these configurations files and we also have this app.get so now let's remove this we are not going to use this anymore and here we need to add our routes so I'm going to use one more middleware app.use and here what I will do is I'm going to have the slash API slash and for this we need to have our routes so I'm going to create a separate file for the routes so let's have the short URL so I have this I'm going to have errors so that's fine what we will do is we are now going to create the routes file so let's go here and I'm going to create a new folder which I will name it as routes so I'm going to create a new file and let's name the new file as short URL dots all right so we have this and now what we will do is let's create the routes so I'm going to have the import Express from from Express and then what I will do is I'm going to have a constant let's create a router from the express so express. router now we can add all our routes on this router so first will be to create a short URL when we get any of the long form of the URL we need to create a short form of it and we need to have an entry in our mongod DV database so I will have an endpoint for router. poost and this will have the endpoint as short URL and then we are going to have the request and the response so we are going to create a another file which will be the controller which is actually going to contain the logic of our endpoints so I'm going to have the create URL now let's create the other endpoints as well so I'm going to go here I'm going to copy four times the other endpoint will be the get so this is going to give us all the data that is available in our database so all the URLs full and the short URLs so I'm going to go here and I will have the get all URL the next one will be a get so whenever you click on any of the short URL link you need to open the full URL so I'm going to have here ID and this is going to have a get URL and the last one is you can also delete it so I'm going to have a short URL SL ID and here you will have a function which will be the delete URL so we have all the four now we just need to export the router so that we can use it in our server.js so I'm going to have the export default let's have the router name uh we're still going to get an error we're going to fix it soon because we need to create these functions so let's go to our server. TS file I'm going to remove this and I'm going to use the short URL and now let's import it so I'm going to go here I will have the import short URL from our routes so I will have the SL routes slurl so now we have this now we still get some errors and these errors are related to the functions that we need to create so these are the functions and we need to create them so now we have the routes now let's create the controller where we are going to put all the logic of our apis so I'm going to create a new folder and I'm going to have the controller and inside the controllers folder let's create our first controller which is the short url. TS so I'm going to give the same name so I have the short url. TS so before doing that we will also like to create the model for our mongus so that when we have the logic we can directly connect to the mongus and get the data and have the operations so what I will do is uh I'm going to go here and let's create one more folder which will be the model all right and now let's create a file here so for that I will also give the same name which will be the short url. TS now let's create the model so first I will have the import mongus and then we will also import the Nano ID so this Nano ID is a pack P so let's go and let's see what it is so I'm going to go here and I will have the Nano ID npm and this Nano ID is actually the ID that we will create the short URL so you can just read about the documentation let's go back and here what I will do is I'm going to have the import I will use the Nano ID and this will be coming from the Nano ID now the next what I will do is I'm going to create a constant which will be the short URL schema so we need to create the schema for our mongodb database so that it will know what kind of data it is going to get so what I will do is I'm going to have the new mongus DOT schema all right and this schema will be of type Json so here what we will do is we are going to have First the full URL and this full URL will be of type string so let's have the string and we are going to have a required field because we need to keep the required field as mandatory so I'm going to have the required and I will have the value as true the next will be our short URL that we are going to generate so this will be a short URL we are going to have the type as string and we are going to have the required as true and we need to generate the short URL so for that what we will do is we going to have a default and let's have an arrow function and in this Arrow function we are going to generate the Nano ID so I'm going to have the Nano ID function dot I will have a substring and the string will be from 0 to 10 so anything the Nano ID will be generated will be between a 0 to 10 string next we will also need to track the clicks on our short URL so I will have the clicks and this will be a type of number so let's have the number and then we are going to have the default as zero and the last we will also get the time stamps so that based on the time stamps we can actually sort the data so we going to send the data as in descending order so whatever the latest is will always come at the top all right so I'm going to add time stamp here all right and I'm going to have the Tim stamp as true all right so now we have created this and here we missed the colon so let me have the colon and we have everything working fine here now we have created the schema now let's use this schema and let's export so I'm going to have the export constant and we going to have the URL model and let's use the mongus model so I'm going to have the mongus model and we need need to pass the short URL as the name and the value for this will be our shorts URL schema which we have created so this is how we created our model for our short URL we are going to have a full URL type string short URL type string we're going to track the clicks which will be a type number and default will be zero and we added a time stamp so that we can sort the data now let's go to the controller file and in the controller what we will do is we have first start going to import the express so let's have the import Express which will be coming from the express then we are also going to import the URL model so I will have the import URL model oops I missed the semicolon I will add the semicolon here as well now we are going to create different functions so the first function will be the create URL so I'm going to copy this and let's go here and have here export constant so we're going to have the name export which is the create URL all right right and this is going to be an async function and for parameters we are going to have a request which will be of type express. request and then we are going to have the response which will also have a type of Express dot response all right so we have this request response and then we have the function similarly let's create the other functions as well so I'm going to do copy and paste and the second function will be the get all URL so I'm going to copy let's go here and third function is get URL so I'm going to copy and let's add get URL and the last one will be delete URL so I'm going to copy and let's go here and let's add the delete URL all right so we have all the four functions now let's go and import them here so I'm going to go here and I will have the create URL all right then I will have the get all URL then I'm going to have the get URL and the last one will be the delete URL so we have imported all the four functions and now you see that we are not getting any errors so our application is also now running successfully let's go to the controller and now let's add the logic there so I'm going to close all those files which we don't want and I will go to the short URL yep I'm going to minimize the terminal as well so for this create URL what we will do is first uh let's have a try and catch block and in the try first we will see that whatever the URL user is sending we already have an entry in our database or not all right so we are not going to have a duplicate entries so what I will do is I'm going to have a constant URL found and this will be equals to an await and I'm going to have the URL model and on this model we have a find function so we are going to use the find function and we will be finding with the full URL and this full URL we will get get it from the request body so we can also do a console log so I'm going to have a console log and here I will have the full URL is and this will be coming from the request body. full URL all right so we have this and here we can also use the same so I'm going to go here and then I'm going to add it here all right now if we are able to find the url then in that case we are going to throw an error to the user so we will have the URL found. length if it's greater than zero in that case let's have a response status and we going to give a status of 409 which is the conflict that means we already have a URL in our database with the URL which we have just received in our request so this is a conflict and then we're going to have the response. send and we're going to send the URL found itself so whichever the URL we have found now if we haven't found any URL that means we are going to create a new entry into our database so let's have the else Clause here and I'm going to have the short URL I will have the await URL model do create so we are going to use the create function and on this create function we are going to pass the same thing so what I will do is I will just do a d structure so I'm going to have a constant full URL and this will be equals to the request do body all right and then we will just pass the full URL so I'm going to remove this I will save it and we can also use the full URL here all right so we have this and once we get the record created into our database we can just send the response back so I will have the response. status as 2011 which is a record is created then we are going to send the short URL which we have just created now this is fine and if it's an error then in that case what we will do is we are going to have the response. status as 500 the server error and then we are going to send a message so I will have the message and here I'm going to have the something went wrong so this is how we are going to have a create URL and this is going to create the short URL we can also give a try but before that let's have this get all URL as well so that when we create it we can also use this API get all URL and try to fetch the data back so for this one what I will do is uh I'm going to go here and let's have the TR catch block and in the TR catch block let's have a constant we're going to have the short URLs which will be equals to the await and we are going to use the URL model dot find and then what we will do is we will have if short url. length is less than zero so in that case what we will do is we will have the rest. status so let's set the status as 404 nothing we have found it and then we are going to send the response so let's have a message here and I'm going to use a message and we going to have that short URLs not found but if we find the URLs then in that case we are going to just send the response so I'm going to have the rest do status is 200 then I'm going to send and we are going to send all the short URLs and if it's an error then we are going to use the same thing so so we are not going to do anything on the error handling part so we're going to just have the same thing now let's give a try so we have our app successfully running on Port 001 we also connected to the database let's give a try so what I will do is first let's have a post URL and to the post URL we are going to have the apis short URL and we going to have the post now we will also need to give the body so let's go and let's add the body so I'm going to go to the body and on the body we need to have have a full URL all right and we need to give some URL here so let's go and get some URL so I'm going to go to the browser all right and in the browser if I just use this URL or maybe I will just use the this one so I'm going to use this one copy and I'm going to add it here all right and then let's send the request so I'm going to click on send request and you see that we get full URL which is this one we have the ID we also have the short ID created ad and updated ad and this also creat created a record into our database so we can go and check here so if I refresh and if we go to the browse collections then we should be able to see the test and we have the short URL and this is our record created into our database all right now let's go and let's try to fetch it so what I will do is I'm going to go here and I will have the get and then this is going to give me all the URLs that are available so I'm going to give a send and you see we have an array and and this is array of objects where we will have all the URLs now this data we can use it on the front end and then we can display it on the front end side which we are going to do it later on so for now we will just focus on the backend apis all right so we have successfully created two endpoints one is the create and other one is get all urls next what we will do is we are going to work on the get URL and then delete URL so let's go and let's work on the get URL so I'm going to go here and on this get URL so let's create a constant which will be a short URL and this is going to equals to await I'm going to use the model. find one which is going to give us the result and inside this what I will do is we are going to use the short URL so we are going to take the short URL as an ID in the request param so I'm going to have the request param do ID now the next what we will do is that if we don't have this short URL then in that case we are going to have a response status of 404 and we are going to have send and let's have the message so I'm going to have the message and we're going to have that full URL not found and if we find the short URL then in that case what we will do is uh we are first need to update our Clips whenever you user click on the short URL on the front end it is going to make an API call to this get URL so that means the user has clicked on it so we need to update the clicks so let's have the short URL clicks I'm going to have Plus+ and then I'm going to have the short URL Dove so it is going to save my clicks and then what we will do is we are going to have the rest do redirect and we need to redirect it to the full URL so I'm going to have the dollar I will have this short url. full URL and if it's an error then what we will do is we need to put this into TR catch block so let's have the try catch block all right I'm going to cut this and put it in the try and then if it's an error we are going to just copy and put it the same so I'm going to go here and add it here and the last one is the delete one so the delete one will also be much similar how we get the URL so we are going to have the ID and then BAS on the ID we need to delete it so what I will do is I'm just going to copy this so I'm going to copy this try catch block and I'm going to put it here and here instead of this I'm going to have the find by ID and delete but this time the will be an ID so I'm going to have the underscore ID as this underscore ID is what we have it in our database so this is the ID and we need to delete a record based on this ID all right so we are going to get this ID from the front end and then we will just take that id request. par. id then we are going to delete it and then if we get the short URL we are going to send the response as 204 no content and here we will just change the message so I'm going to have requested URL successfully deleted so we have this and then we will not have any else statements so I'm going to just remove this and we have this one so now we see that the application is also running and all our end points are now working fine so let's give a try one by one so I have this now if we want to delete it I will just need to pass the ID so I'm going to copy this ID and I'm going to put it here but before that let's use the get URL so I'm going to copy this and I'm going to go here I will add it this one and we have the get request so I'm going to send it and we see that we get this HTML page page and this HTML page is actually from the npm website so this is the website and we get this HTML page in the response now we get this HTML page in the response but we also update the click so if we go and check so I'm going to remove this and I'm going to click on send then we see that we have click as one that means someone has clicked on this short URL now if you want to delete it I'm going to copy this all right then I'm going to go here and I'm going to change this to delete and I'm going to click on send so we get 204 and if we go here and we see that we should be able to get the response for delete which is the requested URL successfully deleted but we are not going to get this because we are putting it as 204 here so what I will do is I'm going to change this to 200 and then I'm going to give a try so what I will do is first let's create again so I'm going to create the request let's create the record I'm going to send and we see that we have created a new record 2011 now let's try and delete it so I'm going to copy I'm going to go here and add the ID I'm going to go here delete and I'm going to send and you see that we have requested URL successfully deleted so it's purely on your choice you put it 204 then you will not be able to send any data because 204 is no content and if you make it 200 successful request you can send a successful request message all right so we have now tested all our endpoints and all our endpoints are now working um I think we will just take a pause here and then probably we will go back in our next video and we will just build the client application as well and then we will see how we can connect our backend to the front-end server so that's all I have in this video I hope you like the video a thumbs up is appreciated you can also connect with me via Facebook or Instagram you can follow me on Twitter for latest updates and before you go don't forget to subscribe the channel and press the Bell icon so that you don't miss the videos like this one thank you thanks for watching yeah

Channel: Dipesh Malvia

Views: 1,517

Keywords: url shortener, javascript, nodejs, mongodb node js react, react js, nodejs typescript setup, typescript, mern stack app development, typescript node js express tutorial, mern stack project react, node js project tutorial, build url shortner mern stack, mern stack, node js, url shortener tutorial, express js project, mongoose mongodb, backend projects, learn node js with typescript, beginners tutorial, react typescript tailwind project, best url shortener, free url shortener

Id: sKq-aSrnZog

Length: 41min 57sec (2517 seconds)

Published: Tue Feb 06 2024