Full Stack Development with Java Spring Boot, React, and MongoDB - Full Course

  Рет қаралды 803,832

freeCodeCamp.org

freeCodeCamp.org

Күн бұрын

In this full stack development course, you will learn how to create an application using MongoDb for the database, Java and Spring Boot for the backend, and React for the frontend.
You will learn to develop a movie review application that will feature a separation of concerns between the client code and the server code. By implementing this loosely coupled architecture, these two parts (implemented using different technologies) can evolve in parallel and independently from one another.
✏️ Farhan Hasin Chowdhury teaches the backend section.
✏️ Gavin Lon teaches the frontend section. @GavinLon
💻 Backend Code: github.com/fhsinchy/movieist
💻 Frontend Code: github.com/GavinLonDigital/mo...
🔗 Spring Initializr - start.spring.io/
🔗 JDK Download Page: www.oracle.com/java/technolog...
🔗 IntelliJ IDEA Download Page: www.jetbrains.com/idea/download/
🔗 Postman Download Page: www.postman.com/downloads/
🏗 MongoDB provided a grant to make this course possible.
⭐️ Contents ⭐️
⌨️ (0:00:00) Course Introduction
⌨️ (0:01:48) JDK and IntelliJ IDEA Installation
⌨️ (0:06:13) MongoDB Atlas
⌨️ (0:20:35) Project Initialization
⌨️ (0:27:03) Project Structure
⌨️ (0:29:13) Running The Project
⌨️ (0:32:41) Writing The First Endpoint
⌨️ (0:35:33) Database Configuration
⌨️ (0:38:49) Installing Additional Dependencies
⌨️ (0:44:48) Setting Up Environment Variables
⌨️ (0:47:20) Movies and Reviews Endpoints
⌨️ (1:31:46) Testing
⌨️ (1:35:42) Backend Conclusion
⌨️ (1:36:45) Frontend Introduction
⌨️ (1:38:32) Create the React Project
⌨️ (1:43:49) Applying Bootstrap to our React application
⌨️ (1:52:47) Implementing the Use State and Use Effect Hooks
⌨️ (1:58:04) Create Home and Hero Component
⌨️ (2:06:56) Style the Carousel
⌨️ (2:15:21) Create Header Component (Navigation)
⌨️ (2:21:55) Create Trailer Component with react-player
⌨️ (2:28:46) Create Movie Reviews Functionality
⌨️ (2:34:43) Add and Get Reviews with HTTP Requests
⌨️ (2:40:33) Course Wrap Up
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

Пікірлер: 1 300
@bishnudev1760
@bishnudev1760 Жыл бұрын
Thanks for using Java as Backend. I always wanted to give it a try with React & MongoDB. ❤️
@siddeshas8193
@siddeshas8193 Жыл бұрын
hi sir have u faced an CORS error , if facded how did you resolve it please tell me
@zhaoozeee8630
@zhaoozeee8630 Жыл бұрын
@@siddeshas8193do u fix it? i have it too
@samhadi7972
@samhadi7972 Жыл бұрын
I assume you are doing this in dev and aren’t building a production server you need to set the Access-Control-Allow-Origin header to *
@zhaoozeee8630
@zhaoozeee8630 Жыл бұрын
@@samhadi7972 yeah I fixed it with adding a patch in the backend
@mohamedabdulriswan1862
@mohamedabdulriswan1862 Жыл бұрын
@@zhaoozeee8630 what patch did you use in the back end can u help me
@tomjosi742
@tomjosi742 15 күн бұрын
ohh boy..over all it was good project. BackEnd instructor was marvelous. Excellent Job Farhan. i was waiting eagerly for the front-end but boy it was a marathon. He didn't care about his audience and was running just by him-self. Some of the things are skipped as well. Like the header weren't shown fully and was having hard time making it display. Hope you guys make another tutorial where the front end takes his time and explains all the npm packages and how to appropriately create structure in front end and layout. Thank you.
@dg6546
@dg6546 7 ай бұрын
45:40 For anyone working with this part, the dot env library changed so the syntax should be ${MONGO_DATABASE}, but NOT ${env.MONGO_DATABASE}
@Rodrigo-hy1yf
@Rodrigo-hy1yf 7 ай бұрын
Thanks bro
@endotechguyahm_awel419
@endotechguyahm_awel419 7 ай бұрын
!! the guys with dotenv version 3.* only
@doge1_dollar
@doge1_dollar 6 ай бұрын
@dg6564 did you got this error. Couldn't find PersistentEntity for type class java.lang.String got this error when I tried to fetch the data from the database. Not able to get the JSON data on localhost
@dg6546
@dg6546 6 ай бұрын
@@doge1_dollar I use atlas not local, but I guess your return type in Java does not match the one you stored in MongoDB. The return type should be a List instead of String. If the problem still occur, try google (which is also a learning progress). Something like "Couldn't find PersistentEntity for type class java.lang.String mongodb stackoverflow"
@alfredwebdev
@alfredwebdev 6 ай бұрын
Legend bro!!
@PrathameshMawlankar
@PrathameshMawlankar Жыл бұрын
Thanks for bringing content on Java and Springboot after a long time. Please do more of Spring content like these regularly.
@carlosync
@carlosync Жыл бұрын
Agree.
@siddeshas8193
@siddeshas8193 Жыл бұрын
hi sir have u faced an CORS error , if facded how did you resolve it please tell me
@balachandar6206
@balachandar6206 Жыл бұрын
@@siddeshas8193 enable cors by chrome extension
@Jay-op4dv
@Jay-op4dv 5 ай бұрын
agreed
@1tav0
@1tav0 Ай бұрын
@@siddeshas8193 i enabled cors globally @RestController @RequestMapping("/api/v1/movies") @CrossOrigin(origins = "localhost:3000") public class MovieController { // Controller methods }
@goodnightmr5892
@goodnightmr5892 Жыл бұрын
I just wanted to say that the work that you guys are doing is absolutely phenomenal, and that you are giving people hope inspiration and opportunity where others have turned them down. Thank you for being the light in the darkness.
@prodigious029
@prodigious029 Жыл бұрын
So you didn't watch the video. It's okay.
@siddeshas8193
@siddeshas8193 Жыл бұрын
hi sir have u faced an CORS error , if facded how did you resolve it please tell me
@ami_pbj
@ami_pbj Жыл бұрын
@@siddeshas8193 I faced and resolved it but can't post review on frontend :(... it's showing "TypeError: reviews is not iterable at addReview (Reviews.js)"... anyone solved ?? kindly helppp...
@Gustavosirkis
@Gustavosirkis Жыл бұрын
​​@@siddeshas8193 i have the same issue
@kozi-corner
@kozi-corner 10 ай бұрын
@@siddeshas8193 @CrossOrigin your RestController
@idanlib
@idanlib Жыл бұрын
One more tip for anyone at 2:08:52 who isn't seeing the posters, getting an error that "movies" in the Hero component is undefined and therefore you can't map over it -- this is because, upon the first render, the movies props are passed down the tree BEFORE the async API called has returned. So, what's being passed is an uninitilaized value, over which you cannot map(), so that's why the app crashes. To fix, simply initialize the movies state to an EMPTY ARRAY (don't just leave it blank like in the tutorial). Hope that helps!
@nishanthgoud1763
@nishanthgoud1763 Жыл бұрын
To avoid this error, you can add a conditional check to ensure that movies exists before mapping over it. movies && movies.length > 0 ?
@idanlib
@idanlib Жыл бұрын
@@nishanthgoud1763 I guess so, but it's another conditional in the code and it makes that code slightly longer (by a single line). Still, whatever works, man.
@user-xw1fn6kw7v
@user-xw1fn6kw7v Жыл бұрын
@@nishanthgoud1763 Hi, where should we put this conditional in our code? Can you please tell
@VincentMYip
@VincentMYip Жыл бұрын
"const [movies, setMovies] = useState([])" will be enough.
@idanlib
@idanlib Жыл бұрын
@@VincentMYip t Yes, that's what I meant.
@Anonymous_810
@Anonymous_810 Жыл бұрын
This was exactly the tech stack I was looking for Once again Thanks to all the creators
@officialcodingnotes
@officialcodingnotes Жыл бұрын
This is an amazing course. I really enjoyed getting better at all these technologies.
@siddeshas8193
@siddeshas8193 Жыл бұрын
hi sir have u faced an CORS error at 1.57.27 i get , if facded how did you resolve it please tell me
@chandrasekharparimi1167
@chandrasekharparimi1167 Ай бұрын
@@siddeshas8193 i had included the crossover orgin component in the controllers and use the localhost this is bcz of different local host number ig soo
@darkiller5219
@darkiller5219 Жыл бұрын
I can't thank you guys enough, this course came in the right moment.
@slasankautube
@slasankautube Жыл бұрын
you guys have now share million of worth courses with us , long live
@janhoable
@janhoable Жыл бұрын
45:00 if you are using Spring Dot env 3.0.0 get this error: an srv host name '${env.mongo_cluster}' was provided that does not contain at least three parts. it must contain a hostname, domain name and a top level domain. switch back to 2.5.4 and should work just fine.
@jondoe8658
@jondoe8658 Жыл бұрын
thank youu
@systemoutprinthakim
@systemoutprinthakim Жыл бұрын
thanks g
@SychicGamer
@SychicGamer Жыл бұрын
THANK YOU SO MUCH!!!
@leonardotorquato1891
@leonardotorquato1891 Жыл бұрын
thaaaaanks my dude!!!!
@NetScapeWeb
@NetScapeWeb Жыл бұрын
you can also use `${MONGO_CLUSTER}` instead of ${env.MONGO_CLUSTER} in env version 3.* and it will work fine.
@anastasianaumko923
@anastasianaumko923 Жыл бұрын
Thanks for this amazing tutorial. Really appreciated involving Java backend. It is really priceless to see how the full stack project works as a whole, end to end from inside out, especially for people who usually doing only a part of it 😌
@vistum_web
@vistum_web 4 ай бұрын
Add this to the endpoint to allow postman to make the request @CrossOrigin(origins = "*") @RequestMapping("/api/v1/reviews")
@ravindrapunekar8433
@ravindrapunekar8433 Жыл бұрын
Thank you Both Instuctors and FreeCodecamp for this wonderful Course
@bwbs7410
@bwbs7410 Жыл бұрын
Please make more video tutorials doing complete full-stack development this seems super helpful so far.
@ScriptKiddy23
@ScriptKiddy23 4 ай бұрын
Farhan has an absolute god-like teaching ability. Making my life a lot easier😂👏🏼
@jordvnjwlz6284
@jordvnjwlz6284 5 ай бұрын
This is perfect! I just started a project and all I know is HTML/CSS with a little of JS, and this 'stack' is almost exactly to what I'm using. HTML/CSS/JS/Java(SB)/PSQL/MongoDB
@misaelholanda4977
@misaelholanda4977 Жыл бұрын
Thanks guys! It was awesome! I loved all the process! God bless you! 😀
@OmkarK49
@OmkarK49 8 ай бұрын
Thank you for posting this. Great work! Just an update, that the env. is no longer required Eg. if you are using this ${env.MONGO_DATABASE} and getting an error then just replace it with ${MONGO_DATABASE}. I hope, this helps.
@SamuelVolder
@SamuelVolder 7 ай бұрын
Thanks bro, it's really helpfull.
@SushaanthSureshKumar-CodeCraft
@SushaanthSureshKumar-CodeCraft 7 ай бұрын
Thank you very much
@AKASHYADAV-tq8cp
@AKASHYADAV-tq8cp 7 ай бұрын
Really it is so helpful
@semayldz4122
@semayldz4122 7 ай бұрын
Really thank you!!
@sriramcharan461
@sriramcharan461 19 күн бұрын
tqsm broo
@cherriepie
@cherriepie Жыл бұрын
Great tutorial on Spring Boot I've learned soooooo much I can't thank you enough! So many boring and convoluted tutorials I've seen this is the one I just sat and walked it through all the way. Thank you, Farhan!
@nataliezhu1225
@nataliezhu1225 Жыл бұрын
How can I make a project that is the same as his at 27:00 in the video?
@cherriepie
@cherriepie Жыл бұрын
@@nataliezhu1225 you need to use spring initializr, look it up
@nataliezhu1225
@nataliezhu1225 Жыл бұрын
@@cherriepie got it! thanks a lot!
@tusharverma2439
@tusharverma2439 Жыл бұрын
Thank you for this course!! I always wanted to try Java for backend.
@siddeshas8193
@siddeshas8193 Жыл бұрын
hi sir have u faced an CORS error at 1.57.27 i get , if facded how did you resolve it please tell me
@Fuzzycap
@Fuzzycap Жыл бұрын
Last time I was this early youtube had a different icon!!!
@Samupmap20
@Samupmap20 Жыл бұрын
youtube.com/@starlightadventure20
@paulraven8236
@paulraven8236 Жыл бұрын
Interesting, I'm learning/working with react for 3 years now, a year with typescript. Past year started with java at tech. school, left one more year. This course would be amazing to put all together :) thanks!
@abhinav4095
@abhinav4095 Жыл бұрын
any tips on how u learnt react and typescript?
@pablopenia
@pablopenia Жыл бұрын
@@abhinav4095 just start learning and create a lot of projects, I followed Freecodecamp curriculum for react, then some tutorials on youtube, but the truth I didn't get anything until I created some things for my own. freeCodeCamp projects are a very good place to start. For typescript is good starting to convert your own react projects in javascript to typescript. You will hate ts alot at the start, but don't hesitate, is easier than it seems, just keep going and create things.
@ericmungai3601
@ericmungai3601 9 ай бұрын
I just finished this project. The back end was near perfect. The instructor was detailed enough for me to go back n see where an error might have occured. As for the front end i learned nothing from the guy i was barely able to pause the video at the right moment because it was all fast fowarded. He did the review page which included editing the page and uploading data to mongodb in under 2 minutes. There was no reason at all to rush it the video could have been 5 hours n i would have watched it all just to learn.
@its_jei
@its_jei 9 ай бұрын
Exactly! I even have frontend experience with React and I had to look up the code myself to know what's going on because it was so FAST I couldn't keep up. Such a disappointment.
@LP-ye3ox
@LP-ye3ox 6 ай бұрын
Same! The back end presenter explained concepts and kept the video at a steady pace. The front end present sped up the coding parts which drove me nuts as I kept having to rewind or pause. It was a stark contrast between the two.
@ChineseWinnie
@ChineseWinnie 5 ай бұрын
Don't worry, at least he wasted our time by spending 10 minutes installing npm packages.... then skipped over everything else
@andylib
@andylib Жыл бұрын
Love the inclusion of Spring 🙏🏻 keep it up - especially if reactive webflux will be taught 😍
@siddeshas8193
@siddeshas8193 Жыл бұрын
hi sir have u faced an CORS error at 1.57.27 i get , if facded how did you resolve it please tell me
@numby6091
@numby6091 Жыл бұрын
React Java and MongoDB... Championship lineup. Awesome
@Marcusube
@Marcusube Жыл бұрын
Love this! Please upload more Spring Boot content
@chips2628
@chips2628 Жыл бұрын
Thank you so much for using Java Spring Boot. I really need this for my project. (never use Java as backend before)
@giuseppemigliozzi7148
@giuseppemigliozzi7148 Жыл бұрын
Thanks a lot for this content guys! Please upload more Spring content!
@blue_stragglers
@blue_stragglers Жыл бұрын
@1:57:30 Because the Tomcat’s port is 8080 and the React’s port is 3000, there is a cross-domain problem, and requests will be blocked by the CORS policy. All you need is to add this annotation to your Controller Class: @CrossOrigin(origins = "*") And then restart the Spring Boot project. The problem is solved!
@parzival123
@parzival123 Жыл бұрын
Thank you youre a lifesaver, thats what im confused.
@demdimi9316
@demdimi9316 Жыл бұрын
any idea how to deploy the project online?
@swarupakillamsetty2425
@swarupakillamsetty2425 Жыл бұрын
even after adding @CrossOrigin(origins = "*") to the Controller class i am getting error, can you help me ?
@heisenberg7467
@heisenberg7467 Жыл бұрын
what should be present in baseurl and header of axiosConfig.js file
@techmaniac2002
@techmaniac2002 Жыл бұрын
​@@swarupakillamsetty2425 yeah same here, were you able to solve it?
@mikedelta658
@mikedelta658 Жыл бұрын
The right course at the right time. Many thanks
@siddeshas8193
@siddeshas8193 Жыл бұрын
hi sir have u faced an CORS error at 1.57.27 i get , if facded how did you resolve it please tell me
@valoryayw
@valoryayw Жыл бұрын
Excited for the course!!!!
@mrluis96100
@mrluis96100 Жыл бұрын
Daaaaaaamnnn such a gold piece this video!!!!
@rakeshkr123
@rakeshkr123 Жыл бұрын
🙏I was waiting for it for so long. Thank-you so much.
@siddeshas8193
@siddeshas8193 Жыл бұрын
hi sir have u faced an CORS error at 1.57.27 i get , if facded how did you resolve it please tell me
@rakeshkr123
@rakeshkr123 Жыл бұрын
Make sure you have all the user files needed in the same location
@rajivn3707
@rajivn3707 Жыл бұрын
Can you make more content on Java Full stack projects with Java with React/Angular, Oracle and other testing applications? Please it's a humble request.
@pmdci
@pmdci Жыл бұрын
first part of the course (back-end) is great. The frontend part though is really disappointing. A lot of things have been skipped, such as deploying the API into the NGROK service. By following the instructions to the letter, the API is running on LOCALHOST:8080 and it has never been configured to run on a NGROK endpoint.
@systemoutprinthakim
@systemoutprinthakim Жыл бұрын
exactly, that was extremely confusing...
@nicholascai9487
@nicholascai9487 Жыл бұрын
How do i fix this, I was so cunfused how he got his base url so I assumed it was suppose to be the localhost:8080 looking at the console but it can't get anything, theres errors then I read this.
@nataliezhu1225
@nataliezhu1225 Жыл бұрын
How can I make a project that is the same as his at 27:00?Can you please tell me?
@glorysingh
@glorysingh Жыл бұрын
@@avibecalledgulu same issue, any solution yet??
@trietquach7391
@trietquach7391 6 ай бұрын
change axiosConfig file to: import axios from 'axios'; export default axios.create({ baseURL: 'localhost:8080', headers: {'skip-browser-warning": "true"} }); add: @CrossOrigin(origins="localhost: 3000") to both controller classes in Java below @RestController annotation
@hemanbhatia3342
@hemanbhatia3342 8 ай бұрын
it was a really nice intro, i think i have learned a lot of things here. can you guys please make more projects or tutorials of spring boot please.
@CyberSecGh
@CyberSecGh Жыл бұрын
I loved the beginning, the backend took his time to explain things but the front end was just rushing the who thing without proper understanding, course for beginners and you rushing us through like pros, the course was great at the backend, I can't say same for the front end cos I feel he rushed it and basically less understanding.
@siddeshas8193
@siddeshas8193 Жыл бұрын
hi sir have u faced an CORS error at 1.57.27 i get , if facded how did you resolve it please tell me
@nataliezhu1225
@nataliezhu1225 Жыл бұрын
How can I make a project that is the same as his at 27:00?Can you tell me, please?
@user-zw7vo4ip4u
@user-zw7vo4ip4u 11 ай бұрын
@@siddeshas8193 Have you resolved CORS error?
@aniruddhakotal1534
@aniruddhakotal1534 10 ай бұрын
U r correct
@dlfernando4846
@dlfernando4846 10 ай бұрын
@@user-zw7vo4ip4u mchn.. did you found the solution?
@jordanyoung1836
@jordanyoung1836 Жыл бұрын
This will definitely come in handy for me with making a portfolio for my future employers…😊😊😊
@ibizawavey8630
@ibizawavey8630 Жыл бұрын
Think bigger!!!
@jordanyoung1836
@jordanyoung1836 Жыл бұрын
@@ibizawavey8630 you’re right…I’ll give it a shot
@streetchronicles9025
@streetchronicles9025 Жыл бұрын
@@ibizawavey8630 this will definitely come in handy for me with making a portfolio for my bigger future employers
@elvispontes4165
@elvispontes4165 Жыл бұрын
Thanks a LOT for sharing content of back-end in Java and Spring boot. Is is very helpful 😊.
@mohammedthowfiq138
@mohammedthowfiq138 Жыл бұрын
Finally I found the gem. ❤️
@M7ilan
@M7ilan Жыл бұрын
Having a course that combines React, Tailwindcss, and MongoDB would be awesome.
@yourdadishere
@yourdadishere Жыл бұрын
Nah, too many of them already.
@siddeshas8193
@siddeshas8193 Жыл бұрын
hi sir have u faced an CORS error at 1.57.27 i get , if facded how did you resolve it please tell me
@Fuzzycap
@Fuzzycap Жыл бұрын
This was sooo required!!!!
@GoodbyeMrX
@GoodbyeMrX 8 күн бұрын
Great backend tutorial. Frontend is a nightmare and I'm gonna stop now. Too bad.
@paulapatriciaruedagonzalez6420
@paulapatriciaruedagonzalez6420 Жыл бұрын
GRAN EXPERIENCIA, ESPERO PONERLO EN PRACTICA MUY PRONTO.
@rushabhshah392
@rushabhshah392 8 ай бұрын
If you are unable to view the poster at 2:08:52. Try below changes in Hero.js 1) movies?.map((movie) => { 2)
@yashpatil2626
@yashpatil2626 8 ай бұрын
Still not able to view the posters, Do you know any alternate solution?
@JoeyParshley
@JoeyParshley 5 ай бұрын
following FE tutorial as is leads to CORS and ngrok errors. the ngrok error is fixed by using "localhost:8080" in the `axiosConfig.js` file and the CORS is addressed by adding the @CrossOrigin(origins = "*") annotation to both controllers on the back end `reviewController` and `movieController`
@leandroalvarez9243
@leandroalvarez9243 3 ай бұрын
I'm getting the error "'Unsupported protocol localhost" after making those adjustments.
@leandroalvarez9243
@leandroalvarez9243 3 ай бұрын
nvm I got it now I used localhost:8080 and it worked if anyone else is digging through comments looking for solutions
@gabrielam8865
@gabrielam8865 2 ай бұрын
Thank you, Joey, it worked for me. For anyone who can't make it work, this is my axiosConfig.js: import axios from 'axios'; export default axios.create({ baseURL: 'localhost:8080', timeout: 20000, headers: {"Content-type":"application/json" } }); Also, adding the @CrossOrigin(origins = "*") annotation in the reviewController and movieController Joey mentioned
@tineeperry6116
@tineeperry6116 2 ай бұрын
You Rock... Thanks so much. Adding Crossorigin with ngrok DID NOT work for me 😢
@arjunparashar9503
@arjunparashar9503 2 ай бұрын
Thanks Joey, It helped
@shawnfriedman537
@shawnfriedman537 Жыл бұрын
Excellent tutorial. Can I ask where you got the data from? I can't find it in the format where the backend instructor has, for example with trailerLink, imdbId etc.
@christophermyers6372
@christophermyers6372 Жыл бұрын
Very nice :D Can't wait to go thru this.
@furkanzengin7635
@furkanzengin7635 Жыл бұрын
If you follow along with the tutorial, in part 2 for the client side of the application I suggest you not delete the packages and folders he deletes because it gives an error if you delete them following the suggestions.
@zekrom9898
@zekrom9898 Жыл бұрын
Thank you
@altairlight5729
@altairlight5729 Жыл бұрын
Thank you bro for saving a headache
@shan96
@shan96 Жыл бұрын
If you are facing any issue with importing the bootstrap, you can replace the line "import 'bootstrap/dist/css/bootstrap.min.css';" with "import '../node_modules/bootstrap/dist/css/bootstrap.min.css';"
@lexcodechannel
@lexcodechannel Ай бұрын
Thanks for the tutorial! The backend part is great, the frontend part could be improved as a lot of the things are skipped by the speaker, i.e how to deal with cors, what is ngrok and why we're using it instead of localhost (I ended up setting everything up through localhost), adding {movies} as props to the Home component and completely skipping that part, using rafce without mentioning that you need a React Snippets plugin for that etc.
@its_jei
@its_jei 9 ай бұрын
VERY NICE! I ran into quite a few bugs on the backend part because there have been some things left out tbh and are outdated? However, I solved them and moved on. The frontend part I can understand goes too quick for some - I'm frontend focused so I was able to grasp what was going on with no issues. I do think that if the audience is asking the instructor to slow down, definitely take their word for it! It'll help with the experience.
@its_jei
@its_jei 9 ай бұрын
Updated Review: On the frontend part, close to the end, you are fast forwarding TOO QUICK for the eyes, without even telling us whats going on? I can check out the code myself on Gh, but on my own time and understand it. However, the instructor just proceeds to type code, go through the past files and make edits, and move forward with making a new file altogether without saying a single word???? Are you on a time constraint or.....? Cause if you're going to put together a course, don't make it obvious that you are. The first section of the frontend part had great explanations then it completely FELL FLAT.
@DanielClark00
@DanielClark00 9 ай бұрын
@its_jei I am getting an error when trying to view the trailers: No routes matched location "/Trailer/d9MyW72ELq0". All I see is a blank white screen and have to inspect the page to see the issue. I checked that the id "d9MyW72ELq0" part is correct for the trailer I am tying to watch. Did you run into this issue, if so, how did you fix it?
@user-ub2ol5ou7e
@user-ub2ol5ou7e 6 ай бұрын
​@@DanielClark00did you fix it?
@chandraji97
@chandraji97 10 ай бұрын
Backend section is worth the watch. Frontend section is complete opposite in terms of clarity on what we are trying to do with the code.
@idanlib
@idanlib Жыл бұрын
To Gavin, Farhan and FCC - thank you for this course, first of all, your work is much appreciated. However, myself and many others cannot retrieve the movie information from the database due to a CORS error. It is unclear why that is, and many attempts to go around it have failed. Without resolving this issue, we cannot truly complete the course. Please provide a follow-up video or article explaining how to correct this issue. All of us would appreciate it. Thank you again!
@yahampathchandika7751
@yahampathchandika7751 Жыл бұрын
@@santiagoaristi2808 Did you find a solution for that error?
@yahampathchandika7751
@yahampathchandika7751 Жыл бұрын
Did you find a solution for that error?
@idanlib
@idanlib Жыл бұрын
@@yahampathchandika7751 No man, I ended up moving to another project. It's probably possible to set up the data yourself on your own db account, but I didn't go into that. I might do that later on.
@yahampathchandika7751
@yahampathchandika7751 Жыл бұрын
@@idanlib could you recommend me similar free projects like this?
@yashrajoria1
@yashrajoria1 Жыл бұрын
@@yahampathchandika7751 add @CrossOrigin("*") in your controller file below @RequestMapping
@rohulahadi3990
@rohulahadi3990 Жыл бұрын
🔥😍 awessomee Thank you both
@dilanshanuka1838
@dilanshanuka1838 Жыл бұрын
Thank you so much freecodecamp 😊
@felipebomfim1998
@felipebomfim1998 9 ай бұрын
Credit: Mel J "So the front end instructor missed a huge part of the setup. Ngrok is a service that you need to setup yourself and your baseURL will be different from his. I googled it, set up an account, added ngrok extension to VS code and used the URL it generated instead. That was when my CORS error went away. I didn't need the @CrossOrigin notation either."
@gauravkanojia6533
@gauravkanojia6533 8 ай бұрын
can you write a detail explanation what you did
@felipebomfim1998
@felipebomfim1998 8 ай бұрын
Ngrok is a software to create a tunnel from a local port to a remote server. So you have to search for a tutorial of how to do it and use the url that ngrok will give you Edit: use it as the base url
@masadamsahid
@masadamsahid Жыл бұрын
The spring tutorial was good. There is only a constraint about configuring CORS because it's not explained in the video. But I'm really sure the react tutorial isn't beginner friendly. Beginners will suffer many difficulties because of your accelerated video.
@masadamsahid
@masadamsahid Жыл бұрын
anywy thanks for the tutorial
@ankandas1131
@ankandas1131 Жыл бұрын
@@masadamsahid i am facing the cors issue. can you please help me
@masadamsahid
@masadamsahid Жыл бұрын
@@ankandas1131 what problem do you encounter? Can you pls send the detail first?
@ankandas1131
@ankandas1131 Жыл бұрын
so many. cors error, then ngrock, then accessing the review api. but I solved it. took me 7 hours on the front end becoz i didn't knew react.
@HamaqesTV
@HamaqesTV Жыл бұрын
@@ankandas1131 Can you please share with us your solution to your problems? Many of us are facing them too and I am still trying to figure some of them out. Thanks!
@lisansarkar7949
@lisansarkar7949 Жыл бұрын
Thanks Farhan from Bangladesh
@gaurisharma6069
@gaurisharma6069 10 ай бұрын
Was able to complete the full project. Even though frontend part was quite fast and few parts missed and written wrongly,but after lot pausing and building the project I was able to complete the front-end also .
@ashkankipati
@ashkankipati 10 ай бұрын
i'm unable to display the array from /api/v1/movies 1:57:39 getting: Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR
@nicobonder
@nicobonder 5 ай бұрын
@@ashkankipati Hi, I am having the same problem. Could you fix it? Can you let me know how? Thanks
@SuperCacazinho
@SuperCacazinho Жыл бұрын
⭐ Contents ⭐ ⌨ (0:00:00) Course Introduction ⌨ (0:01:48) JDK and IntelliJ IDEA Installation ⌨ (0:06:13) MongoDB Atlas ⌨ (0:20:35) Project Initialization ⌨ (0:27:03) Project Structure ⌨ (0:29:13) Running The Project ⌨ (0:32:41) Writing The First Endpoint ⌨ (0:35:33) Database Configuration ⌨ (0:38:49) Installing Additional Dependencies ⌨ (0:44:48) Setting Up Environment Variables ⌨ (0:47:20) Movies and Reviews Endpoints ⌨ (1:31:46) Testing ⌨ (1:35:42) Backend Conclusion ⌨ (1:36:45) Frontend Introduction ⌨ (1:38:32) Create the React Project ⌨ (1:43:49) Applying Bootstrap to our React application ⌨ (1:52:47) Implementing the Use State and Use Effect Hooks ⌨ (1:58:04) Create Home and Hero Component ⌨ (2:06:56) Style the Carousel ⌨ (2:15:21) Create Header Component (Navigation) ⌨ (2:21:55) Create Trailer Component with react-player ⌨ (2:28:46) Create Movie Reviews Functionality ⌨ (2:34:43) Add and Get Reviews with HTTP Requests ⌨ (2:40:33) Course Wrap Up
@carlosync
@carlosync Жыл бұрын
More java fullstack courses and classes with SpringBoot
@pacificview8276
@pacificview8276 Жыл бұрын
Finally successfully completed the project
@marco1824
@marco1824 10 ай бұрын
Good stuff. Great back-end tutorial, second one was good but felt lacking. Little to none explanation of the why of things, just live coding
@archamedis
@archamedis 6 ай бұрын
Difficult to rate this course when half-way through at 1:57:34 I'm getting an CORS error. What's the ngrok thing we're using in the axios config? Why couldn't we use the local app on port 8080 we made in part 1? I can't see the movies returned in browser console with your baseURL and header. What a bummer.
@abhaysinghtomar4267
@abhaysinghtomar4267 Ай бұрын
Have you found the solution??
@asylum9868
@asylum9868 Жыл бұрын
yes java and spring as back end thank you free code camp i was looking this for a very long time🤩
@dominiks1400
@dominiks1400 11 ай бұрын
For anyone facing the problem "Field 'locale' is invalid" check if your Movie or Review class is using "collation" in the @Document annotation. You should use "collection" instead.
@danieliuskalinin4108
@danieliuskalinin4108 11 ай бұрын
thank you!!
@TuyetNguyen-fm2lf
@TuyetNguyen-fm2lf 10 ай бұрын
thanks!!
@maulikdavra389
@maulikdavra389 9 ай бұрын
You saved me, thank you
@DanielClark00
@DanielClark00 9 ай бұрын
How long did it take you to find that little nugget!? lol Thank you very much.
@anindo101
@anindo101 8 ай бұрын
Thank you, You saved my time
@bhanuprakashghanta7700
@bhanuprakashghanta7700 Жыл бұрын
The back end development is very much interesting and It can be easily understandable and I am super comfortable with the teaching but when it comes to front end development.. I am completely disappointed and the way he taught is not up to the mark and I haven't the front end part even a bit too.. Anyways nice lecture from @Gavin Lon Great job @Farhan Hasin Chowdhury
@TechsterYT
@TechsterYT Жыл бұрын
I agree. Way too fast. I have lots of knowledge in back end and Spring, but next to no experience with JS or React. The guy taught the front end stuff too fast.
@zekrom9898
@zekrom9898 Жыл бұрын
Exactly my thoughts, front end tutorial was sub par at best
@JuliusIkebiagbo
@JuliusIkebiagbo Жыл бұрын
i really can't help but to thank the freecodecamp team for their works. the teachers are awesome. very calm , slow and precise. giving a chance for every instructions to be followed through and perfectly understood. thanks once more!
@yingzisilver9085
@yingzisilver9085 9 ай бұрын
I learned a lot from this video, thank u guys so much
@GenjaOrigins
@GenjaOrigins Жыл бұрын
Thanks for using Java as Backend. I would also like C++. Thanx for using React as front end.
@bootcamp3rs
@bootcamp3rs 10 ай бұрын
If you ara having problems with .env (spring dot env) switch back to version 2.5.4 and it should work just fine.
@akashkd7141
@akashkd7141 Ай бұрын
hey i am facing issues with respect to axios
@idanlib
@idanlib Жыл бұрын
Is anybody else having trouble accessing the movies API? At 1:57:21 the instructor manages to get a movies array, but I'm getting a CORS error: " Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource." I have configured the axiosConfig file as instructed (copy-pasted the value from the instructor's Github). Not working. Something is missing with the CORS configuration. Can someone please help?
@idanlib
@idanlib Жыл бұрын
OK, this is a new fairly new tutorial and already the API calls are failing. There is a very stubbon CORS error when attempting to get information from the db, and because the base URL is some ngrok(?) url, it's very unclear how to even check which API we're trying to access. I'm stuck at the very first stage of the front-end section and it's very frustrating.
@armandolinaresg6446
@armandolinaresg6446 Жыл бұрын
@@idanlib Dealing with the same issue :(
@alizadixit4713
@alizadixit4713 Жыл бұрын
Same issue with me , anyone solved that issue?
@idanlib
@idanlib Жыл бұрын
@Armando Linares In the meanwhile I'm using a faux api call: I'm using the movies.json file that was included in the back-end section. Just copy the file to the "public" folder of your front-end section, and in App.js, in the getMovies() function, do api.get("movies.json") instead of the unfortunate, broken api call. It's not a real API call but it allows you to continue with the project.
@idanlib
@idanlib Жыл бұрын
@@alizadixit4713 In the meanwhile I'm using a faux api call: I'm using the movies.json file that was included in the back-end section. Just copy the file to the "public" folder of your front-end section, and in App.js, in the getMovies() function, do api.get("movies.json") instead of the unfortunate, broken api call. It's not a real API call but it allows you to continue with the project.
@nicolasgh91
@nicolasgh91 Жыл бұрын
Great course!! Thank you 🙂
@jodydwiantono2223
@jodydwiantono2223 Жыл бұрын
Amazing, will learn it soon!
@maheshrajasharma
@maheshrajasharma 11 ай бұрын
c0smic 2 months ago 45:00 if you are using Spring Dot env 3.0.0 get this error: an srv host name '${env.mongo_cluster}' was provided that does not contain at least three parts. it must contain a hostname, domain name and a top level domain. then, do remove env. from the variable names in the properties files. This has been removed in the latest version of the plugin
@picklerick715
@picklerick715 11 ай бұрын
Loved the back-end part. The instructor took his time to teach and I understood it well. The front-end, not so much. The instructor was way too fast. He wasn't "teaching" but just coding.
@gdliu2018
@gdliu2018 9 ай бұрын
Yes, I also think so.
@sreenikatteboyina4719
@sreenikatteboyina4719 Жыл бұрын
Excellent and kudos to you guys
@Secretclaps
@Secretclaps 8 ай бұрын
thank you for this great course :)
@brennanburch9257
@brennanburch9257 Жыл бұрын
Anyone else have issues with the axiosConfig throwing CORS errors on the front end? I thought it was just me, but I cloned the repository and had the same issue when I ran his version, too.
@malichihill5351
@malichihill5351 7 ай бұрын
At 2:14:00, note that the characters that enclose url(${movie.backdrops[0]}) are backticks ` and not single quotes '. This tripped me up for far too long since I am completely new to JS and didn't know about Template Literals.
@kostadinsamardjiev2146
@kostadinsamardjiev2146 7 ай бұрын
you make my day, haha, thanks.
@user-fx5lk6dy3m
@user-fx5lk6dy3m 6 ай бұрын
thanks bro!!
@orundev
@orundev 9 ай бұрын
Hey farhan bhai best instructor
@Alex_2k3
@Alex_2k3 9 ай бұрын
Thanks for your detailed tutorial.
@FernandoTorres-le1ge
@FernandoTorres-le1ge 9 ай бұрын
Idk who got the same error, but when i tried to add a review it said: "review is not iterable". You can solve this by adding the following code to the "addReview" func -> const updatedReviews = reviews != null ? [...reviews, { body: rev.value }] : [{ body: rev.value }]; the problem was that if the review list is empty (null), it wouldnt iterate when you added the first one, so you need to check if its null to avoid the error, if it makes sense (:
@jeotah7176
@jeotah7176 9 ай бұрын
I don’t understand why mine is still not working
@leeh7
@leeh7 6 ай бұрын
Wow, thank you so much!!!
@NoobProgrammer2307
@NoobProgrammer2307 5 ай бұрын
Thank you! you saved me a lot of time.
@stefanoluzi2430
@stefanoluzi2430 3 ай бұрын
THANKS !!!
@atulkprajapati
@atulkprajapati 2 ай бұрын
Are the previous reviews shown, once we refresh the page?
@testimony7233
@testimony7233 Жыл бұрын
Thank you freecodecamp You guys are doing a great job
@z00lus
@z00lus Жыл бұрын
Don't use these dot env files . Spring support notation for env variables , so you just need specify in docker file or set from k8s secrets variables like SPRING_DATA_MONGODB_URI. And btw if you added env files and do not commit them to git , how CI server will build them to jar ?
@homerlol9058
@homerlol9058 8 ай бұрын
can you give a more detailed example?
@SoledadDelSol
@SoledadDelSol 5 ай бұрын
This is a great intro to springboot, but the backend API needs to be fleshed out more. Nothing is stopping someone from flooding the database with reviews for nonexistent movies, error handling, little things like that which are very important to learn as well.
@bonganijele9770
@bonganijele9770 Жыл бұрын
I cant wait to learn about mongodb and java for backend
@dk9824
@dk9824 Жыл бұрын
I am not sure what I am doing wrong but movies does not load in React part. The request is blocked by CORS policy in browser
@lilil.8640
@lilil.8640 Жыл бұрын
Same for me. Any suggestions?
@fyd6157
@fyd6157 Жыл бұрын
Same here
@EmilianoKalafatic
@EmilianoKalafatic 10 ай бұрын
You can avoid CORS from the java app
@trietquach7391
@trietquach7391 6 ай бұрын
change axiosConfig file to: import axios from 'axios'; export default axios.create({ baseURL: 'localhost:8080', headers: {'skip-browser-warning": "true"} }); add: @CrossOrigin(origins="localhost: 3000") to both controller classes in Java below @RestController annotation
@abhaysinghtomar4267
@abhaysinghtomar4267 Ай бұрын
​@@EmilianoKalafaticbut how to avoid it can you tell me more how to do that?
@rterciotte
@rterciotte Жыл бұрын
In my case, reviews are not being created, or they don't show up in postman for some reason, although there's no error warnings in IntelliJ or in Postman
@sandeepliftss
@sandeepliftss Жыл бұрын
Yeah , I'm also getting the same problem
@ancapist9698
@ancapist9698 Жыл бұрын
In my case It was because of no @Data, @AllArgsConstructor and @NoArgsConstructor annotations in Review class
@tylerbair427
@tylerbair427 Жыл бұрын
I had "imdbID" in my push insdie of reviewController instead of "imdbId" Check for minor spelling and syntax errors
@learningToCode-yg9ef
@learningToCode-yg9ef 10 ай бұрын
has anyone figured this one out? I'm in the very last part of the tutorial and i keep getting "reviews is undefined" as my error
@zeni-ee4vl
@zeni-ee4vl 2 ай бұрын
I can't believe how detailed and well explained the backend part is but the frontend is completely opposite T T
@carlosandressanchez865
@carlosandressanchez865 2 ай бұрын
Thanks for share your knowledge!!!
@arun2438
@arun2438 Жыл бұрын
getting this error at the end Reviews.js:36 TypeError: reviews is not iterable at addReview (Reviews.js:28:1)... from [...reviews]
@andrewng9950
@andrewng9950 Жыл бұрын
Can you retrieve your reviews from postman? Anyways I renamed the data on mongoDB from reviewIds to reviews cause that's what it is called when we upload from the json file. Yet the react frontend is looking for reviews.
@samuelsibuea2000
@samuelsibuea2000 11 ай бұрын
are you already solve this problem? I need an answer hahaha
@phoebelim2298
@phoebelim2298 Ай бұрын
@@andrewng9950 Hi, after typing the review in the webpage, can you see the previous review you made on the page as the video show us? And can you retrieve your review from postman?
@megaQpa1
@megaQpa1 Жыл бұрын
Be aware guys, java code pushed to git is not the same code as in backend part of this course - there are slight differences
@fhc9916
@fhc9916 Жыл бұрын
I opted for a package in my GitHub repository but during recording I see no need for different packages so did everything in the root package. Other than that the code should be more or less same.
@nataliezhu1225
@nataliezhu1225 Жыл бұрын
How can I make a project that is the same as his at 27:00?Can you tell me, please?
@angeloalonzo5500
@angeloalonzo5500 2 ай бұрын
can you share what are the difference as mine stops running after the adding .env
@maelbouvard9592
@maelbouvard9592 7 ай бұрын
Great video, very useful :)
@Ivan-bk4oc
@Ivan-bk4oc 3 ай бұрын
thanks for the course, two things that may help someone. 1.) using map in file Hero.js use {movies && movies.map} instead of {movies.map} or use {movies?. Map}. 2.) importing Carousel use import Carousel from 'react-material-ui-carousel' instead of import { Carousel } from 'react-material-ui-carousel', this is my error, because i don't pay attention, because the second part of the course is too fast.
@ursula9275
@ursula9275 Ай бұрын
yes this {movies && movies.map} helped me a lot thank you :)
@sebastiansparrow4916
@sebastiansparrow4916 Жыл бұрын
1:06:10 I am getting empty list of objects. How do I solve this? Edit: simple solution: I added getters, setters and a constructor in Movie POJO
@beelzebud9539
@beelzebud9539 Жыл бұрын
men i cannot solve :c help me
@mythm2063
@mythm2063 Жыл бұрын
lol i struggled so hard, it's like Lombok does not generate getters and setters so you have to manually write them
@omkarwakchaure1396
@omkarwakchaure1396 9 ай бұрын
@@mythm2063 bro my all data come in theory fomart not in list
@mythm2063
@mythm2063 9 ай бұрын
@@omkarwakchaure1396 what do you mean theory format? Like u're getting getter names instead of properties themselves?
@rutikagrawal7362
@rutikagrawal7362 9 ай бұрын
still getting empty array
@siddeshas8193
@siddeshas8193 Жыл бұрын
hi @ 1.57.50 i get error an been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
@TechsterYT
@TechsterYT Жыл бұрын
Use @CrossOrigin on all your backend API endpoints in the controller classes.
@mygodThatsmyShit
@mygodThatsmyShit Жыл бұрын
@@TechsterYT Do we just need to put @CrossOrigin for getAllMovies() ? for me, it's still not working
@fading-blue
@fading-blue Жыл бұрын
@@TechsterYT Still not working
@trietquach7391
@trietquach7391 6 ай бұрын
change axiosConfig file to: import axios from 'axios'; export default axios.create({ baseURL: 'localhost:8080', headers: {'skip-browser-warning": "true"} }); add: @CrossOrigin(origins="localhost: 3000") to both controller classes in Java below @RestController annotation
@abhaysinghtomar4267
@abhaysinghtomar4267 Ай бұрын
​@@fading-bluehave you found the solution??
@buraxta_
@buraxta_ 8 ай бұрын
for thoso who give the error in the .env (dotenv) section, just delete .env prename from each name (make env.MONGO_DATABASE to MONGO_DATABASE)
@funbrolk
@funbrolk Жыл бұрын
Congratulations For 7M ♥️
Backend web development - a complete overview
12:58
SuperSimpleDev
Рет қаралды 1,5 МЛН
Back End Developer Roadmap 2024
10:30
freeCodeCamp.org
Рет қаралды 222 М.
I’m fat 🥲💔#shortvideo #lizzyisaeva
00:29
Lizzy Isaeva
Рет қаралды 6 МЛН
ЗОЛОТАЯ КНОПКА #shorts
00:24
Паша Осадчий
Рет қаралды 1,8 МЛН
My Unconventional Coding Story | Self-Taught
27:14
Travis Media
Рет қаралды 473 М.
Spring Boot In 5 Minutes!
5:14
Soitio
Рет қаралды 899
Fastest way to become a Web Developer in 2024
9:47
Sahil & Sarra
Рет қаралды 329 М.
Gradle Course for Beginners | Get Going with Gradle
56:59
Tom Gregory Tech
Рет қаралды 15 М.
I built 10 web apps... with 10 different languages
14:23
Fireship
Рет қаралды 1,4 МЛН
4 Reasons NOT to become a Full Stack Developer
7:06
James Cross
Рет қаралды 183 М.
Frontend Web Development Projects that got me hired
10:38
James Cross
Рет қаралды 266 М.
These coding projects give you an unfair advantage
8:13
Jason Goodison
Рет қаралды 831 М.
Building web applications in Java with Spring Boot 3 - Tutorial
3:30:40
freeCodeCamp.org
Рет қаралды 76 М.
I’m fat 🥲💔#shortvideo #lizzyisaeva
00:29
Lizzy Isaeva
Рет қаралды 6 МЛН