Transcript for:
Full Stack Application: Employee Management System

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 you will understand how both cohesively works together 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 spring boot 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 back end 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 lumbag 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'll 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're using eclipse or netbeans or whatever other ids if you're using vs code as well you can unzip it and you can open in the editor let me just go to the intellij let me create the 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 me1 group id i'll just give us com.daily code buffer artifact is employee system api package name i'll just give as employee project sdk that is the my java version that is the java 11 my packaging is char type the same thing which we gave 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 it's spring data gpa and i also need my sql driver and here you can see that lumbar spring web spring data gpa and my sql 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 springboot 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 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 and 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 version 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 intelligent 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 h2 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 column 3306 because this is the port where my database is working and then i need to provide this 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 dot gpa 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 logo that 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 js 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 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 here 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 script 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 television css don't worry we will be going through the basics of taylor and 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 the 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 tailwind 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 too this will help to add the colorized brackets so you'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 plugin 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'll 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 talent 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 view 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 television 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 employee 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 so 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 boost components as well i prefer more functional based components because it's easy to understand and 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 component 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 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 due 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 new bar 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 rafce 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 jsx 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 add employee both are parent to it okay so we need to have a parent for both of these new bar and ad 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 do 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 d 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 a 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 y direction as four 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 here 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 border is added and then let me add the margin top to two 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 due and inside of instead of this 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 a 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 dave ride 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 this 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 i'll 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 it rest controller and we'll also define the request mapping and this request moving 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 will 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 entity 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 guide aside as 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 other 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 annotate 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 will 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 jpa 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 epi 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 addre 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 slash employees your this particular method will be called and here from here what you can do you can call the employee service 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 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 yeah 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 without 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 zero 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 xeos we will be able to hit the back end api to fetch the data so let's add that and let's create one service which will call a particular packet 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 here 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 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 life cycle 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 will 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 this 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 employ 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 employee.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 we will be updating the values the same has to be updated to the 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 i'm getting these suggestions like constant handle change event i have two right 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 defined 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 time i'll be getting the first name over here and for that am 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's 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 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 e dot 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 employed first name 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 used it and i need to pass it to the rest api so what i'm doing is i'm 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 have 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 define the class and 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 ad 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 slash employee service and we'll 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 error 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 axios.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 back end 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 localhost and colon8080 this is something whatever want to call so now if you go to the browser again and 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 back and 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 constructor 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 looked 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 service 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 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'll 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 crypto 6 let's copy this and what we will do we will go to our vs code we will go to our terminal let's stop the server and let's install npm installed react router dom at the 86 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 is 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 ad 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 the 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 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 here 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 div inside this do let's create a button now this button is to tell ad 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 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'll create this as a 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 do 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 view 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 us 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. here 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 in 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 five to three 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 6 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 and inside this tea 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 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 the body i'll just give class name and i'll just say 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 o four 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 dew inside this div let me just add the values of there and for this do 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 shabbir 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 href 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 write 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 and 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 ad employee you should go to the ad employee page so let's do that thing first so the ad employee button is here so here on this button i need to handle the on click event so you are 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 dome 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'm 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 the 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 usted 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 use 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 use date as well and this is imported okay the 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 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 relate at this point so i'll just say set loading to true okay now i'll just use the dry 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 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 fast 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 will just use the await over here to wait for the data and i will convert this method to async 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 ad 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 look 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 area 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 look 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 tea body for my trs what i want to do is i want to again do 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 learning 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 the list should have a unique key property now you can see these are all the different list 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'll 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 quote 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 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 just 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 we just 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 employee.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 it's 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 off type map of type string and boolean delete employee and this will be under it 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 the 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 and 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'll just return true and in the employee controller we just got true over here and here we will create map of string and boolean response equals to new hashmap response.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 we'll 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 add 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 this 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 has been handled by my parent component and the event has been handled by by 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 pass 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 have defined over here okay so now this will be called from the parent now 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 is a 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 you 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 we go back to the react app if we 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 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 we 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 intellij 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 add longest first panopatter to abstract get employee by id yes refactor it so i'll get the same thing in my service ampl 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 a 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.okay 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 entity 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 id and the other one is update employee and we are getting employee plus its id and we are returning xcos.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 enid okay these two things we are taking and we will define hover class as well hover cursor has a pointer i need to define this edit employee over here so what i am 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 employ.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 e 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 have defined over here now i need to define a router okay so if i go to app.js i'll define a new route 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 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 it will employ 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 ideal okay so in the usted we just defined this use state over here this is something that we defined okay update employee js 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 [Music] 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 add employee i did employ 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 copilot right because of the autocompletion 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 and the id if you go here right employee an id over here the same thing that we are passing in the back end api as well so that's pretty much it let's run this let's let's click on edit over here instead of h let's do gdg 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 subway and after you update it you should get the value here you can see that all the operations are working fine create read 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 learned today is with the back end application with spring boot 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 data 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 boot 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 hey what's up everyone and welcome to daily code buffer in this video we are going to create a complete full stack application using springboot as a back end and next js as a front end so in the back end we are going to create a springboard application with spring jpa and we are going to use the mysql database to store all all our data we are going to create a different bunch of apis to get the data to delete the data create the data update the data and so on so we'll be creating the backend application and to move on to the front end application we are going to create the next js application nexjs is nothing but the framework on top of the react library so i can say that it is what a spring boot is to the spring framework that's what a nexus is to the react library so all the configurations and everything that you have to do in your react application all those stuffs are directly in baked in the next year so we are going to use that today and we are also going to implement the next js authentication with the next talks so we will be only able to access our application once you are authenticated by any of the authentication provider so for this particular video we are going to use facebook as an authentication provider but you can use any of the authentication provider there are a lot bunch of authentication default provided by the nextdoor.js and we can also implement the custom one as well so that's been pretty it that's what we are going to build today if you are interested stay around stick around and practice it while we are developing the application that will make you to understand both spring boot and next years and how both the application work cohesively so let me just show you the demo of the application that we are going to build today so if you go to this particular screen if you come over here this is the application you can see that i am not logged into the application yet and at that particular time it is asking me for sign in once i click on the sign in over here it will ask me to log in with any of the authentication provider currently i have only implemented facebook but if you have implemented more all that particular list will come here so let's go ahead and sign in with facebook and here you can see that i have signed it with the facebook i've already logged in with the browser so it didn't ask me for the credentials but if you have not it will ask you for the correct credentials i'll show you that as well you can see that my name is coming my profile picture is coming everything if i show you in the incognito mode if you click on sign in if you go to sign in with facebook you can see that your facebook page will come you have to log in with facebook so if i give my credentials over here so yeah you can see that it will try to log in with the facebook it is asking me for the to factor authentication and everything but you get the gist right this way you will be asked to login with your facebook account i've already logged in from here now you can see that i have the list of users available you can edit it delete it and add a new user as well so let's try to create a new user i'll just add user one user one two and user address email.com i'll add the user you can close it okay clear as well this particular model will close and you can save it as well once you save it you can see that your entry will be populated over here and you can edit the entry as well suppose instead of user one i need user two and you can save it it will be updated to the user too as well and if you want you can delete as well that particular entry will be deleted so that's the entire application and if you click on this particular icon you can see that it is showing that click to log out once you click over here your application will be logged out and you will be asked to sign in again so that's a simple pro that we are going to build today with entire authentication all the session management and everything using nexgs and springboot now what we will do we will create a two application that is a springboard application for our backend and we will create the next application and we will build everything first we will complete the build of a backend will create all the apis and then we will focus on the front end only so we will create the next application and we will call all the apis from the backend that we have created using the springboot so let's go and build the application so now let me go to the spring initializer i will just go to the browser and let me go to the start.spring.io and let me create the springboot project i'll give the group ids com.daily code buffer artifact id i'll give as user management system package name as user system packaging as jar javascript 11 and let me add the dependencies i'll add the spring web dependency i'll add the gpa dependency my sequel dependency okay with gpa and mysql i'll be able to connect to the database spring web will help me to create the apis so that's it let me just generate the project and open in intellij idea let me open the intellij idea and let me open the project i'll go to the documents java workspace and user management system let's open it okay it is resolving the dependencies so we'll wait for a second to complete okay it's completed importing the mu and project now now let's create the different packages that we will need i'll go to the src folder main java this is our package let's create the different package we create the controller package for creating our controllers entity to create our entities to create the service service package repository package to create our repositories we will create the model package to create a model that will interact with the ui okay and bunch of other packages also you can implement based on the different scenarios like for exception you can create the exception package for utilities you can create the util packages and you can create all the classes in those particular packages as per requirement for now let's only add these particular things now we need to connect our application to our database as well so let's add the database dependencies database configurations actually in our application.properties file and we need to create the schema as well so let me just copy paste the details over here quickly because those details would be configuration only you need to update it once okay i'm adding this spring data source url and let me add the other details as well so you can see that these are the details i have added over here that is the data source url username password of my database the driver classroom that i'm using that is the mysql driver and i have added the gpa hibernate ddl auto equals to update so whenever there is an update in our entities those will be reflected in our database and i have also added the spring gps shows equal to true so all the queries will be printed in the console now we need to create a schema so as i'm using the mysql i'll go to the mysql workbench and i'll create one schema so this is my database let me just create one schema create a schema and i'll just say this as a user app user underscore app okay and i'll create the schema i'll apply the changes done successfully and if i refresh and you can see that user app is created now if i go back to my application this is where in the url i need to provide the schema as well so here i have provided that spring data source url equals to jdbc mysql localhost column 3306 that's where my application my database server is running and user app is my schema and all this bunch of other informations are username password and everything let's create the entity first okay what we are going to store so we are going to store the user so let me just create a java class that says user entity and to make this as an entity we need to annotate it with entity and i'll also annotate with another table annotation to give a particular name to a table so i'll just define name equals to users and i will add the different properties i just said private long id sorry private long it should be and i'll add private string first name private string last name private string email id now so let me just create the get a citizen constructor i'll create the get a setters for all the fields now you can use the lumbar also to create all the boilerplate code but i realized that some of you might not be using lombok so i am creating this tutorial without using lumbar using the conventional way so let me create the constructor as well so i'll create the constructor default constructor and i'll also create the constructor with all the fields as well and as this is an entity we need to annotate with hydrate id for our primary key and we need to also define how this primary key will be generated so i'm defining generated value and what's the strategy for it that is the generation type dot identity so this particular id will be auto generated all these particular fields we are going to pass from our apis so my entity is created now with this entity we need to create the repository as well from which we are going to get the data from our database so let me create the repository i create a java class that would be interface and i'll just define as user repository this user repository will extends gpa repository and this jpi repository is of type user entity and the id type is long so you just have to define this and you need to annotate with the rate repository so your repository is ready your entity is ready now along with your entity you need to create the model as well that will interact with your ui so let me just create the model as well and create the model as user class and what you have to do is whatever the entities or whatever the fields that you have defined in your entity just copy those things and add in your model for this also i'll just create the constructor with no arguments constructor with all the fields and get a settings for all the things that's it everything is created now you can see that there is a lot of code that we are doing as a boilerplate so lombok helps to reduce all those codes now we need to define our controller and our services so let me just create one controller that is the user controller now you might be thinking that we are going very fast but trust me it's very simple this is the simplest thing that we can do in our tutorial but if you still think that this is very fast then you can check out the spring boot tutorial course where we have done all these things in slower pace and in in-depth so you can understand each and everything that we are doing very easily we are not doing anything complex here we are just creating the different apis and as we are using java we need to create a lot of files and lot of boilerplate code okay so as a user controller we need to annotate with rest controller to create this rest controller and in this we are going to create the different methods and as this is a rest controller we will also do request mapping like what all the requests should be mapped so let me just do that also i'll do slash api v1 slash so anything coming as slash api slash v1 will come over here okay and in this particular controller i need this service as well so let me go ahead and create the service so in the service package let me create the user service and this will be the interface now we need to add the implementation for that as well so let me create the user service implementation that will implement user service and this is a service so we'll annotate with at the rate service cool right now let's go to the controller and we need to inject this so i'll just define private user service user service and i'll annotate with auto wired okay it is telling me that create the constructor instead and okay let's do that create the constructor now let's create the different methods first method we are going to create is to store the entire user itself so i'll just create a method public user save user and we'll import this from the user system dot model and it will take the same user user and this is your request body so i need to enter it with request body and we need to annotate this method as post mapping and what would be the url that would be slash user and we need to call the user service as well so we'll just define user service dot and create the same method that is a save user and i'll pass the user object over here and this particular save user is not available it's not created in the user service so we need to create it so let's go ahead and create this so create method save user in the user service so we have created the method and now we need to implement this method as well as you can see that it's showing the one related problem so let's go to the user service impl and here we need to implement so let's implement the method that is the save user so now from this user service mpl we need to have the object of the repository as well because from this service we need to call our database we need to call our repository so for that let's create the object for it and just say private user repository and let me add the constructor parameter now this is the user what i need is user entity so here i'll just define user entity user entity equals to new user entity and using the bin utils dot copy properties i'll copy the properties from the user object to the user entity object okay and once this is done i'll simply do user service sorry user repository dot save user for the user that is the user entity okay once this is done i need to send back the user that's it your first api is ready okay to save the data to the database that is the user now let's go and create the another one let's create the method to get all the users so again we'll go to the user controller let's create one more method public list of user because we need the list of users that are saved in the database okay and i'll just mention that get all user users this is a list i'll import the list from the java.util package i'll annotate with get mapping and i'll define this as a users am i doing anything wrong over here yes because i'm doing in the service imbl i don't want to do here let me just cut from here and let's go to the user controller and here i need to do i'll make these users so everything is correct now i need to get all the users that are stored in the database so i'll just do return user service dot get all users i'm not taking any input parameter over here because i need all the users this get all users we need to create method okay so let's create this in the user service let's go to the user service and let's implement the method and here what we will do here we need to get the list of user entity because we are going to get the user entity from the database and that list of user entity we need to convert to the list of user okay so let's see how we can do that user entities equals to user service sorry user repository dot find all okay this will give me the entire list of user entity which are saved in the database now i want to convert this list of user entity to the list of users to send back to the controller and that will again send back as a response to the client so for this let me create the object of list of user users equals to i'll stream through this particular user entity and i'll convert to the user object so let me do that that is the user entities dot stream and i will map it i'll get the user object and okay i'll get the user entity for sure and i need to map this to the new user so here i need to define user entity dot get id user entity dot get first name user entity dot get last name user entity dot get email id and dot collect collectors dot to list because we need to collect everything and to convert to the list from the stream so you can see that it's pretty easy pretty simple we are just converting the user entities list of user entities to the list of users that's it nothing else and we need to return back that users cool right you can see that another method is done now let's go ahead and create the method to get a particular user based on the id that we provide okay currently you can see that we are getting all the users but now let's create let's do based on the id that we are going to pass so i'll create one method that is public get user by id and the return type would be response entity and this response entity is of type user and now this would be your get mapping it would be slash users and slash you need to pass some id so i need to get that as a path variable and now here let me define that path variable this path variable is long the it's of id and i need to define the path variable as well that path variable is nothing but the id okay whatever the value that you provide here so here you can see that we are taking the path variable for the users slash path variable that is the id now based on this id we are going to fetch the details from the database and we are going to pass back to the client because client will give okay i need a user with id1 i need user with id2 whatever now let's create the object that is the user user equals to null and user equals to user service dot i create this method as well get user by user id and here i need to pass the id because based on this id i need to get the data and this method i need to create so let me just create this method create method get user by id in user service yes i want to create let me solve this problem because i need to implement this method okay done now here what i have to do is i need to have the user entity object user entity equals to user repository dot find by id what is the id this one now this will return the optional of user but i need to get a particular user from it so i just will do get okay now i need to convert user entity to user so i'll just define user user equals to new user and i'll just do bin utils dot copy properties i need to copy properties from user entity to user so i'll just define that way that source is user entity and target is user and i need to return back user that's it that's done let's go to the controller and here we need to return response entity dot okay and we need to pass the body body is my user and to remove new okay cool so you can see that this particular method is also ready you can see that how quick we can create all these methods in springboard now we got the data based on the id as well now let's delete that as well let's create the api to delete the data based on the id that has been provided now so for that let me create a method public and again i'll create response entity and this response entity i'll create a map this map is of type string and boolean and i'll just define delete employee and this is a delete mapping at the red delete mapping and here in this delete mapping we need to define the same thing what is the api that is slash user slash path variable that is the id now let's define the path variable as an input parameter that is the long id and your path variable annotation are the rate path variable which is of type id cool right you can see that lot of things are done now we need to delete this so let me just do boolean deleted equals to false first then deleted equals to user service dot delete user and in this delete user i'll pass the id okay this delete user is not there yet in the user service so we need to create it that will return the boolean true or false so let me just create the method that is the delete user in user service created let's implement this method in the user service impl implement the method yes and here i'll just do user entity user equals to user repository dot find by id and pass the id dot get we got the id we got the user based on the id now user repository dot delete user and we need to return true that's it right now you can do bunch of validations and everything but i'm just simplifying things over here just to make you understand how the application entirely works together your front and back and all the logins and everything now let's go back to the controller we need to implement the controller yet for this so what i'll do i got it's deleted or not then i need to create a map which is of type string and boolean and this is a response equals to new hash map response dot put i'll just put that this is deleted as true and i'll just return response entity dot ok response oops you can see that done your delete method is also done we just did a simple thing over here we took the path variable id which particular id we need to delete we took that id and pass that id to the user service that delete user method that we created if that id is available if that user and it is available in the database delete it create a map that says deleted as true and written back you can directly return true and false as well and you can also customize the response elsewhere whatever you want to do you can do it's very easy okay now let's create a method to update the data that is the put mapping so this particular method will take two things it will also take the id plus it will also take the entire object that we want to save against that particular id suppose for me i have created my user that is shabir dawudi with particular email and for me the id is one if i want to update that i will pass the id 1 update id 1 with this particular new object so that's what we are going to do so let me just create a method that is public response entity this response entity is soft type user and update user and i'll annotate with put mapping and this will be slash users slash id that is the path variable now we need to define over here that is the alternate path variable id long id and we need to get the request body as well so i'll just define the request body also that is the user okay two things we are injecting now we can do is user equals to user service dot update user which will pass id and user both and which will return response entity dot ok user okay this is ready now we need to create this update user method let's create this method okay method is created in the user service let's implement in the user service imple as well implement the method okay so here what i'll do i'll create the user entity object first equals to a repository dot find by id i'll pass the id dot get simple we got the user from the database now we need to update it so i'll just do user entity dot set email user dot get email whatever the email we got from the user object i'm just updating back in the user entity same way i'll do for the user entity dot first name sorry i need to do set first name okay set first name and user dot get first name user entity dot set last name and user dot get last name okay so all the fields are set except the id because id we have to make sure that it's same then we need to again save so we'll just do user entity dot not user entity user repository dot save user entity okay and we need to return back the user so that's it you can see that all the things are done your controller is also done okay so now let's start the application and let's see what is happening so let me just go to the user management system application let's start the application you can see the application is started you can see that table is also created okay if you go to the mysql let me just refresh it in the user app if you go in the tables your user table is created okay and you can see that currently there is no data but what we can do is we can use the postman to create all this data so let me just show you that okay let me just create a new request and i'll just define http colon forward says forward slash local host colon 8080 slash api slash v1 slash users i hope the api is correct let me just re-verify it okay slash api slash v1 slash users will do the post request so let me just change to post let me go to the body raw json let me copy this fields and if i go to the user i need first name last name an email okay and let me just give the details shabir daodi shabirat gmail.com that's it let me hit on send my data should be saved and you can see that my data is saved i got 200 okay i got the response back as well and the id generated is zero so we'll see what happen on that if i post again but in the back end we should be seeing those things if i go back if i execute this query again you can see that i am seeing two records over here okay so that's all good i'm able to store the data as well now if i change back to the get and if i do users i should be getting both the users you can see that i'm getting both the users that is users user one and user two and if i pass slash one i should be getting a particular user call right and if i do delete for user 2 i should be able to delete that user as well you can see that deleted true and if i do slash users and to get i should be only getting one record so yeah you can see that my entire api is working completely fine now we need to implement the ui with the help of next gs so now let's implement the ui application now as i already told you that next js is the framework on top of the react.js so we have to create the next step instead of using the npx create react app we'll be using the create next step so let's go to the terminal and let's create the project so let me go to the terminal let me just minimize my intelligent idea and here i'll go to the folder structure okay and here i'll create the app that is the npx create next app and then you need to give your name of the app so i'll just give the name of the app as user management ui and here you can see that your app is creating just the way that it was creating for the react.js okay here you can see that all the informations are there if you want to run this app you can run by this command that is npm brando you can also use yarn as well now let's go to this particular folder that is the cd user management ui and let's open this folder in the editor that is a vs code so here this is our app let me just open the terminal here as well and i'll just run this that is npm run dev here you can see that my application is started on port 3000 so let me just go to the browser and if i go to localhost 3000 you can see that this is your default nexus application you can go to the examples how to deploy it and learn about the nexus as well all the informations are here from here only you can directly traverse but we don't need all this information so we need to remove all this particular data and we need to build our app so let's go to the vs code and let's remove what is not necessary so before that let me just show you the folder structure as well so here you can see that this would be your folder structure you have pages folder public styles and all the other information you can see that you have next.config.js you have package.json and if you go to packet.json you can see that all the dependencies next year's dependency react dependency react dom dependency is there and eslin dependency for your development purposes now if you go to the styles folder you can see your global style sheets and if you go to the public folder all your public assets should be here and if you go to the pages folder inside this pages folder you can see your index.js file and this index.js file is the starting point for your application all the information that you can see will be coming from here and in the underscore app.js this is the component that has been defined now if you see there is a api folder as well so in this api folder you can see there are a bunch of there is an api created that is the hello api so js comes with the default configuration default implementation for the api route as well so if you want to create any apis you can directly create the apis you don't have to add any dependencies for your rest apis so what we'll do we'll just remove the stuffs which is not needed okay i don't need the home.module.css so i'll just remove this okay and from the globals.css i don't need any style sheet so i'll just remove all the things from here as well and if i go to the index.js i don't need the meta information or link for the favicon so i'll just remove that as well and from the main section i don't need all this information so let me just remove that as well and i don't need footer as well okay and i'll remove this import as well and here you can see that the head tag is there so whenever you want to add any header information using the next js head tag you can add any information so here we can add user manage ment app and i'll just remove the style sheet from the main as well i don't need those information now you can see that everything is clear if i go back you can see that there is a still style start container in the class name so let me just remove that as well if i go to the index.js i don't need this information as well because we just remove the style sheet okay so here you can see that we have a blank slate now from here we will be creating our application alongside next js we are also using the tailwind css to build our application tailwind is really simple to use and it's very powerful so let's go ahead and integrate the tailwind css so if you just go to tailwind css and go to the installation and go to the framework guides so we are using next year so we'll go to the next js and as we have already created project we'll go here we'll copy these commands and let's go to the terminal again and let's let me just create the new terminal and let me just use this command to add the tailwind css so you can see that once this is done your tailwind css is added if you go to the package.json you can see that tailwind cs is added post css is added and auto pre fixer is added and alongside your tailwind.config.js is also added now we need to do the configuration for tailwind over here so let's go and you can see that this is the configuration that you have to add so let me just copy this detail and let's add over here and we also need to add these directives to our global css so let's go to the global css and let's add this make sure you save all the files because in the past i have made a mistake like i did not save the file and nothing was working and i was constantly wasting around 30 minutes of time to figure it out what was the issue so make sure that whatever the configuration that you have added you save the files and then you restart your server so all the configurations are added now if i restart my server let me go to this control c to close the server stop the server and let me just start the server again now my tailwind css is installed now let's go ahead and create the application now the same way that you know react.js we can create the different components and everything it's everything similar okay now before we go and start our application i'll just show you what are the plugins that i have installed so make sure that you have installed your plugins so it will be easier for you to develop the application so go to the extension and i have installed this particular plugin that is the es7 plus react redux react native snippets so please install this so you will be able to easily create the components so use this particular plugin and also use the tlvin css intelligence so it will make sure that all the utility classes are there you will be able to easily use those intellisense will tell you what are the classes available so you don't have to type everything so these are the major plugins that you should be downloading you should be installing it but the other plugins also you can install like the prettier to format the code and all the other bunch of stuffs i have already created a video on that so you can check that video as well so with this being said let's create our first component that is the navigation bar and let's start with it so let me just close everything i'll go to the files and here before the main section here i need to create the navigation bar so i'll just say i just need to create nav bar and let me just copy this and let me create the navigation bar so what i'll do i'll just create a folder that says components and inside this components folder we will be creating all the different components so here you can see that there is a pages folder as well so whenever you want to create any static files or any static components all those things you can create in the pages folder and in the apis as i told you earlier to create all your api so we'll see that as well when we are using the next authentication so inside this components folder let's create one file that is number.js and you will use the snippet to create the component that is the raf ce that is this snippet coming from the es7 plus react redux react native tool so let me just rename the file newborn.js okay and if i do rafce you can see that the component is created instantly right now as you are using the nexus you if you want you can just remove this input as well it will still work and if you go to the index.js you need to import this component so let me just import the component okay and if you go to the browser you will be able to see the component you can see that the new bar is coming now let's go ahead and start building this component so inside this nav bar will go and we'll create the component so you can see that this is just a function which is returning the jsx okay this is just a jsx which is a combination of javascript and html we can directly build everything so here what i'll do inside this dev i'll create one more view and we will define the class name and here we will define all the class name as from the tailwind utilities so let me just add the background color bg gray you can see that all the classes are coming let's define the gray color and for this div let me just define the height and width i'll define height of 16 and padding in x direction is 8 i'll just define and everything is flex and all the items should be in this center okay and inside this div i'm defining a paragraph and this paragraph says user management system and for this paragraph also i can define the styles i'll just define class name equals to i'll just define text as white and i'll just do font as bold and flex as auto let's see that you can see that the nav bar is created you can see that with such a simple steps with only few of the classes you can see that we were able to create a navigation bar easily now let's create a component to list down all the users that we have already saved in the database okay from the postman we had saved couple of users so let's create a component let's create a table which will show all the users and it will also give the ability to edit and delete those users so let's just create the table here so for that we will create one component that is a user list so let's go ahead and do that so inside this component let's create one more component that says userlist.js and we'll do rfce so everything is generated now here we need to create the table so what we'll do we'll first create the table so inside this div let me just create one more div and inside this div we will create a table now for this div we'll just define class name equals to container margin as auto and vertical margin as eight and for this we will just define this is a flux and we'll just define shadow and we'll just define border bottom only for this now within this table i can define class name and the background for this table i'll just define border background gray 50 and inside this table let me just create the table head and this table head will have a row and this row will have a th text so let me just create a th tag as well so this ta head also will have a class name this class name let me just define this over here because only header i want of this color and this entire table i just need the minimum width of full currently you cannot see anything but let's add the header so you can see so i'll just define first name and this particular user list we need to add in the index.js as well so if you go to the index.js inside this main let me just add the user list for now after that we will add to the appropriate position where we want to add okay currently just to display i'm just heading over here and let me just import that as well okay the component is imported and if i go back you can see that i'm just able to see the header part and where we have defined the first name so let's add the different columns as well and style it out okay so let me just define first everything i need a first name i need last name i need email id and i need actions so first name last name email id and the actions actions is just add it or delete whatever okay all the things are laid out but we need to have the style sheet as well like to have this capital and to be left aligned and this action to be right aligned so let's do that so for this table header let's define the class name we'll just say text to left font medium text as gray 500 everything is uppercase tracking as wide so that all the letters are separated out and i'll just define the padding in both the directions so you can see that it is looking quite good now right so let's add the same thing to the others as well so i'll just copy this paste it here paste it here and here as well the only thing i'll just change is text right so you can see that your header is done now let's go ahead and create the body as well so after table head we need to have the t body and inside this t body we need to have the table row and table data okay for this t body we will define the class name as bg fight and for this td let me just define the class names i need text as left padding in x direction x6 padding in y direction is 4 and white space no wrap i don't want to wrap it and inside this td let me just create a div and inside this div let me just define subway and this div should have class name and i will give text as small text gray s500 okay let's see what is how it is looking you can see that it's looking quite good right so let's add the same thing for the other as well so this td i'll just copy this this is for the last name this is for the email id and the next one for the actions so let me just define shabbir dowdy shabirath gmail.com you can see that it is looking quite good now for the actions we need to have the anchor tags so let's define that so instead of this div i'll define the anchor tag href equals to hash for now after that we will add as well then class name and just define text indigo 600 and when we hover over we'll just change the text indigo to 800 and when we hover over it should be cursor pointer okay and we will give the name as edit so you can see that it's looking quite good now let's add for the delete as well this anchor tag this is delete okay and for this i need to have a text right okay and i need to have the padding as well so let me just give the padding over here that is pxo4 so you can see that as a padding and now this particular row looks good so what we have to do now is we have to fetch the data from the database and we need to loop this particular row and we need to show all the data so let's go ahead and do that before that you can see as this entire header section right body section sorry this entire body section we have to look through so for this particular piece of code we can create a component and we can look through that particular component so let's go ahead and do that what we can do we can create one one component that says it's a user component so i'll just define user.js let's create the component with rfce and here we can define everything so what i'll do from this tr tag to this tr tag i'll just cut from here i'll go to user.js and i'll paste everything here and in this user list here inside t body i can call that user so you can see that it still looks same okay now we need to call the api backend api to fetch all the data so let's do that we'll go to the top here and here let's define the api which we want to call so i'll just define constant user base url that we defined user epibs url that makes more sense right equals to http localhost this is not the one let me just change it should be 8080 slash api slash v1 slash users okay if you go back to our intellij idea if you go to the user controller localhost 8080 slash api slash v1 slash users so this is our api so that's what we have defined here so now we have to use this state to define the state whatever the data that we are going to fetch and we will define the hooks to fetch the data and to save the data in the state so what we will do i'll use the use state snippet to create the state and i'll just define users and by default it is null and i'll also define use state snippet for loading and by default that is also true okay and let me just import the use date as well so let me just import your new state now we need to use the use effect hook to fetch the data so let's create that and just define use effect so once you do that you can see that using the snippet everything is created use effect i'll just import and here what i need to do is i need to fetch the data so let me just first remove this i don't have any dependency now so let me just remove that as well and here i'll just define constant of fetch data equals to this would be an asynchronous function and i'll just define set loading to true and inside try catch i'll define my response constant response equals to await fetch okay i want to fetch the data from the base api that we have defined now let me add the configuration for this also the method would be get and headers content type equals to application slash json so you can see that we have defined the fetch api as well that get the data from this particular api url the method type is get content type is json okay once we get that we'll get the users equals to await response.json and once we get the users we'll set the users to our state and inside this sketch we'll just define console.log errors and after that we'll just define set loading to false because the loading is completed and this particular function is defined so we can call this function here that is the fetch data cool right so till here we would be able to get the data from this method when this particular component loads okay this particular hook will be called this hook has this particular method and it will call this method now what we have to do is whatever the data that we got we have to pass those data to the user component as well so if you go over here that is the body section so we need to define that if it's not loading and so once loading is completed then only we have to show this that's what we have defined now within this user component we have to pass the user as well so whatever the data that we got all the users we have to look through this and we need to call this component that is a user so inside this t body what i'll do i'll just define users.map of user and this will call the user component and this particular user component we need to pass this user object so how we will pass we will pass using the props so we can define whatever the key i want to use in this user.js so in the user.js also i want to use this user and as a prop i can define this user okay so i'm passing this user i'm mapping this user to pass through this user component simple and we also need the key so i'll just define key equals to user dot id because every component should have a key this key would be unique so whatever the primary key that you are using you can just set there for the key and it should be good now in this user component we need to take that prop as well so as an input argument over here we will define that user and this row as well we need to define key to make it unique so i'll just define user dot id simple now all these static data that we have defined we need to change it to use user dot first name let me just copy this information i'll paste here i'll paste here okay this will be last name and this would be email id simple right so let's go back so you can see that there is some error okay cannot read the properties so let's go and fix this so what we will do we will go to the user list and we will add the null check so if there is a users then only go for checking the map so now you can see that i don't have any data so let's check that as well so if we go to the mysql let's connect and i have one data so we should be getting this record okay so let's see what is the error okay you can see that there is an error for the curs policy so crs policy from the back end is not working so we need to add the url in the back end to allow this url and you can see that constantly it is trying to reconnect so we need to fix that as well because this use effect is trying to recall every time so we need to fix that so let's go ahead and fix that so what we have to do is we need to give the dependency so in this user list in this fetch data we need to give the blank dependency this way so it will only call once and if you go to the back end if you go to the controller we need to add the policy that is cors origin sorry cross origin and inside value we need to define http colon localhost colon 3000 okay so we are allowing this particular api to call the services http localhost 3000 let's restart this [Music] and if we go back so here you can see that we are getting the data so our first component is ready right cool edit and delete function are still not working we will add that but let's before that add the functionality to add a user so let's go ahead and do that we'll go back to the vs code and let's go ahead and do that so what i'll do i'll create one more component that says add user dot js and here in this particular component we will define one button and when click on that button a pop-up will appear to save the data so inside this i'll just define class name equals to height of 12 and above class name equals to this should be the container mx auto to make sure it's in the center and margin as well and inside this div i'll just define button and this button says add user and let's define the style also class name equals to rounded bg slat 600 text should be white pxx py2 make sure that we have proper padding and font is semi-bold okay and we are adding this component in the index.js before user list for now okay you can see that we got the button cool right now we need to create the model so let's go ahead and create the model now the model that i'm going to create is using the headless ui so if you go here if you check tail wind css headless ui okay this is the headless ui and all these components are there so what we are going to do is we are going to add as a dependency and we are going to use this dialog model so lets go to the github and let's add this dependency okay you can see that dependency is added if i go to the package.json the headless ui dependency is added so now let's go to the add user and let's add the details so what i'll do i will add the transition here because i need to have a transition i need to animate it okay so it will look cool so i'll add the transition from the headless ui slash react [Music] and you can see that instantly started giving error because in the react it can only have one parent so what i'll do i'll just add the fragment okay so now this fragment is your parent components and this div and this transition are inside that and within this transition we need to add some property i'll just define up here show equals to is open so this is a state that we are going to define and open this as a fragment so now don't worry about anything like how i know all these stuffs i have just gone through the documentation i'll show you how to go through it so if i go back and if i click here you can see that this is a particular model that we want when we click on open dialog this is something that we want so what i did i just went to code and i have just copied all this information and i have make sure that everything looks good and if you want to start from scratch just install from here and this is the dialog that you can use it's very simple okay so you can just copy all the information from here everything is nicely placed over here the documentation is really good so you will be easily able to follow through so now let's go back and let's add our detail so inside this transition i need to add the dialog and this dialog as div and i'll just need to define the class name as well it is fixed insert 0 z index 10 overflow in y direction as auto on close what is the method that we want to call on close that is the close model we are going to define this method okay so don't worry and inside this dialog we can create a div so for this day we will define class name equals to minimum height of screen i'll just give some padding and all the text should be in the center and this div will have a again a transition for child elements so transition dot child and this particular transition.child will have bunch of properties so let me just copy all this property and explain you this just for the transition okay it's very simple you can directly copy from the documentation that i have shown you okay like this particular transition is as fragment the way it was defined over here and all the bunch of the properties how it should appear how the animation should be so within this transition element we need to define our ui so let me just define the div and this d will have class name equals to inline block width of full max width of md padding of 6 margin of 8 in the y direction overflow is hidden so there is no scroll bars text should be left aligned content should be align in middle transition all it should transform background should be white shadow as excel and rounded you can see that there are a bunch of properties and you can see that we are just trying to create everything using the utility class of tv and css so that is the power of tailwind cases you don't have to remember everything all the utility classes are there you just go through it and once you create one application it would be very easy for you to create another application because styling is very easy intelligent css i was not good at css before but with tailwind css i'm just loving to create the ui so let me just go inside this div and let me just create a title so dialog dot title and this title i'll just define add new user so once this is complete you will see that what is what we are creating okay don't worry as h3 class name equals to text large very good because we need quotes text large font should be medium size leading sex text gray 900 okay now let me define one thing before that so i can show you what we are building so let me just define the state because we have defined here that is open is a state so let's define that state use state snippet is open and by default it is false and let me import the use date as well and i'll define couple of methods okay i've just defined two method that is closed model at that time set the state to false open model at that time say the state to true so instead of this i just need to import from react okay so when i click on this add user i need to set this to true okay to show the model so let's do that so on this button add user what i'll define on click open model simple right this method i am calling open model and this particular open model will set the state to true and when the state is true the model will appear so let me just refresh the page add user and you can see that we got the model now we need to build this model we need to create the form okay so let's go ahead and build that so you can see that how easy it is to create ui using the tailwind css and next years so we did till the title now after the title let's create a div again let's define class name this should be flex max width of md and margin auto in the x direction and inside this div let's create one more div and this will have class name margin in y direction and one more div class name height 14 and margin y 4. now let me create a label and this label i'll just say it's first name and let me define the properties for class as well this should be block text gray 600 text should be small and font should be normal and after the label i need to have the input tag as well so the input type equals to text name equals to first name and class name equals to height of 10 width of 96 i'll just define border margin padding okay you can see that we got the first name last name as well similarly we have to add for others as well so let me just copy this this is for first name last name email id first name last name and email id okay you can see that first name last name email id now we need to have the buttons as well so let's create that so after this div let's create another dev that says button so inside this div let's create the button and let me just give the property in the class name same way height equals to 14 margin in y direction is four and space between the two buttons i am giving as space x4 and padding top to four now this button says save but they should have the properties as well so let me just give the properties for that i'll just define class name equals to button should be rounded little bit okay text should be white font should be semi-bold background green of 400 and when we hover over we should change the background color as well so i'll just define bg green off 700 padding in y direction is 2 and padding in x direction is 6. so my button is little bit of little bit bigger so if i see now you can see that i can see the button okay but let's make sure that it's correct this is wrong right padding in x direction is six so now button should come correctly okay you can see that overall is also working padding and everything is correct now we need to have the close button as well so let's create that so just copy this button and make this as a close this should be red this also should be red cool right you can see that button is created and my entire model is also created now i need to make sure that all the values that i add over here that is first name last name email id those values should be bind to one state so whenever we do any change all those values are updated and it is bind to one state and when we want to save all those data we can directly get and we can save to the database cool right so let's do that so we'll go to the top and we'll create one state and the state will be user and we need to give the default value for the state as well so i'll just define a id equals to blank first name equals to blank last name equals to blank and email id also blank okay you can see that i've just defined the state now what we have to do is we have to define this state to our input fields as well so if this is the input field here i have to define what would be the value so value would be user dot first name okay your value would be user dot last name and your value would be value dot email id now you can see that i have bind my input fields to my state now i need to have function so whenever i do any change so those values would be would be updating my state as well so let's create that so i need to create one handle change function so let me just go to the top and create one function so i'll just define constant and i'll change it is taking event and what it will do is let's define constant value equals to event.target.value so whatever the event it is happening in that event object whatever the target is and get the value from that particular target simple now we need to set the user so set user and here what we have to do we have to define e dot not e event dot target dot name okay so whatever the event.target.name is so we have defined that the name is first name so event.target.name we will get as a first name and that first name is nothing but this first name id so your key so that i want to define name equals to whatever the value that i'm getting over here cool right so that's what i have defined now what i want to do extra is whatever the existing values that i have i want to keep those values and i want to update these values so i'll just use the object over here okay i'll just define this way so all the current values all the existing values will be added plus the new values would be updated you can see it's very simple you don't have to much worry about it okay now we need to define this handle function to our input fields okay so if we go here on change we need to handle the handle change event okay and what it will take event and in the handle change we need to define e simple you can see that on change we have to call the handle change so this thing we need to call at every place cool right now what we have to do is we have the button so now we need to call this co function so if i go here on the button i can define one and click function and i can say save user and for this i can define reset cool right we have defined to function for close and save user now we need to handle these two functions we need to create these two functions so let me just go top and let's create these two functions so let's define constant save user equals to async function because we are going to call the api and first thing we have to do is we have to do e dot prevent default okay so we don't want to refresh the page so now here we need to call this save api so whatever the api that we have created right if you go here this was the post mapping to save the user so this api we have to call with the post request and we need to pass the entire user object so here we have to do that so i'll just define constant response equals to await fetch api and inside this fetch api i'll just pass the url so this url i need to get from user list so this is the one now what you can do is if this is common you can create one javascript file and you can add this particular url there and you can export it so you can directly use it okay that's also we can do so let me just add in the add user okay so this is the user api based url i have provided and i need to add the configuration extra object so here i can define method is post and the headers i can define content type as application json and body i can define json.stringify user so whatever the user state is created that i am passing as a body now if response is not okay then a new error something went wrong okay otherwise what i'm doing is constant underscore user whatever the user it is i'm getting that user i'm doing await response.json that's it okay i'm getting the response i save the data so now now let me create the reset method as well so i'll just define constant reset equals to this which will take event as an input e dot prevent default and our save user method also will take the same and what we will do we'll just define set user id equals null first name equals to null last name equals to blank blank on all okay and email id also blank okay so when we reset we are just clearing all the values and after that i'm just defining set is open to false because i want to close the model okay and once i get the user back i'm just calling the reset from here as well okay so it will clear the user data and it will close the model cool right so let's go ahead and see that let me just refresh the page let me just open the add user model and if i click on close you can see that it's closing if i click on add user again if i add detail qqq and there is some error so let's solve that so my this label first name correct value is correct handle change last name handle change email id handle change is my email id correct seems like everything is correct okay here it is okay and here also same okay so this was a mistake now let's go back to the browser refresh it add user qq qqq all things are there let's save and you can see that data is saved now nothing happened in the ui because we have not handled to refresh the state as well but if you go to the database and if you refresh you should be able to see the record right you can see that we are seeing the record now add user is done but what we have to do is we have to refresh this as well so once we save the data okay so let's go ahead and handle that so if i go back to the add user okay once once we save the data right once we save the data we need to update the state of the user list as well so what we will do is instead of calling user list from the index.js right what we will do we will call the user list we will add the user list inside the add user so we can directly pass the state now this is a limitation of props drilling because what we are going to do is we are going to pass a state as a props to the user list now to overcome this type of scenarios we can use these state management tools like redux context api and all those stuffs so if you want those videos then do let me know in the comment section below i'll create the videos on that as well but for now what i'll do i'll just remove this user list from here and i'll add in the add user so once the transition is done here i'll just define user list and what i want to do is i want to pass the prop so i need to have one state as well to handle that particular user so whenever there is a new update in the user so let me just handle that way so here i'm creating one more state use state snippet and here i'll just define response user and this will be the same okay now what i'll do what when when i do save user right so whatever the record that i'm getting back as a response i'll set set user response set response user sorry as this one underscore user okay so my state is updated now this state i will pass as a props to the user list so if i scroll down in the user list i'll pass this as a user equals to response user so in the user list i can take this as a props so if i go to user list i can take this as a prop user now what i'll do i will use this as a dependency to load my data so if i go here this is the use effect that is getting all the data so here i'll define that as a dependency so whenever there is an update in the user that particular field will be updated so if i go back so here you can see that i'm getting the data but if i go back to add user if i add more data that is hhh h h and if i save you can see that it instantly got the data and it reflected here because we had given the dependency and based on the dependency use effect was called invoked and it fetched all the data cool right now we need to handle the delete and edit functionality so let's first go ahead and implement the delete functionality so i'll go back to the user list dot js and in the user list there is a user as well so let me go there and here we have edit and delete buttons so here we need to have an event handler but what we have to do is inside this user list there is a child component that is user and inside the child component component we have these two buttons that is edit and delete so when i delete this i want to change the state of the parent component as well right because i want to delete that particular entry from the parent that is the user list so what i have to do is i have to propagate the props from the child to parent okay so that's what we are going to do because whatever the method that i'm going to create if that particular method if i'm creating in the child component i will not be able to propagate that state to the parent component so that particular method i have to declare in the parent component and i have to pass that as a prop and from the child i can call that method sounds complicated sounds simple whatever let's try to implement it's really simple it's very simple rather than creating a method in the child component you are creating a method in the parent component and you're passing that method to child and telling that okay whenever you want to call this mother you can just call this method simple so let's go back let's declare the events so whenever i want to click on delete i'm just defining on click handler and so it will take the event and it will pass the id as well and i am defining delete user so that is e and user id okay so this delete user i'll be getting as the props okay now if i go back to the user list this user i'll be getting this delete user now i need to create this delete user as well so let's go ahead and create that so here i'll just define constant delete user it's taking two parameters e and id and we'll just do e dot prevent default and i'll do the fetch api and i need to pass the user api base url plus slash plus id because if you go to your api for the delete mapping you can see that you are passing slash users and you are passing the path variable as the id which particular user we want to delete so we are passing that way that base url that is our base url slash id you want to pass now here we'll define what is the method method is delete and then whatever the response would be if we have users what i'm going to do is i'm going to set the user so from my back end that particular record is deleted and when i get the response back i want to remove that record from the ui as well so i want to filter out the data so i'll just use you said users and what i'll do i will take the previous element and look through that and i'll return previous element dot filter users aware user dot id is not equals to id okay so what i'm doing once that record is deleted from the back end you are filtering out the records that you have currently in the ui so you are filtering which of the particular user id is okay so this user id that you are passing that should not exist in the list you are just removing that and you are passing back the list of user sounds simple right it's very simple so if i go back to the browser let me refresh and if i click on delete that particular record should get deleted yo and if i check the database as well i should be able to see only two records cool so my delete functionality is also working fine so my add user is done my get user is done and delete is also completed now we need to go for the edit user functionality when we click on edit we need to open the pop-up model we need to fetch the existing data available in the database populate all the fields and whatever the update you do you have to save the data back so if i check my apis i have one api available to fetch a particular record so if i check this get mapping i can get a particular user based on the id that i provide so i have to call this api i have to give the id particular id to fetch the records populate all the fields in the form and once i click on update i need to call this put mapping to update the entries in the database okay so we need to call two apis over here so let's go ahead and implement that so let's go with the edit functionality now so if i go to the users and here what i have to do is the same way what i did for the delete user i have to do for the added user as well so i just define on click function over here e comma id i need to pass that will take edit user e comma user id okay and this added user also will come as a prop so i'll just define this edit user as well now if i go back to the users list in this user i need to define that edit user equals to edit user and this particular function that i have to create here method okay the same way we did for the delete user so i'm just defining here constant edit user e dot prevent default and what i want to do is i want to get this particular id and i want to pass that id to the component that i'm going to create so for that let me just handle one state so i'll just create one state use state snippet user id and the value i'll pass as null default and when i get edit user i'll just update set user id to id cool right now let's create the edit user component so let me just create a new component edit we'll user.js the component now this added user will need similar things that we did for the add user so if i go to the add user this entire transition it needs so let me just copy this and let me just add to the edit user okay and it will need all this handle change and all those functions so let me just copy that as well so if i go to the add user it will need this reset i don't think so so what i do what i'll do is i'm sure that it will need close model open model handle change so let me just copy this and add those okay and it will also need this states so let me just copy this also let me just import the state cool right and let me just import the use effect as well because we are going to use use effect also so till you're all good right now at this point what i want is i want to get the data from the backend for that particular user for particular id that i'm going to get so for that particular user id i want to call that so how we'll get the user id i'll get the user id as a props so if i go to the users list here is what something id that we have defined so let me just define edit user over here and let me just wrap around with the fragment and in this edit user i can pass user id okay and this user id i can take as a prop and based on this user id i can fetch the data so let's do that so i need to use the use effect okay use effect snippet i don't need all this and so here you can see that i'm getting the entire method over here right as a suggestion this is coming from github copilot you can see that how powerful it is right so if i directly use this i just have to do very minor change but i don't want to do that otherwise you won't be able to learn from here so in this use effect i want to use this user id as a dependency so let me just give that and within this uses effect let me call our method so i'll just define constant fetch data equals to asynchronous method i'll just implement try catch block and within this try let me just define the constant response equals to a weight fetch here i'll just define user base api url plus slash plus user id okay and the method type would we get the headers would be content type application json so at this particular point you have called the fetch data api get api whatever for particular user identities we need to get the response here so constant underscore user equals to await response.json and we need to set the user so let me take one of the user this one right so i need to set that so what i'll do i'll just say set user underscore user and i'll just define set is open to true so once we get the data my model will open and it will set all the values sounds good right so let me just add this detail over here ideally okay and when there is a error let me just lock that error and i need to call this method if there is a user id call fetch data okay now let me create the reset as well so let me just copy from the add user directly so in the reset what i need let me just copy this if i go to the edit user let me just paste that i don't need this i don't want to clear the data i just want to close the model okay and then instead of save user i need the update user so i'll just define update user and i need to have that function constant update user equals to asynchronous function okay cool now we will implement this function as well but before that let's see our data is coming or not so we need to import this transition as well so let's go ahead and do that so let's import transition from headless ui react let's import dialog as well and we need to import transition.child okay and we need to import fragment as well okay what i'll do i'll just use the fragment here and i'll just remove this line so what is error you likely forgot to export your component from the file okay if i go here component is exported if i go to the list okay cool so it was just a refresh issue so you can see that my add user data is coming everything is coming if when i click on edit you can see that my pop is coming and i'm getting the data as well let me just update this information as well so if i go back instead of add new user i'll just do update user okay you can see that i'm getting update user if i close that's fine and i'm getting the all the information okay now i need to handle this save event so let's go ahead and do that so instead of say what i'll do i'll just change the name to update it makes more sense right now let's handle this event that is the update user so first thing we will do is e dot prevent default and if i go to the intellij idea for the update user that's a put mapping and you need to give the id plus you need to give the response body as sorry request body as well so two things we need to provide so let's go ahead and do that so we'll define constant response equals to await fetch data user api base url slash epi and within this we need to pass method equals to put headers equals to content type application json and body equals to json.stringifyuser okay so we have called the method to save the data now we need to check for the response if response is not okay we can throw new errors something went wrong else will get user object equals to await response.json and we'll call the reset method as well cool right this reset function is here we have already defined so it will again do the prevent default and it will set the state to false so my model will be closed now one thing that we have to do over here is if i go to the browser and this particular edit user component you can see it's a different component so when i update the record over here i need to update the state of the user list as well because from the user list that is the parent for edit user we are calling this method so what we have to do is we have to update this state as well okay so that's what we have to do so to update the state we have to get the user back to the parent so what i'll do i'll go to the user list and fetching the data i use if you can see that this use effect so this use effect right to fetch the latest record is dependent on this user this user state so i need a way to update this state so that it will again fetch the latest record so what i'll do to update this state user there is a method that is the set users okay but that is used for something else so what i can do i can add one more dependency over here so let me just define one more state so i'll just define u state and i'll define response user whatever the response that you are going to get back and it is defined as null and here i'll define response user as well as a dependency so whenever there is an update i'll just define this as a user this way that makes more sense okay so whenever there is an update in response user or user it will call the data and it will update the data so now what i'll do as an input parameter as a props i'll pass the response user method set response user okay so this method will update this state in the parent component okay that's what we need so let me take this let me go to the edit user and let's take this as a props okay now this method i will use in the update user once i get the data i will use this method to update the state so the state of the parent is changed then the model is closed it will fetch the data and everything should work perfectly fine so let's go back let's refresh the page let's add the user i'll add the user as ppp so we'll add the last name sp email also ppp now there is no validation currently added but you can always go ahead and add the validation i'm just showing you how everything works here okay so if i save you can see that i'm getting the record if i click on edit i'm getting all the records back now instead of ppp i'll just do ooo and if i update that particular record should get updated you can see that this record is updated and if i want to delete i can delete this record as well so all the functionality is working fine you can see that entire card create read update delete everything is working fine perfectly okay now what we will do is we will add the authentication currently you can see that whoever comes to the application they can access this application but i don't want that i want only authenticated user okay so for that let's implement the next arcgis so what i will do if i go to the next auth okay this is the next.js now this is something that we are going to implement and this is the latest version version 4 okay and if i go to the npm this is something that we have to install so just copy this and go to your vs code and let's add the dependency and dependency is added if i go to the package.json so now you can see that in the package.json my next store dependency is added cool right now we are going to implement this login functionality with facebook you can add multiple providers as well whatever you want you can add all the providers and for all of that you have to create the app in their platform i will show you for the facebook for now okay once the dependency is added for facebook you have to go to the facebook developer okay log into the facebook and go to the my apps and here you can create the app okay creating the app is simple you just have to give the name of the app and the url so if you can see that i have already created one app that is dcb app click on create app and you can see that all the different types are getting so i want the login functionality right so you can see that connect consumer products and permission like facebook log in instagram basic display to your app so this is something what i want so i'll just click on that and click on next i'll give the name as test and create the app you just need my password and you can see that your app is created okay now what you have to do is you have to set up the facebook login so come here and set it up over here okay once you do that this is web that you have to do okay so here you have to give the website so what i will do is i will just give localhost 3000 okay this is what you have to do see you continue continue this is all the information that it is showing how to use everything okay next next and done okay now if you come here if you come to the settings basic settings this is the app id that you need and this is the app secret that you need if you click on show you will get the app secret so this two information that you need that you have to configure in your application so we will we will get this details and after that i will delete this so you can see this information you can see how it is working now we need to configure our next auth.js so you if you go to next or js if we do get started it will tell us how exactly that we have to implement the functionality so you can see we have to add the api route first so this is the way that we have to add the api route for the dynamic route handling okay because next year supports dynamic route handling so we need to create the javascript files according to the route that we have to create so currently you can see inside pages api auth that we have to create so if we go to the vs code currently we have pages slash api so inside this api we need to create a folder that says auth okay and inside this auth we need to create this javascript file so let's copy this and inside this auth folder let's create the javascript file and now we need to copy this let's copy this let's paste this simple as it is okay it's done now currently you can see that it is using github provider but i want facebook provider so i'll just change from get a provider to facebook provider and for that i need to change the provider as well it is from facebook okay the same facebook provider that i have to define here okay and i need to pass the client id and secret id and so you can see that it's taking from the environment variable so i'll show you how to handle that in the development as well but if you are going with production those particular environment variables you will directly define in the environment itself so let me just define this as facebook underscore client underscore id and this also facebook underscore client underscore secret so you can see that my facebook provider is set up now i need to create the environment file as well so what i'll do i need to create one file okay in the root directory create a file with name dot env dot local and inside this and inside this file we have to add our details so if you go your facebook client that's what i have to define your facebook client equals to client id facebook client secret equals to and you have to define one next auth url as well okay and this would be your application url so whatever the application url it is that you have to define okay this is some configuration now for facebook client id if you go to the browser this is your application id this is your client id so define that over here and your app secret so this is your app secret so copy this don't share this with anyone okay i'm just sharing this with you because after this i'm just going to delete the application from facebook so here you can see that the configuration is done now what i have to do is now i have to if you go to the getting started page you can see that everything is given very nicely now you can see that what you have to do you have to go to the underscore app.js and there you have to define your session provider so let's go ahead and do that so if i go to the underscore app.js here i have to define that so here what i'll do i'll just copy this and here i have to import this and i have to copy this information and i need to pass the session as well okay cool so this configuration is also done so all the components are handled with the session provider so that has to be session now you can see what you have to do is from the front end you have to add the different hooks so use session hook is provided so this use session hook you can use to get the session and you can see there is a sign in and sign out also there so if you want to sign in and sign out you have to use this components so let's go ahead and do that so what we will do we will go to the index.js so you will be defining the server side rendering because next js provides server side rendering so what we'll do we have to do over here is when we start our application if we have session available then fine we can go to the application but if you don't have session available then redirect back to the authentication page where we will do the facebook authentication and from the facebook authentication once we get the session back directly inject the session so what i'm doing over here is i want to get the session directly when the page loads itself i want the session directly from the server when the page is loading i don't want that page is loaded and then the session is loaded okay so that's why server side rendering comes into picture so to add the server-side rendering it's very simple you just have to create one a synchronous export function so i'll just define export async function function get server side props and this will take the context as the input parameter and here what we have to do is we have to use the get session so if you see here we have to use the use session okay so i'll just define constant session equals to await get session and this guide session is from the next author react and this next session will take the context as an input okay once we get the session let me make it equal to over here and once we get the session we will return the props so i'll just define return and inside this props session okay and this session whatever i am returning as a props that i will inject here because i am returning as a props so i can inject it here now here i am just defining like if i have a session right if i'm logged in i can call this return otherwise if i don't have a session i want to redirect you to the login page so i'll just check here if there is no session then return login page else return this page now i have not created the login page yet so let me create the login component so i'll just create the login.js rfce okay and here i'll define new bar because i want that navigation bar and after that i want you to have a button that says login okay so for that i'm creating button inside there i'll just create window and inside there i'll create one button so this will have a class name equals to container and i'll just add the horizontal margin as auto and vertical margin is eight so there is a gap from the nav bar for this button and i'll just define the height for container of this button that is h of 12 and this button will say sign in and this button will have a class name as rounded bg blue 600 text as white px of 6 py of 2 font as semi bold okay now this is a sign-in button now when you click on this sign-in it should redirect to the next js authentication so in that next js authentication whatever the authentication provider you have configured all those links would be there and you can log in with any of those so let me just add the on click over here and in this i'll just define sign in and this sign in you can see that it's from the next stop slash react that's it that's done okay now let me just restart the app okay the app is started now if i go to the browser and if i refresh the page there is something missing that is nothing was returned from render this usually means that return statement is missing okay so the issue is that if i go to the index.js i have not imported this login component so let me just import it and so if i go to the app.js okay so you can see that it's in the my app so if i go over here i have not added the return statement i forgot so let's add that okay now this should work and here you can see that i have not logged into my application no so it's showing me sign in function so once i click on sign in you can see that this is the next year's authentication it's asking me to sign in with facebook because i've only configured facebook provider so if i click on facebook it will redirect me to give the authentication details for facebook and once i logged in once i will login it will redirect me back to my application so let me just click on sign in with facebook you can see that it's asking me for authorization okay so i'll just continue as subway so i have redirected back so my application working now okay now i still don't know that i'm logged in or not so once i logged in if there is some information over here that which particular user is logged in then that would be good so let's add that information which particular user is logged in so if i go to the nav bar okay here i can add the information so first of all what i want is i want to get the session so so to get the session we need to use the use session hook so i'll just do use session and i'll just define constant data from session okay and status okay i'm taking these two information and after this p tag what i want is if session is there then create a div inside this div i'll use the image tag to show the image and this image is from the next image okay and alongside that i will also show the p tag where i will show the user logged in so here i'll just define if session is there then dot user dot name and in the image src if session is there then dot user dot image okay now let me add the style for this as well i'll just define class name equals to flex all the items should be center after sm space x of 2 justify end so everything is at the right side and for this paragraph tag text should be white and phone should be bold and for this image what i'll do there are few mandatory properties so let me just add those properties height equals to 30 width equals to 30 layout equals to fixed and i'll just give the title as well click to log out okay and this image i'll make is make it as a clickable so when you click on this i'll just call this sign out function and this sign out is from the next auth react and i'll just define properties as well so it should be rounded full and cursor i'm just defining as pointer okay so i'm just showing the image and the name as well whoever is signed in so if i go back if i refresh you can see that i'm getting the error because in next js you have to add the configuration which particular domains that you are using for a particular image so currently you can see that the domain is this one that is platform dot look aside.fbsbx.com so this is something that we have to configure for our images so let's do that if i go to the next.config.js here in this configuration i need to define the image and inside this image i need to define the domains and this will be the array so here i'll define the value that is the domain i'll just remove all the other thing okay and once you add the configuration you need to restart your server you can see that foundator change in next.config.js restart the server to see the changes in effect so let me just restart the server and if i go back if i refresh voila you can see that i'm getting my name as well and i'm getting my profile picture as well i can go ahead and do all the functionalities okay everything is working fine edit delete all the things now if i click on this image you can see that i've defined that click to log out so once i click on it my session will expire and i'll be logged out of the application and i'll be redirected back to the login page you can see that now i'm redirected back if i sign in again login with facebook and i'm signed in i'm getting all the details okay so you can see that my entire application is been authenticated using the facebook and once i'm authenticated then only i'll be able to login and i'll be able to do all the operations so you can see that this is a full-fledged application so if you want to implement you can go ahead and implement with other functionalities as well and you can share all the details with me i would be love to see all those builds so in this video you can see that we covered a lot of things we covered the back-end application that is a springboard application in that we created the different apis with the help of spring data gpa and the mysql back-end database as well and for the ui we created the application using the next js in that we use the tailwind css to create our ui we also touch around the headless ui to create the different components that are available for tailwind and we also use the next js authentication to authenticate our application using the facebook authentication there are different bunch of providers available if you want you can go ahead and add the different providers as well it's very easy you just have to create the application there if you are using github or twitter create the application get the client id cigarette id configure here and that's it you're good to go so i'll share the code and every details with you i'll share the github link in the description below so you can check that out and you can use this application as well and you can build around on this application hey what's up everyone and welcome to really code buffer in this video we are going to create a facebook clone and to build that we are going to use the following text tech we are going to use the springboot as the backend application and with that we are going to use the spring data gpa to connect our springboard application to the database and for the database we are going to use the mysql and for the front-end part we are going to use the nexgs to build our application to build our front-end ui and to build our entire layout we are going to use the tailwind css we are also going to use the next auth authentication to authenticate our application using the facebook and we are also going to implement the react redux with redux toolkit so we can handle our state easily in our application and this entire application would be completely responsive and all the data would be saved directly to the database so let me show you what we are going to build today and after that we will start building the application so if you see my screen this is the login screen of our application where it is asking for you to log in via facebook so once you click on login next auth comes into picture so whatever the configuration that we have added in our next authentication it will kick in and it will ask you for whatever the providers that you have used for this particular application we have only use facebook so once you click on login it will ask you to log in with facebook so once we sign into facebook it will redirect you to add your facebook credentials and once you add it will redirect back to your application i've already logged into facebook from this browser so once i click on sign in it will directly redirect back to my application so let me just click on sign in with facebook and here you can see that my application is there so you can see it is a complete facebook clone and you can see that there is a facebook logo search bar all the buttons so this is the same profile picture which my facebook has the name is also coming from the facebook and these are the buttons and you can see there is a left sidebar as well and the right sidebar as well and this is completely responsive and you can see all the posts available this all the post you can see i have added you can add the images as well you can add the emojis as well so all these posts are saved to the database using the springboard application so all this thing whatever the data are there we are posting all the data with post requests to springboard application and springboard application is responsible to save all the data to database so i'll show you the demo as well for this let's say welcome to daily code buffer spelling is incorrect let me just correct it and let me just add any photo so if i select this particular photo you can see that this photo will come over here and if you want to remove that photo you can remove that photo and you can add a new image as well suppose i am selecting this image this is already selected but let me just select it again and once you hit enter you can see that it will be directly available in your ui and the same thing will be directly available in your database as well and you can also see that this application is completely responsive we have we have added all the utility classes of the television css to make this responsive so once you reduce the size of a browser you can see all the components will be shifted together shifted closer together and when they are not necessary those will be hidden so if you can see that those are coming closer together and after one point those components will be hidden so you can see that the left bar is hidden now and there is only middle component that is your feed and your right sidebar and after the one size as well the right component right sidebar will also be hidden so you can see that it is also hidden now and there is only one component and you can see that that is also completely responsive and you can see that for your search bar is also smaller now and all the different components that you are seeing in the header that is also now not available you can see now it will come everything so you can see it's completely responsive and you can add all the data and once you click on this image it will be signed out from the application and it will be redirect to your login page and once you log in back again everything is there you can see that all the data is coming so this is what we are going to build today you will be able to learn a lot of things a complete full stack application which includes lot of ui components and lot of backend components as well so grab a cup of your coffee and let's build this application [Music] so now let's create the next js application and start building our facebook loan once we build this structure of it and then when we need the backend service at the time we will go ahead and create this springboard application and create the backend service and will connect both together so let me just go to the directory and create the folder and then we will create the next.js app so let me just go to the terminal cd download documents youtube tutorials so now here let's create the project to create the project to create the next js project what we have to do is we have to tell npx create next step and the name of the application i will say facebook clone and you can see that it started creating the project so we'll wait for it to complete it is completed and it's asking that you can go to this directory and you can use npm render command to start your development server cool right so let's go to this directory cd facebook loan you can see that these are all the files and let me just open this in the vs code okay so this is my entire application and if i just start the server go to the terminal npm run dev and you can see that my server started and it's running on localhost 3000 so if i go to the localhost 3000 this is your basic next year's application when you create the create next step so this is what you will get but we don't need all these things so let's just remove everything and let's build our application and one more thing to note over here is nexus is a framework on top of the react library so the base is react so most of the things we'll be doing with the react only and few of the components we will be using from the next years as well and we are going to use next auth and all the other packages that we are going to download i'll tell you each and everything which we are going to download so let's go back and let's remove everything so what we don't need is if you go to the public directory we need that if you go to the pages directory api this is the api that you can create this is the main app.js file and this is the index.js file this is where everything will be coming from so i don't need this instead of create next step i can tell facebook loan i don't need this class information so i'll just remove this and i don't need anything from the main section as well so let me just remove the main section and i don't need footer section as well so let me just remove that as well and i don't need home.module.css and next image so i'll just remove that as well and i will just remove the home.module.css as well and if i go to the global.css i don't need any styling as well so these all things are removed and if you see now you can see nothing is there all clean and there is one error it says in the main there is a style so let's just remove that as well if i go back to index.js in the main let's remove this as well so all clean this is our blank slate now to create our ui to create the layouts and everything we are going to use the tv in css so let's add the dependency of tailwind css so if you go to the tailwind css let's go here let's go to the installation and let's go to the framework guides and next gs so this project creation we already did so what we need now is to install the tailwind css so let's just copy the commands let's go back and let's open the new terminal and let's hit this commands and you can see that it is installed and you can also see that tailwind.config.js is created and if you go to the package.json in the dev dependencies tailwind and post yes is added now what i need to do is i need to copy this information and i need to add this in the tailwind.config.js so let's go ahead and do that i'll just copy paste this information and i also need to add the styling so all the directives i need to add so let's just copy this and let's go to the global.css and let's add this so once this is done you just need to restart your application all good your television css is configured and you are good to go to create your beautiful ui now we need few more dependencies as well so let's go ahead and add all the dependencies so we are all good to go we can only concentrate on coding part so the other dependency that i need is the react icon so if you just search for react icons okay this is the one that we are going to use and you can see this all different types of icons are available so we are going to add the dependency for that so for the installation this is the one command so let's just copy this command and let's add this dependency so i'll just add this npm install react icon c so if i go to the package.json react icons is added now i need to add the next auth as well so let me just go to the next auth and get started go to the npm this is the one so let me just copy this and let's add that as well so we have just added the next order as well for adding our authentication okay next all this is added now i need the axios library to call my backend apis okay so let me just search for xcos here and npm install x use so let me just copy this and let's add that as well and you can see that x use is also added now the other thing i need is the react redux and redux toolkit so let's go ahead and add that as well react redux npm install react redux so i'll just copy this and i will add that as well react redux is added and i need the redux toolkit as well so let's just add redux toolkit so this is the one at the red redux js toolkit so i'll just copy this and let's add this so you can see that all the dependencies are added we are good to go you can see what we added was we added the react icons to add our icons what icons we want to use then what we did we added the next hot for our authentication purpose we added the axios to fetch our data from the backend api to connect our backend application and then we added the react redux and redux toolkit to manage our state in the react application because it's very tedious to handle the props drilling so we will see how redux will benefit us and how we are saved from the props drilling in react so this is all good now what we have to do is i'll just close everything so yeah what i'll do now is for our react application we'll be creating different components so let me just create a folder that says components and inside this components folder we are going to create all the components so let's first create the header component so inside this components we are going to create the header component i just define header dot js okay and i will create the component using the c raf snippet cool right now if you don't know from where it is coming if you just go to the extensions you have to install bunch of extensions so first is react redux es7 one so the es7 this one es7 plus react redux react native snippets so just install this the next is tailwind css install this extension that will help you to get the intellisense or autocomplete for your tillwind utility classes then you can add the prettier okay this will help you to format your code and you can also add the bracket color this one bracket pair colorizer so it will just change the colors of your bracket for starting and ending so it is easier for you to see what's happening so these are the extensions i've been using and i'm using the vs code dark theme as well so if you are interested you can just download that as well so with that being said let's go to the explorer this is our header component now this particular header component we have to use in our index.js so let's go to index.js and here i will just add the header component and you can see this header is from the components header so we need to import that so you can see that we just imported import header from components header and now if i go to the headers.js what it is header in the divides mansion so if i go back let me just close all these tabs and yeah you can see that we are getting the header so everything basic is working now let's build this so yeah let's build everything we need the div we need the top bar and in the top bar there were three components one was the left side one was the middle side and one was the right side so those three components we will be building those three components will be three different divs all together so inside this dew there will be left component there will be center component and there will be right component and for this due let's add the class names this all class names are the utility class from the tailwind css so you don't have to remember everything it's very easy to understand so what i need is for this do i need the background as white so i'm just adding bg white it will add the background as white and you can just hover over you can see what it is adding you can see that it's adding the background color as rgb two five five two five five two five five okay now i need background as white i need this is a flax i need all the items should be center and i need the padding of two in all the directions i need the shadow of medium size and i need to be at the top okay so it should be at top zero and this should be sticky it should stick to the top of the browser so whatever the header that we are creating that should be sticky and it should be on top of every component so i am adding the index of 50 and also let me just add the height so height is 16. so you can see that nice this 16 height bar is coming and you can see the nice shadow is also coming okay so this is going to be your top bar so now let's add the left component first so let me just do file sorry view word wrap okay so inside this now let's add the left component so this also would be one du and let me just add the class name this should be also flex and minimum width should fit now inside this do i need the logo so let me add the logo logo is from the image tag this image tag you can see is from the next yes so i'll just import the next slash image and for this we need to give this source so we'll just give src equals to i'll just give the url of the facebook logo you can just google it and you can add over here and for this image tag you need to add the height and width so let me just add height equals to 40 and width equals to 40. cool right so let me just go back to my browser and you can see that there is an error what is the error rays it's a invalid source property that's fine what it is really telling is that we need to configure our application to use this domain to get the data for the image so this is the domain upload.wikipedia.org so this particular domain that we have to add in our configuration so if we go back you have to go to the uh sorry next jsconfig and here in the configuration we have to add the host for the images so here i'll just add the images and this images will contain the domains and i will just change this to mean to our domain whatever it was upload.wikipedia.org okay so once you do this you need to restart your server because that's a configuration change you can see that it's also saying that it's a configuration change you need to restart so let me just restart the server and the server is restarted let me just close this file and if i go back refresh the page you can see that i'm getting the image now cool right so my image is coming so now let's build the rest of the things so now beside the image tag we need to have the search bar right so let's add the search bar for that here it will be do again and inside this dev let me add the class names and this class name would be this again it would be flex all the items should be center now what i want is i want inside this div i need to have one icon that is the search bar icon and i want to have the input field as well so let me first add the input field so this input field is of type text and i'll just add the placeholder equals to search facebook okay if you see now you can see that this text box is coming now okay so when we need to make it more ui friendly so let's go ahead and do that but also that we need is we need the search icon so if you go here if you go to the react icons okay if you want any icons you can simply go to the search here you can just say i need search icon so you can see there are a lot of search icons whatever you want whatever it's looking good for you whatever it's feasible for your design as for your complete design you can use anything okay whatever you want to select just click on it and it will be copied and you can directly paste it in your code and you can import that particular files so what i'm going to use is i am going to use the hi outline search so let me just add it over here so this is the hi outline search and i need to import this so i'll just import here import this sorry i need to copy this and this will be from react icons slash high so that's all good now you can see that it's all good the size i've given is 20 and if i go back you can see that the icon is coming cool right now let's add the style for it so let me just add the style for the div i have mentioned here so what i need i need flex item center i need the space as well in the x direction space x of 2 for both my search icon and the input field and i need the padding in x direction of two i need merging left from the facebook icon to two then i need rounded full i need the entire due to be rounded so i'll just add rounded full then i need background color of gray as hundred and then i need text gray of 500 collide all the glasses i have added if i go back you can see that it's looking good now right but we need to hide this as well and if i just change the size that size also we need to handle we need to make it responsive so let's just go back and what i need as tailwind css is mobile first so what i want is this input field i need to add the styling for that so let me just add the class name so what i want when it's a mobile size right this input field i don't want so i'll just make it hidden and then once it hits the lg i need inline flags and i need background as transparent so whatever the background of div it is i need to see that and what i also want is when i focus on it i don't want the blue outline that i'm getting so i'm just telling that outline should be none cool right so let's go back again and you can see that i'm not getting any outline and if i just change the size you can see that the size is changing right now let's add the center part so in the center part we will add again a div for that and this div will have class name and this would be again flex and i'll just define that this should grow because i need the center part to take as much space as possible and just justify all the elements in the center and the margin in the x direction as 2 so inside this div i need another div to add all the different components so this div will contain the class name as flex and all the item should be center and now this div would be for each and individual icons that i want to add so this due will have class name as again flex items center this should be height of 14 px of 4 and when it hits md the px should be of 10 rounded medium in md in the medium over bg gray hundred and the cursor should be pointer okay so this div is created now inside this div i need to have one icon so let me just add the home icon so i just need this icon and i need to add the icon as well here this icon is from the now this one sorry this one so this icon is from the again react icons hi so i just imported this and if i go back you can see that i'm getting this home icon and if i hover over i can see that on hover the background is slightly dark all right and you can see that as i have mentioned flex grow it's taking as much space as possible now let's add the other icons and what i'll do i'll add the class name here and i need to make it in the center so i'll just add mx auto i'll just define the size as well as 25 so now you can see that it's little bit bigger cool right so now let's add other one so let me just copy this do and let's add two three four you can see that i got four home icons but i need to change so the next one i want is the flag icon so i'll just add import ri flag line two react icons alright okay then i need is the video icon so let me just add that as well import from md okay then i need the shop icon import from react ai okay and then i need the game controller icon so import from the i o okay so these are all the icons that i need so let me now just add the icons so after after this hi outline home i need the icon as flag so i'll just add array flag to line and after that i need is the md outline the on demand video after that i need is the ai outline shop and one more i need so let me just copy this i'll just copy this and one more i need is the io game controller outline super cool right so if i go back if i refresh there is some error that is for inbuilt components you likely forgot to export the component from the file it's defined in so there is some issue here so let me just import it correctly let's check all the inputs are correct okay so let me just restart it and it is restarted and if i refresh i'm getting the same error i'm just getting the element type is invalid expecting the string for built-in components okay check your code at header.js line number 44. so if i go to the handler.js line number 44 the io game controller the io game controller from react okay instead of i of 5 let me just add that would be the issue let me just add the size again 225 then class name again let me just add 2 mx auto and this should work yup cool right you can see that now it is working so your center bar is also created and if i just scroll you can see that it's completely responsive as well because we have added the flex grow so it will grow as much as possible and it will try to shrink when we shrink here now what we want is we want to add the right component as well so let's go ahead and do that as well so in the right bar we will add one more dive and in this do we will add the class name equals to i'm sorry your class name equals to flex item center and i need all the things to justify at the end so i'll just define justify and i just want to do the minimum width to fit and i need space in x direction as 2 okay now inside this div i need to add one image one so let me just copy the image from here after that we will change the url so let me just copy this image and after this image what i need i want a paragraph tag and here i should say it's shabbir the name of the user and let's see what it is coming out you can see that my logo is coming in the right direction and name is also coming so let's change the properties for that as well so my p tag should have the classes as well so let me just define class name equals to and what i want is when i am in the mobile i don't want this okay so i'll just make it is hidden and i also show when i have a particular large screen so by default it is hidden and when it hits excel size i just want to display so inline flex the font is semi-bold text as sm and white space no wrap i need padding of three and maximum width of access okay you can see now it's bold and if i change the size you can see that it's hidden okay now after that i need to add the other icons as well so let me go ahead and add those icons so i need first icon that is the grid icon so let me just add that import cg grid from react icon cg then i need ai fill message then i need the ai fill bell and then i need one more that is the md outline expand more so these are the icons that i need now let's add those icons here after the p tag so after the p tag i need is cg menu grid 0 and i will define the size the size of the icon as 20 and then i'll define the classes as well so what i need i can need class name equals to when there's small size right your screen is small in the mobile i don't want those icons so it will be hidden when it hits the large screen i need all those icons so i'll define as inline flex now i need height as 10 width has 10 for that icon background to be gray of 200 text to be gray of 500 or only 600 i need completely rounded so rounded full and i need padding of two i need cursor pointer for that and when i hover over i need to change background gray to 300 simple right so if i check now you can see that this is the grid icon and when i hover over you can see that it's changing the color and it's completely rounded and when i just change the size it will be hidden okay now i need the similar for the other as well so what i'll do i just copy this and i'll add one for fill message bell and one for the expand more so let me just add instead of cg menu grid 0 i need ai fill message then i need ai fill bell and then i need md outline expand more okay now if you can see your complete header is created you can see now all the components are there and if i just change the size you can see that it all the things it got hidden these all components are in the center you can see that search bar is also hidden that entire input input field is hidden only the search icon is visible so you can see it's completely responsive so your header part is done now we will go ahead and implement your left sidebar now for the sidebar let's create the another component so i'll just create the sidebar dot js and here i'll do rfc to create the arrow based functional component and then i'll go to the index.js and inside the main section i will just add this sidebar so ideally what it will be it will be always in the main section as left sidebar then the feed which will contain your create post and all the posts and your right sidebar this will be the components so we will be adding the first left sidebar so i'll just define the sidebar from the component slash sidebar and what i'll do i will just change the entire main section color so i'll just define class name equals to flex and it should be bg gray 100 okay so if i see now you can see that the color is gray and this is white okay now let's go ahead and build this sidebar so if i go to the sidebar dot js what i need is i need this sidebar to be of a particular width when it hits the lg size at the time only i need that to be visible rest all the times i want it to be hidden so when it's a small device or mobile device i don't want that sidebar it is only constant i just want to only concentrate on the main section so i'll just define that way so if i add the class names here i'll just define it should be always hidden and it should be only visible when it hits the lg at the time it should be inline flex so inside this duo i will just define one more div that will be a container that will contain all the items so i'll just define this class name and they should be flex all the items should be center the space between the item should be space x2 padding in y direction three padding in left direction is 4 when you hover over background gray to be 200 and rounded left side as xl okay so only your left side is rounded your right side is not rounded and cursor is pointer okay and your main d we need to define the height and weight because we need those weights so currently you can see that nothing is showing so let's add the image and the contact information so what i'll do i will for now i'll just take the image from here from the header component let me just add in the sidebar okay inside this div i'll just add the image component which will have the source the height width and class name and this image should be rounded full and cursor should be pointer after this image i need the p tag which will have the username so i'll just define shabbir dowdy after currently i'm just adding all the information static but this all the things will be coming from the facebook once we add the login functionality so for this p tag i'll just define the class names class name equals to it should be hidden and when it hit sm i just need inline flags and font should be medium okay if i see you can see that the image is not available so i need to import that so let me just import from the next image now if i refresh you can see that i am able to see so this is the right sidebar now you can see that when i hover over there is no proper padding and there is no minimum size and everything so we need to add that so let's add all the stuffs so here in the main div tag we need to add all those things so we need to add all these type of components in the column so this entire flux has to be flux call so i'll just define this as a flex call padding in y direction is 2 feeding left as 2 so you can see now there is a proper padding now we need to make it right side as also proper so what i'll do maximum width is xl by default and when it hits lg minimum width is of 320 pixels so when we when you want to add any particular values you can add in the square brackets now you can see that there is still issue because i just added the lf instead of lg now it should be proper you can see that proper width is coming now and when i just change the size you can see that it's not visible okay entire sidebar is gone okay cool right now what i want is i want another this due tag i need to stack all the things together i need to i have the another component so let me just add that i'll just add one more div and inside this div i need to add the icon so let me just add one of the icon and this would be the user's icon i want to add so i'll just import here import i'm users icon from react icons i am and inside this div i'll just define i am users and class name equals to height of 8 width of 8 text blue color of 500 sorry 500 okay and after this i need paragraph tag which says users and this paragraph tag will again have a class name and this will be hidden with sm inline flex and font should be medium and this div will have again class name this should be flags all the items should be center space between the two items should be space 2 padding in y direction of 3 padding left s4 the same that we added for the earlier when i hover over background gray of 300 sorry 200 rounded l direction as excel and cursor pointer okay you can see that this is the user coming now but what i need is i want to have multiple okay so instead of creating all this dues multiple i can create the component of it okay so let's create the component for it i can call it a component as a sidebar item so let me just create sidebar item dot js and here what i'll do i'll create a component rfce and whatever was here i'll just copy this ctrl x and go to the sidebar item and i will paste here okay and this sidebar item i will add in the sidebar so here i'll just add the sidebar item and here i can add the props so this props whatever i will add here that can be used in sidebar item because what i need this sidebar item has to be dynamic right so whatever the icon that i pass and whatever the value that i pass that has to be rendered directly i don't want a particular imusers icon so these imusers i can pass from the sidebar gs as the icon and value i can pass as users okay so these are the two props that i'm passing so these two props i can take in the sidebar item i can take as the input props here that this is the icon and the other one is the value okay instead of now i am users i can pass this as a icon and instead of giving users here i can pass it as a value you can see that how awesome this is right if i go to the sidebar and you can see that i should see the same thing right if i refresh also you can see it's same thing so my sidebar component sidebar item is created dynamically now i need to add multiple things here so let me just add the other icons and i can add all the fields so what i need is i need to have a group icon so i'll just import md groups from the react icons md i need shop icon so i'll just define import ai shop icon from react icons ai then i need the md online on demand video then i need this stopwatch so i'll just import from react icons bs then i need the expand more icon as well so all these icons i need so all the information i need to pass from here so what i'll do i'll just duplicate all the things here one for md groups okay then i need for the md on okay then i need for the md i'll expand more okay but before that i need couple of more so instead of users i'll be defining this as a friends and friends groups i need sidebar item and icon as market place and this should be ai outline shop then i need the watch value okay md online on demand video that should be watch after that i need easy stopwatch so let me just add the stopwatch as well now you are seeing that all the things are automatically coming right these are coming from the github co-pilot so i need the bs stopwatch but the value should be memories so you can see that it won't be always perfect what you need but it will give you a lot of information so lot of things you don't have to type everything right and i need expand more and that says see more okay cool all the icons are there all the sidebar items i've added now if i go back you can see that all the things are coming perfectly fine now now don't worry we will be changing few things here that the name and the icon here the image here all the things will be coming from the facebook so don't worry we will be changing all those information but with this all code you can see that your left side sidebar is created and it's also dynamic okay now before we add the implementation of the feed let's add the next js authentication and let's add the authentication for facebook so once we authenticate then only we will be able to login okay so let's implement that first so what we will do i will go to the next auth and getting started so what i want to do is i want to add the authentication i already added the dependencies so we need to add the api routes so now for that we have to create this path so inside the pages api folder we need to add the one more folder auth and inside that we need to create this file so let's create that so here inside this api folder i need to create one more folder that says auth and inside this auth i need to create this file that is the nextdoc.js so let's copy this file name same as it is and create a new file okay and let's copy this content ok now currently you can see this example is for github but we need the facebook provider so what i'll do i'll just change the facebook provider from the facebook and this facebook provider i'll just add here this is the facebook provider and this would be your facebook client id and this would be your facebook client secret okay so these are the two fields that we have to provide and if you want to have another providers you can always go ahead and add more providers so your authentication file is created now you need to add some more fields so what we will do is we need to add the configuration that is the client id and secret id from facebook which we got from the facebook and we need to add in the environment file so you can see that we are getting this value from the process dot and dot facebook client id so ideally when you're working with the production you will be creating the environment variables and there you will be adding these fields but in our local we can create the local environment file and you can add there so let me show you how to do that so for that just create the file in the root directory that says dot env dot local okay now what we will do we will go to the browser will go to the facebook developer login go to my apps and here what you can do is you can create your app you can see i already have one app if you want you can create the app so just click on create click on this consumer that connects consumer products and permission like facebook login instagram basic display to your app so i just want this because i want to login and i want to get the basic information so i just click on consumer i'll click next you can name the app i can say facebook clone and create app i'll just name fb youtube clone create app okay you are not able to use it so what you can do i can just say dummy clone you can give any name okay based on the terms and condition okay now you can see that your app is created what you have to do is now you need to add the facebook login so you need to set up the facebook login so just set up facebook login and go to web and here you need to give your site url so just give the locals 3000 save continue next and here you can see that these are all the information that you can use for configuration so that's all the information so you can just go next next next just it is giving you the information ideally what you have to do is now you need to go to settings go to the basic settings and from here you will get your app id and your app secret so don't share this with anyone okay what you have to do is now you need to use this app ide and app secret so if you go to your vs code and in this environment.local this is the facebook client id equals to facebook client secrets these are the fields that you will give and one more field you have to give is the next auth url equals to the url of your application so these three fields you have to give for a facebook client id you can get the id from here that is the app id and secret you can get from here now i will be deleting this application so you won't be able to use it you can create for your own okay so facebook client id and facebook client secret this information i've added save the file close the file now we need to now we have configured the facebook line id and facebook secret id for our application now we need to tell the next yes that we are going to use this to maintain the session for us so for that we will go to app.js go to app.js and what we will do is we will wrap this component with the session provider and this session provider you will get from import session provider from next stop react so this is the session provider that you have to use and i will give this at the bottom okay and for this session provider we need to pass this session as well so what i'll do i will just pass session equals to page props dot session okay now if i go to the index.js what i have to do is i need to define the server side properties which will get the session from the context and it will set it so if i go to the index.js and at the bottom i can define export async function get server side props this will take the context and let's define constant session equals to await gets session this get session you can see it's from the next dot slash react and this will take the context session object once you log in from the facebook that we are getting from the server side drops from the server side rendering and we will directly inject to our component so once we get the session we will return this session as a props okay so here in this home we will define session now once we get the session here we need to see if we have the session then that's fine you can log into the application you can already are in the application if not if you don't have the session then you need to redirect back to the login page and from that login page you need to login to the application right so i'll just define if not session if you do not have the session then return login component okay we do not have the login component yet but we will define it so you can see that we just defined that if we do not have a session return the login component if we have then the entire application will be rendered simple as it is so now let's create the login component so i'll just define login.js rfce and if i go back to the index.js let's import the login okay now if i go back to login.js i need to add the configuration i need to add the page so what i'll do inside this dev i'll just add the image tag this image tag is from the next slash image and the src source i'll give as the logo of the facebook okay you can just directly copy and paste it so let me just do that and i'll just give the height attribute as 240 width attribute has 240 and i'll give one anchor tag that says class name equals to px of 20 py of 4 because i need a bigger button ok then z index of 10 text to excel cursor as pointer minus mt minus 16 background color blue of 500 background color of blue 500 rounded medium and text as white okay and the text i'll give as login and let's add the class name for our main div as well that this is flex and flex call all the items should be center and all the items should be in the center of the page so margin i'm giving as auto okay now as this is a new domain this domain has to be added in our next config.js let me just add the domain okay and if i go back again to my login.js this is my login.js and now when i click on login i need to sign in so for that what i will do i will just define on click sign in so here you can see that this sign in is from the next dot slash react so once you import this okay and once you click on this button it will be re directly redirect back to the sign in page of the next auth and there whatever the providers that you have defined those providers will be displayed there and with any of the providers you can directly log in for now we have only defined the facebook provider so only login with facebook will come okay simple we added all the next days authentication and everything libraries and everything we just defined that for our entire app.js we have to maintain the session this session will come from the page profit.session and for our index.js file what we did we did the server side rendering and once the login is completed right once the login is completed from the request itself from the context itself we are getting the session back and once we get the session we are injecting that session to our component and we are checking if we do not have session redirect to the login page but if we have the session render our entire application okay now as we have changed the configuration of the next gs we need to restart the server so let me just close the server and start the server again and if i go here if i go to the facebook clone if i refresh there is some issue nothing was returned from the render this usually means a return statement is missing okay so if we go to the app.js yes you can see that this is the issue the return is missing so what we have to do is i have to add this way okay now it should work you can see that we are getting the login page that is if login with facebook so once i click on login you can see that this is the next hot page where whatever the authentication providers that you define all the providers all will come here there is only facebook so we'll just sign in with facebook so currently there is some issue so let me just check that so what we have to do is whatever we have defined in our environment local variables the same thing we have to give in our next auth okay facebook line secret facebook client id okay so this was the huge spelling mistake now if i refresh let me just restart the server login sign into facebook and here you can see that it's asking for the review okay i'll continue as shabbai because this is a dummy clone that we have created and it is asking for the access continuous bear and it is redirected back to our application cool right now with this we will be needing the image that we are using and the name that we are getting okay we can get all those information so let's use those information so what we can do so this type of issue happened right you need to make sure that whatever the values the environment variables that you are using you are using it correctly okay so now we need to get the image and the name from the facebook authentication and that i have to use here as well and your as well so let's use that this is the header so let's go to the header first and here to get the session what we have to use is we have to use the use session hook so you can see that you session is from the next author react so let's import that and what we will get from the use session is constant will get the data from the session okay we are just taking the session data now we get everything from this session so what i can do is i can use this session here so if i go down scroll down in the right side for this image i need to get the image so i'll just remove this and in the src i'll just define if session is there then get the user from that session and image okay and the same thing what i need is here session dot user dot name and i only need the first names what i'll do i'll just do split with space and from that take the zeroth element okay now let's go and see what's happening you can see there's an errors because we need to have this domain to be added so let's go back and add the domain in the next.config.js i'll just add the domain and i just don't need this thing okay domain is add the domain is added as we need to restart it so let's just restart the server server is restarted let's go and refresh the page and voila you can see that it is coming fine we need to do some corrections but it is coming right so let's do that correction so what we need is we need to go back and go to the edit.js and for this image we need to add the class name hidden whatever we have added plus we can do rounded full okay i added the wrong place so that's fine i'll just remove from here and here i'll add the class name equals to rounded full and let's define cursor as pointer cool right you can see that now it is completely working fine okay now what i'll do i'll also do one thing when you click on this image i'll call this sign out functionality so i'll just define sign out and this sign out will be from the next dot slash react okay so you can see that when you click on sign out you'll be signed out of the application and you are back to the login page click on login login with facebook and you are back into your application okay super cool right now the same thing you have to add in your sidebar as well so let's go ahead and do that so i'll go to the sidebar dot js and here also i will take the session so i'll just use session hook your session hook is from the next or react constant data from session and this session i can use in the source i can use this way if session is there then dot user dot image and here as well instead of name i can define if session is there then user dot name okay you can see that it's coming fine right you can see that your authentication is done you are now successfully able to log in with facebook and you're getting all the information from facebook and you are displaying that as well now let's implement the feed in the center part so i'll go back i'll go back to index.js and this is where you need to add your feed so let's add the feed component and just create this feed component feed.js rfce and if i go back to the index.js let's import the feed okay and in the center you should be getting this now let's implement this so inside this feed this is the main deal and here i can define class name equals to flex grow now why flex grow because i need to use the maximum information i need to use the maximum space available because at the end i will be just having the right sidebar okay so this center portion will take the maximum space as it was taking at the above point so we'll be using the flex grow now at screen we will be using because i need to use the maximum screen also available so i'll just define that it's a flex grow it should be screen padding top is six margin right is six overflow in y direction as auto okay so you can see that it's using complete your height and we have also defined that overflow as auto so we can scroll as well now inside this div we need again one day i'll just define the class name equals 2 all the things should be in the center all the components maximum width should be of medium and once you hit the medium maximum weight should be of xl and when you hit large maximum weight should be off to excel okay so we are just defining like what would be the width of a content that will be displayed in this center part okay now within this what you will do is you can have two components that is the create post box component and you will be having all the posts as well okay so these are the two things you will be adding one will be to add the input to add the data and one will be all the posts available so that's so this will be your feed feed box so let's create the create post component so i'll just define create post component so all the things related to create both will be inside this component so let's create the create post component i'll just create a new file create post dot js rfc to create the component go back to the feed.js and import the create post okay now this will be to create the post section so let's go to the create post section if you see here this is something that you need to add your post so let's add that so this is the main deal let's add the class name informations your background should be white rounded md your shadow should be medium all the text should be gray 500 padding in all direction i need y and that's it now inside this do i need another div for that i'll just define classroom equals to flex padding s4 space access to and all the items should be center okay now what so this is the component you can see that this is what we are building now what i need is i need the image here okay my logged in image and and after the image i need the input field what data i want to input so for getting the image what i'll do i'll just go to the header section i'll just copy this image and go back to the create post and i'll add the image here i'll import the image i don't need the unclick functionality and i need the session as well so let me just grab the session as well from here if i scroll up this is the session that i need so let's get that okay let's import the you session as well so i got the image now now after that i need to have the form i'll just define form classroom equals to flex flex 1 and here inside this form i need to have the input field and your input type equals to text here you can see that this is the input type called text coming and this is the image that you are getting here now for input type text i need to define the placeholder so let me just define the placeholder and placeholder i'll define s and i'll just add in the backtick and i'll say what's on your mind dollar i just say session dot user dot name and question mark okay here you can see that it will be coming as what's on your mind shabir dhabi and let's add the class name properties and define all the class clash b rounded full height of 12 rounded full height of 12 flex grow so it will take all the space flex grow so you can see that it took all the space now now i need to remove this highlighting as well so i'll just tell when you focus outline is none okay so you can see that outline is gone now i need to add the font as medium bg gray hundred and padding in x direction is four so you can see that it's looking super cool okay now with this input field with this within this form we need to have a submit button so let me just create the button and this button will be hidden button okay because i don't want to display this button whenever you hit enter we should be able to submit the data so we will be adding the on click functionality also for this now let's add the below functions as well below buttons as well so what i'll do after this do i'll just define one more div and let's define class name equals to flex and within this div i need to add the couple of buttons so i'll just define do and here i need to have couple of icons so let me just import the icons so i just need the video camera icon then i need the photo icon and then i need the emoji smiley as well okay so these are the icons that i need so let me just add all those fields over here inside this view i'll just add the icon and this is what the icon is coming okay and we need to make sure that icon is coming in properly so that's what we have to do so let's add the properties for that let's add this styling for that so what i need inside this div whatever the components that we add we need those components to be spaced evenly so i'll just tell that everything inside this has to be justify evenly and padding in y direction is 2 and for this class name all the things is flex and all the items should be center and padding of 1 space between the two items p61 flex grow and justify center okay you can see that it's coming this way now let's add the properties as well so what i'll do i'll just define size equals to 20 so you can see that it's little bit bigger bigger now i'll just define the class name as well i want this of a text red color it should be text read of 500 okay cool now after this i need to have a p tag that says live video okay and for this p tag let's add the class name as font should be semibold and text should be gray 600 okay now when you hover over it we need to add the background as well so let's add that when you justify center after that when you hover over bg gray and red should be rounded md and over over cursor should be pointer okay you can see that it's coming this way now we need to add the other components similar to it so what i will do is i will just grab this new copy this paste and paste you can see that i need three so now you have three now let's change the information so now instead of high outline video camera i need iomd photos and this should be of green color sorry not this one this should be of green color so let me just do this this should be off green color and the last one i need is the smiley so so this would be bs emoji smiley and this would be of yellow color okay so you can see that it's looking quite good right so you can see that your input field is done but we need to change the information as well so let me just change that instead of live video we need to tell feeling or activity and instead of live video here it should be photo or video to be added feeling activity photo video video when you you can see that it's completely responsive right now we need to add the post as well so whatever the post you do we need to add that as well so let's handle that so what we will do is when we go to the feed now we need to add the post so let's add the post component so this is the post that we need to add so let's create the component that is the post so i'll just create a file post dot js rfc to create the component so here this is the post now there will be multiple posts so we need to have the another component that can be looped through over here when you get the data so what i'll do i will define one more post and that post will be called here okay so let me just create one more post.js post.js to the rfce and if i go to post.js here all the posts should be looped and the post should be called simple so what i'll do i'll for now if i have only one so let me just call post okay and we have imported the post okay so if you go to the post now we need to build this post currently if you see there is some error because we have not imported the post so let's just add that okay so if we go to the feed we need to import the posts okay if we refresh it should come you can see that it's coming here so we need to handle here so let's go to the post inside this post let's go to the post and let's build this post because this will be in the multiples so this is the main container right so i'll just define class name this should be flex and they should be flex call because it will be in the vertical way inside this let's define the div and class name because this should be background white margin top of six rounded medium and padding of four so your this is your container main post now here in this what you need is you need the profile picture the name and the timestamp and then the entire post itself so let's start building this so instead this div we need one more do this class name it should be flex and item center and here i need the image so let me just take the image tag now let's define the class name equals to rounded full width of 10 and height of 10 and i need to give the source as well so what i'll do i'll just go to the header.js and for now i'll just give the logo of the facebook this is for now we will add other details as well later okay don't worry so let me just add in the post.js in the image src src equals to okay you can see that the image is coming now i need the name and the date beside that so after the image i need date and name to be in the vertical so i need to be wrapped in the div so inside this div i need p that says shabir raudi and after that time of post okay we'll just define new date dot get time dot to local string okay you can see that the date is coming now we need to make sure that it's looking good so let's add the style sheet for this so what i'll do for this i'll define class name equals to font medium and for this paragraph tag i'll just define class name equals to text should be very small and text should be gray of 500 so you can see that now it is much more cleaner now i need to give space as well so let's add this space space x of 2 so now there is a space as well now after this i need to add the content of my post and the image if i have any image added so after this div what i need is i need the paragraph tag and here something lorem ipsum okay and here here it is right so i need to add the proper details as well for this so what i'll do i will just give the style for this as well i'll just say class name equals to padding in y direction is 4 it looks much cleaner now after this we need to add the image so after this do let me just add the div tag and just to define if there is any image so i'll just define if any image it will be defined here okay so inside this div tag i'll just define class names and it should be relative and let's define height of 60 and in the medium it should be height of 96 and background of white inside this div we need to have the image tag so i'll just define the image tag offer next.js so this image i close it off src let me just give any image url so i'll just go to the pixels photo copy image address and i'll define here okay and what i need is i need to add this images.pixel.com to the next config as well so let me just add that and i need to restart my server so let me just restart it so you can see that it is coming this way and you can see that it is asking to add the width and height so let's add that so for this image what i will do i will just say layout equals to fill because i need to fill completely okay and i'll just define object fit equals to cover so you can see that it's looking a lot much like a post right you have your image whoever has created the post that will come we will be adding that the name who created the post the time stamp the post content and the image if it it has any now below that there will be buttons to like share and comment something like that right so let's add the footer for that so what we will do we will go ahead and add the footer here so this will be the footer of a post in here let's add the due tag and class name equals to flex items center and here let's create a div class name equals to flex item center and inside this we need the icon and the text so let's add the icon so i need the like icon so that is the thumbs up so i'll just import that import fi thumbs up now don't worry if you don't know which icon it is you just go to your browser react icons and just search with like okay you can see that a lot of things you are getting you can use anything from here okay directly then i need is the comment one then i need is the share button okay so let me just use the first one here inside this div let me just add the button and if you see here it is coming the button so we need to make sure that it looks good so let's add the styling for that so for this let's define the class name equals to height of four okay the button is little bit more bigger and after that we need to have the p tag that says like okay like now for this let me add the class name equals to text as small and when you hit sm take should be base okay now let's add the spacing so spacex of one you can see there is a little bit of space and here once the items are center we'll just justify into center as well justify center background of white and padding of 2 okay you can see that now it is center and here after space x of 1 what we will do over background of gray hundred so once you hover over you can see that you're getting little bit of background but we need to make sure that it's correct so what i'll do i'll just define flex grow it should take the maximum available position justify center padding of two rounded xl and cursor pointer not much okay you can see that now it is looking quite good now we need to add this similar thing for the comment and the share button so let's just copy that information so what i'll do this do i need to make sure that it is three times one for like comment and share okay like comment and share now let's add change the icon type so instead of the f5 thumbs up i need to have the fa regular comment and our eye share button okay now you can see that it's like comment and share now let's change the text as well it's like comment and share so yeah you can see that like comment and share and your middle section is ready you can see that it's completely responsive right super cool right now what we will do is we will create the right sidebar as well so let's go ahead and add the right sidebar as well and then we will do this completely with the springboot implementation so stick around so now let's add the right sidebar so let's go to the index.js sorry not index.js yes index.js and here we need to add the right sidebar and let's add the component so i'll just create the right sidebar dot js rfce we'll go back to the index.js and let's import the component okay and if you go to the page you can see that your right sidebar is coming right so now let's add the right sidebar implementation so i'll go to the right sidebar from here and your right sidebar is also similar to your left sidebar it should not be visible from one point to one point like when the size is very small this right sidebar should not be visible and from the md point that is the medium your right sidebar should be visible and it should have the minimum width as well that it should be of 200 pixels not more than that okay so let's let's implement that so what i will do i'll just remove this and let's add the class name it should be hidden and in the mobile and it should be only visible when it hits md at that time it should be inline flex and this should be flex call because all the components will be laid out together now we are inside this dev let's add another video that says class name equals to flex item center and text should be gray of 500 and this should have p tag that says contacts so if you see the contact is coming right so spelling is incorrect so let's correct it out c-o-n-t-a-c-d-s now this paragraph tag should have class name equals to flex text should be lg font should be semi-bold and flex grow okay now after this paragraph tag there has to be lot of buttons so for that we will be adding the div tag and inside and this for this new tag will be giving it should be flex space x of 1 and p x of 2 so we are just giving a little bit of space between all the components within this and this will contain the icons so let's add the icons which we need so what i need is the video add fill then i need the search icon so i'll just say import and i need the more icon okay so inside this div let me add the icon that is the ri video fill okay you can see that this is the icon now but now what i need is this contact i need at this particular point and rest of the components i need at the right side so we need to justify all those things so let's do that away what i'll do for this div i'll just define class name equals to rounded full padding of two when you hover over background gray off 200 and cursor should be pointer cursor pointer ok you can see that cursor pointer okay now what i need is and in the main div we have defined that it's a flex and flex call we need to define that padding top is of four so you can see that there is a padding on the top and i can say max width of xl and when you hit medium minimum width of 200 pixels you can see that now the width increased right and when you hit large minimum width of 250 pixels so it will be little bit more as well you can see that now it's little bit more from that cool right now what i'll do we just added the one icon so let's add other icon as well so i'll just copy this and i'll add one more and i'll add one more so you can see that there are three icons and it is coming at this particular point now let's change the icon i need video add field and then i need the search icon and then i need the more icon so you can see that search video and more cool right now it's looking really cool this is the contact section and now below that we need the list of contact information so let's add the contacts so let's go ahead and create the component that it says contacts so here define context component and let's create the context component context.gs rfce and if you go here let's go to the right sidebar and let's import the contacts and you can see that this contact is coming here so we need to build all this context this context will have the image of a contact and the name of the person okay so let's build this component now so i'll go to the context and here this div would be again defined class name equals to flex item center and inside this i need the image tag okay now with this context information what we need is the the image and the name so what i'll do i need to have multiple contacts right so these two particular things i'll inject as the properties so here i need to inject two properties that name and src okay so if i go to the right sidebar and here in the contacts i can define that that contacts src equals to whatever the source and the name equals to source image as well i will just give one source image okay if i go back to context this is where we need to build it so let's go ahead and build this contacts all the items are center and then i need to have the image tag so let's add the image tag and this image is from the next slash image and the src equals to src let's define height equals to 40 width equals to 40 class name equals to rounded full and cursor pointer okay and here you can see that it is coming here now we need to add the little bit of padding and everything as well so let's do that so here we will define the periodic space x of 2 and padding in y direction of 2 and padding left of 1 ok it's looking cool now what i'll do i'll just add the whole background as well so when you hover over bg gray of 200 rounded left with excel okay when you hold over you can see that now it's coming correctly now we need to pass the name as well so let's go ahead and add the name so here after the image tag we need to add the paragraph tag and this will be the name so you can see that the name is coming now but what we will do for this name i'll just define class name equals to hidden sm inline flex and text should be small okay it's cool and here what i'll do i'll just define cursor pointer as well so now it's entire cursor pointer right so now if we have multiple of it we can do this way so if i go to the right sidebar and if i just copy this contact information kumar priyanka singh okay you can see that these are all the different contact information now let's change the image as well okay let's copy image address and just copy this information here copy image address copy image address again and voila cool right you can see that it's looking really cool now one more thing that we can add over here is all the contact information should have the status as well like it's either it is online or offline right so to make that it's very easy i'll just show you how to do that what we need to do is we need to have a little green circle which is relative which is absolute to the position of this entire circle okay so if i zoom it okay i will keep this way so we will be able to see it correctly so if i go to the right sidebar now what i'll do is after this paragraph tag i will just add one div and this will be having class name equals to bg green of 500 and the height is of four and width is of four and rounded full okay so if you see the green button is coming over here okay now i'll just say this is the absolute position so here you can see that the absolute position is coming here but what i'll do i will just make sure that this absolute position is to the relative to my entire div so i'll just define that this is the relative position yeah okay now what i'll do i just need to give that i need to have at this particular point so i'll just define that this green should be at the left of phi okay you can see that now it's left of five now i need to do the bottom as well so what i'll do i'll just say that it should be of bottom two so now you can see that it's at the right position now what i need is i need a cut out as well okay here so i'll just define that it's soft border two so you can see that now it's looking really good right now one more thing i need to do is i need to make sure that this green is when the user is online and and can make this as a gray as well when the user is offline so i can pass this status information and i can make this out as a available as a green available as online or available as an offline status for the user so what i'll do i will go to the right sidebar and for each and every contacts i'll just pass one more props that is status equals to online or offline okay so let me just copy this this user is online this user is online this user is offline and this user is online okay three users are online one user is offline and this particular status i can take as the input property here okay and here i can define this way as if status equals to equals to online and and i'll just copy this and paste here okay if status is online show this i'll just copy this and if status equals to offline show this where i'll just change the color from green to gray okay and if i check here now you can see that the first two are online than offline and then online okay you can see that now it's looking really cool right so you can handle this status as well this way and you can see how it is easy to handle this and this is completely responsive you can see that it's completely responsive right now what we will do is we will implement the functionality to handle the post request whatever the post that we will do it will be saved to the database and we will get all the information back here now what we will do is whatever we write over here whatever the information that we have to store as a reference store as a state plus whatever we upload a photo that also we want to store and when you hit enter those information should be wrapped around the form data and that should be sent to the backend application via axios library so let's first create the form data and everything and then we'll create the backend application to receive those data so let's go ahead and do that i'll just come over here in my vs code and i will come to my create post okay so what here i will do is i will create one use refwork user from react and the default value would be null and i will say this as a constant input ref and i will also take one more constant and then input hidden file input equals to use ref which is null so i have taken two reference over here and these two reference i will be using so let me just use this input ref to the input field here so i'll just define this ref equals to input ref okay and for the hidden file input what i'll do is just scroll down here and this entire center portion when you click on this entire center portion i need to handle a click event okay this is not a file but what i want to do is i want to mimic when i click on this i will again click on the hidden input file that i have and that will open the pop-up box to select a file so when i click on this entire md photos that is the entire div right this entire on click i need to handle a click event for this so i'll just create one and click also for this and what i'll do i will also create one input tag here for which type is file and hidden and what i'll do i'll just tell that this only accepts image slash star so it won't allow to upload anything then the image okay because we are only handling the image for now and also we will add the reference as well so reference equals to hidden file input okay so let's handle the handle click event first so what i need is when you click on handle click hidden file input dot current dot click okay this should be clicked so if we check here hidden file input is not defined okay there is a spelling mistake that's why no problem we'll just correct it okay and now when you click this entire section okay that didn't work because we just had some mistake over here this has to be type equals to file here now it should work okay you can see that now the dialog box is coming now when we select any file we need to display the file as well so let's handle that so what we will do we will create one state that will store the file so here i will create one state and here i'll just say this is image to post okay and this would be null in the starting now what i want to do is when you come here when you on your input field right so whenever whenever there is a change right so on change i need to call add image to post so whenever there is a change in this input field that particular image will be stored in this state of state so let me just create one method for that so what i'm doing here constant add image to post and constraint what i'm doing constant reader equals to new file reader and if e dot target dot files of zero then reader dot read as data url and inside this i'll just pass e dot target dot files of zero and reader dot on load equals to once the on load is there set image to post e dot target dot result okay now whatever the file that i have selected that particular file is there in my image to post okay now what i want to do is i'll create one more component here okay so what i want to do is when there is image to post okay whenever the image is set at that time i want to have one view which displays the image so i'll just define inside this div there is an image tag and here the src would be image to post class name equals to height of 10 and object contain and for this due tag i just define class name equals to flex item center px of 4 padding of y of 2 space x sub 4 filter when you hover over change the brightness 210 transition of duration of 150 seconds and cursor s pointer nothing fancy it just when you hover over it will be little bit of brighter and it will take 150 milliseconds to change that okay i'll show you what it is happening so when you select any image you can see that it is coming over here but it's not correctly coming so we need to make sure that it's coming correct okay but here that image will come so in this image src i need to pass this way so it will come the image okay now image is coming now i will add the delete button if i want to delete that image and if i want to select a new image so for delete button let me just add the icon here so let me just import the icon import so here will be the icon that is the ri delete button and let me just give the class name as well your class name equals to height of 8 and when you hover over text should be read of 500 so let me just okay now on this entire day when i click remove image okay so let me just handle this so what i'll do for this constant so whatever i have defined remove image what i'll do here i will just set the image to post as null whatever i have said the image value right i am just changing its value to null that's it so if i see again if i select any image that image will come here when i hover over its red and when i click on it it's gone cool right so you can see that it's really awesome i'm building it second time but still i'm loving this build now when you hit enter this is the entire form right so when you hit enter i need to get that image get this text bind all the together in the form data and then i need to post so let's work on that so so this is the button right so this hidden button when you click i need to do handle submit so let's create this method constant handle submit now what i want e dot first thing is prevent default i don't want to refresh the page that's it the next condition is if input ref dot current dot value is not there right then return don't want to do anything after that i'm just defining constant form data equals to new form data and in this form data i need to add all the fields so what i'll do form data dot append and this will be the key and this will be the value so keys image i can change to file okay so the key is file and the value is image to post so whatever the value was that is the thing image to post so this particular file we will get in the back end as the request parameter okay so let's add the other value so form data dot append input ref dot current dot value and i and i need this as a post not text then form data dot append you can see that the entire method came right but let me just remove this okay append name i'll do here that session dot user dot name okay let me just copy this and this is email and this is email this is profile pic and this is image okay so you can see that your form data is ready all the fields all the things that you needed those are added in the form data now what you can do is you can use axios library and do dot post and here you need to define a url so what i'll do i'll just define a url that i'll be implementing so here let me just define a url i have not created the backend service but let's just define the url constant facebook clone endpoint okay so here we will be defining our url but this we can use now that i will be doing the post to this endpoint i will be passing the form data and headers i'll define which accepts application json okay so this is the post request so now this will be returning the promise so once we get the response back what we can do once we get the promise back i can say input ref dot current dot value equals to blank okay and then what i can do is i can remove the image as well okay and if there is any error you can catch the error and you can console.log the error console.log okay so this much thing that you have done now at this point of time what we are doing when we click on submit the file which we have plus the data that we have plus the other information packing into form data and posting into this facebook clone endpoint that is the springboard application that we are going to create as a form data and then it will return a promise and then it will we will be getting a response data once we get the response data we are clearing the input field here we are clearing the image also and what we are doing is we are doing nothing but what exactly we want when you hit the submit right when you just post the data it should be directly available in your feed right that's what you need so ideally what you would be doing is you will be doing the props drilling you will be passing whatever the value you are getting that dependency you will be passing into your post request like okay whenever there is a change in data just get the data refresh the data and show in the field so show all those values that's what generally we do that's generally the design of a react but when you have a child component inside a child component inside the child component you need to pass the props to all the childs okay so that's the prop dealing so whenever there is a function or a state that's defined in your parent and whenever there is an operation in your child or child of a child to handle that you need to drill down to that particular child you child you need to pass all those properties to that particular component itself which is not ideal we should not we should not be doing that so to handle such kind of thing we need to do this state management in the react there are a lot of things available in for the state management in react there is a context api there is a redux toolkit redux all those stuffs so in this video we are going to handle the state management using the redux so what is redux it's nothing but to handle the state of the entire application so rather than having this state in each and every component you will be having the state at the entire application level okay so you will be having the store consider store as an onion so you have onion that's the entire store of slices so that entire onion have a slice is right you can peel off the slices so those each slices can contain the state of a particular component suppose you have a user management like if you want to maintain the users you want to maintain the post you want to maintain the comments so you can create one comment slice you can create one post slice you can create one slice so these are all the slice which will manage the state of that particular components and all these slice will be handled by the store that is your onion okay so so you create a slice all those slice will be handled by a store you'll be defining a store that store will have slices all your slices will be having the state to manage your particular components okay i hope you are clear this was the simplest way i could explain you so rather than creating the state in each and every individual component we will create a slice we will create a state you can say that outside of your component and you will use that state within your component okay i will show you how to do this it's very simple okay so what we did is we had already added the dependency of react redux and redux toolkit that to dependency we have already added if you go in the package.json you can see that we have already added the dependency of redux js toolkit and react redux so dependency we have already added now what we have to do is we have to create the store that store will bind to the slice and we will be using the slice to manage our state and two important things to consider more on that is whenever you want to get the state you will be using the selector to get the state and whenever you want to update the state back to the slice you will be using the dispatch because you will be dispatching whatever the content you have to the slice so it will update the state and whenever we want that state back we will be using the selector to get the state okay so these are the two concepts that we are going to use so what we will do we will create the store here so inside this public directory what i i'm going to do is i'll be creating one src directory inside the src directory i'll create the app directory and inside this app directory i'll create one file that is the store.js okay this is your onion your entire store and what i'll do is within the src directory i'll create one more folder that says features okay and inside these features i'll create one file that says post slice dot gs this is the slice for our posts are the pose that we are going to create okay so you can see we just created two files that we entirely created our store and we are going to create our slice now in our store we need to configure our store okay so we need to import few things so what i'll do i'll just import configure store from redux.js toolkit okay now what we have to do is we have to export default configure store and inside this store we need to define the reducer your reducer is nothing but your slices okay you will be defining your slices over here okay now your blank store is created this is your default blank store now whatever the slices you create those slices you will define here so now let's go to the post slice and define our slice so here in the store we have defined the configure store now in the post slice we will define create slice okay create slice from redux js toolkit now here we will say export constant and this is a post slice equals to create slice okay now this is your slice now we can define the name of a slice that is the post and you can define the initial state you can you can see that we will be handling the state right so we have to define what would be our initial state so initial state you will be defining as a value and this will be your blank array okay so i just defined that my initial state is the blank array and now i can define the reducers what are reducers reducers are your different actions different events that you are going to perform like add post like save post get all post get a particular post delete post so these are the reducers that you are going to define so whatever the operations you do those you will define in the reducers simple okay so i am defining reducers here and inside this reducer you will define all the different actions so let me just add the first reducer that is the add post so what i want to do is i want to add a post to the database so for that i am defining the add post reducer so ideally this will take this state as the input but if you have some action to perform if you want to pass in a payload as well then at the time you will define the action as well okay simple so it will so this is your reducer your event whatever you can tell it is so you need you just need to remember like whatever you tell whatever you will call it as a event or a dispatcher or a reducer or an action you should be able to grasp that concept like whatever you have to do whatever they perform whatever the operation that you're going to perform that's what you are defining here which will have the state and the action as an input parameter okay and at this point if you want whatever the state you have defined right you can update the state as well and i can define multiple as well so suppose i can define add all post okay i can define this way the implementation part we will take care of it later but this is what the two operations that i have defined now i'll be exporting default as post slice dot reducer okay the entire concept i'm just default exporting now i can define that what can be selected and what can be the actions so you can see these are the two actions that i have defined that is the add post and add all posts so i need to export so i can use it in the other components so what i'll do i just export export constant add post add all post equals to post slice dot actions okay so i am just exporting the actions which i have defined that is the add post and add all post now i need to have a way to export the state as well so that also i'll just define export select post i'm giving the name for it equals to it will take this state as the input and it will pass that state which state this post state dot value okay so it will be state dot post dot value and here it will be constant cool right you can see that three things i have exported i have exported the reducer as a default export i have exported the action as well so whatever the actions that you have defined i have exported that so i can use in the components and i have also exported this state as well so initial state whatever it is i have defined this is where i am going to store all the values so i have exported that as well okay now whatever the reducer i have created i can go ahead to the store.js and i can import it i can use it so here in the reducers i can say this is a post reducer and post reducer now i need to give this name as an import so i'll just do import post reducer from as this is the default import right it should be from the feature slash post slice sorry it would be double dots because in the it's in the outer directory right so you can see that i just created the post i just defined the name of the slice i just defined the initial state for this slice i just added the actions as well what are the actions it's going to perform and i also added the export as well like it's exporting the reducer it's exporting the state and it is exporting the actions and whatever the reducer is defined i just define that reducer in my store as well so this is all the configuration for your redux toolkit now if i go back to my create post at this particular point when you get the response back right so when you get this response back whatever the data that you got you need to put the data in your state so your state is here in the post slice here okay so here you need to put the data so to putting the data we already seen that to putting the data you need to dispatch the data okay with the actions so what we will do is we will dispatch the data which data will dispatch will dispatch to this add post okay so if we go back to create post we need to have the dispatcher so let's get the dispatcher so i'll just define constant dispatch equals to use dispatch this is the hook okay you can see that use dispatch is from the react redux simple now once you handle it right once you got the response back what you will do is before removing the image you will dispatch it what you will dispatch you will dispatch add post add post you can see that ad post is coming from the post slice you need to import that as well so i'm just doing add post and what you need to pass in the add post is response data dot data so this is your actions okay so you will get whatever the plo that you pass it will come as an action over here and what i need is once i get the data here once this is called that data i need to add in this state so i just define state dot value dot push actions dot payload simple so my state is updated okay you can see that it's very simple it's just complex to understand it first we did nothing to implement redux it's very easy just create your store create your slice and use it wherever you want you can create how many slides you want it's very easy and you can click and how many slides you have created you can call all those slides to a particular component and you can dispatch any events to any of the slices all you can do over here okay you are not bound to now passing the props to your children to children or two children okay now you're not bound to that it's very easy to implement now now what we will do you can see that now entire ui component you can see that is done now you have to handle the submit request so now you need to create your backend application so let's go ahead and create our backend application so what we will do i will just go to the browser and you can see that there is an error so let's handle that what it is react leaders context value please ensure the component is wrapped in a provider yes that's one more thing that we forgot to add so let's wrap our entire component to a provider sorry i forgot to tell you that so what i need is your entire app.js right so if i go to the app.js we need to wrap our entire component to the store so whatever the store that we have created so what we will do inside the session provider i'll just say provider and this provider you can see it's from the react redux and we will wrap this into the provider now this provider will need a store so i'll just define store equals to store and we need to import the store as well so here we will define import store from public folder slash src folder slash app slash store okay from this store i have taken the store and i have rubbed my all the components to this provider which is store and entire this provider has been route with my session provider cool now if i go back you can see that my application is working your react redux is configured correctly now now we need to handle this submit functionality so that we need to create the backend application for that let's go to the spring initializer so i'll just say start.spring.io and here let's create com dot daily codebuffer artifact as facebook clone service and inside the package name i'll just say facebook service or facebook loan that will be better okay my packaging is jar jar version is 11 and let's add the dependency i'll add the web dependency and then i will add the lumbar dependency i'll add the gpa dependency my sequel dependency so web lombok gpa and mysql i think these are all good so let's generate the project and open in intellij idea so let's generate the project so i'll go to the intellij idea and open the project documents youtube tutorial facebook loan service open yes it was the project and here you can see that your project is open okay now here we need to create all the different packages we need to create all the controllers surveys entities model repositories the application.properties configuration and also we need to create the schema so let's do this so we'll go to the application.properties first we'll go to the src main resources application properties and here we need to add the properties to handle the files that we are going to upload and we also have to handle the database properties so first let's handle the file properties so first property that i'm adding here is the spring.sublet.multipart.enableequal to true this will enable the multipart file handling in our application and this will handle the different file sizes so you can see that maximum file size is 200 mb and maximum request size is 215 mb and after 2 kb it will start writing the file to the disk so this property will help us to upload the files now we need to add the configuration for our database so this is the configuration for our database where spring.datasource.url we are using as jdbc mysql localhost 3306. this is my local server and the schema name that we are going to use is the facebook db and the other properties that we have defined for the database user my username and password is root and root and the dialect that i have used is the mysql in odb dialect and the hibernate dot ddl auto i have defined as update so whenever we do any modification in our entity those will be updated to the database now this facebook db this schema that we have to create so let's go to the mysql and here let's create the new schema create schema and let's define the schema that is the facebook db let's apply the changes and done so you can see that your schema is created now we can directly connect here now let's create the different packages so inside this let's create the controller package entity package for our entity repository package for our repository service package model package okay controller entity model repository and service now let's create the entity so right click on new create new java class and i'll just say as a post entity and this will be your interface nope this will be your class and to annotate we need to do entity to make this as an entity okay now bunch of other notations we'll just define table annotation and the name of a table so name of the table would be posts and we will use the lombok to add the data setters data annotation we'll add the builder to add the builder pattern add the rednecks constructor to have the default constructor and at the right all are constructed to have the constructor with all the arguments now let's add the fields so it will have the field that is the private string id private string post private string name private string email private string image private string profile picture private string timestamp that's it now for this entity we need to have a primary key so let's define the primary key with other idea notation and we will do the generation value as well so how this particular primary key will be generated so in the generated value we will define as generator equals to uuid now we need to define the generator so we'll just define this is a as a generic generator and the name we will define as a uuid and what would be the strategy so the strategy would be uuid too okay now one more thing you will define is your post so your post may contain lot of contents right lot of characters so by default is 255 characters but i need a blob so i'll just define as a lob so i can store any number of data so i'll just define lob and the image also i will save as a b64 character so that also i'll define as a lob okay so your post entity is created which will create a table post so for this post entity let's create the repository so i'll just define a class that says post entity repository post entity depository and which is an interface this interface will extends gpa repository and this gpa repository is of type post entity and the ids of type string okay and we need to define annotate without the rate repository so your repository is created now let's create the service so i just define the java class that says post service this is the interface and i'll create one more implementation of this post service that is the post service impl this is a class which implements post service and this is your service layer so annotate with address service and we need to have a controller as well so let's create the java class that says host controller annotate with rest controller and define the request mapping as well so here the request mapping i'm defining is slash api slash version one slash post now as we are going to call from the ui application we need to handle the cross origin as well so i'll just define cross origin and value should be the url of your application your front-end application so front-end application url is localhost colon 3000 so i'll just paste it over here and i'll just remove this okay now your controller will need the object of a service so let's define this private post service and we need to have the constructor injection for this and for your service impl you need the object of your repository so let's do that private host repository host entity repository okay and let's create the constructor for this as well so your structure is ready okay now we need to implement the save post functionality whenever you click on save post your data will be saved to your database and you need to also have one method which will fetch all the data okay so let's do that so let's go to the post controller and here we will define a method that is the public and this will return a post so we need to have a response data model also to be created so let's create that first let's create the model for it so in the model package let's create the java class that says post and here we will define annotate with other rate data for lumbar for getter setters to have a builder pattern to have the knowledge constructor and to have the all arcs constructor with all the fields now here what details we need is if you go to the post entity i need id i need post name email id i need image profile pic timestamp and i need one private string file as well okay this is the extra fill that i have added okay so your post is created now let's go to the controller back and here let's import the post so public post and add post is the method name and this will be the post mapping okay now as we already saw that from here from the create post we are getting all the data as the request parameter we are adding all the data in the form body so we need to get all the request parameter now to get all the request parameters separately it's tedious so what i'll do i will take the map of a request parameter which will have this key and value as the type okay so if we go back here i'll just define the request parameter and this request param would be of type map of type string and string and this is request params i'll just import the maps here and request parents be capital okay now here i can take all the values so i can say string str post equals to request params dot get post let me just copy all the things one for email id one for name one for file one for profile picture okay so i'll just define this is for email let's copy this here this is for name this is for file that we have uploaded and this is for profile picture so once you got all these values you can create the object of a post so here i'll just define post post equals to post dot builder dot build and here i can define all the fields dot file is file dot name is name dot email is email dot post is str post dot profile pic is profile pic dot timestamp is new date dot tostring and dot build okay now once this post is created we will do post equals to post service dot add post and we will pass this post this ad post we need to create but at the end we will do return post so you can see that we got all the values from the request parameter we created the object of a post and we are passing that post to our post series dot add post method let's create this method create method add post in post service yes let's implement this method as well implement method ok and if you go to the service now this is what we can implement now let's add the try crash block try catch exception e okay and here i need the object of a post entity so i'll just define post entity post entity equals to new post entity and i'll copy all the properties so i'll just do bin utils dot copy properties from post to post entity now we need to get the file as well so if and only if i upload the file then only i need to save the file otherwise i don't need to save the file okay so what i'll do i'll just say if post dot get file not equals to null and not of post dot get file dot equals ignore case with null string okay then post entity dot set image to post dot get file else post entity dot set image as null okay once the image is available then only set that image and get that image from the file otherwise set as null once you get this just to post entity dot post entity repository dot save post entity okay save the data now what i need is i need to set some value post dot set id because now id is generated and it's there in the post entity so i need that id so i'll just take from the post entity post entity dot get id okay now i need the file as well so post dot set file equals to null and post dot set image equals to post entity target image you can see that cool we set the value to the database and we updated the value of our return request as well now if there is any error we can define throw new exception not save post and your return post now you can see that there is an exception add exception to method signature yes okay and if you go to the post controller here also you need to add the exception so you can see that the method is created at post and at the end it will return the post as well now let's create a method to get all the list of post okay because that also we need so let's do that what we will do we will create a method public list of post get post and this will be get mapping and here it is simple return post service dot get post let's create this method because this method is not available yet so let's create a method and implement the method as well so let's implement this method okay now here we need to get the list of post but from the database will be getting the list of post entity so first let's get the list of post entity so i'll just define list of post entity post entities equals to post entity repository dot find all okay you got all the data now now what i need is i need to convert so for that i'll just define list of post posts equals to new era list and here return posts now from here and here we need to have the post so i'll just define post equals to post entities dot stream dot map and here i'll get a particular post entity and here i can define post dot builder dot build and here i can define all the things dot id i can get from the post entity dot get id dot time stamp post entity dot get timestamp dot email post entity dot get email dot name post entity dot get name dot post post entity dot get post dot image post entity dot get image dot profile pic post entity dot get profile pic and once you build after that dot collect collectors dot to list super cool right you can see that your entire method is completed and your entire implementation of your backend is completed so once you start your server so let's start the server you can see that your server is started right so if you go and check your database your table should be created okay you can see that your table is created and it is empty for now now we can call from the front end so now let's implement that now as our back-end is done we need to get the url of a back-end and we have to assign here that is in the create post so if you come here this is where we have defined the facebook clone endpoint so here we have to define that endpoint and the end point is this one that is the http localhost 8080 slash v1 slash post so if you go here you can see that this is what we have defined if you go to the controller this is localhost 8080 this is where this is the port in which my application is running slash epi slash v1 slash post okay so i've just defined that and once i get the data right once i get the response back i am dispatching that to my state that we have defined okay so if we go back if we refresh here what we have to do is we can add the post here and after that whatever the data is coming here this also has to be getting the data from that so let's handle that as well so this entire post is right we need to create it dynamic because your ad post is now completely done we just have to test it out before that let's implement this so if we go to the post here so let's go back so if you go to the posts here here we need to take everything so here what we will do we will use constant dispatch equals to use dispatch and here we will also use the constant posts equals to use selector and the use selector we will define as select post so what we are doing here is using the use selector hook we are selecting the state that we have defined in the splice so whatever the state we have defined here and that state we have exported as a select post from here that is the select that is the state.post.value that is the state.post.value that's the initial state that we have exported that we are using with the help of select post export so if we go back here in the post that's what we are getting here okay and and here in this return statement what we are doing is we will just define div tag here and inside this dev will define our post and whatever the post that we have so we will just define post dot map okay so we are just mapping we are just looping through the entire all the posts available and we are creating this post now what we will do we will just pass post here as the props here and we will also define the key so key would be post dot id host dot id okay now you can see that whatever the data is available in the post in the state that only we are going to get so whatever we added that only will get but when you start the application whatever the data that is already available in the database that functionality we have still not implemented that we will do we just created the api for it so first let's complete this post section so if we go to the post we will be getting this post as the props here okay and this div will have the again key equals to post dot id and the image section what we will do is instead of src that we have defined here we will just say post dot profile pic so whatever the profile picture for the user that will be and instead of shabir daodi it will be the post dot name and instead of date it will be post dot timestamp and instead of static content here it will be post dot post and here inside this image instead of this url it will be post dot image now this entire div tag it will be only visible when there is a image for a post so we need to handle that as well so we will just define if post dot image not equals to null at that time define this okay so when when the post dot image is not null at the time only we will be able to see the image otherwise we won't be able to see okay you can see that this is complete now now if i go back you can see that there are no post available so if i just say hi you can see that i am getting high and i'm getting the image and everything here now if i say hello welcome to daily code buffer and if i add the image let me just add this image open and you can see that this image is coming here if i want i can delete and i can add a new image but let me just add it and you can see that i am getting this image and it's completely fine right completely working fine now couple of things there is a scroll bar coming that scroll bar we will remove okay that is one thing now the other thing you can see that whatever the data i'm adding that particular data is coming after that so suppose if i add yo you can see that you is coming at the end i need at the top because it should come as a latest post right the other thing is if i refresh it you can see there is no data there is a data in the database already but i'm not getting so when i refresh the page when the page is loaded i need to get all the data from the database and i need to and to display the data that's what i want to do so three things that we are going to implement now so let's go to post again and first thing is all the post should come at the top whatever the new post that i'm adding so if i go to the post dot slice instead of push i'll do and shift and shift will add the data at the starting of the array okay that's the basic javascript now what i'll do i will go to the posts and here i will use the use effect hook to get all the post for the first time okay then i already have the post so i don't worry about anything later so let me just use use effect here and what i'll do and i will add the empty array okay so there is a empty dependency so it will be only called once here and inside this use effect i will add the constant fetch data method that is this and here i will just add constant response equals to xcos dot get and here i need to define the url so what i'll do i'll just go to the create post and i will just copy this i'll go to the post again i will just define this year and in this get i'll just define facebook clone endpoint and dot then whatever the response i'm getting that response i need to dispatch so what i'll do i will dispatch that response and i'll dispatch to add all post okay so i'm getting the list of posts now so that i want to dispatch and i'll pass response dot data okay so whatever the data i'm getting for the first time i'm dispatching all those data to my state now if you go to your state that is your post slice rice you already have a method to add one post that you are using add shift to add a restarting but now when you have the multiple the list of posts that you are going to get at starting what you will do you will do the same thing state dot value dot push action dot payload okay but you will distract the arrow here okay this way so your entire array it will be converted to all the different components all the different objects and those objects will be pushed to your array does this make sense this is a simple javascript okay nothing fancier now if i go back if i refresh and i'm not getting the data do you know why it's simple because you created the use effect you created the fajr function but you didn't call so once this is defined you need to call that so this is what you will do once you do this once you go back you can see that you are getting all the data okay and once you add the new data hello hello and let me add the new image as well okay you can see that i am getting new images if i refresh it you can see that i am getting all the data now let's handle this scroll bar so for this scroll bar what we are going to do is we are going to configure our tailwind config so for that you will go to your global css okay so here if you go to your global css and here we will define few things so here we will define the property that is layer utilities and here we will define dot no scroll bar this is for webkit scroll bar web kit scroll bar and for that display none okay and now this is for other browsers that are i your edge so for that we will just do no scroll bar ms overflow style none and scroll bar width equals to none okay you can see that we define these properties and for that we define the class that is the no scroll bar this is the class for that okay and you can see you are getting scroll bar at where you are getting scroll bar at the entire feed component so you need to go to your feed component and this is your due so for your if you define your no scroll bar and if you go back you can see that you are not getting a scroll bar but you are able to scroll up right you can see that your entire application is working your entire ui is working it's completely responsive you can see that and if you want you can just log out as well you just log out to the application if you want you can directly log in log in with facebook and once you're logged in you will get all the data you can see that all your data you are getting you can use anything i i hello you can see that is very responsive all the data has been added and one thing also you notice that you are only able to upload images okay for others you can see you won't be able to select only because we have defined that just images are allowed for now nyc and i can define you can see that all the emojis and everything is working right so here you can see that we did a lot of things we created a complete ui and we also created a complete backend as well so there's a complete full stack application we built and how your front end and back end reacts together and how they work together that's what we have learned in this complete tutorial so this complete facebook clone was inspired by the sunny sangha who also have a channel on react.js he creates a lot of different builds on react.js netjs and all those things this was inspired by him he created the same thing using the firebase and next auth and i have done using the spring boot so if you are interested to check that out i will add the link in the description below send some love to him as well he's creating a lot of good content so if you enjoyed this tutorial give us a thumbs up and subscribe to my channel for the upcoming videos and don't forget to join my channel if you are interested and if you want to support me i'll be creating a lot of new tutorials and if you want anything then do let me know in the comment section below what kind of tutorials or what kind of topics that you are interested i will create those as well and if you want to know more about how to deploy this application to kubernetes cluster and to learn kubernetes and to create a ci cd pipeline and to deploy to gks that is the google kubernetes service then these are the videos that you can check that out so i'll see you in the next video till then happy coding bye