Duration 48:42

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

by Code With Arjun

359 609 watched

5.9 K

Published 14 Jul 2021

Create Full stack web application using Spring Boot and React. In this video we will use Spring Boot ( MVC, JPA, Hibernate) and Mysql Database to create the Backend application (Restful web service API) with and use React.js to create the frontend application with Material UI and React Hooks( useState, useEffect) with functional components. We will build simple full stack project with RESTful Web services API and also use fetch (you can use axios) for consuming REST API. Install Java : /watch/Q2cuRI1f9DNfu Install Intellij : /watch/Q2cuRI1f9DNfu Change Java versions : /watch/w-Ec3RcHF5AHc Install Node.js (Windows) : /watch/geZFvKq9M3n9F Install Node.js (Linux) : /watch/Yn82x7IPr6PP2 Github Link : https://github.com/youtube-arjun-codes Source Code Backend : https://github.com/youtube-arjun-codes/FullStackApp Source Code Frontend : https://github.com/youtube-arjun-codes/FullStackAppFrontEnd Spring Boot CRUD : /watch/klA3LiQZVc3Z3 Timestamps : 00:00 - Intro / Demo 00:50 - Prerequisites 01:42 - Backend folder structure 06:39 - Model 09:43 - Spring Boot configuration for Connecting with Mysql 12:53 - PostMapping (Saving Data into Database) 18:33 - GetMapping (Getting Data from Database) 21:10 - Create React App 24:56 - Adding Appbar 28:20 - Adding Controlled form for Adding Student 36:10 - Send Data into database 42:55 - Get Data from database to react app 48:17 - Full stack Spring Boot React Project Completed ➡️:React Playlist ArjunCodes : /watch/e1aWGjYlJuJ6eW5-cqhV3_svlPluBBo1LP=tsil&ksV0WHAWEwmWW ----------------------------------------------------------------------------------------------------------------------- ➡️:SpringBoot Playlist ArjunCodes : /playlist/PL1oBBulPlvs-oXGnDkyTL2g_e25JKSV_W ----------------------------------------------------------------------------------------------------------------------- ➡️:Github Playlist ArjunCodes : /playlist/PL1oBBulPlvs86V4qCrZtBEPmojw-s87q4 ----------------------------------------------------------------------------------------------------------------------- ➡️ Subscribe : /codewitharjun Stay Connected : ➡️ LinkedIn : https://np.linkedin.com/in/arjungautam1 ➡️ Github : https://github.com/arjungautam1 Join Community : ➡️Discord : https://discord.gg/cn2x3jhMW4 Follow me on : ➡️ Medium: https://codewitharjun.medium.com/ ➡️ Dev.to : https://dev.to/codewitharjun ➡️ Spring Boot FB : https://www.facebook.com/groups/4242697249086041/ ➡️Telegram : t.me/arjuncodes ➡️Discord : https://discord.gg/cn2x3jhMW4 ➡️Subscribe : /arjuncodes #FullStack #SpringBoot #React #programming #arjuncodes #CodeWithArjun

Category

Comments - 302

@

@felipematheus65183 years ago Great video! What front-end(js) framework do you think is easier to learn first? I used jquery(ajax) people said that angular is easier for java developers to learn. Cheers! 29
@

@sheltondany82095 months ago Even though very basic, its the perfect intro for amateurish coders, dint know much spring or react but had some knowledge of java, java script, so this was so nice! 5
@

@xuechengliu8178last year Super good and easy to follow content. Great starting point for backend developers to understand how to communicate with frontend. 3
@

@yldrayozturk62762 years ago Guys we use react because when we change some component then we dont need to refresh page. So if you put [students] parameter which is the end of the id="hidden3" useeffect( function, you will see when you add a student and click the submit button, students list automatically refresh without all page refresh. Sorry for bad english:. ...Expand 38
@

@TheSmokinAppleslast year Man! I love you for making this! I have been trying to find a basic tutorial on how to use react with spring boot! 2
@

@raichungpunmagar79842 years ago I' ve looked from youtube to udemy for a good spring boot and react tutorial for begineer and this is the best video there is. Simple yet so informative. Lots of thanks to this channel. 2
@

@Alenk10202 years ago Hands down the best right into the point, full stack tutorial, amazing job. 1
@

@toxi420210 months ago Hey i really appreaciated the fact, that there was an error with the missing @service parameter in theso you explained what and didnt cut it out or something. Its good to see mistakes being made and how one resolves them.
dont always show perfect code examples. Gt; my opinion. ...Expand 3
@

@ajinkyakhete115110 months ago Hats off sir! Best video learned all the concepts in one video thank you very much. Wish you a great journey ahead. 3
@

@milankbudha7 months ago You should use lombok in model class to reduce boiler plate code for getters andconstructor and parameterized constructor. 4
@

@kunalshirsat41292 years ago Hi
while testing api on postman by post method
i m getting 400 errors not able to parse json object. 3
@

@faizalkadiwal306510 months ago Thank for this great toturial
i like to add one thing just add students in [ braceses of useeffect so you dont have to refresh to show submited da const [students, setstudents] usestate(
useeffect(gt; {
}, students]. ...Expand 2
@

@meklitameha3414last year You are a lifesaver thank you others couldn' t teach this in 3 hours and u did that in 48 min.
@

@Error-rp4dk11 months ago Thank you for this great tutorial. Better than my professors and uni course. Wish you health, happiness and personal and financial success. 2
@

@eduardojls2 years ago By far i have completed the backend part, so i just have to say thanks for your explanation, is so brief that' is pretty enough to understand. Let' s . ...Expand 2
@

@aldotube8810 months ago Do you have any particular reason for maven over gradle? I am still new to this but would you expect any issues following along if i choose gradle as it' s the current default on spring initializr?
@

@barakamarkbright7940last year Thanks for the video arjun. It have given me a complete overview of web app development with java. 1
@

@user-fu5tk5qc8h9 months ago Awesome explanation in such simple words. Great job man. Please keep up the work! 1
@

@josephmctigue4494last year What versions of node, npx and mui are you using?
i' m having trouble using node v18. 16. 0 and npx version 9. 6. 4 with this tutorial.
please help.
@

@elijahamelia33143 years ago This is amazing man. Thank you so much for this video. 1
@

@vaibhavtyagi57202 years ago Hey when i use text field component its showing code inside < box>< /box> should i put container outside it or inside it?
@

@tariqaldamen68372 years ago A very good and strong video to learn, i' m working for a big tech company and we are using the same as explained in this video. 1
@

@rohans719410 months ago Why did you refresh the app in the end to show ram-india? You should show it when you submit it.
isnit better to get all the results as a response when we save a new entry?
@

@abhijeetrohilla39182 years ago Great explanation, this channel is going to be more popular soon. 1
@

@jerodcolbert3896last year First id like to say thank you for posting this it was very helpful. I do have one question though, when i do my post through postman the connection is . ...Expand 1
@

@-Laxman-ks9rilast year Can you make a video on how to deploy this backend and database in render and react app in vercel. 3
@

@pawebielecki754810 months ago Thank you. Your video was really helpful. Everything is really simple and step by step. 1
@

@dnyaneshwarkolhe99592 years ago Can we create frontend backend combined windows executable file which will run whole application at once. 1
@

@kimdequilla75032 years ago Thanks super fast but at the same time super clear. 2
@

@kelvinsankale3 years ago Phewx! Thank you very much for your commitment to share knowledge. God bless you. 2
@

@rachanajakapure36618 months ago Hi arjun sir i am getting 401 as unauthorised to access error i am using jwt security in my application i am confused about xhamp how to use that? Please help.
@

@hotshotgolfer3079last year This was great. I learned a lot. Thank you. 1
@

@tamimiqbalpython48492 years ago Thank you, dada. Sending love from bangladesh. Please give us more live projects like this. 1
@

@victorcamargo7842 years ago I was having the error "java.sql.SQLException: Access denied for user Victor@localhost (using password: NO)" in the of the video trying to run the application. I fixed it by creating an user with this name in the admin panel .. ...Expand 2
@

@flavio56932 years ago This course it' s amazing thank you very much. 1
@

@Learco2 years ago Hi, i dont get how the ract app connects to the back end (springboot )
@

@2bpro2752 years ago It helps me a lot. Thanks for sharing. 1
@

@vipinsharma9767last year Very informative video, great quality content bro. 1
@

@souvik55602 years ago Fantastic
very simple and crisp. 3
@

@hrobesaklast year What a great tutorial. Just one question. I' m getting empty id when i call getall. Name and address is displayed, but id not. In db all id' s are visible. Any ideas?
@

@travahnetshisaulu31017 months ago Thank you very much this was a perfect video. 1
@

@gamingflicklast year We need to use the not video material ui we need to use the lastest one.
@

@pedrorego14433 years ago Best video ever! Now jsut gotta figure how to deploy online. 1
@

@DevLearn-lv7nrlast year Thanks arjun did you ever code something similar in non java language or frameworks? If so what did you use and how did you find it compared to springboot and java? 1
@

@technocoh2 years ago Amazing tutorial, helped so much, thank you a lot! D. 2
@

@viraltiktoks9960last year Hola amigo, sabes como puedo agregar imagen a cada usuario? O tienes algn video explicndolo, gracias.
@

@dineshpanigrahi10652 years ago Can you pls let me know what are the combination of techstacks are adapted by mostwith angular or java with react) bcoz am preparing for java with react. 1
@

@nicolasortiz44222 years ago How the hell do you use the persistence stuff in eclipse? No matter what i do it won' t recognize the import statements.
@

@juneldelacuadra59732 years ago Just wow! Sir please create a blog using spring boot and react with login functions! 2
@

@akshatadhuraji82542 years ago Hi, this is a great video! Could you please explain whether the architecture used in this video is mvc with spring or is it rest along with restful api. Thanks!
@

@groupproject95784 months ago This was a great video.
however, i did want to ask, is there a way to see the student that you add immediately in the students section at the bottom? Refreshing the page seems like a hassle each time. 2
@

@ssr73052 years ago Just started using soft and i made so of my own soft. I made one i actually really like, but the others are all so trash and so.
@

@itsnarahari2 years ago Without manually refreshing we can refresh or re render by usestate hook and add that new object to first. 1
@

@saurabhgandhi798211 months ago Awesome tutorial, keep up the good work 3
@

@geminicoding59242 years ago Thanks so much for the video. This is really helpful.
@

@travahnetshisaulu31017 months ago Nice video very helpful, can you please explain why there are two studentservice classesstudentserviceimpl)
@

@swaranjali4332 years ago I' m sorry it was a bit confusing! I promise that if you take your ti over the next few days and weeks, tnice tutorials stuff will make sense. Most.
@

@gonsalomon2 years ago How would you deploy this to be fully functional? As in, for it to be online and ready to serve. From what i understand, you' re running a local copy with this. 1
@

@wetto_g592 years ago Hi guys, i have a problem when i start posting json data in postman. In database i get record and all its attributes are null except an id. I even used thank you for every help:. ...Expand 1
@

@WandersonEndeolverlast year Sabe me informa se no windows tenho que usar este comendo: \mvnw. Cmd.
@

@sandeshwise2 years ago Thanks you, nice video good explanation. 1
@

@mohammedabulawi8006last year Great can you make a video of how to create a login page.
@

@shashanksharma24982 years ago Can you upload a video of update function?
@

@keerthu7055last year Thanks for your video but i have a query that why cant we develop react in intellj itself why we need ms visual code. 1
@

@fatihhguvenn4 months ago Crossorigin is not a fix nor a workaround. It might cause you problems in terms of security. I' d not use it. Just serve static web files in spring boot project. Or use middleware in react project. 1