 What is going on everybody? My name is Roddy and you're watching my channel, Roddy the Brand. Today I'm going to explore the Express Fireupload MPM package and then we are going to build a simple user profile by combining the Express Fireupload, the Express Hunderbars and MySQL. The video took a little bit longer than I expected but if you're here for a specific part then the video will be time-stamped and now let me quickly show you a quick demo of what we'll be building and hopefully you'll be able to take some of that code and plug-in into your own project. So first of all, we're going to build the upload form and in the second part of this tutorial we're going to create this custom part. If I was to grab a new profile photo choose file and then let's select my logo for example open and submit You will see that the page refreshed and then it uploaded my profile photo which is now stored in the database. So if I refresh you will see that the data is actually retained. I would appreciate it if you subscribe, like the video and if you have any questions as always please comment below and now let's jump on the computer and get started. Welcome everybody and let's get started. As always we're gonna start from zero. Let's create a new folder. Inside here I'm going to initialize a new project. On Windows I can do left shift, right click, open PowerShell window here. If you're on Mac or Linux you might just have to CD to your project folder. Once you're here let's initialize a new project by doing MPM in it. Let's just give a package name of something like Node.js user profile. This should be good and let's just keep pressing enter until we finish the setup. This has now created a package.json file for us and we can start installing the dependencies that we need for this project. Now let's start one by one. So we can do MPM, install and the first one that I want to is to is express. So we can create an express server. So express then we need the express file upload. We need the express handlebars, which will be or template in engine. So express dash handlebars and last but not least we need MySQL in order to connect to a MySQL database and do some basic queries. Let's press enter and this should take a second. Now that we are done with this we might as well install Nodemon. So every time we make some changes on our project Nodemon, we will reset the server for us. So let's do MPM install dash dash save dash def and we're gonna do Nodemon. Let's press enter and wait for this to finish. Now that we're done with this we can open our project by doing code dot. If you're using another code editor, that's absolutely fine. Just go to file, open your project and continue from here. As you can see in our package.json we have all dependencies as always and we have all development dependencies here. So I want to make sure that my project starts with Nodemon and to do this let's create a new line under script. So comma start columns and then we want to start with Nodemon. But the file that we want to start it's going to be called app.js and of course we need to create that file next. So let's save this and create app.js so new file app.js and we can start by creating an express server. So let me close the package.json and save. All right to create an express server it's fairly easy. I've done a couple of tutorials on this already. So I'm gonna go ahead and beast this super quickly. We need to require express const express equals require nmware requiring express. The next thing that we can do is set a const for all app which will be equals express. Then we need a port number so let's do const port equals 5000 or if you wish to publish your project you might have to do process.environment.port or 5000. Of course in this example we're just going to be using 5000 and we now need to tell express just to listen on this port so we can do app.listen. We can pass the port number so port then comma add then this will be another function like so and we can do console.log and we can console.log simply like listening on port and then we can pass the port number like so. All right this is all good if we then go back to PowerShell and we do npm start. Hopefully you should see the green line here saying starting nodes app.js and listening on port 5000. This is all good it means that our server is running and now if I go to the browser and I do you localhost with the port number of 5000 you will see that we're getting canal gate and that's all good this is because we don't have any route yet and we haven't included the view engine either so let's go back and do some of that work now. Let's start by including the express handlebars and set that up. So to do this we can do const for short we can do express phbs and then we can require express handlebars like so and if you watch some of my other videos you'll probably know that other food express handlebars dot handlebars extension which is quite long so we definitely want to change that but we also need to tell or app to use express handlebars as a view engine so let's do that in here. We can say template in engine and then inside here we can do app.engine pass hbs and then we can do exp and might as well copy this from here and inside here is where you can pass some options and the only option I want to pass is the extension name I want to change this to something shorter so to do this we can do extension name and then this will be dot hbs short for handlebars let's close this and then let's set our view engine so app dot set and then view engine comma and the view engine is hbs like so all right this is all good we have our template in engine set but we also need to set up but as a default the express handlebars uses a views folder and a layout folder for the layout so we're gonna have to create all that before we do a router let's create a new folder called views and inside this folder we're gonna have to create another one called layouts and as a default the express handlebars uses a main dot hbs layout so this is going to be our main html layout that we can reuse on many other pages but today we're only gonna have one page anyway so I'll show you how it works anyway so if we do html 5 in here and save this inside here is where we want to actually render all pages so for example I will be adding a homepage so let's add a new page called index dot hbs this needs to be inside views so this is going to be a homepage so if we do h1 hello and inside main dot hbs this is where we want to render or index page so what we can do is with three curly brackets we can just put body and this should work I will show you how this works in a second save this as well and let's go back to app.js and let's create our first router the router that I want to create will be app.get because we want to when we visit the page we want to be able to render something so this I'm leaving this empty because we're only gonna have one page and this is going to be a homepage and then we have request and response as an arrow function like so and inside here we can say res dot render and the page that we want to render which in this case is the homepage and that's index we don't have to specify the extension here so let's save this and let's see what happens if we go to or tell me no we will see you will see that I'm not getting any errors which is a good sign and then if we go back to our browser and refresh you will see that we're getting hello if I do control new you will see that we're getting the html from our main handlebars file and then inside here we are rendering the homepage which is good so let's zoom out a little bit and continue so first of all for the people that just want to create the upload form let's do that and then later on we're gonna create a nice looking card and we're gonna hook everything up to a MySQL database and everything will be timestamped below anyways so let's start by including the express file upload to do this we can do const and then that will be file upload equals require and then inside here we require express file upload like so to use the express file file upload and to actually use the default option all we have to do is let's do the default option all we have to do here is say app.use and then do file upload like so now inside here is where you can pass all sorts of settings like so so you'd normally list your settings in here and you can pass you can change the quality of the image you can set up a temporary folder and there is a lot of options so explore the documentation and obviously see what you need for your project but I'm going to keep a super simple phenomenon and remove all this and this is basically the basic usage and now I'm thinking let's start by doing the html form first and then we can create the logic inside here after so inside or index.hbs is where our form will be so let's remove everything and let's create a brand new form in here so we can deform press enter and the action of the form will be which means basically we want to post on our home page and as a and the method will be post equals post we also need an encoded type which basically is an attribute that specifies how the form data should be encoded on submit so to do this we can do emc and then type equals and then we can do multipart slash form data like so and now we can focus on all inputs before we do this let's type to this something like upload profile photo and then let's start by creating the input so the first input will be actually a type of file because we want to include a file and this will have the name of let's keep it simple and say sample file and this will accept only images for now but of course you can remove this and it would accept any any files so I'm just gonna say image to make it easy slash and this means all types of images like png jpeg gifs and so on or gifs let's close this and then let's create another input and this time this input will be the type of submit and this will basically play the row of a button so the name for this we don't need we don't need we don't need an id either but I'm just going to give it a class for later on which will be btn and then btn primary that would do let's type the form up like so let's go to the top save this and let's have a look at how our form looks like all right we're going to keep it simple for now just so I can show you how to upload a file but once we're done with this and if you want to have a look at the rest of the stuff I'm going to style everything a little bit and then hook it up my scale database so let's do the logic for the form I'm gonna zoom in so you can see a little bit more so first of all we obviously need a folder where we can upload those files and I'm going to keep it simple and just create an upload folder inside here like so and then let's go back to app.js and start writing our functionality because we're posting a form this is fine that we're rendering the home page but the next route will be will be the same page but instead of get we want to post we can keep this as it is because it's the home page then this will be request response and now we can start writing the upload functionality in here and the example that I'm going to give you is actually available on their documentation as well this is where I got it from but of course we I'm going to explain everything in detail we need to create a variable name that will hold the that will hold the file so let's keep everything consistent so in our form here we have it as sample file so what I'm gonna do is I'm gonna do let sample file close and then we are gonna have to do upload path one so let's do let upload, upload path and close the first thing that we need to do is check the request to see whether we're getting the file and to do this we can do an if statement here and say if the request files or the object.keys.req.files.length is equals equals equals zero then we want to display that the no file was uploaded so we can return res.status and then inside here the status will be 400.send and inside here we can paste our message which will be no files were uploaded like so so basically what this does is if our object is empty no files were uploaded but if there was a file we need to grab that file so I'm going to use the sample file let here so far sample file equals and then we're going to get the file and to do this we can do rec.files.rec.files.sample file and we can actually console log this file just so you can see what the object looks like so let's do console.log and then we can do sample file let me remove some of this technically speaking we should be able to post something and console log some of the file information and we might as well give it a go obviously this might not save the file just yet but we're gonna do that next so let's go back refresh and let's grab around the file so I'm going to grab my logo here and submit and if you go back you will see that obviously the page is spinning and this is because we actually didn't render anything or like redirect which is bad but if we go back to the PowerShell you will see that we're actually getting an object here and you will see that the object has a name data size encoding tempfile path and a few different things we're going to need this move function in order to be able to save the file in our uploads folder but as you can see this is how easy it is to actually grab a file and be able to get the data and we just need to save it now let's go back this is going to break obviously but let's go back and do that move function let's say name of the put is name of the input is sample file and let's do use mv function to place file on the to place file on the server okay to use this function what we can do is grab this sample file object so sample file and then we can use the move function mv like so and then we can pass the path which I haven't actually created yet so let's grab the upload path first of all and we can actually paste it in here so upload path will be underscore sorry it will be equals underscore underscore deal name which is the main directory name of our project and then we can do plus and then select the folder that we want to upload our file to which is upload slash upload sorry and then slash and then we can save this file with the name and then we can save and then we need to pass a name for the file so I can grab the sample file object and then we can use and then we can go inside and grab the name by doing dot name like so now that we have all upload path we can actually put it inside here and then we can say function error and then inside here we can do if we have an error then we want to return a status of 500 so return res dot status 500 and then this will be send and then we can send the error like so that doesn't look very good and it's because that needs to be here okay that looks a lot better let's close this let's make some space for the rest of the code and that's pretty much it but the last thing I want to do is if the file gets uploaded I want to either like render a page or I want to display a message so to do this we can just do rest dot send and we can just send a message or file upload it like so and close obviously this needs to be tidied up a lot more and I can do right click for my document a little bit okay this will do so if we go to our upload folder as you can see it's now empty but let's see what happens if we try to upload a new file so let's refresh this let's browse a new file let's grab the cat from splash.com and open it and submit I think okay let's try again okay file uploaded which is a good sign so if you go back to your folder and in uploads you will see that we have a new file in here and this is the file of the cat and if we upload one more let's grab my logo for example and submit file uploaded and if I go back you'll see that my logo is in here which is good okay so now we pretty much have our upload working which is pretty cool all right the next part of this tutorial will be creating the cat on the front page connecting to my scale and obviously saving this file upload on the record let's start by creating the cat first of all then we're gonna add a little bit of css and then we'll add the my scale if we go back to index.hbs let's create a super simple cat that we can display our data in so let's do cat and inside this cat we're gonna have a couple of things so we're gonna have an image this image is going to have a class of cat underscore image that's two underscores by the way and we're gonna have to set up a default image is going here so we can do slash images slash default default dot jpeg and have user user profile for now then let's create a title like a like a name then let's create title four card so this can be wrapped in an h1 and this could be something like ruddy then inside here we can do a class of card underscore underscore title then let's create another div for the job so this will be card underscore underscore job and inside here I can do web developer then let's add a little bit of a description so for this I'm going to use a paragraph and for the paragraph I'm going to do a class of card underscore underscore about and I'm going to paste a little bit of text in here just to make it look a little bit better so let's do toggle wrap and let's format it all right that's looking okay I guess maybe like this at least and then let's create a fake button here for statics so button and then type button and then we can do class of btn btn dash primary view profile all right obviously we're not gonna hook this up we're gonna get some data from the database and the image that's pretty much it all right this is looking good if we save this go back to the browser let's see what we have as you can see I'll have zoomed in the color as you can see we're gonna need a little bit of css but if you're not interested in this part feel free to skip it so I'm going to go ahead let's create a public folder inside the public folder I'm going to have images folder and I'm going to have a css folder inside the css folder I'm going to have a main dot scss file and this is where my styles will go so let's watch the scss feel free to use a normal css as well it's not a problem it's just easier with scss and we're gonna have to grab a default image for project so I'm going to do that now here is my default jpeg that I'm going to be using and if we go back now we need to actually hook up the star sheets to our main layout so in views layouts main dot hbs we can do a link to a star sheet and this will be linked to main dot css but we also need to specify the folder which is css dash main dot css now this won't work because express doesn't know about our public folder and I want to make the cd and I want to make the path as easy as possible so let's go back to app.js and somewhere around here we can set up a static folder so in fact we can do two of them so let's do static files the first one let's do app.use and the first one is going to be express dot static and then we can have public and then the next one that I want to do is actually to to be able to access the upload folder easily from from our html I'm going to do the upload folder as well so upload like so so technically speaking now if we go back to the main dot handlebars this should now work and to test this we can go to main dot css and do a little test so background color of aqua or this one here so let's save this refresh and as you can see the color change so I'm going to do a little bit of styling super quickly but as I said feel free to skip this part if you wish to and I'm going to keep this as basic as possible first of all I'm going to include a font from google so let's work that in with import you can include this in your index in your html if you wish I'm just going to import it today and a few things that we need to do is reset the margins so margin and then I'm going to do zero zero everywhere then we need to set off on family on family to be poppins and then we can do sans that and then we can do comma sans serif like so and we're good and then for the color I'm going to copy and paste a very great color here which is f4 f6 f8 and we're done here for the images I'm going to do them kind of responsive so we can do image with 100% so basically if the images are too big for the box they'll just scale down and let's create a wrapper if we do a wrapper this will basically help us to center align the boxes so we can do display grid maybe and then we can just do it the lazy way and do place item center I do know that this doesn't work on edge I believe or internet explorer but it works on all other major browsers so I'm going to use it to speed up the process and then let's do a height of 100 vh now so we all get here if I refresh everything is looking good but we do need to wrap this inside this wrapper so let's grab this go back to main.hps and I'm going to wrap the body so let's do wrapper like so and wrap the body nice let's save this and as you can see everything is centered which is fine that's the way I want it and now let's just do a little bit of design on the buttons and the card for the buttons let's keep super simple btm and then this btm will have a border or none to none to remove all the borders the full borders color will be set to you to white then we can have a little bit of padding so maybe like 15 pixels by 32 pixels then we can have the text aligned to the center I want the text decoration to be set to none just in case we add it as a link and then display maybe inline block or you know what I'm gonna display this yeah let's see how this works display in our box and we'll see how this works we might need to change this and then let's do font size something like 16 pixels then a little bit of margin four pixels to pixels and then the cursor needs to be changed to a pointer and I want to set the width to be always 200 pixels for this button and then the border radius something like three pixels will do and now let's do a colorful button so we can do btm-primary and this will be a background color of blue so it will be like 0 0 8 6 b b a and this is a very like baby blue color I guess so let's save this refresh and our buttons are looking cool we have a little bit more let's do the card now should be fairly simple to do so for the card let's create a new class in here card and then inside here I want to center align everything so text align center margin let's reset to zero also do I need this to center the card maybe I'm not too sure the width I'm going to center the width I'm going to do 400 pixels we probably don't need this actually let's remove it and then the height we're gonna leave as auto so we're not gonna specify this let's add a little bit padding of 20 border radius to make it look good of five pixels I'm going to say that the background color needs to be white and then I'm going to copy and paste a drop shadow that I've prepared now inside this card we're gonna have or image the title and the job so let's do that super quickly we can do 100 underscore underscore image and put image I want to display it as block then margin zero auto to center line it then let's give it a width of 100 pixels and a height of 100 pixels because we're gonna have to make a circle so to do this we're gonna do border radius of 50% then overflow hidden do I need to probably and then we can do object fit so or fit doesn't get stretched or so basically I want my image to fully fit inside the circle and this will be set to cover and then last but not least I'm going to copy the shadow from the top here and then let's do a little bit of border actually border and the border will be three pixels solid white so this border will stick out because we have a little bit of shadow now let's focus on the title so I'm percent underscore underscore title and for the title we can do margin zero and actually we're done with this we just need to reset the margin on the h1 I believe and then for the job let's do underscore underscore job and then inside here we can do a color of something like gray so six six eight one nine two all right I think this is good enough let's how let's have a look at how our page looks like all right I think this is okay so we don't waste any more time on this and now we can focus on creating the database and grabbing the image and then the details in here for the database I will be using xamp just because I already have it installed in here but you can use whatever you like so let's start xamp and create a very simple database if you go to localhost php my admin you should be able to get this page the username is important and the password so make sure that you have them available money is basically username is rude and password is password we need to create a new database to do this inside here we can click on new let's give our database a name of something like user profile and then let's click create this will ask us how many fields how many columns would you like and I'm only going to have five fields here so let's do five and create the table to be user so let's go press go and the first one that I always have is id this will be an integer it will be auto increment then we can have a name the name will be voucher 45 45 and that will be fine then we can have maybe or profile image and this could be I don't know this could be a voucher and let's just set it to 100 but of course you can change this to whatever your needs are because there is no one number that fits all then we can do a job title and the job title can be voucher and can be 45 characters and let's just do the description as well description like so and the description let's I don't know let's set this text which is a quite a big number basically but we're not gonna have so much tech let's save this and as you can see our table of our database of user profile is ready and we have a table of user all of the fields are here and we just need to add one record for this example so I'm going to go to insert I'm going to leave the id as the food the name I'm going to set up as ready image leave this empty because we want to update it from the application job title I'm going to put web developer and let's copy some of the description from the page so I'm going to copy this as well and paste it in here all right this is all good we have one record and we can now start by creating by connecting to the database to do this let's go back we'll go to here we'll come back to this later and let's just open up .js and let's start by including MySQL so let's do const MySQL equals require and then MySQL close this but basically we need to create a pull so to do this under maybe like or templating engine here let's make some space so we can see a little bit better and then let's do a connection pull to do this we can do const pull equals MySQL dot create pull and then inside here is where we can pass a few options now the first option that I want to pass is the connection limit and I'm going to set this as 10 for now and then we're gonna need the host name so this will be for me localhost then I'm going to need the user and the user for me is root I'm going to need the password and for me for this is password I'm going to need the database name and the last thing that we need is the database name so database column and then user profile is the database that we just created so if I tidy this up somehow maybe like this okay this is looking good just so you can see better we should be good to go here and the next thing that we need to do is see whether we can connect to the database and to do this we can do pull dot get connection and then we're gonna have an error here that we can pass an error in here and get the connection connection this will be another function and now inside here we can check for the error by doing if error then throw throw error or do whatever you like so we're not connected not connected but if we don't get an error we can just do console dot log and then we can log connect it right this should be good enough for for us to connect to the database so let's have a look whether this is going to work if I save this let's go to the power shell and as you can see we have no problems we're connected to the database which is good if I make a spelling mistake for example my database name that doesn't exist I put two you will see that we're getting an error now which is saying sql message unknown database user profile too all right let's go back save this and we are good to go we can potentially do a first query to get some data from the database and display some of the information and to do this we can do this on get so inside here we can basically copy this here paste it and continue from here and all we need to do is pretty much do a very simple query to do this let's just do so we have the connection so we can do connection dot query and inside here is where we're going to wrap our query so this is a normal mass scale query so we can do something like select and I want to select everything from the user table where id is equals one because the record that I have already is one so I'm going to do this manually like so just for this example and then inside here we're gonna have an error and we're gonna have rows so rows is where we're gonna get the data as an object and we can use it we can use handlebars to render it in a second so this will be another function sorry this is another function and inside here first of all we might want to release the connection so let's do once done once done release connection and to do this we can do connection dot release and then close and then close if we don't get an error then we want to render the page so I can do the rest dot render copy this sorry cut this and paste it in here and I want to render the index page of course basically we're going to the database grabbing some data and I want to render the index page and I also want to pass the data that we're grabbing from the database by doing comma and then in curly brackets we just pass the rows like so let's tidy this up right click tidy it and it's looking so messy messy the usual I think all right this is much better enough and let's save if we go back and if we don't have any errors that's our look yet the server crashed earlier and now that is restarted hopefully we can refresh and as you can see everything is working correctly let's zoom out now we can start populating this data from the database to do this we can go to index dot hps and I'm going to make a loop inside the card instead of the outside to do a loop with handlebars we can do curly brackets curly brackets so two curly brackets the hash symbol and then each and then we can pass the object of rows which we're getting from here if you remember from the database and then we can start looking for the data but of course we need to close this so to close it two curly brackets to open two curly brackets two curly brackets to close and then slash each kind of like html I guess that's why I like handlebars is pretty nice and then we can start by populating some of the data so for example the name here let's do curly brackets curly brackets this dot profile underscore no this dot name and for the job would be would be this dot I believe job underscore title and for the description I believe it was just this dot description maybe and save hopefully if this is all working we should be able to get the data from the database so let's refresh as you can see the data is exactly the same but if I put web designer and if I change the name to ruddy123 you will see that we get ruddy123 and ruddy123 is a web designer and this is also coming from the database which is pretty cool now we need to do the same for the user image but let me swap this to the way it used to be because it looked better all right for the image what we can do is set a default image just in case the user hasn't uploaded one so inside here we can actually write an statement with ejs and to do this we can do curly brackets curly brackets and then we can do the hash symbol and then if this underscore dot sorry this dot profile image underscore image which is this field here profile underscore image I'll zoom in a little bit so you can see so if this exists we want to grab this image we want to populate the image source with the one from the database and obviously this would come from a folder the folder called uploads these were all images are going to be uploaded so we can do actually we probably don't need to specify the upload image but we'll see we probably don't need to specify the folder now because I have it as a because I have it set as a static file so let's just do curly bracket curly bracket and inside here we can do this dot profile underscore image like so and save and then and if this is not true if this image if this doesn't exist then we can do another statement and for the other statement we can just display a default image so I'm going to grab this and paste it in here and I could have just kept a guess let's do it like this and then I'm going to do slash img which is all images folder in here I'm going to use this image here which is misspelled so let's rename this over quickly to default and I'm going to use that so image default dot jpeg and then of course you can do the all tags however you like and the last thing that we need to do is of course close the if statement so we can do curly bracket curly bracket if all right let's save this and go back to the page and as you can see we're getting the default image and this is because we don't have anything in the database yet for the next step we're gonna have to actually work with the upload form and update the database here so we can upload profile image and then hopefully the profile image will appear in here so let's have a look at how we can do that luckily for us we've already done the hard job so if you go back to app.js and hopefully we should be able to just grab all of this and do another query inside here so where we have rest.send I'm thinking of replacing this so let me comment it just in case I upload this so people can see it and reuse it and I'm going to paste the database connection here but obviously we need to change the query a little bit so this will be update and let's just remove everything update user set profile underscore image equals question mark and then we can do where id is equals one all right if you don't understand this fully I have done a full tutorial on queries how to do them and why I'm doing the question mark and all that stuff and now we need to do is pass the name of the profile image and to do this we can do another comment here and just pass the data inside here so to do this we can grab the sample name like so and just pass that save this and let's have a look at what we get one issue that we're having here is that we're having we're having to render the page again but instead of rendering what I'm gonna do is I'm just going to redirect so what I'm gonna do is rest redirect and I want to redirect to the home page which is just slash and then we're not gonna pass any anything in here and of course you can do if there is no error we can redirect but if there is an error we can do an error statement and we can do console.log the error or whatever you like of course so hopefully if I tidy this up a little bit format the document let's save this and see what we get so if I go back refresh this let's grab a photo so I'm gonna grab this my logo I'm going to open and submit as you can see this actually submitted updated the data and my logo is now appearing here this is coming from the database if I go to the database and zoom in this is the previous one obviously we need to refresh and you can see that the profile image is now here which is awesome and let me demonstrate it one more time if I do choose file and we select this cat from here open submit we have the cat if I refresh the database you will see that the ID the name of the image has changed and also I can remove them from here if you wish just for the example let's delete both of them and re-upload so obviously now if I refresh we're not getting anything and okay we maybe need to check the object whether this is empty a little bit better but anyways if we choose a file and upload my logo submit we have the logo which is pretty cool the file is in here and that's brilliant now some of you might be wondering well what about well right what if I want to have a unique image name now there's so many ways that you can do this but if you want to have like for example you could pass a user ID maybe plus something else but basically let me change let me show you how you can change the image name so to do this it's actually fairly simple all you need to do is on this line here all you need to change is this here so what I can do is I can change the name to rat rat sorry rat dot jpeg like so save it and look at what happens next so if I refresh if I upload a new image so we upload the cat submit all right the image doesn't show in here but if we go back and have a look at the uploads photo you will see that we have an image called rat dot jpeg and this is the cat and the image is actually not showing here and this is because we are still grabbing the actual name of the original image so of course you're gonna have to insert the name in here so for example this would have to be in this case rat dot jpeg save refresh let's upload an image let's upload this one and this will work if that makes sense now if you want a totally unique name what you could do is go to npm go to npm.js.com and search for uuid and basically you can use this package to generate universally unique IDs like the example here and that's pretty much it feel free to explore this but I'm gonna wrap it in here and I'm going to put this back to normal like so but yeah I'm going to put this back to normal refresh and that would be everything from this tutorial I hope that you found this useful please consider subscribing to my channel smash the likes and if you have any future suggestions or comments please comment below and I will see you in the next one thank you very much for watching as always my name is ready and you're watching my channel ready the brand