Build a Complete Full Stack SvelteKit User CRUD API with MongoDB Step by Step Tutorial For Beginners

uh hello guys welcome to this uh brand new video so in this video we will be building a full stack crud user crud application something in a gallery you can basically manage your user such as name email profile picture country and you can perform update and delete create and list out users inside this table we will be doing it inside a SW kit framework which can be used as both front end and back end we can make API routes we can do paging we can display users create them update them everything we can do it we'll building this full stack user management system in swel kit swelt kit if you don't know it's a based upon swelt which is a front end framework and it has been uh created by the same founder with who created SW he has created another framework which is SW kit which is built on SW a UI framework that uses a compiler to let you write uh server side components as well as front end components as well so we will be using this framework swell kit and uh it's fast blazingly fast and it's a very good alternative to next next CH it does the same job of next CH which actually allows you to write serers side route API routes as well as the front end in the same application so this is my directory structure you will see the routes are also there and this is our front end which is there in the we have various components out there for listing out user for editing user for deleting user and then we have the API routes which are there the server code so let me first of all show you the demo of this application as you can see right here we have a basic component for creating our user inside user management system we can give the name email address profile picture and Country and we can create the user and this is the second component that you can see side by side we are displaying the users with pagination on a single page two users will be shown we have the update Button as well or we have the delete button as well so if you click the delete button sweet alert popup boxes these beautiful boxes will appear are you sure you want to delete this user if I click delete so you will see that deleted the user has been deleted so now only a single user is there so we are storing these users inside the mongod DB database so you will see already only a single user is present you will see that so it has got a name email address and this is the profile picture that we are storing it in the AR buffer string so then we are actually showing this picture right here in a base 64 format right here if you see we have the country all that stuff again if I delete this now you can see if I refresh the database there is no entries available in this table of Cent app user so the table is empty and if I want to fill out a user I need to provide the name and the email address then we Prof basically provide the profile picture this can be jpg PNG or webp file and then we provide the country click on create so it will actually make a post request the user has been created you will see that so the name email address this is profile picture this is the country this is update delete similarly we can add one more user let me just show you the basic functioning of this uh application so click on create a second user will be added now if you check if I write the third user if I add the third user what will happen it will move into the next page because we on the single page we are only displaying two users so we are not displaying more than two users so as I click create it will move to the next page so now this button will be enabled by default it is disabled you can't go to the previous page already you on the first page if I click next I will navigate to the second page now this button dis becomes disabled now you can go to the previous page so you can see that pagination is Al to we will also integrate pagination inside this full stack application which easily allows us to go to any user and similarly we can add more user just to show you so just need to it's a very useful application uh you can see that so now there are four users splitted into two pages on a single page we are displaying two users on the next page we are displaying the other two users so in this way you can so now if I add this user it will change to three pages so this is the first page second page and this is the third page and you can just change the pagination all this code is customizable if you don't want to Let's suppose you can change this values user per page to you can change them let's suppose if you want to display five users per page all these values are customizable so when we build this project you will see how this works so I just wanted to show you the working of this project what we will be building you will see now five entries have been successfully added so the profile picture we are storing it in a buffer and then we are showing them in the canvas in the image tag using base 64 code if you see this is the base 64 code of the image and we're displaying it in the browser using the database we have the text image email all these countries are there and now if I show you if you want to update a certain entry if you now want to update this user there is update button available so as you click the update button automatically the entries will be pre-filled right here you will see this is a name email address and the country and if you want to change or replace the image you can change this image to let me replace this image and let me change the name as well email address and also this also so if I click okay so you will basically see guys your information has been updated all this information name email profile picture and the country as well so in this way you can change all sort of information or a single column as well so if I only want to change the country click on okay so only that column information is updated not all you will see that so in this easy way you can customize everything you can update delete create a brand new user display them just sort your pagination as well if you want to delete this record simply click are you sure you want to delete this user simply click yes so now there are only four users available again if you want to delete them so in this easy way you can do this so if you just refresh now so you can see that guys in this easy way you can see on a single page we have two users available in the database and we are fetching them so in this easy way you can delete update create and list out users in SW kit so swel kit as I already told you it's based upon SW which is a frontend UI Library very famous many developers use them so now let me start building this project guys you will see I running this application on Local Host 3000 Local Host 5173 port number so in the next section guys we will start building our project from scratch stepbystep tutorial so this will be a complete tutorial and if you need the full source code guys alongside with the documentation and support from me you can go to the description of this video and you can directly go to the description link where you can purchase the full source code from my website Pro Cod store.com you will get this directory structure the zip file you will get after you make the payment from Google Drive automatically you will be redirected to Google Drive after the payment and you will actually get the zip file which will contain this directory structure all this source code will be there and full documentation will be provided by me so if you have any doubt you can purchase it after purchase if you face any problem if you want to have any assistance from me I will provide you and the link is given guys you can directly purchase it so thank you very much and I will be seeing you in the next section where we'll start building this project so now guys we are here inside a project directory so we will simply open command line here and right in this we will create create a brand new swel kit project so simply write this command npm create SW SV LTE at theate latest and followed by your project name so let me give this project name as SW user management system this is if let me zoom in npm create SW at the rate latest so this means that we are installing the latest version of swelt at the time of recording this video and then this is the name of the project very simple command and simply enter and after this it will actually ask you some questions that regarding your project so it will you can see it is saying that uh which SW app template you want to use so I don't want to use the swel kit demo app I want to start from scratch so just drop down and select the second option so skeleton project so it will simply have a very basic project so it will not have many things built into it so it will be good for understanding the swel kit framework so enter it and it is saying that add type checking with typescript so we don't want any type checking so simply select the third option no and it is saying that select additional options add yes lint for code linting and pretty much this is not the this is not that we want but there is no option uh so we will select stick to the default option just add es lint for code denting that's all so this will actually basically make your project and now these are having some instruction given to you you need to navigate to this directory project directory and then execute this command npm install and then you run your development server so what I will do the same thing CD SW user management system and then I will invoke this command npmi so this will actually install all the modules related to swel kit the base packages The Base Library so the built-in modules which are required for actually starting a swel kit application so this will hardly Take 5 to 10 seconds depending upon your internet connection so I will not pause the video you just need to see everything that is going on so I will not any cut video so just see everything what is happening and also compare how much time inside your machine it took so mine took very less you will see that it installed all the packages so code dash so it will just open your project in vs code this is the basic structure of a swel kit app you will see that we have got the lib folder which contains index.js file which is currently empty so here you will put files related to your project any external libraries that you're using the main folder is this routes folder so this is a basic page that you will see whenever you open your SW get application let me open it so if I run this command npm run Dev it will start your development server so it is actually using V as you all know guys wheat is actually a very good alternative to webpack it's very fast if you don't know about V this is actually a compiler Next Generation front end tooling so it is used by many front-end UI Frameworks such as react view so SW also uses it so it started your back end you will see Server Local Host 5173 so here your app will reside so you will actually see a welcome page welcome to swel Kit so you can modify this page by going to page. SW so every route that you create guys it actually this is a index route so you need to name your files as plus followed by Page do swelt this is a convention in swelt we do you just need to name your files like this and here we can edit this file which let me say hello world so it will automatically refresh and you will see hello world is reflected back so as I already told you this is the index route we can similarly create a another file right here plus user. SW this will actually create our route automatically so now this will say this is a user page so how to actually go to this so it is saying that oh sorry I forgot to tell you uh this if you see we if you if I change this name from page to user right here I get this error that uh plus are reserved so these files prefix prefixed with plus Character Are reserved so you can't change the name of the file every time whenever you create a new route inside swel kit the file name must be plus page and Then followed by the extension SW so the file name will will remain the same if you want to create a brand new route let's suppose this is the Home Route let's suppose if I want to create a new route SL user how we can achieve this in SW kit it is very easy let me show you so you need to go to routes folder just create a brand new folder called as user and inside this create plus page SW like this and right here here you will write your this is the user page like this so now if you go to/ user you will see automatically the route has been created no need to actually do the routing it's very easy for making routes in SW you just need to name your files like this Local Host 5173 / user automatically the route has been made so in this way you can make unlimited number of routes inside your application so this is file based routing here you create the folder name and then write your plus page. SW file that's all in this way you can even have Dynamic routes as well let's suppose you are passing uh Dynamic routes so how you can make Dynamic routes so you will say in square brackets you will say ID and then again you write the file which is plus page SW so now this is a dynamic route SL user followed by this is will be the dynamic parameter ID that you will be passing so H here you can say this is the dynamic route so now if you go to/ user slash2 you now you see this is dynamic you will see we have passed slash user /2 and now you will see this is the dynamic route so in this way you can make static routes Dynamic routes in swel kit very easy on the front end similarly goes in the you actually make your API folder right here where you will actually make your server routes so this is the folder reserved for making the serers side routes SL API so here we will look at later on whenever we create server site routes but for now we will be concentrating on including Tailwind CSS inside our swel kit application Tailwind CSS if you don't know it's a UI framework very very popular framework so by default you will see it actually renders the page with the default styling so I will show you how to include Tailwind CSS if you just Google Tailwind CSS if you don't know about it just write Tailwind CSS so it actually creates uh premade classes you don't need to write custom CSS for these you will see custom CSS classes are pre-built inside this framework you can directly write here how to integrate uh Tailwind in uh swel kit you will see this article come right here by the official Tailwind CSS documentation so you can just follow the steps let me just show you so they are telling that you need to install these dependencies first of all so I will copy this command and just go to the command line and just paste these commands so we are if you see npm install dasd means we are installing it as a depth dependency and we are installing Tailwind CSS post CSS Auto prefixer and simply install these dependencies so it will take some time and it will actually list them inside package.json file if you see in the dep dependency section so not in the dependencies in the dep dependencies so just wait for the process to finish so now you can see it has added uh Tailwind CSS uh post CSS Auto prefixer Now The Next Step It Is Telling to us that create this file npx Tailwind CSS in it- y so it will actually create two files which is Tailwind config.js file in the root directory of the project this is actually the command npx Tailwind CSS init dasp so enter it it will actually create these two files so you will see it has created tailin config JS file and the post CSS config JS file as well so Tailwind config JS it actually gives you both the files content that you need to copy paste so inside uh SW config.js file SW config we also have this file as well so here it is telling to us that simply copy paste this code so I will paste this code and then it is telling that in the Tailwind config.js file you need to copy this code so right in the tailin config Jaws I will copy this code so I'm just following the steps guys in the tailin documentation and then it is telling to us that we need to make this app. CSS file in the routes folder you'll see in the source folder you will need to make this file app. CSS so now in the source folder you will actually make a file app. CSS and paste these styes these are the the base styles of Tailwind so after that you need to include them in the layout. swell file so we can directly include them in the app. HTML file so the way that we include it is very simple right here we have the swel body before that we can include the slot so there is a concept in slot right here it's basically it means that everything which is uh you can remove this remove this and right here after you include the head you can remove this meta tag we don't need this and also this you can give it a title this is actually the file which will be globally will be available to all the components so it's a where you will actually write your script code different scripts you can include the CD and everything you will do so right here we are including the stylesheet link stylesheet HF and here we will be including from The Source folder which is app.css like this so we have included the tail CSS file app. CSS where it actually contain this in the app. HTML and now hopefully if you just remove everything from here from the body that's all that's all that we need to do inside this file and hopefully if you now go to any page or swell file let's suppose if you want to use tailwind and you say you write any class name of Tailwind container BG red 500 so these are all Tailwind classes and if you say div class container BG red and here we say H1 text Center and it should have a BG blue 500 so if you go to the refresh it I just need to restart my server so npm runev so so I think this is our page. SW file you need to write something in the heading so we forgot to do this SW app let me see guys what is the problem uh guys I figured out the error it was just a typo mistake if you just check your app. HTML file right here while we including our app. CSS file if you check we have made a very type silly typo mistake stylesheet it should be the spelling is wrong here which is we need to eliminate this H from here and refresh here and you will actually see the Styles will be applied it will have the background color of blue so if I just show you if I change this background from Blue to Red so now it will be become red color and uh we can change the color of the text to be text I think white so now you can see the color of the text has been changed to White so the in this way you have premit classes of Tailwind to actually make your user interfaces we don't need to write custom CSS so now we will be looking later on how to build the UI but the first of all let me set up the dependencies which are required for this project so right here just pause the server and just install these dependencies so the very first dependency is will allow you to communicate with the mongodb database So currently if you see we have a single record available in the table so this Library will allow us to actually communicate so npmi so you will see that we will install this npmi mongus and then we have sweet Alert 2 so these are the different uh windows that you saw popup windows will appear whenever you click the delete or update button or create button in order to just show you notification so this is actually a library very it's their official website sweet alert to so it basically shows these alert boxes which is very nice to see very intuitive very user engagement savy so you'll be installing the sweet alert to it's a node package for integrating it and lastly using EnV for actually storing information in EnV files these are three packages simply enter and install these packages so this will add inside your package.json file in the dependency section so now you can see it has installed these three dependencies EnV and sweet alert to so after this what we need to do we need to create a file in the lip folder just delete this index.js file which we don't need this inside this lip folder we need to create a file called as db. JS so this will be the code for connecting to the mongodb database we will see we are using mongodb at Compass which is a GUI software for specific windows so it allows you to actually see the tables that you create so if just type bongod DB Compass you can download this exe file from setup file you'll see that so it is available you can directly do this and whenever you do this uh you will actually need to connect this will be the connection string mongodb Local Host 27017 by default it runs on this port number and uh you can need to copy this connection string so that we can create it in the EnV file click on connect and uh right we'll be using the same database which is SW kit c cap this is our database name currently there is a single table available right here which is user so we have this Fields name email profile picture country so now for this application we'll be creating aemv file to actually connect to this database so you'll simply write a mongodb database URL right so this will be equal to mongodb localhost 27017 and followed by the database name so SW kit cab so this is the same database we are giving SW kit CED app I think which is Dash here sorry Dash this is the environment variable we set up by creating a EnV file so you can now close this file and go to your db. JS file so right here we make the connection method so first of all we will be importing the package from mongus and then we will be importing the EnV from the EnV package and then you'll say env. config and you'll basically Define a function to actually connect to the database it will be a Asing function and you'll simply check that if do connection do ready state is greater than or equal to one in that case the connection is lost so we just need to return so if this value comes out to be one in that case we just need to connect to database so there is a method which is available in which is connect here you will provide your connection string process. EnV mongodb database URL so so here we are actually using this EnV file whatever variable that you define so mongod dbor database for Ur I I think it is URI so URI that's all so this will actually return a put a comma a function second object will be empty object that's also in this way it will actually connect to your database and then we need to export this method so you can simply export uh default this method which is connect to database so you can simply say connect to database so now this file is ready we have made the connection to the database now we can use this in any component to connect it to the database now in the second step we need to make a second folder right here in the lip folder called as models so here you will be actually be creating a user model so so we will be creating the schema for the user user.js so for again this one is required so so right here we make the user schema so new mongus do schema it will have the name property which will be of type string and required will be true the email uh name is required and then we have the email which is again will be of type uh uh string and it should be unique unique is actually a parameter such that it only allows emails to be not be the same so if your email is same you can't enter uh two users same users at the same time so required will be true it should be a required field the third one will be I think the profile picture of the user profile picture this time the this type will be of buffer so type will be buffer we storing this profile picture in the form of a buffer and Country type will be string and it should be required so the profile picture is not mandatory we haven't provided the required parameter right here it is up to the user if they want to submit it and rest of the fields are required and email is unique email should be unique must be unique so after you define the schema we can export them export default do models. user So based upon the schema we need to create a model if the model is already present then in that case we will be using that model or if the model is not present we will create that model using the schema by using the model function model represents table collection everything you can call it so this is done guys we first of all written the code for connecting to the database then we written the schema code right here based upon the schema our table will be constructed automatically by mongodb and uh now in The Next Step guys we will actually write the H index route where we will be actually be displaying the existing users which are there in the database in the UI so how we will be doing it we will be seeing it in the next section uh now guys in this section we will actually be writing uh the API route first of all to actually fetch the data from the database mongod DB database and then we will be displaying this data in the Home Route so now if you actually run your application you will actually see this message as I already told you this is your main file file in the routes folder we created this this is a index page page dot the naming needs to be Page Plus page so if you just open your Local Host 5173 you will actually see this rendered out there so first of all we need to actually inside the source folder you need to create a brand new folder for your API routes you can just name it as API and inside that API folder you will actually say user because in this case we are working with users that's why we'll call them users you can call this anything so we will be calling them users and right here this is again a naming convention for the files inside your API routes every route needs to be named as plus server.js this is actually the this was the client side routes that you made plus page and this is for the server side route plus server so every route that you make needs to be named AS Plus server this is the convention now inside this uh what we need to do there is uh all these functions which are available for us one by default whenever you make the request you actually run the get route similarly we have the post route as well for making a post request and then we also have the put method and also the delete method as well all these four methods are there but while we are only working with this get request to actually fetch uh all users from the table so right here we now need to actually first of all import our the connection file that you made earlier so we need to make that in the lip folder if you see we created these db. JS we exported this method connect to database now we just need to import this method right in this file so you simply say connect to database from dot. lip uh vs code will automatically import for me and secondly we also need to import the model file user model from. Li liip models. user so we actually imported both these files and also we need to import a Json module which is available from swjs kit so it actually has a Json module which allows you to return the Json response from like this you can return any message let's suppose uh hello world this is actually a very simple API route we have made now we can cross check you can see our application is running local host 5173 now if I go to/ API SL users so it is saying to us uh sorry SL API SL user sorry not DOT um let me see what is the problem oh sorry we forgot the return statement we also need to write return return Json and then we put a message so you just need to refresh your application I think I think we call them uh SL API SL users just see if it is located in the API see the folder name it is correct / API SL users and then it is uh let me cross check I think I somehow mistake plus server JS that is correct uh so we are actually returning a Json response right here return new Json property right here so let's suppose we have a user object we are returning so we have a name property attached to it and a age property so let me send this whole object as it is which is user directly so we are returning this uh as so if I refresh now uh sorry guys I figured out the error I I'm just making very silly mistakes uh this API folder will be inside the routes folder because each and every route needs to be there in the routes folder by default just move your API folder right in the routes folder so if you also just move it this API folder right here and move your user folder so essentially we actually moved your API folder right here in the routes folder so every route that you create either server side route or frontend route will be reiding in the routes folder and then here in the API folder we have the users folder and then we have plus server.js so if you see now refresh now you will see it will actually if you run this Local Host 5173 at/ API user it is returning a Json response a Json object user which has two properties name and age so here we are actually defining this it can even either be a message as well let's suppose success property and also the user property so now it will have two first is the Boolean parameter then it will have this one so you can basically make your backend apis in swel kit very easily by just making a API folder in the routes folder so now what we need to do in inside this we need to actually fetch all the data from the table and then return it as a Json so it's very easy first of all we need to actually connect to the database return the error and right here we will simply say we await we got saying function and we will say connect to database it will first of all make the connection to the mongodb database and after that it will fetch all the users so now to fetch the user we'll simply say user. find the model it contains a find method all these methods it will actually find all these records the first argument is empty parenthesis and then we need to get the name space email country and the profile picture all these four properties you don't need to mention this it is not mandatory I'm just telling you which fields we want so if you want uh let suppose you only want name and email so you will just provide as a second argument that I only want the name and email field in this case I want the all the field so we can even left empty as well so after that it will return this data in a JavaScript object all these things so we can now return that return Json users sorry comp delete user object so if you just run your application there will be a single option you will see the ID name Trav email travet gmail.com and this is actually the profile picture that you see right here this is a buffer that we are returning we are stored inside aray buffer so basically it is returning and this is the country field you will see that so only a single record is present right here so it is returning only a single record so now we have made a simple backend API and now we need to consume this data on the front end so now we'll navigate to the page. SW file and right here will actually uh show the data so now to show this data you will have the script tag here we'll write the JavaScript code and then we will have the actual template where you will be showing this we will basically give some Tailwind classes Flex column Flex on medium devices Flex row thow item start these are all Tailwind classes guys so I will just write these classes so this tutorial it's not about Tailwind CSS background I will make it to gray BG gray 100 Gap will be around 8 we will be aligning this horizontally on one side we will be actually displaying the user form and the second side will be displaying the list of the user so for fetching now first of all we need to actually make a fetch request in the front end so you'll be importing the modules so on Mount is basically a live cycle method in swelt we'll be importing it from swelt so swelt as you all know it's a UI framework so we will be using these methods life cycle methods for every SW component we have this on Mount method then we also need the sweet alert Library which will be coming from sweet El 2 and then the user list sorry us user list we will be creating later on whenever we want to display the users and here you will be saying let users is an empty array so by default this will be empty whenever the components loads for the very first time and then we'll make this function fetch users so inside this function we will simply consume that API that we written early on we'll use the fetch API so fetch API is built in in every browser so you don't need to actually manually install it thir party module you can directly use Fetch and right here you actually make a request / API SL users say get request by default and then if response. okay if the request is successful then our data will come and we can actually say con data await response. Json and now we can actually console log the data so now this this console log that you write in this file will come in the browser so if I Navigate to Local Host 5173 if you check in the console you will actually see could not establish connection just refresh okay I think Let me refresh it npm runev I think we are returning this Json the full object right here this is our API if you see Local Host 5173 /i/ users this is actually a Json response that we returning console log data await response. Json let me just say uh users to be data. users if any sort of error take place then we can console log fail to fetch users now if I oh sorry we forgot to call this method so I'm just making a lot of mistakes guys in this tutorial so we now need to use this on Mount this is a life cycle method which automatically executes whenever your uh swelt components load it is similar to use effect in react CH so we will be simply be calling on Mount and here we'll pass this function fetch users that's all so if you see now you will see this uh user object return and uh there is only one record available country email name profile picture like this now we need to display these users right in the UI so we can actually make a new component for this rather than directly writing in this file it is very much recommended that you split your into multiple components so right here in the routes folder we will create a new directory called as user uh user list and right here you will make a file plus page. SW so inside this uh component we will be actually be showing uh we'll have the script tag right here just a basic message user list component now to include this component right in this we can import that we can say uh user list from dot dot dot routes and then we have user list SL page. so we have this user list now we can actually embed this component right here user list so if you just refresh you you will see this uh user list component right here now we need to pass some information to this component we will be passing this function which is fetch user directly as a prop double cly bracket we will pass it as a prop and the second information we'll be passing is this variable which will be a simple array so after you fetch this in the on Mount this array will be users will be assigned right here users is equal to data users so we are also passing fetch user and user at the same time now we need to export this we just need to write we need to get these properties which are passed to this user list component so how we can do that we can do that using this export space statement export let and then Define your fetch user and the users directly so now we can use this so you can see that now it is saying fetch users is is not defined sorry we defined it like this so U is capital like this so This is actually a method fetch users so now we need to load them basically show them so it's very easy how we can do this we will be showing you how we can show these users in the next section uh now guys in this section we will actually display the users which we are getting from the backend API and inside in the last section we created this user list component and we actually got these two properties which we passed it as a props you'll see that we passed them using first is the fetch user function which we defined right here we are passing it you can pass properties methods objects to your child components this is not a child component this is just a component we are passing information so this is actually a variable user variable that we are passing it so inside this uh uh user list component so right here now we can actually display them so what we will do we will write in the HTML we will just give it some classes Tailwind classes so you'll say w full width will be full Max width 4 XEL background will be white so BG white BG stands for background padding will be 8 to p8 it will be rounded and it will also have a shadow as well so all these are pre-made classes guys in Tailwind CSS Shadow on medium devices so now we will add a heading which will have a class of two text 2 XEL font will be bold mb4 text Center this heading will be users so here we be defining the user list if you see basically we have this nice little heading of users and right in the center position so right here we will actually have a conditional in the curly bracket we write hash symbol if users so we are using a SW right here guys SW if you know the syntax of swelt conditionals if else for each every so we'll be using this we're comparing this if the user length is greater than zero then only we need to display them and here we need to close the if condition right here and right here we need to display a table a bootstrap sorry table right here and you'll be displaying a just giving it a class Min width full background white border border Gray and the shade will be 200 like this so inside the table we have the table head tag table row and then we have three table headings four table headings first will be name this will be for email this will be for profile picture and then this will be for for now I will sh Show name email profile picture and Country these four information we will show and we just need to give the classes to it py2 PX4 border B so you need to give it the same class to each element so what I will do I will copy this and paste it so if you see we will have four columns name email profile picture and Country and uh after this uh in the table body tag we will use this uh each dollar each and for each users as user we will have the user ID parameter right here we now need to close it so inside this we will actually be displaying uh first of all user.name so if you see basically the dis uh it is displaying the username similarly we can display our user email and then we can display in the image tag we can display for displaying profile picture it is little bit complicated so I will just be eliminating this and we will be covering it in the next section while when we will be creating a separate component for user component I'm just showing you how to display details so in user country so you will see uh it is TR you will see it is showing it in we need to style this but uh in this section I just wanted to show you how we can display this information which is coming to this component and uh now now in the next section guys we will be just need to style this first of all just style this just add some styling uh okay so this styling is uh we will be in the next section we will be creating a separate component for the user so so I will be seeing you in the next section uh now guys in this section we will be displaying uh the users properly in the last section I just showing you the basic way how to display the information such as name email and Country we will be displaying all this information alongside the profile picture and all the update and delete buttons in this section for this I will make a new component in the routes folder just create a user component and just make a file plus page. SW file so now in this component we will be actually be displaying each user and and uh we will have the table row tag so first of all we need to actually in the user list component we need to delete everything from here and just right here in the user we just need to say we need to include this so we can simply say import user from dot dot user SL page so right inside this user component we need to actually send the user object the current user which is there so you can directly send it as a prop user like this so it is very easy to send properties to components and receive it now to receive this you can simply use the export statement export let user so here the spelling needs to be the same so whatever give you name your component or variable or method you need to Simply name it can't be different like this it needs to be the same and now inside this user component we can actually uh display this very easily you can give it a class to it py2 e X4 border B and we can simply say user. name py2 PX4 order p and then we can display user. email and then for the profile picture guys it is slightly complicated because we do need to convert that array buffer to base 64 code so for doing that we will simply first of all check that if the profile picture if the user has profile picture because the profile picture was not a mandatory field so we are simply checking that if the user contains a profile picture then only show it user do profile picture dot data like this so you close this if condition so here we'll be having the image tag The Source will be equal to data image/png and Then followed by the base 64 this is constant and right here we need to actually call a function which function we need to make it aray buffer to base 64 so we we'll actually make this function this is a custom function we will make we will pass the user dot profile picture. data so close this I think we closed it so yeah so now we actually need to uh make this function we can L make it inside this component but the good practice should be to actually make it in a different file what I will do uh I will simply make a file in the source directory called as utils utils and right here you'll make this file which is uh this function this is actually the function I will copy paste it you will get get all the source code no you can purchase it the link is given in the description this is actually the source code of this function array buffer to base 64 it takes the array buffer first of all it creates the uint 8 array passing the buffer it creates for Loop and then this is actually the thing and now we can import this function in the component by directly importing array buffer to base 64 from uh lib sorry utils do index.js so if you see in the index.js uh export default AR buffer to base 64 we actually does that so now we can include that so there is a warning will come so you can disable that so everything will go away so so right in the user component we are if you refresh your application you will see the name will display email will display but uh if you see we haven't having our uh if you see in the user list component okay you forgot to add the table head heading for py2 PX4 and Border B this will be the field for profile picture so what this say if you load this image okay I if you see guys we have made mistake right here data colar image it should be PNG we have written om so in programming guys sometimes type of mistakes can happen so you can see that it needs to be PNG we converting our image to PNG and then refresh it uh now it should return why it is not again if I think I made a something mistake so what I will do I will copy this code paste it okay I forgot to add the width and the height that's why the image was not showing so if you remove this class I think it will be having a very big size so we can add the Tailwind classes WID to 16 height to 16 it should be rounded and uh full so now your profile picture is also showing and lastly to actually display the country we will simply say user. Country and we can display the same classes so you can see that guys we are displaying these uh information so we have a separate user component and in this way you can design your application very efficiently we have the user component in a different file we have the user list component in a different file now we need to tackle for the update and delete functionality so right here we will be having uh two more buttons for so I will be defining the actions property right here so this will be actions so this will be py2 PX4 so we'll call this actions so in the we will have two actions which will be responsible for uh just after your country we will be having TD tag py2 PX4 inside this we will have a div tag and we will be giving a class Flex Flex column space Y 2 and uh we will have two buttons so first first button will be for the update and second one will be for the delete so we will be looking at guys in the next section how to create them individual components for both update and delete so we'll be creating two more folders for update and delete so we'll be looking at in the next section so now guys in this section we will actually be talking about how to actually create components for the delete and update buttons so right here we need to actually create a brand new component for the update button so and the delete button so right in the source directory in the routes folder just make a new folder called addit and the second folder will be delete so two folders are there edit and delete so right here just make again plus page do SW and in the delete f folder as well plus page so right here uh inside this edit we have a simple button for now and it will have update and we'll be giving a some classes to it of tail vit X4 py2 rounded that's all so we have this similarly I will copy paste it for the delete button and uh this will be the color here will be red color so BG red 500 so now we just need to include these components in the user component so right here we will import these at the very top say import update button from uh edit slash and then the delete button now we can simply uh do this update button and delete button so now you will see guys we have these two buttons added update just change the label for the delete button right here so this is our full component ready for a specific user and uh update delete and now in the next section guys we will show you how we can actually add a user form side by side so that you can add a new user directly inside your application we will make a post request we will write a API route for actually directly inserting information inside the mongod DB database so in the next section we'll be tpping the create user process uh now guys in this section we will be actually be creating a component for actually allowing the user to actually create a record in the database so right in the index component we will include this just before the user list component right here for that first of all just go to the routes folder and here we need to create a new folder create and then create a file inside this plus page like this so right here let me just name this component create user form so now to include this component it's very easy right here we can include this at the very top we can say import create user and from so so now we can actually call this like this create user and we can actually pass this method as well which is fetch user so we are passing this method fetch user like this to this function to this component which is create user now inside this create user component we will actually be first of all in the script section we will be getting this method we'll be receiving the that prop passed by using export keyword export let fetch user we got that prop now we can use this method inside this component we can call that so now first of all we will actually be writing the form we will display the form right here we will have these Tailwind classes width will be full Max width on medium devices MD background will be padding 8 and it will be rounded Shadow medium margin bottom 8 after this we will have a heading and text to Excel and font will be Bold mb4 and The Heading will be there in the center position so it will simply say create user so if you refresh your browser you will see side by side here we will have our create user form and here we'll be displaying the details so after that we will have a simple form element and this form element will have a class of space y4 and inside this we will have a a label we will give it a class of block mb2 and inside this you will have a span tag and you will simply say this will be here we allowing the user to have the enter the name so text create 700 so after that we will have a input element input type text and we will be G giving an class to it of margin top one block width will be full border rounded PX3 py two and it should be required you will see there will be this name field added right here you can just write this similarly you need to include this right in the label itself so wherever your label is ending just after this you can paste it close this so what we can do we can repeat this uh for the email so we can now change this to email and uh input type will be email this will be the email here next one will be for the profile picture so so here you will say profile picture and this will be input type file so here you'll be allowing the user to select the user profile picture from the file system so mt1 block W full border all these Styles will be the same and here one additional attribute you need to write which is accept we will only be accepting image files so just write image/ star like this so after this we will have a input field for receiving the country so just write country here input type text that's all so now we have these four fields in the form guys uh now we need to attach The Binding attributes which are necessary just after this we will have a button to actually submit the form we will say create so this button type will be of submit and we'll be giving a class of it BG blue 500 and text will be white padding X Direction 4 py2 rounded w full so a create button will be added right here if you see we have now we can actually process this form so in each of the input field that we added we need to give it a special attribute to each of the input field this attribute is called as the bind attribute so we need to do the two-way data binding so that whenever we actually write something in this bind value so this is there in SW that you can do this and attach this and right here at the very top we need to declare some State variables right in the JavaScript just declare name email similarly profile picture and Country so these are the four variables we need to declare right here and also the users which will be empty so we have declared these variables at the very top now we need to attach these uh we will be binding this name variable right here binding similarly we will be doing it for the email as well so bind email similarly we'll be doing it bind files profile picture and similarly we will have bind file sorry bind value sorry bind value for the country because it's a text field you can see we have attached these uh bind parameters to each of the input field bind files here for this because this is a file here so it's a input file that we receiving that's why it is files here and again it's a value again for the name this is the email this is profile picture and this is country so now we will be attaching the form so right inside our form element we need to attach a on submit which is very much similar so whenever your form submits we have this uh directive that we can attach which is on colon submit so whenever your form submits we will first of all also at the same time we will prevent the auto submission of the form by calling prevent default and then we'll be attaching a function which is create user now we need to Define this function create user we need to create it at the top so this function will be Asing function so we can actually say form submitted just to check if it is working or not so just write your you can see form submitted so now as soon as you submit the form this function is executing it so now inside this function we need to actually get the form data so for that we'll be creating a new form data object so this is a very handy Way by which you can get the information directly in one go so form data it contains append method you'll be appending the name like this similarly you'll be appending the email address like this so make sure for doing this form data you should have given I think uh this binding values these bind attributes that you have given right here that's why you can access it using these variables name and email so like this so these bind parameters comes into the picture for actually accessing this value by using form data so you can directly pass them using form data and then for the profile picture it is little bit different how to get the value so you'll simply be having in the condition if profile picture and profile picture zero if the profile picture is selected by the user then in that case we'll say form data append profile picture uh and we will be saying profile picture zero and let me just make sure profile picture is not mandatory so let me just disable this required one so user has its own position on this if they want to upload it or not so if they do upload this then it will be appending it so conditionally after that we will be appending the country so form data country which is country so after you do this you need to make a simple request to the backend API you will say await fetch again to the same route / API SL users this time we will be passing the method to be post and the body here body will be simply whole form data object so if the request is successful once again we'll be getting this response response. okay and here we'll be calling this function fetch user once again to actually update the UI update the users in the page and then we will be showing the this sweet alert to it will be imported at the top the SE sweet alert to package and it'll be showing a notification message to the user that your user has been created so created and the message will be the user has been created and third parameter will be either you can success show a error message info question success messages I want to show it that's all after this we just need to reset the value so we'll say name is equal to nothing email is equal to nothing and uh country is equal to nothing and then for the profile picture we need to actually give it a ID and then we can say its value to be nothing just give it an ID to the profile picture just give it an ID so that we can Target it in by document. element by id id we have given profile picture so you're saying for resetting the value like this and also make sure the variable of profile picture is null after we submit the form we are resetting the values so if you just do it nothing will happen because we haven't written the request in the backend server in the backend API route so we do need to make so nothing will happen so 405 method not allowed so we do need to make this inside our route so in the server JS file right here currently we only have a get method so right here we need to add a post method right here we will say export again it will be Asing function post and it will have have this request passed inside this parenthesis and we are passing this request object which will automatically be coming inside the post request so it is already built in so now in the TR catch blog we can actually get the entries which are passed to this function we can first of all we need to make the connection to the database connect to database a wait then we can actually get the information which is passed which is using request. form data so this will actually return an object guys which will actually contain all this information that you pass if I refresh now if I enter name email and let's suppose if I don't provide the profile picture click on Create and you will see in the console you will see this form dat dat we have given the name email country these are the values that we gotting in the console because it's a server side code that's why you are not seeing this inside this you're seeing it in the command line because this is a server side code that we are writing not the client side code so it will show it in the uh server console so right here guys uh now after we do this we now need to hand handle the profile picture if the user has selected the profile picture then we need to create a variable here profile picture buffer because we need to store it in a buffer so we just check profile picture data. getet we need to get its value so after it does we will simply check in the if condition that if profile picture instance of uh file if essentially we are checking if the profile picture is set by the user in that case we just need to convert it into array buffer so we have convert this into a buffer and store it in the database now we need to create a new instance of the user by using the model class and right here we need to pass the name so you'll say data. getet name the email address will be data. getet email similarly the profile picture will be the profile picture buffer and the country will be data dot country that's all in this way you can uh do this after this we have the save method in to actually say save the user user. save this will save the user and then we need to return a response back to the user return Json user and then we can return a second property as well such that uh this is not mandatory but just status of 2011 so just format this if any sort of error take place in that case also we can return a fail to create user and inside we can pass a status of 500 this completes your post request guys very simple process we actually make the connection then we get the data we basically convert your profile picture to a buffer and then store it and then we get all these information name email profile picture and Country and then we save it and uh after you do this now if you refresh if you enter any name let's suppose I write Tom I write Tom at gmail.com and if I select a profile picture let me select this one and give it a country hopefully if I click the create button the user has been created and you will actually see guys the name is showing right here email is showing the country is showing but if you see basically this uh the profile picture we haven't got the profile picture so here it is saying to us that the value is file and if I check refresh the database you will see that the profile picture hasn't been saved name email country is saved let me check what is a problem uh I think profile picture okay okay sorry guys we made a mistake right here this needs to be profile picture is equal to buffer from await profile picture do aray buffer so like this you do need to make this just do it like this now what I will do I will delete everything from the every record from the database so now there is no record present so just make that change guys profile picture is equal to buffer from await profile picture array buffer so if you make this change refresh no users are present now let me add this if I select the Prof profile picture give it a country uh assignment to constant variable uh sorry sorry I think we do need to change this to let keyword because we can't assign it to a we can't modify the constant variable that's why it is creating problem const profile picture okay just make it a let keyword so if you see now uh again uh the profile picture is not saved let me check guys let me check what is the error coming uh guys I figured out the error and the error was pretty simple basically I just rename this uh inside the if condition whenever we are converting the profile picture to an uh aray buffer and this variable this we set to profile picture this needs to be profile picture buffer just rename this to profile picture buffer now we are storing the profile picture buffer and then inserting it in the database in the table so if you just now make the changes and let me delete everything from here table is empty and if I refresh now and if I give the name email address and I give the profile picture as well you will see this alert message come and you now see the profile picture is also coming it is converted to B 64 code and if I check the API you will have one record available similarly we can add some more records as well if you want to so we can record this basically so we just need to add the at the gmail.com any email so second record is created you will see that so in this way guys you can create as many records as you want inside this user form so so now we haven't created pag Nation so that's why it will automatically add records in the same page so we do need to create pagination as well but before that we will be tackling the update and delete operations in the next section so if I click the delete option we need to delete this record and if I click the update we need to update them so I will be seeing you guys in the next section we will be tackled these operations uh now guys in this section we will be tackling about the delete operation so whenever we click the delete button we need to delete this record from the database and from the UI as well we will concentrate upon the delete folder that we created delete component and currently it is having this label right here this is the HTML we have a simple button it doesn't do anything we do need to actually write attach a on click to this directive to it so whenever we click this we will actually be executing a online uh inline function this will actually call this function delete user and here it will actually pass the user object that if you see in the user component we are actually having this delete button and the update button but we are haven't passing any prop we do need to pass the prop the user prop that we got from the user list component so you can actually pass this prop to the delete button as well we can simply in curly bracket we can pass it user so now we can actually get this prop inside this delete component so write export let user so have we now sorry this is this is a delete one so here we can actually so now we got the prop here and now we just need to Define this uh function which will be actually we delete user so here you'll be passing the user ID user uncore ID so here we just need to Define this actual function which will be responsible which will be Asing function delete user and uh inside this function we will actually be getting the user ID as passed as an argument so here we do need to actually import the sweet alert library to actually show show notification messages and right here you will simply show a simple message to the user that uh are you sure you want to delete this so you will say are you sure question mark the second argument will be the text what text you want to show do you want to delete this user question mark and the third argument is the icon which icon you want to show so I want to show a warning icon the next one is show cancel button I do want to show the cancel button so I will set it to true and then the confirm button color so you can set this to a hexad decimal code 3 08 5 D6 so you can set it to your color as as well and then you can customize everything cancel button color you can provide your favorite color like this so it has all the options and then we have the last option which is confirm button text so you will say yes delete it so now to show this alert message so it will automatically show if you just click the delete option you will see are you sure you want to delete this user So based upon the selection we have two choices yes or coins cancel so now we have this uh result coming so result dot if the is confirmed button is selected by the user then in that case we need to delete the user so now to delete that user we will make a simple fetch API call to the backend API in the try catch block we can actually make a request you can make a fetch request and this time we will be making a dynamic route so this time just write in/ API SL users so here we'll be passing dynamically the user ID in the URL so this is called as Dynamic URLs that I already showed you now we need to make this route so the second parameter will be an object this time the method here will be delete and here we need to pass the headers as well so this will be content type this will be application Json and then we need to pass the body which is uh json. stringify and here we'll be passing the ID as a parameter this will be user ID like this so we making a simple delete request to this URL and then we are passing it in the body as well the ID parameter so right here we will get a response if the request is successful in that case we can just console L the we will convert this into Json so await response. Json and then we will simply console log the data and also we can simply show a message a successful message deleted so we will say the user has been deleted and the third parameter will be success like this so This is actually the request that we will making and uh one more thing that guys we do need to refresh the browser as well for getting the fresh data for fresh for updating the UI we do need to call the fetch user function but here this function is not available it is there in the root component if you see page dos this is a index page where we Define this function fetch user now to actually make this function available in the delete component what we will do we are send send in this function to the user list if you see we are sending it into the user list [Music] component so in the user list component if you see we do have this user component now we also need to send this to this fetch user this function to the user component as well so you can see how the chaining works you can send the one method from one component to another and then that component will send it to the next component now this user component will also get access to this so we can just add this fetch user in the export statement and now we can actually send this method to the delete component method again like this very easy so now this fetch user is also available to the delete component as well so now we can add this export statement right here fetch user now we can simply call this uh you can see we are calling this function just it's a Asing function so await like this so it will actually update the UI after the user is deleted it will actually show you the message as well so that's all that you need to do right here and now we need to move to the uh route folder and API folder server.js so right here we need to make the dynamic server route this time in the user folder we need to make Dynamic route because we will be passing the ID so in the URL so in square brackets write ID and then here we will make our plus server.js file so here we will be writing our delete request so for that we have the function export async function delete and he'll be getting the request information in that object to this function which is passed so in the TR catch block so right here we just need to first of all connect to the datab base and that function will be imported it from you can see vs code automatically does it for me so after connecting to the database we need to actually get the information which is passed in the request or J so we'll get the data and then from that data we will be extracting uh the data. ID like this and then we just need to say const user await user. find we do need to import the user as well so user model so you can see it will be imported user and it contains a method find by ID and delete this is actually the method which is provided by it will actually find the user by its ID and automatically deleted here we need to pass the user ID as an argument and then if the user is not deleted in that case we will be showing a error message user not found and we can actually pass a status of 500 404 in the El blog if the user is deleted in that case uh you can simply pass a message to the user that user deleted successfully and the status is 200 that's all uh that's all that we need to do and I noticed one thing guys if you see in the user delete component we are actually sending this user ID in the body of the request so we don't need to send it in the URL so you can just remove it from here and make the request to/ API SL user because we are sending the user ID in the body you can see that we're directly sending it in the body and we are actually getting it in the body by using request or Json so we don't need to pass the request here so it can be actually be what it can do we can directly copy paste this function in the this file which is server.js we for this we don't need the dynamic route so right in after the post function you can just write here paste it this will work perfectly you can see that so it will extract the ID which is passed in the request body header because we are passing this information that you see the ID of the user in the body not in the URL so if you just refresh here and let me remove everything from that file we only need for the update operation rest we don't need for the delete operation for the delete you can directly write it inside the server file so if you just refresh your application hopefully you will be able to delete user just run your application and navigate to the homepage so just wait it is starting the application so now if you see uh if I refresh now uh there is three users already there you will see that so now it takes a little bit time guys to refresh the data so this is called as hydration if you don't know about Frameworks hydration is slightly some kind of delay before server sends the code to the client and then JavaScript is executed so it takes some time to this is a big problem in all the Frameworks such as next ch's uh swell kit so if you basically send a lot of JavaScript code to the browser it takes some time to execute it to load your application so if you just refresh it for the very first time it take that time now if you click the delete button if I click you will now see there is some kind of Errors there it is saying some error has taken place it is saying that request is not defined oh sorry we so where we are making request so that's why we do need to pass this request it's available built-in for every function if you see in the post function we already used the request so it's available for every function every HTTP function that is there in the backend API request so just pass it and refresh it now click on delete so you can see the user has deleted and you can see that the UI is also being updated and if I check the database already two records are available so now that record is deleted if I click this you will see that the user has been deleted if I want to add a new user you can add them as well so user has been created let's suppose if you don't want to upload profile picture you can even set them into empty as well because it's not a required field so you can see the profile picture will be empty so in this way you can do this so now in the next section guys we'll be concentrating about the update functionality so if i c click the update button the user should show a popup window where we can actually update the details so we will be looking at in the next section uh now guys in this section we'll be talking about how to update a user so if you click the update button how to do this so how to do this stuff basically inside the model window all these pre-filled values will be there and you will be able to change update the values so as you change the value it will show this model window how to do this so we will be looking at in this tutorial how to do this so let me show you so the thing that we left off earlier basically we completed the delete operation in the last video so just move to your edit folder where we have this update button right right here we do only have this update we do need to bind on click to it but before that right in the user component we similarly need to actually pass the fetch user function as well to this component and also the user variable as well the currently current user you'll see we are passing it you'll see that so after this what we need to do we need to go to the edit component and right here we need to in the script tag we need to say export let fetch user and user so now we will binding a onclick listener to this update button so whenever we click this update button we need to execute an inline function which is update user and we'll be passing the currently current user so right here we'll be defining this update user property so now to attach this you'll be having this Asing function update user so here for this we need to import this sweet alert library and right here we need to show a notification message to the user whenever we click the update button similarly to delete button so for this we will be having these object return to us the value or form values so inside this uh this will be swell fire and it will take the title title will be in this case update user the second property will be the HTML of this model window that we will be show to the users so here we can write multiple lines of HTML so we'll be giving some classes SW ID so input one class is equal to 12 2 Dash input [Music] so so these are different classes that we are attaching similarly right here we need to give it a Val value parameter as well so this will be pre-filled so whenever you open this this will be automatically pre-filled which with the user the current user having the name property so in this way so we will do the same thing we just close the input tag so what I will do I will simply this is a basic HTML that you see close this and then put a plus sign and then we again need to do the same thing for this so let me paste this HTML so you will find all the source code guys in the description so can purchase it so you will basically see we have this HTML which consist of two four input Fields username email address and then the actual user profile picture and the country so all these things are there in the HTML and uh now the second focus on Focus confirm is false and uh prec confirm we have this call back function available to us so whenever you cck before clicking the confirm button we just need to return from this function we just need to say sorry this will be array not an object we need to return 12 input one value so before you click the update button we just need to get these values which the user has changed changed so you can see we for each input element we have given the ID you will see swell input one SW input two SW input three SW in four so we are simply getting these values by get element by ID and similarly put a comma document dot input to. value so we are using vanilla JavaScript for this to get the values for the third option this is a profile picture it's a image file so to get the value you will say files zero like this so after you do this uh we will actually get all these values that you're returning from this this is actually array it will be stored inside these form values so now we can check in this if condition that if form values have been defined in that case we need to construct a new form data object and uh we need to append all these values updated values so form data append you need to first of all append the ID which will uniquely identify the user so here we need to pass user doore ID and uh after that we need to append the name which will be form values zero the first value in the array and then we have the email which will be the form data 1 and then we have the profile picture and so here you'll be checking in the if condition if profile picture exist then only in that case only we need to append that profile picture form values and then uh again we need to open the country so we have appended all these things in the form data object that we created now we just need to make a simple uh update request so you'll say await fetch again we'll using the fetch API and here we will make a simple call again to/ API SL user so we don't need to pass the ID in the query parameter we can directly pass it in the body so right here this time the method here will be put and uh here we need to pass the full body which is contained inside form data so we are simply passing this form data so you can see that so after this is done we will have if condition if the request is successful in that case we need to update the list by again calling fetch user that we imported early on if you see we have passed this as a prop and we are actually calling this function once again so the it this will update the UI and then we need to show a alert message to the screen that updated the user has been updated and success message so let's suppose uh the response is not okay in that case you can say failed fail to update the user we can show error message instead of success so this is uh hopefully now if you refresh and uh let me restart the application so mpm runer so hopefully if you see it will take some time to actually load the application so now if you want to update this change the email address change the name as well and change the profile picture as well let's suppose this picture and the country as well click on okay now you can see that the profile picture is updated country email name all has been updated let me change this profile picture only let me replace it with a different print image so now you can see the profile picture has been updated if you want to delete the record you can delete them you can add the record as well it's very simple guys and now almost the application is complete it just pagination is remaining so all the operations are done so we just need to in the last section we will add the pagination buttons right here you can see it is not working these buttons these buttons If you see right here these are not working but in the next section we will try to run these buttons as well so if you see sorry I think I made a mistake here I started the previous application I need to start this application where the pagination buttons are not there just so now you can see the pagination buttons are not there if I click update now and let's suppose I want to change the name click on okay so it is saying fail to update the user so let me see what is the error is there it is saying that 405 method not allowed so we forgot to add the server s side code guys so we haven't written the server s side code so we are updating the user user we do need to write the server site code so write in the routes folder we don't need the dynamic route so we can delete this ID folder right here we can write all our server site code in this plus server.js file so previously we defined the get method WE Post method and then lastly in the last section we Define the delete operation for delete method similarly here we will be defining the method for updating the user so this will be export async function put and it will be having the request object past a built-in request object and right here in the TR catch block we will actually first of all connect to the database we will again call this function connect to database and then after you connect it we can simply get the data which is passed in the form data so request. form data so you'll get this data and uh we will again use the same code profile picture buffer cons profile picture data do we'll get the profile picture as well and here we be again in comparing that if profile picture is instance of file so this means that if the profile picture is present then in that case only we need to profile picture buffer buffer from so we are again writing the same code that we did for the create user whenever we created the user so same thing we need to do do this for the update operation as well we'll convert this into arer the newly updated image so after you do this uh now we need to update the user details so right here be getting the user ID which is passed in the form data so data. get ID so after that we will be getting the user by its ID user. find by ID so this is the method provided by to actually get a specific user using its ID you'll be passing this ID ID as an argument and then if uh the user has been found in that case we'll say the user hasn't been found and then we can return a status of 404 so if this uh user has been found in that case uh we can actually update the user so user.name is equal to data. get name user. email is equal to data. get email and then you will simply say if the profile picture buffer is there in that case we need to change the profile picture as well so user. profile picture is equal to profile picture buffer so after this we also need to update the country so user. country is equal to the newly value which is data country so after you do this uh you need to Simply call the save method of so it will actually update the user details by calling the save method once again with the modified details now we can return some kind of message to the user you can return the updated user directly and pass a status property of 200 and if any sort of error take place in that that case we can say fail to update user status to be 500 so this is actually the server site code guys all the methods have been implemented if I now cross check in my UI interface if I try to actually click the update button you will see let me change all the pre defined values are built in all the old values are there you can let me change it to the new one click on okay you will see the user has been updated so if I you can see that the name has been updated but the email is coming out to be undefined country also undefined let me check what is the problem uh data doget email uh let me see so right here whenever we are performing this in the edit folder this is form data append email uh this is for country uh just wait guys let me see what sort of error I did I did I think all the values I written is perfect 03 so now do here cross check what we can do either we can actually uh see the form data values before we pass it we can simply console log the form data right here and right in the server side also while we are actually doing the updation we can inside this we can say data. get name just just to print out if I click update change it comes out to we have defined so if you check the console we actually this is actually the form data that we are getting and if I uh I'm not getting this uh data right here that's the problem let me see guys what is the error uh guys I figured out the error this was very silly mistake typo mistake if you see in the form values whenever we are making the put request in the fetch in update component right here if you see this is a type of mistake the first value is right for the name that's why the name was not affected but when it comes to email we written form data here it needs to be form values so just replace here form values and also here form values profile picture is correct but for the country again we did form data just make these slides adjustment and now you will be able to see the desired result and if I just refresh and try to click update you will see the previous defined values will be coming and if I want to change click on okay and you will see the email address country and name has been changed let me now change a profile picture so if I click this update and if I want to change the profile picture you will now see the profile picture has been changed and all these changes will be reflected in the database as well if you see if you refresh it all these changes have been taken place so so you can close this again reopen it it all the changes will stay if you see if I change the name once again so now the application is complete guys uh update delete create operations all these operations are working we can create a new user so now the pagination is just remaining in the last section we will be actually be doing pagination where I will show you how to show two users on a single page and then the rest of the users will come to the next page so I will be seeing you in the next section uh now guys last but not least we will be tackling the pagination so in the last previous tutorial we basically showed you how to update a user So currently we'll show two users per page and we'll do the pagination so the very first thing we need to do uh right inside our user list we do need to add HTML for pagination so right if you see right here you need to add some HTML for the pag Nation so right after this uh in the user list component just after the table is ending yeah just after the table is ending right here table tag is ending so right here we just need to we do need to have a div tag and right here you'll be having a Tailwind classes Flex justify between item Center margin top four and right here you'll be having two buttons either for going to previous page or to the next page this will be for the previous page the next button will be for the next page and just attach some classes to it uh PX4 py 2 BG red 300 and it will be rounded and similarly to the next Buton uh we will be having a class of PX4 py2 background will be blue 500 and round it so right here uh we will for both these buttons we will just write some custom CSS so this class disabled you need to disable the button so for disabling these buttons we will have these two pseudo classes attached so in the CSS so now to actually use these classes we can simply say uh we can attach these Pudo classes disabled if the button is disabled then use these classes the button is disabled then cursor not allowed if you see we have defined this cuts are not allowed if the button is disabled so and also the second class we need to attach if the button is disabled we will change the opacity of the button to 50% and same attribute I will attach to the next Button as well so simply copy paste it and right here to these buttons uh we will be attaching uh just after in between these two buttons we will be having a span type which will say the current page so here it will say the current page value so for now I'm just statically doing this if you see refresh it we have the previous button next button by default they are not disabled so conditionally they will become disabled if the if you are on a first page then this previous page will be disabled if you are on the last page then this next page will be disabled so now if you want to write the logic we do need to Define some variables for the pagination we are not using any third party package we are uh creating it from the ground up so go to the index page so right here we do need to Define some variable Ables right here at the very top we just need to define the current page so current page will be one total pages will be also one and the const user per page value will be two so these are the default values when you load the application for the very first time so you will be on the first page current page value total page will also be one when you load the application and user per page would be two you can change these values anytime and right while we fetch the user we need to change the logic here instead of statically getting all the users we will be doing it in a pagination way so/ API users and now put a question mark and here we'll be writing the query parameters we will give a page parameter and this will be dynamic we will be retrieving the first page and here we need to also set the limit to be the user so this will be dollar user per page so this will be dynamic now and while we making these changes we do need to actually make the changes in the server site code as well so after we retrieve the users data. users we just need to calculate the total Pages based upon the total number of users which are return math or SE these are some mathematics which are going on data dot total users divided by users per page this will give you the total number of pages the total users return divided by users per page let's Suppose there are 10 users available able and you need to display two users per page so total number of pages will be five so in this way total pages will be calculated and users for page is constant and current page will be constant and this fetch user will be expecting the page parameter to be passed by default this value will be one so like this so now we need to move to the server site code so right in the get f function while we are retrieving the users in the server site code we do need to make changes so we will be getting the params right here passed directly so params this is built in in every function params and request so we will be getting this so now to retrieve the page number P we can simply say convert this into integer parent url. search params doget and you'll be getting the page number if the page number is not passed in that case we'll be retrieving the first page default value and then the limit it will also be passed in the query parameter so parent url. search params doget limit if it's not passed then you will be taking five users per page and skip this I will calculate using the page number that we get page minus one divided by the limit so after this guys we need to actually calculate the total number of users which are returned so does provide a method right here count documents this will actually return the number of users based upon these conditions so it will actually return the total number of users which are present in the table and based upon that we can actually say user. find and we need to retrieve the name email Country and and uh profile picture and then we can actually attach these methods you can change them skip to the skip value which is there and Dot limit and now we can retrieve basically return these users instead of returning all them so we have basically changed the logic we using the Skip and the limit method to actually return the users which are there like this and right here uh we also need to return the total users as well as a second property so if you check right here let me see it uh yeah as a second property we do need to return the total users as well which are calculated by this function user.com documents of mongus so if you now check your API / API SL users so if you don't provide a page number it will uh just refresh your application I think npm run Dev so you do need to provide your page number right here we will say uh page is equal to 1 I think some error is taking place/ API SL users uh sorry this needs to be URL not params just change it to URL so this is URL do search pam.get so right now if you see this is the URL structure if you don't provide any search query parameters just hit your endpoint directly / API SL users so it will give you the total number of users which are there which is three if you cross check in the database so total number of users which which is three so it is correct let's suppose if I provide a page number question mark page is equal to one so now it will and also here we need to provide the limit as well because by default it is five so now you can see total users are three and uh the users are returned is two because we set the limit because the limit is two if I set the limit to be one so we will now see only one user will be returned to us so this is the pagination API that we change the logic so now depending upon this uh API response we need to update the pag Nation so right here uh inside our uh user list component we need to attach onclick listener to the previous page and the next page so right here on both these buttons we will be attaching uh on click so when we click the current uh previous page we will be executing a function which will be previous page similarly when we click the next button on click next page so we do need to Define both these Methods at the top so we'll say previous page and next page so right on these uh implementation if you see uh in the root component we are not passing this current page total pages and user per page we do need to actually pass these values as props we do need to pass this to the user list component as a prop so we will pass the current page property current page so we are passing this as a prop so now we can go to the user list component and Export that which is uh current page so now we get access to the current page properties so now we can simply say instead of hard Cod value we can simply say dynamically that uh current page of and also guys we do need total Pages as well so just write in the root component also pass total Pages as as prop as well so total Pages now we can access it just right write total Pages as well so current page of total Pages if you refresh now uh go to the homepage so you'll see uh currently we have uh one of two so the pages have been successfully defined you will see one of two so delete operation is working so you can see that so if I now add a new user let's suppose so why it is coming undefined let me check guys I think we have made some kind of mistake for this let me check guys and we come back to you uh guys I figured out the error uh it was happening in the routes API folder where we written this code server.js we actually get all the records just remove this line here name email country profile picture we want to get all the fields right here so just remove it this simply means that all just uh retrieve all the records all the columns and just make the this change and if I now show you there is no records out there if you see refresh your database currently no record let me add a record right here so you can see one record added let me just add a bunch of Records so so three records are there so the two records are appearing in the first page if you go to the next page here will nothing will happen so you can see the values are correct the first page of the total number of pages which is two so now we just need to bind on click list uh inside these buttons so right in the user list component we defined these two methods previous page and next page and now we got access to the current page variable that we passed as a argument as a prop so we'll be comparing if the current page P value is greater than one in that case we need to say current page is equal to current page minus is equal to 1 and then again we will say fetch user and we will say current page so it is simply telling if the current page is greater than one then we will decreasing the value of current page this simply means that minus equal to just decrease 1 from it so it also means like this current page minus one we'll be decreasing the current page value and again we'll be updating the UI calling the fetch user function and passing this time the value of current page like this it will navigate to the previous page similar Concept in next page here you'll be comparing if the current page value is smaller than total Pages then in that case we will be going to the next page increasing its value current Page Plus One this time and then again we'll be calling fetch user current page so now with these changes these buttons will work so if you refresh so now we are on the first page we can navigate to the second page you will see that again we can go to the previous page now we need to conditionally disable these buttons so if you are on the first page I don't want to click the previous button so how we can do that conditionally we can attach a condition right here in the HTML you can attach a attribute to the next button right here attribute of disabled so the button will be disabled as soon as current page value becomes the total Pages value and similarly uh we will be attaching a disable attribute to the previous page as soon as current page value as soon as we are on the first page so current page value becomes one so by default you will now see the previous button is disabled we can't click it if I navigate to the last page so this is last page so what we can't click the next button so in this way you can Implement pagination so now we just need to make sure we do the same thing for the delete and the update component as well so in the user component if you see we should in the user list component we do need to just pass the current page as well as an argument as a prop so here we will be retrieving it so we can just add it current page and also we need to pass this current page value to the update and delete as well so just open your update just add this current page and uh while we are actually when we update the values we will be calling this function fetch user by passing the current page value similarly when we delete the user we again add this current page and then when we call this and pass this current page that's all so that's all that we need to do and uh if you see if I click the delete button the value will be deleted and now the page number will also automatically update so because only two users are present that's why we have a single page we can add more users we can delete them pagination is also there so this is a complete user management system guys we developed in SW kit it's very you can see that can navigate so if you need the full source code the link is given in the description with full documentation and support from me after purchase you will get the full source code if you still face any problem I will support you fully so the link is given you can go to my website proot store.com and you can purchase the full source code of this project and thank you very much for watching this video please hit that like button subscribe the channel as well and please share my Channel with your friends And subscribe the channel as well and I will be seeing you in the next project

Channel: freemediatools

Views: 94

Keywords: freemediatools

Id: NQTnrzZckvc

Length: 149min 56sec (8996 seconds)

Published: Wed Jul 10 2024