Full Stack web application using Spring Boot and React | REST API | MySQL | React Hooks

hey guys what's up welcome back to the brand new video of building a full stack application using spring boot and react so by the end of this video you will be able to make this application so if i just type some name here student name and some address here and if i just click on submit and refresh my application so you can see here these data are instantly coming into our application so this data are coming from my database if i just go to the mysql database here and just go to this spring card demo and student table so you can see here this data are stored in this table and if i just go to my intellij here you can see this backend application is running on port 8080 and if i just go to the vs code here you can see this react application is running on port 3000 so talking about the prerequisite to follow this course you need to have installed node.js and java 11 into your system so if you don't know how to install that or if you have an install so i've already got two videos on that and you have to install mysql database as well and talking about the ide we will be using the intellij here so if you are comfortable with using a spin tool suit or eclipse or any other id you you can go with that as well and for react application we will be using the vs code as our ide so you if you're comfortable with webstrum or other id you can go with that as well and for testing api we will be using the postman and for design we will be using the material ui so before that if you are new here be sure to subscribe and click on the bell icon so that you will get the newer updates so without further ado with full excitement let's get started so here we will be creating all the packages classes and interfaces required for building the spring boot application so for that quickly go to your browser and the search for spring boot initializer and just go to this first link from start.spring.io and let me keep this default maven project java language and let me keep this snapshot default and you can give some group name like urgent course or your name and the artifact id may be student system and you can give some description here full stack application using spring boot and react and i have got the 11 version of java so if you have 8 or 16 so you can choose accordingly so i will be keeping this default here as well and we need to add some dependencies here so for that just type string wave and we will be using the mysql so just add the mysql driver as well and jpa for databases and all the stuffs so this will be enough i guess so if we require all the dependencies we will be adding in between the videos and just click on this generate so this will basically generate the jar file so just save in your preferred location i will be saving in my desktop and click on save and let me close this one and let me extract it here so just right click and let me extract all and click on extract so this will extract the spring boot application and now let me open my intellij so if you have got other id sts or eclipse so you can use that as well so for this video i will be using the intelligent so if you don't know how to install intellij and run this i've already got one video so you can check it out there and just click on open okay let me go to my desktop here and let me just choose this student system and click ok so this will load our application and just click on this import so this will import the maven so this might take some time if you are doing it for the first time so if you have got multiple java versions so you can see here it's showing the jdk 16. so i want to change this java version into 11. so for that just click on this file and this could click on this project structure and instead of the 16 i want to choose the 11 so if you want to switch between the multiple java version i have already got one video you can check out on the description and click on apply so this will change the jdk version as well and let me click ok so now i want to create all the packages so let's click on this student system and source and main and in java and inside this package student system we want to create some packages and the first package is model so this model package is basically used to create all the entities and greater setters and also the constructor as well just type student and click enter so this will create the student class here and it's saying safe mode limited functionality okay let me click on cross project and click on trust project and also i want to create one more package and it's repository so just write repo jittery and this package is basically for jp implementation so just right click and click on new java class and let me create one interface and let me call it student repo jittery and click enter so this will basically create the interface student repository and also we will be creating the other package and it's controller let me just type controller so this controller is basically for mapping all the http methods we will be implementing gate post and whatever the cloud operation we require so just type student controller and click enter so this will create the student controller class also we want to create one new package and let me call it service and inside the service we want to create one interface and let me call it student service and also we will be creating one class as well and which will be the student service implementation so these are the packages and class we will be using for creating the backend application so now once we create all the packages so we will start writing the code for model package before that i would like to mention that i will put all my codes inside this youtube origin codes github account so you can just go to this account and i will also put the link into the description just go to this repository and inside here you can see this fully stack app just go inside here and click on source click on main and click on this java and you can see all the packages here so you can go through every packages to see the codes and if you get some error you can correct from there as well so now let's start writing for this model class so here we need to annotate this class with entity annotation and we will write some attributes here so private string so before that if you want to increase the font size of this you can just go to this file and click on setting inside editor you can see the font here and you just need to increase this size okay i will put something like 16 and if i click on apply and click ok so this will increase our font size as well so now let's start writing the code and let me call it private int id and private string name and private string address so we need to annotate this id with id annotation so this will basically make it the primary key and also the generated value and the strategy generation type identity so this will make the id auto incremented as well so now we need to create the constructor so for intellij you can just use alt and insert so this will basically give you the shortcut for creating all this constructor get a setup so just click alt and insert and just select this constructor and let me select none and also for getting the get rent setter again click alt insert or also you can just right click and here you can see the generate as well so just click on this generate and just click on get rent setter and select all the fields and click ok so this will generate all the get resetters required for this model class so now we also want to create the gpa repository here so once we add the code for this motor class we will be writing for this repository here and we just need to extend this with let me write extends and just write jpa repository and we just need to give the name of the moral class and its student and the type of the primary key so it's integer so we have given the primary key as id and the data type is integer so we need to write the integer here and also we need to annotate this with the repository annotation so after writing the model and repository so we will be connecting our springboot application with mysql database so for that we have to create one database so just open your jam control panel and just start this apache and mysql so let me go to the admin panel so here i will be creating a new database and let me call it will stack and just click on this create so this will create the fully stack database now what we need to do is we need to configure the springboot application for connecting our mysql database so just go to this resources folder here and inside there you can find the application.properties so here in this application that properties file we need to give the configuration so just type configuration and we need to write spinning dot gpa dot hibernate dot ddl auto equals to update and just type spring dot data source dot url equals to j d bc and column mysql localhost and the port is 3306 and the database name is fully stack which we have just created so it's not local it's a localhost and now we just need to give the username so it's ping dot data source dot username so i've got the default username and also the spring dot data source dot password so i have also got the default password and it's empty so we didn't need to provide anything here and now we need to just write the spring dot data source dot driver so we need to get the driver class name driver hyphen class and name equals to com dot mysql dot cj dot jdbc and driver so now if i just go to this student system application and if i right click here and click on this run so this will basically run our application so you can see here tomcat started at port 8080 and the application has been started and now if i just go to the mysql here and click on this full stack and inside here you can see this student table so we haven't created this stream table so the springboot application has automatically created this table and if i just go inside this table you can see id address and name so these attributes are automatically created as the table columns by the hibernate so now once we connect the spring with application with the database so we will be writing a service and controller for saving the data into the database so for that just go to this service and inside here the service student service is here and we just need to write the methods here so for that just type public and student and just type the save student and it's a method and just write student and student so we will be implementing this save student in the student service implementation so here we just need to write the implements and student service and down here if you just type control o so this will show all the override methods and just choose this save student and also we need to auto wire the repository here so just for that just type the auto wire annotation auto double ird auto wired and just type the private and student repository and just type the student repository so which will basically inject the student repository into our service class so now what i need to do is i need to write the method to save here so let's type student repository and dot save and students so now once we write the service we need to just go to the student controller here inside the controller package and we just need to annotate this with racecontroller so that it will just get the response body and controller at the same time and also we will be giving the request mapping and this is the first part so we need to give the student path every time so now we will be injecting the student service here so for that just type the auto wired and just type the private student service and its interface and just type the student service here so now we are writing the code to save the data into the database so for that we use the http method post mapping and we need to give some path here so i will be just giving something like add and just type the public and string so we will be writing some message so but that have just given the string here request body here and just give the student and student and inside here we need to write the student service and save method here save student and student and also written some message like new student is added now what we need to do is we just need to remove this unused import so for that just type control alt o so this will remove that and there is no any unused import so now if i just read on my application from here just click on this run this application stop and read on so this will run our application if everything goes right so here you can see it's showing the error like field student service required a bin type of student survey that could not be found so i guess inside here in implementation we forgot one annotation and it's at the right service we need to say that it's a service class so for that we have just annotated with service now if i read on my application so this should work fine so now you can see here the tomcat has been started at port 8080 and the student system application has been started so to save the data we will use the postman so if you don't know how to install the postman so i've got already one video for that so just check it out there in the description and once you install postman just open this postman and let me close everything from here and here you just need to click on this plus sign here and the method is post since we are saving the data and just type the local host and 8080 slash so we can see here so we have given the party students last ad so we just need to give the same path here so student slash add and we need to go inside this body and we need to choose the raw here and the json type and we just need to send the data inside the curly braces and just give the name and the provide name something like arjun gotham or you can give a name and just give some address and address is and if i just click on this send here so you can see here the new student has been added so new student added is the message we have given now if i just go to my database and if i just refresh now here so you can see the data one nepal and azure gotham so if i now let's add another one as well okay let me give something like zoom and let me give some address here usa and if i just click on send you can see new student has been added and if i just refresh this database again so you can see the id has been auto incremented here and the data has also been added so this is how you save your data into the database so now once we save the data into the database so we will be writing the code for getting the data from database so for that just go to this student service and just write public and we will be just getting the list of student and just type the method get all student students and just go to this student service implementation and just type alt insert and just go to this override methods and we just need to select this one get all students and click ok and we just need to change this into the written student repository dot find also this will get all the students from our database so now we just need to go to the student controller and here in controller we just need to annotate this with get mapping and just give one path let me call it get all and just give the public and we will be returning the list of students and just type get all students and just return the student service dot get all students and if i just run my application again so now you can see here the application has been started at port 8080 and it's started successfully so we just need to go to the postman again and just create the new tab and just type local post 8080 slash student slash get all so if i just click on send so this will display all the data from database you can see here these are the data we have just posted before so if i just go here in the post method and if i again post some new data here let me call it new user and let me give some address like india and if i just click on send so the data has been added now if i just go here and click send again so we will be able to see see the new user as well so this is how we use the get mapping annotation to get the all data from the database so we have completed writing the backend application for creating and getting the data so if you want to extend it further for all the chord operations i have already got one video on my channel you can check out on my channel and once we write the backend application we will start writing for the front end so for that we will be using the react so to write the react application you need to have node.js installed into your system so to check if node is installed into your system or not just open your command prompt and just type node hyphen hyphen version and if you shows the version like this node is installed into your system and also type npm iphone iphone version and if it shows some version so npm is also installed so if you haven't installed node.js into your system i have already got one video to install the node.js into your windows or linux system you can check out on my channel i will be putting the link into the description so once you install the node.js into a system so we will start writing the react.js application and we will be creating the react application inside this folder so for that just let me just right click here and properties and let me just copy this path and let me just close this one and let me just go to the vs code here and just open the terminal new terminal and just type cd and paste that path and just click enter so this will navigate us to this student system folder and just write npx create react app and just give the application name let me just call it student front end and if i just click enter so this will basically create the react application so now you can see here the react application has been successfully created so if you are doing it for the first time this might take some time to install all the dependencies so once we create the react application so let me just click on this open folder and just go to the desktop here and click on student system so we have got this student front in application click on select folder so this will open our react application so you can see our source and this is the basic structure of this react application and let me just click on this terminal again new terminal and if i just type npm start so this will start our react application so you can see here this react application has been started here so we just want to edit some content here so just go to this source folder and app.js so just let me clear this error content from here let me just click backspace and let me write something like this is arjun quotes and let me also remove this logo as well from here and if i just save this by ctrl s and if i just go to my browser again so you can see here the content has been already replaced so this is how you create the react application so since we have created the react application so now we will be start adding the components so for that let's go to this source folder and just right click and click on new folder and let me call it components and inside component we will be writing one app.js so just right click and new file and let's call it abbar.js so before moving forward if you get any problem or get error while writing the code i have already published the source code in my github account so just go to the github.com slash youtube horizon codes and just go inside this repository and here you can find this fully stacked front-end app just go inside here and go inside the source and inside here you can just see the components and appbar and students here so you can go through every line of code so if you get any problem or either i as i have already mentioned in the intro video so we will be using material ui for the design so let me search material ui and just click on this first link from materialway.com and to get started so here are the installation instructions so just copy this one and let me just go here and just click on this plus so that it will open the terminal and let me paste and just click enter so this will install the material ui core so once this material ui is installed so we will be installing for material icon as well so let me just search for material ui icons and click enter and just copy this from material ui.com and here you will see the material uh icons and you can see the installation instruction from npm.js so let me just copy this one or you can directly type this one as well and let me paste it here and if i just click enter so this will install the materials icon as well so once the material ui and material icons are installed so let me go to the material ui page here so again let me just type material ui and let me go to this first link from material ui.com and let me search for the app bar so we will be adding the app bar here so let's just click on this app bar and you can add as your wiz so in this video i will just copy this one so let me copy the source from here and if i just go here and copy inside here so everything looks fine so let me save this one and i just have to import into the app.js so for that let me rename this one so let me call it app bar and just save this one and here we just need to import this one instead of this origin code so let me call it a bar so now we have to import this as well so just type import a bar from and dot slash components slash appbar and if i just save this application so you can see the export default function app bar so we need to replace this by using i guess it's a bar here so app bar and if i just save this one so this would work fine so let's wait for it to run and if i just go here and go to the react app you can see the app bar has already been added here so you can just replace this text here so let me replace it by something like spring boot react fully stack application or you can give any name or whatever you want so now it should replace this by this one or you can remove this login as well and you can just remove this button or you can keep as well it's your choice so now the app bar has been added so once we build this app bar so we need to write the code for student so let me add one more component here and let me call it student so in this js file so we will be writing the code for adding the form so it's basically a controlled form so it's showing submitter here so button is defined but never used so let me just remove this button from here so that it removes the unused import and if i just save this application so it works fine and you can see it is working fine here and for adding the form so we just need to go here and the search for material ui text field and just click on this first link from text field react component and we just need to copy this code from here and let me paste it here and let me just change this name into student student and let me just remove this first two field and let me duplicate this text field here and if i just save and let me just type something like student name so it's for name basically and it's for student address and let me remove this width as well so that it will be a full width and if i just go here in the app.js and just type student and let me import this as well just type import student from dot dot slash components and student and if i just save this application so okay we need to write a student here and if i just said save this application and just go here so you can see it's already coming student name and student address here so now we need to style this component so just go here and just type the container container so it's from material ui and let me just cut it and paste it outside the form so you can see it has already been imported automatically here so if it's not coming directly to your vs code you just write this line and if i just go here so it's already added the component so we just need to wrap this with the paper so just type paper and just type the elevation and give the size 3 for elevation and just for styles we will just type style and give some name like paper style and let me close this one and let me just cut this one and paste it inside the container and if i just save this application it shows something like paper is not defined so we just need to define here so just keep comma and just type paper and this error will go and we need to give this style for paper so for that just come here and just type const paper style and equals to let's keep some padding and for padding we will be giving 50 pixel and 20 pixel and we will be giving the width 600 and for margin we will be giving 20 pixel 20 pixel and auto so this will again make this into the center of the page so let me save this one and here it's showing some mirror like okay we just need to give the colon here not equals to now if i just go to my application here you can see it has already added this style here and now what we want to do is uh we want to give some style here so for that just type full width so that it will be of full size and also give here the full width and if i just save and if i just go to my application so you can see it has given the full width here and at the top we want to give heading so here you just give heading 1 and let me call it add student and if i just save this one so this will show the add student here and also i want to give some styling here so just type style equals to and double curly braces and skip color and give blue and also i want to make this underline so let's type y and let me just copy this one or cut this one and paste it here and if i just save my application so it's showing some error here so okay i just forgot to put one more curly braces here and if i just save my application and just go to my application here you can see it has added some style as well so now i want to make this form control form so for that we need to add some of the use states here so for that let me go here and just type const and name and set name equals to use state and just close this empty bracket and just type const address and just type it address and just type use state use state and close this bracket as well so you can see at the top here so it has already auto imported the use state here so if it's not showing in here just type this user state and also we need to write use state s t a t e here so if i just save this and now we need to add it here as well to make it controlled so for that just type value equals to we just need to give the name so it's name coming from this user state from here and we just need to give on change when we write so it's basically indicating that when we write something so it should indicate the event and said the name say the name so we have already given set name and just type e dot target dot value so basically the value which we are typing will be saved here so now also close this with curly braces here and for this address we will do the same here just type value and we have already declared the address and on change or on when typing just give the event and set the address with e dot target dot value and let me close this and let me close the curly braces here and if i just save this application so it's showing no warning here and if i just type something and if i just type something so it's not showing here but if i just type here something like name like arjun and if i just save this application so it's showing the origin here so basically when we type here it will be stored inside the use state so now to see if it's storing or not just type here name and also the address so if it shows the name and address when we type so it's working so let me type here jun and katmandu so you can see it's already showing here so once we create this from so i want to add one bottom here so that once we click this button we want to send the data into the database so for that let me just go to the material ui buttons and just click enter so just go to the button react button components here so let me choose this secondary one so just you can choose this secondary or you can choose other as well and let me paste it before this form and if i just replace this word by summit and save this application give the comma after the paper and just write button and if i just save my application again and if i just go here in my react application so you can see the submit button so now i want to add a program so once i click this submit button i had to get the data which i have just typed here so for that i just want to add one on click event here on click and just give one method here handle click and we need to write the handle click function here this defined const handle click and equals to give the event and we want to prevent the default value just type default and just give the const student and we want to print the name and address in the console so for that just type console.log student and just close the bracket here curly braces here and if i just save my application so it's running fine and just type control shift i so this will open the console here just click on this console and if i just type something like origin codes and address like nepal and if i just click on submit so you can see here the data is coming as address nepal and name origin codes so this is working fine so what i want to do is now i want to save this data into the database so for that let me run my spring boot application so for running my spring boot application i also need to run my gem control panel for database and let me start my apache and mysql server and let me again run my stream with application so our application has been started so if i just go to the postman here so you can see we are using this route to save the data so we will be using the same route to save the data from react application so now to do the api call from react we will be using the fetch which is basically a azure library so for that just type fetch and just paste that link which is localhost 8080 students so you can also give here http as well and column and slash slash localhost 8080 and add and just type comma and method is basically where posting so just type post and give it later and the headers headers and we need to give the content type inside here so the content type is application dot json so we will be sending the json data type so just type application slash json and let me just close this and body body will be json dot string gif and student so basically this stringify method converts the js object to json string and not semicolon here just give the curly braces and just close this and just type then and we will be printing some messages here just keep console.log and we can say something like new student edit so once the student is added are sent into the database so this will so the message in console that student is added and one bracket and also the curly braces now this should look fine i guess and we have to close this as well so it's saying that student is not defined okay it's not stood we have to correct this one s t u d e and d and now our application should run fine and if i just go to my application and just type the same thing and if i just click on submit here so you can see the excess phase from origin has been blocked by course so to fix this error we just need to go to our application back in application and inside this student controller inside the controller and let's go to the student controller and at the top here we just need to give the annotation cross origin and if i again rerun my application stop and rerun so this will fix the error so what does this do means it basically tells the react application or springboot application to connect to applications so now if i just go to my browser here and submit again so you can see here new student added so also let me give another name as well new name and let me give something like new address and let me again submit so it's all it's again showing that new student edit so to verify let me go to my mysql database here and let me go to the database fully stack and inside the student so you can see here new address and new name has been already added here oh so it's origin codes in nepal so which have which we have just added so this is how you save the data from react form to your backend application so once we force the data from this control form to the database so we want to face that data in our react application from this database so uh we have got this database here so we want to display these all students data into our react application so for that we need to use one react hook and that's use effect and we will be using the fetch and use state as well so now let me just go to the students here and here on top i will be just adding one const and students so we will be adding the students and set student and we will be using the hook state use state and array so we will be basically giving the empty array and we will be setting the students with the result so now what we need to do is we need to add one use effect so it's a react hook and also we need to import it here as well so it's already imported automatically here and if you are not able to see this just write this use effect for the use state and just type arrow function here and we need to just write the fetch and we have got the endpoint http localhost and 8080 slash student slash get all so get all so this will give all the student list and just type then and response in session rest session and let me close this one and just then we need to just write the result and arrow function here and we need to set the result say the students with the result so we are basically setting the students with the whichever result we have got its result here and what we need to do is just write one curly braces and we need to close with the and if i just save this application and it's showing some error here i guess it's uh the error because of this bracket here i guess i have to give one more here and if i just save my application so it's saying that user state okay we have even some wrong name here yeah so it's use state and if i just save my application so now we will be writing the program for displaying the data so for that we will be just removing this name and address from here we will add one more paper here paper and let me give the elevation to 3 and style we will be giving the same style as we have already given for peppery style and let me just write something like [Music] students here as one and let me call it students and what i want to do is i just want to give the map here so that it will display the each student list and for each student we will be giving the style so for that just type the paper and just give elevation so for each student we will be adding inside the paper and let me give some style and let me give the margin here margin and it's 10 pixel and we will be giving the padding and it's 15 pixel and also that takes a line and we will be aligning the text in the left and let me close the curly braces here and inside here we just need to write so let me first close the paper here we need to close this one as well and also i need to give the key here so key will be student dot id and inside here i need to write id and id is basically student dot id and also name and the name is student dot name and also the address and address is student dot address we need to close this one and here we need to close the curly braces as well i need to close one bracket here and if i just save my application so this looks this is working fine and you can see it's showing the data already here so these are the data coming from my database and let me just give some line break here and if i again save this application and you can see we have got the exact application which we have showed in my intro video so now if i just add something else here uh ram and address india and if i just submit and refresh my application so you can see it has already been added and if i just go to my database and refresh here so you can see ram and india so it's working fine so this is how you create the simple full stack application with spring boot and react hopefully you have learned something from this course and one more thing to notify you all that i am planning to publish the fully stack application for all chord operations soon so until then keep watching my youtube channel also don't forget to like share subscribe and press on the bell icon to get the latest notification

Channel: Arjun Codes

Views: 6,208

Rating: 4.9766083 out of 5

Keywords: fullstack app spring boot react, full stack webapp spring boot react, web application using spring boot and react, spring boot and react, spring boot backend and react frontend, how create full stack application, react hooks, material ui, spring boot, react, material design, intellij, vscode, mysql, spring boot mysql react, become full stack developer, java, react hooks tutorial, funcational componets, controlled form, spring mvc crud, full stack project, javascript tutorial

Id: O_XL9oQ1_To

Length: 48min 41sec (2921 seconds)

Published: Wed Jul 14 2021