Spring Boot + React Full Stack Web Application with Tailwind CSS

hey what's up everyone and welcome to daily code buffer in this video we are going to create a complete full stack application with react with tailwind css with spring boot with database so grab a cup of your favorite beverage and let's get started [Music] now what we are going to build today is an employee management system so we will be creating an application where we can create a new employee we can delete the employee we can edit the employee and we can list down all the employees available in the database we will achieve that entire ui with the react and as a css framework we'll be using the tailwind css and for the backend application we'll be creating the springboard application so you will get an complete understanding how to create the full stack application using any of the front-end ui or any of the front-end frameworks and with the springboot and we will understand how both cohesively works together there is a big surprise for you guys we just crossed 35 000 subscribers on this channel thank you so much for supporting and sticking around so as we cross this milestone i thought of giving away back to the community so i'll be running the giveaway for logitech mx master 3 this is the mouse i have with me logitech mx master 3 and i'll be giving away to you guys to participate you just have to subscribe to this channel like on this video and comment down on this video and i'll be picking the random winner in the next upcoming videos so if you are interested in this giveaway then do these three things subscribe to the channel like on this video and comment on this video and this giveaway is globally wherever amazon delivers okay so this is not a partnership with anyone this is what i'll be purchasing and giving away you guys so i hope i get back this support as well so that's all about this giveaway participate in this if you are interested now let's get back to the video now as we talked about what we are going to build today let's go to the computer and let's build the application so let's create both the application a react application and a springboard application so firstly let's create the springboot application so springboard application you can create either using the intellij idea or you can create using the spring initializer as well let me show you both the ways if you want to create using the spring initializer what you can do is you can go to your browser go to start dot spring dot io this is where you can create your application and you can select the latest version of spring boot project type is me one language is java and you can give your group id i'll be giving com dot daily code buffer artifact as employee system backend or api employee system api the name would be same the description would be okay that's fine and the package name should be let me give just employee and the packaging is jar java units 11 as i'm using java 11 and you can add the dependencies you can add the dependencies which we need is we will need a lumbar dependency to create our boilerplate code we will need the gpa dependency to connect to our database and to use the hypernet as we will be also needing the sql dependency mysql driver and we will also need spring web okay so these are the dependencies that i need you can just generate the project from here and open in your favorite ide the same thing i will show you from the intellij idea as well this will only work if you have the ultimate edition if not you can create the project from here and you can open directly this project in your intellij idea if you're using community edition and if you are using eclipse or netbeans or whatever other ids if you are using vs code as well you can unzip it and you can open in the editor let me just go to the intellij idea let me create a new project and from here i'll use the spring initializer and i'll name the project as employee system api i think this is what we gave right employee system api yes and the location let me select the location i want to add in the documents react workspace let me create the new folder over here i'll just say employee management system okay inside this open my language is java type as mu1 group id i'll just give us com.daily code buffer artifact is employee system api package name i'll just give us employee project sdk that is the my java version that is the java 11 my packaging is char type the same thing which we give in the initializer and click on next and here we need to add the dependencies so the dependencies that i need is the lumbar dependency from the web i need spring web dependency from the sql and its spring data gpa and i also need my sql driver and here you can see that lumbar spring web spring data gpa and mysql driver these are the four dependencies i need if we need anything extra we can add later as well so let's click on finish and generate the project cool my project is created okay you can see that src directory main resources my application.property file is created my main java file is created so everything is created my application is good to go now let's create the react application as well so once we create the application it will be easy to deep dive into the application directly itself let's go to the vs code now now as in the springboard application you need java installed for your react application you need to have your node installed so let me just minimize this first and if you have not installed node.js just go to google.com just search for node.js and install node.js now what i'm going to do is let me go to the finder inside this react workspace let me just create a new folder over here and i'll just say employee management system ui just ignore this folder this was something that i was working earlier but these are the two folders that will be working this is our backend application and this is our ui application so this is something that i want to open in my vs code so let me just open the folder i will go to the documents over here react workspace employee management system ui and open so this is a folder that i opened now to open the terminal i will just hit command j to open the terminal now once you have installed node.js if you see node hyphen v you will get the version like which particular node js that you have installed once you are getting this information at that time you are good to go to create the react application and you can similarly either you can use npm or you can use yarn if you have installed node.js npm would be installed by default so we'll be using the npm npm in this particular tutorial if you want to see which version it is you can use npm hyphen v as well to see which version it is it's 8.3.0 so these are the versions that i'm using for node.js and npm so this particular tutorial will be valid for any of the versions now i'm hoping that your java is installed in your system your node.js is installed in your system and you have already created the springboard application the basic application that we just created now let's create the react application now to create the react application what you need to do is you need to use the npx command to create the react application so let's just create that so we'll just use the command npx create react app okay this is the command and after that you need to give the name of the application that you want to create suppose employee management system that you want to create so what it will do it will create the folder and it will generate the project inside that but we have already created the project so what i'll do i'll just use the current directory to create the project and hit enter sorry i just need to use npx right so let me use npx create react app and the current directory this should create the project and here you can see that it is downloading all the dependencies and everything so we'll wait for this thing to get completed now here you can see that the react application is created you are getting all the commands how to start your server and build and test and everything okay and here if you see on the right side your entire application is created you have the node modules added to it public folder src folder a package.json file where you can see all your dependencies that is added to your particular project and inside your src folder you can see that your basic application which is created by the react now what we will do we will start both the application and see what is going on so let's just start the react application first to start the react application we got the command over here right let's use that command to start the application that is npm start right so what i'll do i'll just say npm start and here you can see that your application is started on localhost 3000 and this is the default page you will get when you create the react application okay you can see everything is successful now let's go to the springboot1 intellij idea and this also you can start by default it will run on port 8080 so let's start the application we'll just enable the annotation processor it's not starting the application as we need to add the configuration for the sql so let's add the configuration as well and to add the configuration you need to have the database so what i am using is i'm using the mysql database over here so this is the mysql workbench that i have installed you can also search for the mysql workbench just google it and you will get it and you can directly install it i'll just show you as well if you just search for mysql workbench this is the one you can just go ahead and download it and just install it directly so once you install this you can open this particular page if you are facing any issues while installing mysql database then what you can do is you can add the h2 in memory database in your springboard application and you can use h2n memory database that is also a way to go but i prefer that you install any of the database and there you can use it so once the database is installed you need to create the schema so let's just create the schema i'll just create the schema and i'll just say employee system i'll just use underscore and apply create schema so you can see that the schema is created now we can use this schema in our springboard application so let's go to the springboard application let's go to the application.properties file and here we need to add the configurations okay so to add the properties we'll add the property that is the spring.datasource.url and yeah i have given jdbc column mysql colon forward slash forward slash localhost colon 3306 because this is the port where my database is working and then i need to provide the schema name so if i go to the mysql workbench the schema name is employee system so that's what i'm going to give over here employee underscore system and after that what i need to do is i need to give the username and password for my database my username and password for my database is username is root and i have not set any of the password so i'm not giving any password over here and then i need to provide the driver class name that is the com.mysql.jdbc.driver this is what we are using mysql driver which we have added in the dependency so that's what we added as a class name over here and we are also adding spring dot gpa dot show sql equals to true whenever we are using spring data jp and when we are executing any of the queries those queries will be printed and we are using spring.jpa hibernate ddl auto so whenever there is an update in the entities that we do the same would be reflected in the database as well so we don't have to create the tables or anything manually so these are the configurations that i have added for the mysql now let's start the application it should work and here you can see that my application is started it has started on port 8080 so if you go to the browser if you go to localhost 8080 this is not something that i want yeah so i'm getting white level error page because there is no end point defines so this particular point of time we have created our ui application in the react and we have created our backend application both the applications are created and we are ready to add our implementation now so now let's go to the react application first and let's clean up everything and let's create the basic structure so this is my react application and let's remove all things which we don't need okay so if you come over here in the app.js i don't need anything from here so let me just remove this i don't need local svg as well so let me remove this as well i'll just remove the logo also then if i go to index.js i don't need report vitals and all these things so let me just remove this let me remove the import as well i'll just remove the report web vitals gs file as well so this was all the things that i didn't want this is basic app.js now if we see the application it's blank right so from here we will start everything now to build a ui in react we can use any of these css frameworks available now in this particular video we will be using the tailwind css the latest version that is the tailwind css3 so let's go ahead and install tailwind css in our project so what we will do we'll just go to the tailwind css and we'll go to the get started page over here and we'll go to the framework guides and we need to install in our react app so we'll go to the create react app and here you can see that all the steps are there to install tailwind css in your project we already created the app so this part is done so now we can use this particular part what it is doing is it is installing tailwind css post css auto prefixer and it is initializing the tailwind css so it will create the basic tailwind.config.js and postcss.config.js so let's copy this and let's go to the vs code let's open the command prompt and let's paste it so yeah you can see that tailwind css is installed and you can see post css dot config.js is created and tailwind.config.js is created now what you have to do is in the tailwind.config.js you need to add all this so let me just copy this let me go to the config tailwind.config.js and let me just paste this thing okay this is the tailwind configuration now what you have to do is you have to go to the index.css file and you need to add this scripts so let me just copy this and let me go to the index.css and i need to add everything here that's it so what we did so till now we added the tailwind css and we configured the tailwind css to work with our react application now if you don't know the css don't worry we will be going through the basics of terms css also in this video but if you want to learn more about tailwind css also you can follow along the documentation and the good thing is it has really good documentation and you can go through the components as well so there are a lot of components also available some of them are free to use and some of them are paid to use you can go to this tailwind ui.com and you can browse through the documentation over here and there are few of the components available you can go through all the different components okay you can see that these are the components available what you can do is you can just go to the code over here okay and you can select for the react view or basic html whatever you select you will get the code for it and you can directly use the code from here there are few things which are paid but you will get a basic understanding about how to use the tailwind css from the already added code so just try to use this and it is very easy and we will just go through the basics of it okay you can see there are a lot of components available you can just go through it okay you can see all these components are free you can directly get the code from here and if you scroll down here from this particular page you can see there are official plugins also available for your typography for different forms if you go through here you can see for the different typography different elements there there is a plugin and you can use this plugin to enhance your application this is a forms plugin where you can create the forms different forms with this particular plugin in this video we are just going to use the basic forms but if you want to create a forms complex forms you can use this plugin as well so this is all the basics about television css and how to configure your tailwind css within your react application now what we will do is we will just create the basic header part and then we can create a basic form so we can save the employee okay what we are going to save as employee is the first name last name email address that's all we will start with because we need to understand about the basic how everything works together okay so what we will do we will go to the app.js and in this particular app.js you can see that it is a function that returns the entire html this is not the html basic html this is called as gsx which allows you to write the html components within the javascript so that's that's the concept in the react application and all this application you can see this is the component and all this particular jsx that we write those are called as components and these components we can use to render it out if you go to the index.js you can see that in the react dom dot render you can see that this particular component app which is this app.js has been added so this will render it so everything added inside this app.js will be rendered in our application because you can see it's adding into your root element so you don't have to modify anything over here just go to the app.js and whatever you want to create your structure we have to create the structure from here itself so what we are going to do is we are going to create a structure here directly so here we are going to create our top header bar okay navigation bar so let's create this in this particular div only we will start so we will be using all the classes from the tailwind css that we have installed now one more thing i forgot to tell you is within this vs code i have installed few of the plugins that will improve the intellisense because there is a lot of things that we have to write right so what i have done is i have installed few of the plugins that will help to write code faster so if you go to the extensions and if you search for react you will get es7 plus react redux react native snippets so it will help you to create the react applications very faster so this will give the shipping so we'll be using the snippets a lot from here from this particular plugin so you can install this plugin i will also install the tailwind css intellisense okay this will give the autocomplete for the tailwind as well television css so i've installed this plugin as well so you can go ahead and install these two plugins and i've also installed bracket pair colorizer 2 this will help to add the colorized brackets so we'll get to know better about the starting and ending of the brackets in the react application so you can also install this and i've also installed prettier that will format the code when we save the application when we save the file so i've installed this plugin as well so you can go ahead and install this plug-in it will help in your application while writing the application so this was all about the plugins that i have installed for now to create the react application now let's go back to the application and let's use the tailwind css to create our basic structure so let's create the header bar so in this particular div we can create the nav bar so what i'll do i'll just add the background so let me just remove the class name and i will add the class name as background color i just need a gray color and a few and here you can see that there are a lot of classes available so these all the classes are part of your tailwind css so you can see these are the different classes available i just want this particular gray color so i'll just use bg gray 800 so this is the color of the background that i'll get and inside this do what i want is i'll just create another div where i'll just define class name equals to i just need height of 16 so this is what it will give the height and you can see this height is 4 ram that is equivalent to 64 pixels this ram is nothing but the relative property of css i'm giving the height of 16 from this h16 class and then what i need is i need to use flexbox i'm just using flex over here and what i need i need all the items inside this particular div to be centered okay so i'm just using item center inside this div what i'll do i'll just add the p tag where i'll just say employee management system now if you go to the page you can see that our server is not started right so let me just start the server in p.m start let me close out all these files so you can see that we are getting a navigation bar with the particular color that we have defined and the height that we have defined and we are getting the employee management system as well you are not seeing but this is what we are getting so let's change the color and give the little bit of padding as well so what i'll do i'll just give the class name over here class name and i'll just say i just need text as white and i need font as bold so you can see all these classes are part of the tillwin css and i'm using it so you will get understanding about how to use the tailwind css as well and here you can see that i'm getting the employ management system and i'm getting the font in white as well now i need to add the padding as well so what i want to do is that do that i'm using right within this particular paragraph tag for that only i need to give the padding in the x direction so i have given the height over here and i need to give padding in x direction for eight you can see that the padding is also added yeah and yeah this item center is there right this item center is nothing but adding the items to the center currently if you see the item set is at the center of the particular bar but if you remove this you can see that it's at the top so this item center will add to the center now this is the navigation bar that we have created and you can see that this is a lot of code we have added over here so what we can do in react is we can create the different components so this particular nav bar that we have created this navigation bar for this we can create the component so let's try to create a component so we can get understanding how to create the components so this everything that we have over here that can make as one component so what we will do inside this src folder let's create one folder we'll say components inside this components let me create one file that will say nubar.js this is one javascript file that we are creating now to make this javascript file as a react component what you have to do is you can either use the function based component functional components or you can use the class biz components as well i prefer more functional based components because it's easy to understand and it's easy to create as well so to create a functional component what you have to do is if you go to the app.js you have to create a function and that function will have the name as the file name and you will be exporting the default function as well so this is what you will create as a function now the same thing that you have to do you have to create a function with the same name as your file name and you need to return entire gsx components so this is the entire jsx which is returning from this particular function and you are exporting this function as well so the same thing we can do in our navbar.js as well but as we have installed the es7 snippers we can directly use using the ra fce okay so what you can see this will create the react arrow function export component so once you do this you can see everything is added to it it will import the react from the react library it will create the component with the arrow function you can see constant new bar equals to arrow function and it will return the normal view and it is also exporting the nav bar as well so this is the same thing that is there in the app.js but using just four characters we just added all these things so that's the beauty of the snippets and that will improve our productivity and workflow as well so this is what a new bar it is we just added the new bar what we will do we'll go to the app.js we'll copy all this thing cut from here and add in new bar so we added everything from the app.js to the new bar and now this particular new bar we can use in our app.js what we will do we will use the nav bar as a component you can see that this new bar is a component it's part of the slash component folder slash new bar so once you add this you can see that it is also imported as well so you need to import if it's not working for you auto completion then you have to import as well that import new bar from dot slash components slash number this should work the same as it was working earlier you can see that it's working the same way so this way you can create the different components so your code will be very clean to understand now what we'll do now let's add one more component to add the employee to the database so we will create one page where we will be creating the input fields will well where we will be creating the forms and from that form we can save the database so as we have created the similar navar component let's directly create the component and we can use that component over here so let me just go to the components itself and let me create the component i'll just say add employee component add employee.js and here also i'll just do raf ce and my functional component is created now i have to use this add employee in my app.js so after this i can add add employee and here you can see that we ran into one more issue where it is saying parsing error adjacent gsx element must be wrapped in a and closing tag which means that this particular return can only have one parent here you can see that there are two parent that is the new bar and ad employee both are parent to it okay so we need to have a parent for both of these new bar and head employee so for this there is a component called fragment so what we can do we can add the empty tag for this so this way we can add this is an empty tag and the same thing i'll just add at the end as well and now you can see that we are not getting any error so we just wrap new bar and add employee to the fragment of react and if you see this we are still getting the error because we just have to do this way okay now this will return and we'll be getting the correct output so we just wrap the new bar and add employee to the react fragment now let's go to the ad employee and let's add the content over here so in this div what i'll do i'll just do the class name and this is the flag that i want to create and i need to give the max width to 2xl so i'm just giving the maximum width for a particular form okay and inside this div let me add another div and for this due let me give the class names let's see what is created nothing is created till now and inside this class name let me give the padding okay i'm giving the x direction padding and y direction padding and inside this div component we need to add the header so let me just give dave over here your class name equals to and here i'll give all the properties related to the text that i want to add and here i'll add the heading and i'll just say add new employee and here you can see that i got the add new employee over here so let's add few more things let's add the shadow to it i'll just add the shadow you can see that the shadow is added to the component to the car that we have created and let's add the bottom border as well so we can add border hyphen b for the bottom border you can see that the border is also created now now i want this card to be in the center so let me just give the margin as well margin for the x direction to be auto so you can see that now it's in the center now let's add the text decoration to it to make it quite nice right so what i'll do in this particular div okay for the fonts what i'll do i'll just add i just need a thin font you can see the fonts are very thin now i need to make it little bit bigger so i'll just do text should be 2xl and you can see that now it's little bit bigger and now i need to add the kerning as well where there is a space between the letters so what i'll do i'll just use tracking wider here you can see that there is a little bit now space added so now this looks really good now let's add the form details so after this do let's add another div inside this do class name equals to i all i need all the items to be center justify center and i need height of 40 and width to be full now inside this div let me add the label now this label i'll just say it's the first name okay here you can see that we are getting the first name so let's add some more gap as well over here so what i'll do i'll just say margin in my direction as 4 the margin is added now after label i need to add the input element as well so i just say input type equals to text you can see that the text is added right over here now what i need i need this text box below this so i need this first name to be block so i'll just add the class name and i'll just add a block so now you can see that it's below this first name now let's add a few of the properties for this first name label and this text box as well so what i'll do i'll just change the text color i'll just say text color as gray just add to 600 you can see that color is changed little bit of gray then i'll just say text should be small little bit and font weight should be normal okay you can see that there is quite a change now right now for this input field let's add the class name and in this particular what we will add is we will give height to 10 so you can see that it's little bit of bigger and then we will increase the width as well to 96 so you can see that the width is increased and let me give the border as well okay you can see that the fine thin water is added and then let me add the margin top to 2 so there is a gap from first name and last name now if you see that if i add directly anything there is no gap it's directly starting right so let's give the padding also for that so what we will do we will add the padding px2 2 and py2 2 so now you can see that there is a little bit of gap while starting the text so now let's copy this div and let's add it for the last name and email first name last name and email and the type here should be email you can see that first name last name and email is added now let's add the button as well i'll just copy this do and inside of instead of this to what i'll do i'll just remove this to input fields and i'll add the button over here so let me just add the button and this button will save as save and this button will have a class name where we will add few of the details we'll add the little bit of rounded button this will have text as white font as semi-bold and i'll add the background color background color to green 400 this is something like this but let's add some more details we'll add the padding in y direction and padding in x direction as well you can see that button is now very nice now what we will do is when we hover over it we will add the color as well so when we hover over button we will do background green to something like 700 let's see how it looks okay you can see that now overall is working good right similarly let's add the another button that is for clear and instead of green i'll just add red here also i'll just add as red now we need to separate it out as well so what i'll do is for the div right which is containing these two button i'll give that it should contain space x44 you can see that there is a space now and then i'll just give the padding top of four so there is a padding as well so yeah you can see that my form is ready right it looks good i hope it looks good for me it looks good so this is something that we have created now now when we click on save we need to save the data to the database so for that we need to create the api as well so we'll be creating the api also so let's quickly jump to the spring good application and let's create the api to save the data now in this springboard application we need to create the api to save the data so let's create the structure for it let me just stop the server and what i will do inside this employee let me just create new packages i'll just create a package that says it's a controller and also i just need to create one more package that says services and create one more package that says repository and one more package that says model model are the value objects that you will be using near ui and one more thing that we need is the entities okay and one more still will create a package that's for the exception if there is any custom exception that we want to define we can define over here now with the controller let's start let's create a new class let's say employee controller so this will be the controller from where all our epas will be handled so this employee controller we need to annotate with the rate rest controller and we'll also define the request mapping and this requesting we will define as slash api slash we can define the different versions over here if we can have the version one right so we can define v1 over here now what we need is we need these services where we can write our business logic so let's create the service for it so in this services let's create the java class we'll define this as an interface and we'll say employee service and for this service we need to have the implementation part so let's go to the java class and we'll say employee service impl and this is the class which implements employee service right and this is something which we call as a service now we need the object of this employee service impl that is the employee service in our controller as we need to call the service from our controller and from this service we'll be calling our repository so let's first create the object of it in the employee controller let's create private employee service employee service and we will auto wire it and it is telling to create a constructor for it so let's create a constructor okay so whenever the object is created for the employee controller the employee service will be already injected now what we need is the entity where we want to save the data from to our database so let's create the entity and we will be using the employee ntt okay now as this is an entity that will work with the gpa to save the data in the database we need to annotate this with entity okay and what we need we also need to have the other data annotation from the long box so there is a guidance address everything added to it and one more thing i will add as the name of the table okay name of the table i will just say as the employees so in this particular entity we need to define the different columns or different properties that we want to save into our database so first thing which i need is the id so i'll just define private long id this is my primary key then i need private string first name then i need private string last name and private string email id so these are the fields that i need and for every primary key you need to annotate with abstract id so i am just annotating with address id and this particular id field i want to generate automatically so i will just define generated value and inside this generated value i'll just define the strategy so my strategy for this is generation type dot identity so incremental value will be added for it and now if you want to define the different column names for it for first name last name email id you can go ahead and add the other column annotation and you can define that as well but i'm keeping the same way so let it be now for this particular employee entity i want a similar model that can interact with the ui so inside this model let me create the employee model over here i will define this other data okay annotated with other data so there is a data centers and all the methods available and what i will do i will just copy the details from here and i'll paste to the employee model simply now our model is created now entity is created controller is created service is created the only thing remaining is our repository that repository will interact with our database to save the data so let's create the repository in the repository package right click on it create the new class this will be the interface and i will just say this is an employee repository now this interface will extends jpi repository and this gpa repository is of type employee entity and what is the type of my id that is the long okay and this repository we need to annotate with the red repository now you can see that all the things all the structure is created now what i have to do is i have to go to the employee controller and here i need to define a method define a api which will handle the post request to save the data so what i'll do i'll just create a method over here public method that will return the employee object that is the model that will be used for the ui and i'll just say create employee and it will take in employee as the input parameter so that means this particular employee would be your direct request body and this method is your post mapping so let's define this as a post mapping and it should be for your employees so whenever you will hit post on slash api slash v1 employees your this particular method will be called and here from here what you can do you can call the employee service dot create employee you can call from here and you will pass employee here and you should return this and we need to create a method as well so let's create the method as well create method that is create employee in our employee service right so let's create the method we just created the method in our interface and now we need to go to our service implementation and we need to implement the method as well so let's implement this method and in this service what we need we need the object of the repository so let's create it private employee repository [Music] and add the constructor for it now this is the employee object that we are getting but we need to convert this employee to the employee entity to save to our database so what we will do we will create the employee entity over here okay i need to copy all the values from this employee to this employee entity so there is a beam details dot copy properties and we need to define this source and the destination so the source is employee and the destination is employee entity let me create the new employee entity object over here okay so what it will do it will copy all the values from employee and it will pass to the employee entity now what i need to return is the employee but i need to call the repository method as well so what i'll do i'll just call the employee repository dot save method where we need to pass the employee entity there is a save method already available in the employee repository as we have extended the gpa repository so it will try to save the data so you can see that your entire flow is ready so let's start the server and let's try it okay so what i'll do i'll just start the server and your application is started so we'll go to the mysql workbench and inside this employee system schema tables you can see that the table is created so i'll just do select star from employees okay so here you can see that we are using this employee system schema and then i am executing this query so there is no data available but we can check using the postman as we have not added the complete code in the ui so let's check with the postman so in this postman let's create the new request and we'll say localhost colon8080 slash if you go to the controller we have slash api slash v1 slash api slash v1 and slash employees and this is a post request so we'll just change to post and in the body raw data instead of text we'll just use json and here let's add the data first name we need to give i'll just givesha bear last name now the email id okay this is the data that i want to save so let's hit on send and you can see that we got 404 so there is some issue so let's check that here this is the issue so let me just correct it hit on send and here you can see that we are getting the data the first name is getting as null so there is some issue f5 rst right okay and if i hit on send okay we are getting the data that's fine with the id that is coming at 0 because we are just sending back the whatever data that we are sending here but in the database when we see we should get the correct data here you can see that we are getting the data correctly over here so that means my api is working now i need to concentrate on the ui part so let's go to the react.js application and there from that we need to call this api so let's do that now let's go to the vs code and in this vs code we need to add the axios framework so with the help of xuos we will be able to hit the backend api to fetch the data so let's add that and let's create one service which will call a particular back-end service to save the data so if you go to the terminal over here okay in this terminal just do npm install axios okay this will install the axios in your project so you can see that the axios is installed if you go to the package.json you can see that axios has been added over here okay so now what we will do we will go to the add employee.js and on this save button we need to save this data so to save this data we need to first handle the data we need to save the data into the react state so now at this particular time we need to use the different hooks available in the react hooks are nothing but to hook into the react lifecycle so whenever we want to do some of the operations using the functional components as we are using the functional component we are not using the class components so for the functional components we can use the different hooks available and we can use the state management so with the help of react u state we will be saving the state of the entire form so whatever is happening in the form we will be saving those data so we have three fields so the data of the three fields we will save in a state and when you click on the submit button we will get the data from the state and we will pass to the api that we have created so for that what we will do inside is our ad employee we will create a state we will use a use date so with this use date and you can see that we have added the use date in our import as well okay from the react and we will be using this use date snippet so you can see that the entire snippet has been added that is the constant of first and set first what we'll be doing over here we will just say this is employee okay and yeah you can see that we are just doing the deconstruction over here from this u state and we need to define the default value the initial state of the employee over here so what we will define is we will define the entire object over here so what we have in the object the id with a blank value first name with a blank value last name and the email id okay so this is your default state whenever the state has been initialized it will initialize with this values now now to use this state and to update the state we need to define or we need to add the values to our inputs so if you go to this our input tag right this is the input tag so here what we have to do we have to define the name of this tag so we'll define name of the tag equals to first name this is for the first name and we will also define what is the value so the value should be your state dot first name so your state is employee so employee dot first name would be your value over here so the same thing we have to add in our all the input field so let's go here and in this input field this is for the last name so let's add it name equals to last name and value equals to employee dot last name and you can see that the value is with the curly braces so this is from the react and this is from the normal html okay the same thing we will define over here as well name is email id and the value is employ dot email id so we just define the name of each input fields we have and the values what it would be whatever the values would be for our state the same value would be for the input field and vice versa whatever will be updating the values the same has to be updated to this state but when when there is a change right so whenever we do an input over there in our input fields there will be a change so we need to handle the unchanged event so whenever there is a change we need to update our state so for all the fields all the input fields that we have we need to handle the on change event so there is a on change event over here and with this particular event we need to define whatever the events it is with the arrow function we need to define handle change okay so what what i'm doing unchange and change of this input field i'm calling a method and this method will update the state okay so i need to call this everywhere so let me just add over here as well let me add over here in the email id as well so now this is the handle change event that i have to implement so let's go to the top here i will handle the event so what i'll do and here you can see that am getting these suggestions like constant handle change event i have to write because i've just defined here and it's not able to find this event this particular auto suggestion is coming from the github co-pilot so this is the method that i want to create now in this method what i need to do is let me just take the value first constant of value constant value equals to e dot target dot value so this is the value which i am getting and i want to set this value to my state so for the state you can see that this is your state and this is the method to set the value to your state so i will just use set employee and here what i'll do i'll define e dot target dot name equals to value okay so we i just define that whatever the name of the target is that is if the name of the target is first name so i'm just defining the name is first name i'll be getting the first name over here and for that i'm defining whatever the value i'm getting alongside already existing values so the entire thing i have to add inside the curly braces so let me just add the curly braces over here so what i did it simple thing i have to set the employees with the existing employees so i just destructure the arrow over here so whatever the values are there i've added the values alongside that i have updated the value as well like whatever the target name i'm getting suppose it's updating the first name or last name or email id whatever the field it is and the value i'm getting from the e dot target value so it's just handling the handle change event so whenever there is an update on the input fields the same will be updated to your state as well so it's very simple just understand it very simply whatever the input fields that we have defined we have defined the name of name over here that is the first name so what it would be it would be the current element that is the e dot name okay e dot target so whatever the target is for the event so your target is this particular input field dot name what is the name that is the first name so that is your first name over here so this i want to update with the value so what would be the value for year that it would be employee.firstname whatever the input field that i would be adding over here so that i am taking and adding to the set employee so at the end of this any updation happening on the form i will be getting all those values from this handle change event and i'll be updating to my state so this will be updated that's it it's simple thing now what i have to do is i have to handle the save so whenever i click on save i need to get the data whatever the data i have fetched over here in my use date and i need to pass it to the rest api so what i'm doing is i am just defining on click function over here and click what i need to do and click i need to call one function that is save employee okay now i need to create this function so let's go to the top and let's create a function i'll just say constant save employee this is the function that i want to save now what i want to do is i want to do dot e dot prevent default so i'm just calling e dot prevent default so this is what it will disable the refreshing of the page now at this point i i've clicked the button and i have got all the data updated in my state as well so this employee is already updated with all the values whichever i have inputted using the handle change event so my stat employee set all the data i have got on click of this save button i have disable the refresh of the page as well now i need to call the api so to handle the api we just install the axios as well so let's create one service with the help of that service we will be able to hit it so let me just create a service i'll just go over here and as we have created the component folder let me create the new folder which i will tell as a services and inside this service i'll create one file as a employee service dot gs and here i'll create a class employee service and i'll just do export default new employee service so i just defined the class and i have exported that class as well so whatever the methods are there which i will define those will be exported and i can use in the different gs files so for this class let me create one constant as well i'll just define constant employee api base url so i'm just defining the base url and the base url is if you go to the postman what we hit was this one right localhost 8080 epi v1 employees so this is my base url so let me just define this over here that this is my base url so this url we can call so inside this employee service let's create one function save employee which will take employee object as the input parameter and it will do the post request so what it will do it will do return axios okay we will import the axis you can see that we just imported the axios from the exos library and we will do post request where we will do post request to our base url the base url is employee api base url and what i want to pass i want to pass the entire employee object so i'll just pass employee simple thing i just created the class inside that class there is one method save employee which is calling axios.post to my localhost url and it is passing the entire employee object now this save employee method from the employee service i need to call from the ad employee so inside this add employee here i can use employee service we need to import this so you can see that we just imported this import employee service from services employee service and we will do employee service dot save employee and inside the save employee we will pass employee object okay this employee object is nothing but this state and dot then what you need to do is then you will get a response back so with this particular response back you can do any operation if you want to do and if there is any error this is also a method so if there is any error can log those errors as well so i'll just do console.log error and here i can do console.log response okay so on click of this save button i'm calling the save employee function over here this save employee function is nothing but the function which is taking the event as input parameter and we are just doing the e dot prevent default which means we are stopping the page to refresh and we are calling the employee service dot save employee function we just created the employee service class where we just defined one constant over here that is the employee api base url this base url is nothing but our spring boot rest api url that we just created and inside that we just created the function save employee which will call the xcos.post on this base url passing our entire data pretty simple right my entire method is created everything should work so let's start the server npm start and my page is running and let's open the developer tools okay and we click on save over here and here you can see that we are getting one error and if you observe this there is an access to xml http request at localhost this one which is my backend application from origin my ui application has been blocked by cors policy so cors origin requests are only supported for protocol schemes http data chrome whatever it is okay so it's telling that due to cors policy it is not allowing request from my ui application that is running on port 3000 to hit the backend application that is running on port 8080 in my localhost so what i have to do is i have to add the cross origin in my backend application which is which will allow from this particular ui application currently it's not allowing so what i will do i'll go to my backend application and i'll go to my controller and here i will define at the red cross origin and what are the origins i'll define over here origins equals to http localhost colon 3000 simple right so what you have to add over here is your ui application port number and url so my ui application is running on localhost 3000 so i just defined that this is the cross origin that we need to allow so now if i restart my application and now we'll go back to the vs code sorry let's go back to the browser itself and if i add any detail dummy data let me just add and if i click on save and there is some error so the issue that we are getting over here is because of the http we have not added the http over here so let's add the http colon slash slash localhost and colon8080 this is something whatever to call so now if you go to the browser again if we hit all the data back again if we hit on save you can see that the data is now saved okay and this is the data that we got back if you go to the database as well and if we run the query and you can see that we are getting the data okay so that means from my ui now i'm able to save the data to my database using the springboot backend application and with the react ui application so now what i want to do is i want to show all the records available in my database in the ui itself so for that i need two things i need a component as well in the react which will show all the data and i will need a backend rest api as well which will fetch all the data so let's create the backend api first which will fetch all the data and then we will move ahead to work on the ui part so let's go to the backend application let me stop the server and let's create one more api which will fetch all the data here in the controller itself i will create one method public and i'll just do list of employee okay i want to get the list of employees which are already saved and i'll do get all employees and this should be a direct get mapping and i will just use the same path okay but the only thing the difference is the method type now i need to create the method in the service and the repository as well so let me just do return employee service dot get employees and let me just create the method as well create method get all employees in the employee service and if i go to the implementation i can implement the method as well so this is a method that i want to implement so what i'll do here here i'll just say list of employee entity employee entities equals to employee repository dot find all so i'm just getting all the data as an employee entity now i need to convert this employee entity into the list of employee let me just create the object list of employee employees equals to employee entities dot stream dot map and with the map we can convert to the new object so here i'll just get the employee and with the arrow function what i can do is i can create the new object of it so i need to have the constructor as well so if i go to the employee and here with the data what i'll do i'll just add the rate all logs constructor and other it no aux constructor so i can get the constructor with no arguments and constructed with all the arguments so let me go back to the service impl and here i will do employee equals to new employee and here in this employee i can pass emp dot get id comma emp dot get first name comma emp dot get last name comma emp dot get email id dot collect collectors dot to list so yeah you can see that i have done very simple thing i am getting the list of employee entities from the repository and we need to convert that to the list of employee that is for the ui that model is for the ui employee so what i did i just look through the list of employee entities stream through it and use the map function to convert that employee entity into the employee and at the end i just collected that entire to the list and at the end i will just return back the employees okay now if i go back to the employee controller here i should get the list of employees okay let's run this [Music] and my server is started so let's go to the postman and check if it's working or not so instead of this post request i'll convert to get and i'll just hit send and here you can see that i'm getting the list of all the employees is the first second third everything so my get employee method is working where i'm getting the list of employees which are already saved in the database now in the ui i need to create one component to fetch down all the employees and to display in a nice format so let's do that let's go to the vs code and here in the react if you go to the browser you can see that we already have one page now we need to create another page which can just list down all the employees over here so this is a perfect segue to understand the react routers because now we are going to create multiple pages where we can traverse to the multiple pages that we have so what we will do is we will implement the react router in our react application so that we can handle multiple pages so to install direct router what we'll do we will go to the reactor router term we'll search for react router dom and here you can see that this is the react router we'll search for react out of 6. let's copy this and what we will do we will go to our vs code we'll go to our terminal let's stop the server and let's install npm install react router dom at that six we are using the latest version so let's install react router is installed if you go to the package.json you can see that react router dom has been installed now now we need to handle the multiple pages so first let's create one more component that will be for listing down or to displaying all the employees that we have we already have one add employee right at employee.js we already have a new bar let's create one more component we'll just say employee list dot js okay this is also a functional component so we'll just use this snippet raf ce to create the component now we need to handle the routing so let's go to the app.js and here we will handle the routing so here in the app.js we need to add the browser router here you can see that this browser router is part of the react router dom so let's add that okay this is the browser router and inside this browser router i'll just copy this and add over here and here you can see that browser router has been imported from the react router dom package here let me add the new employee list as well that i have added okay yeah you can see that there are multiple components now inside the browser router now i need to maintain the different components i need to show different component components based on the different routes that we have defined so now let's create the routes so this is the nav bar that i want to show every time so i'll just keep this new bar outside of the different routes that i am defining so after the new bar i'll just define the routes route is a part of the react router dome again so this is the routes and inside this route i'll define an individual route so this is the route now for the route we need to define the path so what i'm doing i'm defining the path path equals to forward slash then what you need to display if my path is forward slash i need to defray which element i need to add the route as well over here so let me just add and in this route i need to add the elements equals to and here you need to pass the entire component so i want to pass employee list component okay if my application has a path forward slash then i need to show the employee list that's it then my and if my route is index okay that means your default path at that time which element you need to show i want to show again employee list okay let me just add over here so i just defined two routes so when there is index route i want to show employee list if there is a forward slash route i want to show employee list if the route is slash employee list at that time also i need to show elements equals to [Applause] employee list and if my route is add employee then my element should be add employee let me just remove this thing because i don't need it now i'm handling everything via routes so it's simple if you see this i've just defined the browser router over here this is what it will handle my entire routing of this application inside the browser router this is a new bar that i want to show every time after that these are the different components that i want to show based on my routing that i have defined so for the forward slash path or for the default path or when there is an employee list for all these three i want to define my employee list component and if the route path is add employee i want to define or i want to call my ad employee component if i run my application currently it was coming this right now you can see that it is coming blank because this is the index route and for the index route what it should show is employee list and now if i add this add employee path i'll just do forward slash add employee you can see that my ad employee form is coming okay so this is how we are handling the routes in react application now when there is no route right no route defined with forward slash i need to get the list of employees already saved in the database so let's create that component we already created the component now we need to build it so this is the employee list that we have defined let's build this now so in this employee list let's do one thing let me use the fragment inside this fragment let's create one do inside this do let's create a button now this button is to tell add employee okay like whenever we click on that button it will redirect to the add employee page so for that reason we are creating one button so this is a button and i'll say add employee so if you see this is the button it's coming right so let's build this from here and in this view let's add the class name and let me give some height and inside this button as well let's give the class name let me add the button as rounded and let's give the background color background we'll give the slate 600 you can see that color is coming out right and now let's add the text color text is white okay white is coming now and now let's add the padding as well so i'll just use padding of 6 in x direction padding of y as well now also let's add font semi-bold okay the button is coming up okay now let's add this button and the entire div into one more div to center it out everything so what i'll do i create this as a div and inside this let me define the class name and here i'll define this is a container and margin should be auto okay it's coming up nice now margin y button is coming nicely you can see that now now below this button let's create the table as well after this div let's create one more do and here i'll just define class name equals to flex shadow will just give some shadow and bottom border okay here you can see that there is some shadow and border bottom now let's add the table so inside this div let's create the table let's add the header part of the table inside the header let's add the tr inside the tr let's add the table head first name last name email id and actions okay so you can see that everything is coming here now let's add this styling to it so for the table let me add the class name and i want this table to be full so minimum width i'll just tell as full okay here you can see that everything got separated out okay it just took the entire width of the page now let's change the color of the header as well so in the table head i'll just change the class name equals to background gray 50 so you can see that it slightly change the color and for the headers let's define class name and what i'll do i'll just do text left so you can see that all the text will come to your left side then i'll change the font to medium font to medium and then we'll change the color of the text text gray 500 so it's just little bit of light color okay you can see that we are just changing the first first name how much the difference it is from the first last name and email id and actions you can see that then let's convert to uppercase okay you can see everything is uppercase then i'll add tracking also tracking little bit of wider okay so you can see that it's taking little bit of wider so it looks nice then let's add little bit of padding as well so i'll just do padding of 5 to 3 so it's little bit bigger now you can see that it's little bit of bigger now now let's add the padding of x as well i'll just do six double it out so now you can see that there is a padding as well over here and there is a padding for the y direction as well now let's add the same thing to rest of the columns as well so i'll just copy this okay and i'll just add to the all the header okay and here you can see that it's looking really nice the only thing is action i want is the left side so let me just change that instead of text left i'll just do text right action to be right so here i can add the edit and delete button for my entire table to do any operations so now this is the header part let's add the body as well so now after t head let's add the t body inside this t body let's add the row and tds how many we need is first name last name email id and for the actions so let me just give the static values now okay subbear dowdy should be right there gmail.com and in this td i'll just give some links okay so let's see what is currently happening okay here you can see that the data is coming let me change the color of the row p body i'll just give last name and let's see bg white so background color is white now let's change some of the text properties and everything for the this as well so for tds i'll just give class name and here i'll do the i just need text left horizontal padding of six p x x p y of four and white space no wrap i don't want to wrap okay here you can see that it's looking nice okay now for the value let me just wrap around with the div inside this dev let me just add the values up there and for this div let's give some styling class name equals to text small and let's change the color text to gray 500 okay it looks quite nice right now let's add the same thing to the last name and email id as well so i'll do i'll just do copy this okay and i just remove these two things these two tds and shabir i'll just give the audi over here and shabbir gmail.com so my this tds are ready it looks quite nice now and now let's add for the action as well so here i need to add two anchor tags so two links which i can click on for edit and delete so let's do that for your inside this td let me just add the same details over here and this is the anchor tag with here f hash and this should be delete here you can see that those are coming now let's add some more details we'll just do text to right so those are coming now in right direction font should be medium and text should be small yeah it's coming nice now let's change the color as well so let me just add the class name over here and i'll just change the color to text indigo 600 and when i hover over it i'll just change to text indigo 800 and then i'll just add the padding to it let's add the same thing here as well okay so my two anchor tags are also ready so yeah you can see that those are also looking quite good if i just remove this from here yeah it looks quite good like you are now getting the records as well and you have delete an edit button as well and add employee button as well where once you click this you should go to the add employee page cool right now let's do one by one thing we will just focus on the add employee button so when we click on the add employee currently nothing is happening so when you click on the add employee you should go to the add employee page so let's do that thing first so the add employee button is here so here on this button i need to handle the on click event so here on click of this i need to route my page to the add employee page because if you see over here in my routes i have defined that if my route is add employee it will show add employee page so i just need to route to this particular path so to route to this particular path i need to use the another hook that is the use navigate hook so let me go to the again my employee list and i need to use this hook so let me just use navigate use navigate is from the react router dom so here you can see that it is added from the react router dom and i'll just use constant navigate equals to use navigate so now here on click of this button i need to call a function that's called navigate and if i go to the index.js sorry app.js and this is something that i want to call at employees so i'll just copy this and i'll just paste this over here so this is something that i am calling and clicking of the add employee button i will be calling the add employee component to save the data so if i go back to the page if i refresh it if i click on add employee you can see that i am routing to the ad employee and here you can see that ad employee has been added okay if i go back this is the page so this my ad employee is now working to add the employee to my database from the ui now let's handle this list over here so whatever the data is available i need to get the data and i need to show it over here simple right so we already created the api to get the data now we need to call it so go to the vs code again and instead of using all these static values over here we'll be using the dynamic values now to get the data at the loading of the page so when the page is rendered at the time i want to fetch the data and i want to show so ideally this is a particular thing that we have to do in the life cycle of the react so when a component or when the rendering starts right once the render is complete i want to call the data and i want to show it so to use that again we need to use the hook so this particular hook is called use effect hook so use effect is the side effects of the react which will be called when a components are mounted when the rendering is completed so at that time we will call the api get the data and we will save the data and we will display the data so to use the use effect we again have to import the use effect this is a similar thing that what we did for the use navigate and what we did for the used as well so here we will create two states we'll use two use states to set the data of all the data that we are fetching and to handle that the data has been loaded or not so for these two things we will use the two states over here and we will use the use effect hook to fetch the data so let's first create the use date so i'll just use you state snippet and this is called employees okay and i'll just define this as a null for the starting point i need to import usted as well and this is imported okay so one more thing i want to use is use state snippet and this is something to handle the loading and by default loading is true so this something loading is to check if the data is loaded or not and in the employees we will save the data of the list of employees that we are getting from the backend api and we will use use effect snippet okay use effect snippet yeah you can see that it is taking a function so let me just add the value over here that it should be the empty array let me remove these things as well and from here i need to get the data so what i'll do i'll go to the employee service and there was one method to save the employee so let's create one more method to get the employees i'll just do get employees which won't take any input parameter but it will return xeos.get employee api base url okay so this is a method now let's get back to the employee list.js and here we need to call the method so let me just create a method constant fetch data equals to okay now at this point i will set the loading to true because i'm just loading rate at this point so i'll just say set loading to true okay now i'll just use the try catch over here and i'll just do console.log so that means at this point in the try i'll be fetching the data if there is some error i'll log the error and once everything is completed i'll just add again set loading to false because we have loaded the data and after this function is defined i will call the function fetch data now i need to call the api itself over here so the api is i'll just call constant response equals to employee service dot get employees okay this is the function that i'm calling which will be calling our api so at this particular point we are calling the epi and to get the data from the api it may take some time so i need to wait until i am getting the data so i'll just use the await over here to wait for the data and i will convert this method to async now i waited till i got the response over here now once i got the response i need to set the response to my state so i'll just use set employee method to update my state and in this set employee i'll just pass whatever i got data from the response so that is response dot data it's pretty simple we just use three things over here that is two states and one use effect so the employees state is used to get all the employees from the database and to set in this react state so we can loop through this and we can display all the records this particular loading is just to define or to change the values until we have got the data so when we are displaying the data we will wait until this loading is changed once the data is loaded we will display the data and this is a method for it that is the fetch data we define the method and we are calling this method over here in the use effect so that's all we have defined over here there is nothing crazy or nothing complex that we have done this is a complete part of the react but this all things are very simple we are just calling the api of our backend application to get the data we are waiting until that is completed we are setting to our array over here that is nothing but a state we are using the state to handle that array over here now what we want to do is in our body okay this is a body part now this particular body part i need to loop through all the elements which i get so suppose there are multiple elements like multiple employees that i have saved and it will look through all the employees and i need to display all the employees so let's do that and one more thing this particular looping through i can only do once the loading is completed so i need to handle that as well so with the curly braces i can write the react code react ds code so i'll just define if not loading this entire thing is true then so till t-body i can handle this so loading should be completed to display this and after that inside my t-body for my trs what i want to do is i want to again to the curly braces to write my code i want employees dot map i want to map all the employees i want to get the employee object from it and start and this entire thing i can cut and i will add after the ending of this tr that is over here okay so this entire code is my jsx code inside this loop now instead of shabir everywhere what i can do is instead of shabbir i can write employee dot first name and that also i can i need to write with the curly braces so that is employee dot first name i'll copy this instead of the audi i can write employee dot last name here as well i can write the same thing employee dot email id so i think this should work we have completed the use effect to call our data and we are calling only once once the loading is done we are showing the data as well and yeah you can see that it's already showing the data right so if i refresh it you can see that i'm getting the data but yeah you can see that we are getting still one error that is the each child in a list should have a unique key property now you can see these are all the different lists okay for all this entire list there should be a unique id available so to handle this let's go back in the tr what we will do we will define the key and this key should be unique so what i'll do my unique currently is my id so i just define employee.id and now i should not get that error you can see that i'm not getting that error so you can see that we have handled a lot of things over here we are able to add the employees from here as well with this page if i go back i am getting the list of employees also available now what we have to do is we have to handle the delete and edit functionality but before handling that thing edit and delete let's optimize our code as well because that's the most important thing that we have to do currently if you see that in our employee list there is a lot of code and you can see that it's it's very small thing as of now we have added only four columns and couple of uh entries only then also it looks really complex so what we can do is we can separate out the different components that we have so what we will do we can entirely separate out the body section and each of the elements we can tell that as that's a individual employee component so we are now separating out the entire code to different employee component so what we can do for each of the employees map over here rather than writing the entire code over here we can separate out this code and we can make it as a single component so let's try to do that let's create this component so what i'll do i'll just go to the components and click on new file and i'll just say employee.js okay this is a new component as it is a new component i can add the functional component with r rafce now from here what i have to do is whatever is available in this employee list this entire tr cut from here and i can go to the employee and i can add this thing over here okay so here you can see that i just separate out the component now couple of things that we need to understand is if you go to the employee list at this point we were getting the employees.employee data over here now we are not getting it but before that we need to call this employee over here okay now there will be a lot of errors because if you see this there are a lot of errors right because system needs to understand where to get the data from so currently if you see there is a data available in the employee list component for each of the employees okay and i want to add the employees over here but those data this employee is not available in my employee that is the child component so i need to find a way to pass this data to my child component and i can use it so at this point props comes into picture i can then simply define this way inside this employee component i need this employee data as the name employee okay as a name of employee i need data what data employee simple thing i define that whatever this employee is i want this data as a property called employee simple thing right now this property i need to define in the employee component so i'm defining over here that this is something that i will get from the parent and now here you can see that magic happens and everything started working see everything is cool now if you go back to the page you can see that everything is coming right now here you can see that it still has the issue right for the key over here so we need to define that as well if you go to the employee list here in the employee we need to define the key and key should be employee dot id same now it should work everything as it is so here you see that we just created this employee component which is separate out the component and everything is now available inside this one okay so now your code looks a lot cleaner than earlier now what we have to do is we have to handle the edit and delete but before that there is one thing that we need to do is when you go to the add employee from here and once we add the data back okay and once we click on save again we need to redirect to the main page to get the updated data so that is something that is currently not happening so let's handle that so if you go to the add employee page once we complete the submit we need to redirect back to the employee list page and when we hit on clear we need to clear this data as well these two things we will do in the ad employee before we do anything on the edit and delete so let's go to the ui again vs code let's go to the add employee and inside this add employee you can see that once we save the data we have just did the console.log so at this point we can use the use navigate hook to redirect back to the main page so let's do that let's use the hook over here use navigate okay this use navigate is added over here you can see that from the react router dom and i'll use constant navigate equals to use navigate and here after the console.log i'll just use navigate to the employee list okay this employee list is what we have defined in our router in the app.js employee list so if we go to the application if i add the data q q q q q and if i hit on save so you can see it redirected back to the main employee list and you can see that in the url also we can see it's an employee list if you go back again add any random data it's redirected back and we can see the data cool right it's working completely fine now if you go to the add employee and if we do any data and if we want to clear it out there is nothing that we can do so let's do that and we need to understand like clearing on this button means clicking on this button is nothing but to change my state back to the initial state what i was having right because whenever you are changing any data handle change function has been called and it's updating the state of the react now when we hit on clear my state should be changed back to the initial state so let's go to the add employ.js and let me go down on this button let me do one click and i'll do reset okay this is the method that i want to create so i'll just go up i'll create a method constant reset equals to is taking the event and e dot prevent default because i don't want to refresh the page and after that i want to set employee and what i want to set i want to set to this state that is the initial state okay simple thing now if you go back to the page and if you hit clear you can see that everything got cleared if you do anything cleared right so here you can see that add employee functionality is completely working fine the only thing remaining is validation that is the self exercise that you have to do how to handle the validation it would be very simple to handle the validation as well now i will show you how to handle the edit and delete as well now to delete the records we need to create the delete api as well so let's go to the springboard application and create the rest api to delete the data based on the id that we provide so let's go to the intellij idea let's stop the server and let's create the new api over here so i'm just creating public response entity and this response entity is of type map of type string and boolean delete employee and this will be added delete mapping the same thing that i'll define over here that is slash employees but we need to delete based on a particular id so we will get a path variable over here that will say id and the same thing that we have to define here as well which is long id and this is a path variable now here what i'll do i'll just create one flag boolean deleted equals to false over here and i'll call the method deleted equals to employ service dot delete employee which will take the input that is the id okay so it's taking the input as an id and it will try to delete the data so let me just do that i'll create a method delete employee in employee service the same thing i need to go to the implementation of this employee service and implement the method and inside this i need to check if employee entity employee equals to employee repository dot find by id i need to pass the id okay dot get currently i'm not handling any exceptions but i'm just showing you how to get the data how to delete the data and how to handle from the ui but here we can handle the exception as well we can create the custom exceptions and we can handle that as well so we just got the employee over here and what we'll do we'll just do employee repository dot delete employee okay and from here we will just return true and in the employee controller we just got true over here and here we will create map off string and boolean response equals to new hash map response dot put deleted deleted return response entity dot ok you can see that it's a simple api we'll be getting the data in the id as a path variable we are getting the path variable and we are passing to this method it is trying to get the data will go to the implementation over here and it is doing find by id getting the data from the database and it is trying to delete the data simple thing nothing complex over here but we can handle all types of exception and everything over here so let's start the server over here okay now the backend server is done now we need to handle the same thing from the ui so let's go to the vs code okay this is your ad employee and if you go to the employee this is your particular employee that you are heading in here you have a delete button so here you need to handle the on click so let's add the on click functionality over here i just need to remove this href from here and i will handle the on click and here i need to get the two details the event itself and the id okay and we can define delete employee this is the method that i'm defining and i'll pass the e and i'll define the employee dot id so this is the on click that i have defined over here so if i go back to the react app you can see that delete employee is not defined so we need to define the delete employee now we need to understand one thing so when we delete the employee what i want to do is i want to call the rest api that i have defined over here okay that is the empty employee controller the list this is the delete mapping this is the api that i want to call once that has been called once the data has been deleted i want to update my state as well and my state is available in the employee list here you can see that we had already updated the state this is the state available and we had updated the state from here so my state is been handled by my parent component and the event has been handled by my child component so whatever the operations that i do in my child that we have to transfer back to the parent component so when i click the delete on my child i need to pass that to my parent as well okay all the props that we define right currently we define one prop over here if you see if we scroll down in the employee component we just defined one employee over here so from the parent it is going back to the child but now from child we want back to the parents to handle our state because when whatever we delete we need to remove from the ui itself right ui also because we are not refreshing the page we need to remove directly we need to update the state itself so to do that we need to transfer back the control to the parent as well from the child so whatever the props are there we need to give back as well so in this case what we have to do is try to understand the concept earlier we traverse from parent to child in the props okay this is from the parent we passed the child now from the child we need back to the parent so we defined in the child if you go to the employee this is a method that i want to call so rather than defining the method over here within this particular child i can define the same function in the parent and i and that particular function i can pass it as a prop to the child so it can directly connect so whenever there is a delete employee call it will call the delete employee of a parent and it can be able to update the state as well this is a concept behind it so we need to implement accordingly we cannot define delete employee within this particular component because if you see other components whenever we have called the method we have defined within that particular component itself but this is a scenario where we have to give the control give the properties back to the parent so this is something that i want to call but this i need to define in my parents if i go to the employee list this is one already use effect hook available i need to create one method so what i'll do i'll just define a method over here constant delete employee equals to which is taking e and id okay with arrow function i'm defining a method over here and i'm doing e dot prevent default consider this is just a simple method so now this particular function has to bind to the each and every employee okay so this delete employee i can pass as the prop okay so what i'll do i'll just say delete employee equals to delete employee okay i've passed this as a prop and if i go to the employee i can take this prop over here okay and this i've defined over here okay so now this will be called from the parent and whatever i do over here that will be handled accordingly so what i want to do is i want to delete the data so in my employee service i need to create a method to delete so if i to delete employee which will take the id which is the employee id and it will return axios dot delete and employee api base url plus forward slash plus id because that is the path variable that i am passing so for this particular id i want to delete the data if i go back to the employee now employee list sorry i can call employee service dot elite employee by id once this is called then whatever the response we got what i have to do if employees are there if there isn't data in my state this is the state right employees this is the array so if there is data i want to set the state again because now what i want to do is i want to remove the element or i want to remove the entire data which we already deleted from the state itself right so set employees what i can do i'll be taking the previous element and i'll do arrow function and i'll do return previous element dot filter okay what i want to filter for each of the previous element i will get an employee so this employee so this employee employee dot id should not be equal equal to the id which i pass simple thing okay when i click on the delete it will send the id i am just preventing the default behavior that is refreshing and then i am deleting the data from the database by calling the delete employee template is nothing but the api call to my backend service and once that is completed once i get the response back i am checking if my employees is there or not okay if so i am setting the state again what state i am setting is i am taking the previous element what i had in my state and i am filtering out the elements which i have deleted so whatever the id which i have passed i want to delete or i want to remove that from the list itself that's it so i'm just filtering it out and the same should be deleted from the database because at this point this is deleted once we get the response back then only i'll remove from the state okay and here you can see that though we are calling the delete button from the child component we define the function in parent and we pass the props so we can connect those two together so if you go back to the react app if you refresh the page and one more thing i have to add is you can see that as we remove the href and we add the on click uh the cursor is not coming proper so let's add the cursor properly so if i go to the employee this is the delete one in the class name when you hover over we need cursor as pointer okay now it's coming correctly so if i click on this delete you can see that it got deleted it got deleted deleted the same thing would be deleted from the database as well so if you go to the database back here you can see that only two entries are there if i remove this one also you can see that that entry is also deleted so my delete is working fine you can see that i have deleted everything and if i go back and add employee save it will come back again and all the flow entirely loop is perfectly working fine okay now i have to delete it so when i click on delete i need to get the data whatever is available and then i want to update it okay the last step so now for updating the data i need to create two apis one is to get a single entry single employee out of it and that will be a get method to get a single employee and one would be the put method to update the data back to the database for a particular id provided so now let's go to the spring application springboard application and let's create those two apis first so let's go to the intelligent idea and here i'll define a method that is public response entity and this response entity is of type employee get employee by id okay and this is the get mapping and the same thing i'll be providing employee slash id because i'll be needing the id as well because i want to get the particular id so here i'll define the long id and this is a path variable for me so i'll define path variable okay and here i'll define employee employee equals to null and employee equals to employee service dot get employee by id and i need to create this method in my service so let's do that create method get employee by id in employee service the same thing i need to implement in my employee service implementation class so let's do that implement the method and we forgot one thing to update so here i need to pass the id as long as first panamata to abstract get employee by id yes refactor it so i'll get the same thing in my service mpl as well yes now what i need i need employee entity employee equals to employee repository dot find by id and i need to pass the id dot get okay so i got the employee entity now what i need i need employee let me just convert this to employee entity and this to employee equals to new employee and i'll just use bin utils dot copy properties from employee entity to my employee and return back the employee simple right i'm getting the data from the database and i'm passing back to the controller so from the controller what i need to do i need to return response entity dot okay and the body is employee cool right so i'm getting the data back with this particular api that is slash employees slash id okay whatever the id i'm passing is the path variable now i need to create one more method for updating the data to the database based on the id provided so i'll create one more method public response entity that is of employee update employee and this will be at the rate put mapping right we need to update it and the put mapping also would be the similar one for a particular id that we have to do so i need to have a path variable as well so i'll just define long id [Music] and this is my path variable alongside that i need to have the request body as well as the employee at the rate request body okay two things i'll get the entire employee object as well and i'll be also passing the id as well for which particular id i want to update now i'll just define employee equals to employee service dot update employee and this particular update employee will get the id and get the object as well okay and this will return response entity.ok employee now i need to go to the service and i need to implement this update employee method so let's do that let's create the method update employee in employee service and let's go to the implementation and implement the method now here employee entity employee entity equals to employee repository dot find by find by id id dot get so i'll get the employee entity over here now with this particular employee entity i need to update all the records from the employee okay so what i'll do other than the id i'll update everything whatever it is so employee dot set email i need to do reverse employee entity employee nd dot set email from the employee dot get email employee employee entity dot set first name from employee dot get first name employee ntt dot set last name from employee dot that last name okay all the things are there now my object is already up to date now i need to do employee repository dot save what i need to save save back the employee entity what i need to return back is the same employee object okay simple update is done so this was simple we just created two apis that is the get particular employee and update a particular employee based on the id that we provide now let's stop the server and start the server again okay the application is started now we need to implement in the ui so let's go to the vs code and let's go to the employee service and let's add the two apis that we newly created so the first one was get employee by id and here we are getting the id and we are returning axios dot get employee base url slash id and the other one is update employee and we are getting employee plus id and we are returning xcos dot put employee api base url plus slash id and the employee entire object so these are the two eps that we newly created and we defined in our employee service now we can call this in our ui so what we will do is we will go to the employee.js in this particular employee.js we will define onclick function for the edit okay and click function for the edit and here we will say we are taking two values the event plus id edit employee en id okay these two things we are taking and we will define hover class as well over cursor has a pointer i need to define this edit employee over here so what i'm trying to do over here is i'll create a new component edit employee and i will route that particular component when i click on this particular button so let me just create the function over here first constant edit employee okay e dot prevent default okay this is something that i have created now what i want to do is simple thing when i click on this button it will come over here and i want to navigate to the new page that i'm going to create so let's create that page so here i'll just go to the component create a new file and i'll just do update employee.js component okay and i'll create the functional arrow component now whatever i had defined in the employ.js okay add employee.js the same thing i need to use so this entire thing i'll just copy from here and i'll just update in this one okay the only thing that i have to change is instead of add new employee i just need to change update employee and at the below instead of save i just need to do update and instead of clear i'll just add cancel over here okay instead of save employee function over here i'll just use update employee function over here and i need to create the update employee function as well and if i create the constant update employee okay a dot prevent default and let me use the navigate function over here okay so when i click on so let me just remove it for now okay update and cancel the update function i've defined over here now i need to define a router okay so if i go to app.js i'll define a new route [Music] okay i'll define path equals to slash edit employee and slash any id i'm passing okay at that time what element i need to pass the element i need to pass at that time is edit employee sorry not edit update employee okay so i just defined a route when there is a edit employee call i need to call this update employee component now when i click on the edit button so if that is in the employee.js when i click on this edit employee i'm passing event an id this is the method i'm doing prevent default then from here i need to navigate to that page okay so to do that i need to have the use navigate hook as well so i'll just use use navigate hook and i'll just do constant navigate okay and here i'll do navigate to slash edit employee dollar id okay so whenever i click on that edit employee i will call the navigate function i'll call the navigate and i will go to this edit employee route and i'll pass the id as the parameter to it this is what we are going to do now i'm not sure it will work till now or not it will be having a lot of errors as well because there are a lot of things that is not defined yet right so we need to go to the update employee page and we need to define all those things so let's go to the update employee okay now here we need to get that parameter id as well and with that parameter id i need to fetch the data which is there in the database and i need to update the fields okay now inside is update employee i need to use the params so i need to use the use params so i'll just use use params from the react router dome and what parameter i need to use so i just need constant id so i just deconstructed the id from the params so whatever the id that we have passed i need that value and i need to handle one state as well so let's use use state snippet and [Applause] employee and the default state of the employee should be the same as what was in the ad employee so if you scroll up this was the default state i'll go to the update employee and use the same state the only thing will differ is the id because we already have the id so let's update the id okay now now we got the id when the page is loaded so now the time when the page is rendered i need to get the data from the database for that particular id which we got from the parameter and update the state itself okay so as we did similar thing in the employee list we use the use effect to get the data when the page renders we will use the same thing over here one more thing we will do is we have a handle change event as well so we will just copy the handle change from here from the add employee and we will use the same thing in the update employee as well okay now let's use the use effect snippet i need to use effect router dome as well okay so you can see that use effect is added is imported over here use param is also imported now in this use effect let me just delete this okay now inside this use effect i will create the function constant fetch data equals to and inside try catch console.log error and inside this try block what i have to do is i need to do constant response and do employee service dot get employee by id and this id is nothing but the id that we got over here and until we get the data we need to await so we need to do a sync over here and once everything is completed we need to call the fetch data and once we get the response as well from the api we need to update the state as well so we'll just do set employee response dot data the only thing there is error is used is not defined employee service is not defined so let me just do that use state i need to import and employ service also i need to import okay both the things are now imported and now you can see that i am getting the data so if i click on edit there is an error and the error is the object is not iterable okay so in the usted we just defined this use state over here this is something that we defined okay bit employee gs line number six use params okay this is not the error right so this is the error that we are having this should be id okay now it should work okay if i click on edit i'm not getting the data which is something undefined so we are getting the 400 error over here so let's try to solve that if i go to the employee on click of the edit i'm passing the ad employee edit employee this i'm getting the id over here so this is the issue i just need to use employee.id so this is the this type of issues i'm getting because i'm using the github co-pilot right because of the auto completion okay so this is something it should work now so let me go back to the home page if i click on edit here you can see that i'm getting the data now okay so if i go back let me create the new employee hhh and if i hit on save then new data is there if i click on edit i'm getting the same record over here from the database itself okay now i need to handle two thing when i click on cancel it should go back to the employee list and if i update it should update the data and go back to the employee list so first cancel one is easy so let's do that first so if i go to the update employee i need to go back to the main employee list so i need to use the navigate hook over here so let me just do use navigate okay constant navigate equals to use navigate and in this button i'll define on click equals to navigate but i need to navigate to the employee list okay so i'll just define this inside this update employee so i think this much this should pretty much work if i click on cancel you can see that i'm coming back edit cancel coming back now if i click on edit and i need to update it right so when i click on update i should again call the put function put http method to update the data so let's do that if i go to this update i've already created the update employee method this is the update employee method okay so i need to implement this now here i need to do employee service dot update employee and you need to pass the employee from the state and id as well dot then if i get any response from here then something then i need to do dot if there is any error i need to catch that error console.log error now once you are updating right once you do the update over here what you need to do is you need to navigate again back to the employee list simple thing right you can see that it's very simple we just use the update function prevent the default behavior we just call the employee service dot update employee function method that we have created in the employee service class we are passing the employee object in the id if you go your right employee an id over here the same thing that we are passing in the backend api as well so that's pretty much it let's run this let's let's click on edit over here instead of hh let's do gtg update and there is some issue okay but we have not updated the last name so let's do set last name get last name and let's restart the application and we'll just remove this okay that's fine so now if we go back refresh the page edit it update it and you should get the value let's update it with shabir and after you update it you should get the value here you can see that all the operations are working fine create treat update and delete so this is something how we can implement the entire full stack application with the help of react and spring boot so what all things we learn today is with the backend application with springboot we use the mysql database so with the mysql database we updated all the data we added inserted all the data in our database in mysql for that we use the spring rate gpa and mysql driver to connect to it we use the lumbar dependency for our boilerplate code and we use spring web for our api creation okay so rest api was all thing created by the spring springboot now as it comes to front end we use the react application we created the react application and to create the ui for our css framework we use the tailwind css and i show you the demo as well how to use the tailwind css we use different components and different classes to create a good ui and after the tailwind css we also use the axios to call the rest apis to fetch data or to do any of the http operations so this was all about the today's demo if you have any doubts then do let me know in the comment section below i'll upload this project in the github and i'll add the link in the description below so you can check that out as well now there are other codes as well that if you are interested like how to deploy this application to the kubernetes and how to automate that kubernetes deployment to google cloud platform using github actions so i'll link those videos so you can check that out as well so that's all in this video i'll see you in the next video till then happy coding bye

Channel: Daily Code Buffer

Views: 89,590

Keywords: react, react js, react tutorial, spring boot, spring boot react, spring boot tutorial, spring boot java, spring boot rest api, spring boot web application, spring boot crash course, spring boot crud, reactjs basics, reactjs projects, reactjs app tutorial, spring boot full stack project, spring boot full stack application, spring boot full stack developer, spring boot full stack, spring boot and mysql tutorial, spring boot project, spring boot application, react js project

Id: J3iiiLrT1ic

Length: 143min 4sec (8584 seconds)

Published: Sat Jan 29 2022