Really awesome tutorial. We've just gotten to the point in our bootcamp where we're tying together all the skills we've learned so far (i.e. the MERN stack), and this video explained how to connect everything in quickly and concisely. Thanks, Beau!
7/11/2022 Here are the issues and the fixes I ran into while following along, none of them were very severe and all but the last one was solved quickly. Error at 17:50 line 14 I was getting errors when I included the flags in mongoose.connect(), just pass the uri as the only argument. Error at 1:15:23 if nothing is appearing in the console, then that is probably because the page was refreshed when the form was submitted. All you need to do is go into the top right of the inspect panel, there should be two gears click on the lower gear for setting and select "preserve log", this will stop the console from refreshing. The final error I got is at 1:45:13 and says "params is not defined", for whatever reason you can't reference params like that anymore and idk how to get around it without making the component a function. The alternative solution is to grab the url in the search bar and snag the id that way. In edit-exercise.component.js go to componentDidMount() at the top paste "const arr = window.location.href.split('/');" This creates an array consisting of every step in the url path of our current page. Then in the axios.get() call replace this.props.match.params.id with "arr[arr.length-1]". This gets the last element of our array which happens to be the id of the exercise that we are editing. The ID is what we need to make correct calls to MongoDB. Do the same thing for the onSubmit function in the same file. (The final solution is not saleable, the more branching paths there are in the url, the harder it will be to maintain. If anyone knows a better solution, please let me know because honestly this one feels pretty hacky) Hope this helps someone!
This tutorial walks through the whole freaking process. Great tutorial. Thank you so much for this. I'm broke else I would've joined your channel as a sponsor.
This tutorial actually just saved my grade. Needed a way to post text from state to my db and fetch all entries and you saved my life thank god for you
Hi Beau. I'm a totally beginner to MERN stack (coming from LAMP one) I have a MERN project to dive in and, fortunately, it seems that previous developers build it the way you described in your video. Then I feel so much more confident after only two hours seeing your video that I wanted to thank you sincerely! I didn't knew about this channel but now I'm hooked. Thanks!
I took the complete lessons and i new nothing before starting this lecture on MERN. What a fantastic teacher sir you are. Lots of prayers for you. Regards
Few tips to know for the first part ( Express) 1.) Watch-out for spelling of "Excercise", they have used "Exercise" 2.) While whitelisting IPs at Atlas, you'll have to whitelist all IPs if your ISP provides a dynamic IP i.e. those IP's which change often.
Thank you for everything. I just had a problem setting up cors, idk why every tutorial dont get the problem, luckily i solved it, everything else went smooth. thank you
im learning english and programming at the same time , and i have to say thank you because you have a very good pronunciacion that allows me to understand everything.
Me too! Também estou aprendendo programação e ingles ao mesmo tempo haha. Só procuro vídeos de programação nesse idioma, um dos requisitos é ter uma boa pronúncia
1:15:26 My console log kept clearing because of the redirect (window.location='/') inside the onSubmit method. I could see something was logging, but it would quickly disappear. So... to fix this (on chrome), I had to click on the settings in my console log and click preserve log.
Thanks for such a great video sir. I learned a lot. Solution to only problem i faced in this tutorial: Those people who are getting error saying "MongoDB Network error: net:err connection refused" something like this, please try to run "nodemon server" on one separate terminal and also run "npm start" on second terminal . If issue still persists , then please whitelist your IP on MongoDB atlas portal or just update the setting to "allow network access from anywhere"
this video is great, but it's definitely showing its age. You need to do some digging to get the hang of how things work now but, figuring it out on your own can be a pretty sweet learning experience.
I noticed the default in the Datepicker value became 1970-01-01... to make the default value more recent, I just slapped in Date.now() on the Datepicker's 'selected' property. Viva freeCodeCamp too!!
Man you're awesome. I am not native in english, yet I understood everything you said! I wish all teachers could be as patient when talking as you. Great course.
You guys really rock! Education for free is one of the best weapon to decrease inequalities, nevertheless everybody talks about fighting it, but only a few really act against. And you're one of the few, thank you so much!
Great content. I've done in-depth learning from an online platform. I like how this is summarized with good explanations. Like others have indicated, a more in-depth tutorial for intermediate and advanced programmers would help
THANK YOU BEAU CARNES.. Just Completed the Course..Your MERN Course is very good..I enjoyed it a lot..Just Started the MERN Stack and this helped me a lot in getting started with mern stack..Again Thank You soo much..:)
There are some issues because of the version updates. But still, Great Course. Very Clear. Loved it. ❤ Going to watch new version of this course now. Thanks!
1:09:12 sir you used bind(this); I saw another way to bind the methods to class by using arrow function. For eg onChangeUsername=(e)=>{...} It works fine. Is there any specific reason, why you use bind over arrow function. If there is ,please tell me? And your tutorial is very easy to follow. Thanks sir 😀
Beau you are such a lifesaver I feel like 90% of my knowledge comes straight from you and it breaks down all those complicated concepts everyone else overcomplicates
This is the best video of all things for start as a MERN stack developer. I am really grateful to you and the way you have explained is far better than anything. Thank you so much for the great project!!
Thank you Beau, this is the first project that I completely followed through. I really like the selected information you gave, they are very on point. And thanks the comment section for very helpful information too.
1:08:55 , instead of using the normal functions and the binds in the constructor, you could use the arrow functions instead and 'this' won't be undefined, i tried it and it worked but i'm not sure if it has unwanted consequences ✌.
You made my new year rocking.Thanks for this detailed video.I was so confused about how to connect frontend with backend and here you go, so real smooth and i actually sat for 12 hours seeing just a 2 hour video, coded along with you, and understood the whole concept. faced problem in establishing mongoDB successfully but googled it so high for 2 hours and fixed it.& the sol was just to add the ip whitelist. one problem is still on, like i can't see the process in console, it comes with error like server disconnected, but sometimes it works . can you give me the sol. for this. i will be grateful & HAPPY NEW YEAR :)
Thanks Beau! Recommended video, although classes in React are not used anymore, at least not in general. But for a beginner, it is a very useful tutorial. I hope to see an updated MERN course using hooks soon! Best of luck! God bless! :)
if anyone got a problem with connecting frontend to backend just make sure that u have two terminals one for running the backend and the other one for running react! and if u didnt watch the whole video at once u have to make sure to reconnect ur cluster again
Hah! So, I enjoyed this tutorial quite a bit. I noticed the 123 Main Street, Grand Rapids MI and found that you and I both worked at a local coding bootcamp out here! Small world!
I guess this is recorded before react hooks? All of the class components can be refactored to function components which saves considerable lines (this and using arrow functions). I'm doing that, if anyone wants to peek.
Thanks for the tutorial! For anyone else wondering why their navbar doesn't vertically expand on smaller screens: Remove the "collapse" class from line 10 of navbar.component.js. I didn't notice while following along but Beau's code has a typo ("collpase") @ 55:23, which actually turned out to be beneficial for the end result lol.
If anyone is not getting the "MongoDB connection successful" message; 1. make sure you are in "cd backend" when you do "nodemon server". 2. make sure you remove the "" symbols from "" in the database connection string. 3. make sure your username and password is for the atlas CLUSTER not your mongoDB account. Also it should have no special characters
This is awesome. Thank you so much. It's exactly what I wanted to learn, and it was explained very well. My mind is really blown by the idea of doing all the API requests from the browser, rather than a whole page being returned. Question for anybody: how would you add authentication into this app? Middleware on the backend?
Thanks for the free content. user is redirected to home page before exercise is actually updated in the database. this causes home page to display previous copy of the exercise. this is due to the fact that axios is asynchronous. so instead of using "windows.location("/")" after axios, better option is to use "history.push("/")" inside axios.then.
If anyone else got stuck at 20:35 with some errors, you need to encode your password before insert it in the connection string, or you could also use the auto-generate it from user configuration in database-access page from mongodb site. And also, in the network access, add your IP.
if u r having trouble starting the server try changing line under "scripts:" in package.json to ""start":"nodemon server.js" also add "useUnifiedTopology:true" in mongoose.connect in server.js file
@@predatorlogin303 It's less code. Switch a function to an arrow function in your code and comment out the binding and see if it works! Also, you don't need to use a constructor method to save state.
⚠️ There is a new version of this course: ua-cam.com/video/mrHNSanmqQ4/v-deo.html
Would you recommend watching both?
Or does the new version cover exact the same but just up-to-date?
@@jgv4945 up to date of course.
@@ihsannuruliman3656 not a valid answer to my question. So you didn't understand it.
@@jgv4945 alright sir
Thank you very much.
I like the title. I have seen that somewhere before...lol
@Traversy Media We love your work!
@Traversy Media love the way you teach brother. you kind of my first programming teacher. lots of love from india.
Traversy Media is here, Nice
@Traversy... hypnosis time...
you have not seen anywhere... you have not seen anywhere... you have not seen anywhere... =)
Ha!
Really awesome tutorial. We've just gotten to the point in our bootcamp where we're tying together all the skills we've learned so far (i.e. the MERN stack), and this video explained how to connect everything in quickly and concisely. Thanks, Beau!
if you don't mind me asking, which bootcamp did you go to?
I am now in love with the MERN stack. Thank's for the introduction Beau!
7/11/2022 Here are the issues and the fixes I ran into while following along, none of them were very severe and all but the last one was solved quickly.
Error at 17:50 line 14 I was getting errors when I included the flags in mongoose.connect(), just pass the uri as the only argument.
Error at 1:15:23 if nothing is appearing in the console, then that is probably because the page was refreshed when the form was submitted. All you need to do is go into the top right of the inspect panel, there should be two gears click on the lower gear for setting and select "preserve log", this will stop the console from refreshing.
The final error I got is at 1:45:13 and says "params is not defined", for whatever reason you can't reference params like that anymore and idk how to get around it without making the component a function. The alternative solution is to grab the url in the search bar and snag the id that way. In edit-exercise.component.js go to componentDidMount() at the top paste "const arr = window.location.href.split('/');" This creates an array consisting of every step in the url path of our current page. Then in the axios.get() call replace this.props.match.params.id with "arr[arr.length-1]". This gets the last element of our array which happens to be the id of the exercise that we are editing. The ID is what we need to make correct calls to MongoDB. Do the same thing for the onSubmit function in the same file.
(The final solution is not saleable, the more branching paths there are in the url, the harder it will be to maintain. If anyone knows a better solution, please let me know because honestly this one feels pretty hacky)
Hope this helps someone!
of course help thanks a lot my friend and yes that solution is not stable but works (id)
This tutorial walks through the whole freaking process. Great tutorial. Thank you so much for this. I'm broke else I would've joined your channel as a sponsor.
Been looking for a beginner tutorial that was more recent, perfect timing!!
This is the most short, complete, clear and beautiful MERN crash tutorial, thanks a lot.
Hopefully to keep watching tutorials like this one.
This tutorial actually just saved my grade. Needed a way to post text from state to my db and fetch all entries and you saved my life thank god for you
"Ok, so I'll go to this file........... I'll paste in some code"
Me: "FREAKING DAMMIT!!"
Thanks for this quick tutorial. Watched it in 1.5x speed. Now im feeling like Neo after he learned Jiu Jitsu :D
2x always
Ahah I love your comment ahah
Good call on increasing the speed
@Robin Rowiski and then realized it was just a computer program meant to teach you something about the Matrix
Hey can somebody please tell me how can I add authentication in this? Like login and signup page
Hi Beau. I'm a totally beginner to MERN stack (coming from LAMP one)
I have a MERN project to dive in and, fortunately, it seems that previous developers build it the way you described in your video.
Then I feel so much more confident after only two hours seeing your video that I wanted to thank you sincerely!
I didn't knew about this channel but now I'm hooked. Thanks!
hey there. how are you doing now? ru working on mern?
I took the complete lessons and i new nothing before starting this lecture on MERN. What a fantastic teacher sir you are. Lots of prayers for you. Regards
Backend(Express): 12:02
Frontent (React): 43:32
Connecting Frontend to backend : 1:19:40
Few tips to know for the first part ( Express)
1.) Watch-out for spelling of "Excercise", they have used "Exercise"
2.) While whitelisting IPs at Atlas, you'll have to whitelist all IPs if your ISP provides a dynamic IP i.e. those IP's which change often.
@@PriyeshuGarg The correct spelling is "exercise".
@@PriyeshuGarg LOL
@@falconnaman9979 my whole schooling was a lie 😂
@@PriyeshuGarg I cannot thank you enough for the second point. The authentication error was driving me crazy.
Thank you for everything. I just had a problem setting up cors, idk why every tutorial dont get the problem, luckily i solved it, everything else went smooth. thank you
how did you solve it.
For people at 1:00:00 if your webpage does not render anything but a white screen, try replacing in App.js:
function App() {
return (
);
}
I think it has to do with the version of react-router-dom, but I am not sure.
yes
thanks :)
Had the same issue. Thank you! Also, don't forget to import routes from react-router-dom.
import { Routes } from "react-router-dom";
@@j-estrada can you help me to create mern project with crud operations i cant create update and delete
@@j-estrada Still white screen showing up
Can you help me out
im learning english and programming at the same time , and i have to say thank you because you have a very good pronunciacion that allows me to understand everything.
Me too! Também estou aprendendo programação e ingles ao mesmo tempo haha. Só procuro vídeos de programação nesse idioma, um dos requisitos é ter uma boa pronúncia
Eu tb, to aprendendo inglês e programação. Nunca fui fã de vídeos em português. Por aqui eles explicam melhor.
I have learned so much from this channel that when I get a job I will definitely sponsor you guys. Love the amazing work you guys are doing.
I am an absoulter beginner is it a good video to start with???
1:15:26 My console log kept clearing because of the redirect (window.location='/') inside the onSubmit method. I could see something was logging, but it would quickly disappear. So... to fix this (on chrome), I had to click on the settings in my console log and click preserve log.
Thank you very much! I was wondering how to get it fixed.
Thank you very much!
On firefox you can do the same things too, in the console log click the settings button and check the persist log
Nice observation Laura, thanks ;)
Thank you sm
Thanks for such a great video sir. I learned a lot.
Solution to only problem i faced in this tutorial:
Those people who are getting error saying "MongoDB Network error: net:err connection refused" something like this, please try to run
"nodemon server" on one separate terminal and also run "npm start" on second terminal .
If issue still persists , then please whitelist your IP on MongoDB atlas portal or just update the setting to "allow network access from anywhere"
You just saved me from 8+hours of googling brother, thanks to you. God bless your soul!
@@buraksurumcuoglu8303 glad to see it helped😁
this video is great, but it's definitely showing its age. You need to do some digging to get the hang of how things work now but, figuring it out on your own can be a pretty sweet learning experience.
Here in 2022, Finally i decided to learn development! Well, "Jab jagoo tab sawera!".
20:35 - Getting MongoDB error. Replaced useCreateIndex with useUnifiedTopology in server.js and now works.
Helped me out when I got stuck. Thanks!
Thanks a lot
Finished!! I loved it! Viva freeCodeCamp!! I did add parseInt to the date to solve a problem:
date: new Date(parseInt(response.data.date))
I noticed the default in the Datepicker value became 1970-01-01... to make the default value more recent, I just slapped in Date.now() on the Datepicker's 'selected' property. Viva freeCodeCamp too!!
the connection between front- and backend starts at 1:19:35 if you are interestet especially in that part
Man you're awesome. I am not native in english, yet I understood everything you said! I wish all teachers could be as patient when talking as you. Great course.
Extremely useful! Loved this video and was able to grasp these concepts so quickly! Also served as a way to convince our friends that we were working!
hey Anish, does your code works perfectly?
Didn't know anything about react, but now I know more than before...thanks :)...pretty straight forward.
You guys really rock! Education for free is one of the best weapon to decrease inequalities, nevertheless everybody talks about fighting it, but only a few really act against. And you're one of the few, thank you so much!
I have taken an online class and watched more then a few videos. You explain what everything is doing and I understand way more now. Thank you.
I feel like my head is going to explode but that was a great tutorial. Thank you!
You guys are simply awesome, thanks a zillion for this tutorial. God bless you
Great content. I've done in-depth learning from an online platform. I like how this is summarized with good explanations. Like others have indicated, a more in-depth tutorial for intermediate and advanced programmers would help
Great tutorial, nothing wrong with copying and pasting code, he explains it all line by line after so i dont see the problem.
Awesome video! A lot of details, which will benefit beginners worldwide.
THANK YOU BEAU CARNES.. Just Completed the Course..Your MERN Course is very good..I enjoyed it a lot..Just Started the MERN Stack and this helped me a lot in getting started with mern stack..Again Thank You soo much..:)
There are some issues because of the version updates.
But still, Great Course. Very Clear. Loved it. ❤
Going to watch new version of this course now.
Thanks!
Hey Anu. Good to know you enjoy learning. Are you a fresher/ Did you create any project in JavaScript frameworks?
@@Hafsa0526 Yes. I am a fresher and I have created a project using MERN
@@anukeswani9593 Thanks for responding Anu. For further discussion, connect to me using the contact in About section of my channel
nothing but to say thank you ,finally start understaning mern
1:09:12 sir you used bind(this); I saw another way to bind the methods to class by using arrow function. For eg onChangeUsername=(e)=>{...} It works fine. Is there any specific reason, why you use bind over arrow function. If there is ,please tell me? And your tutorial is very easy to follow. Thanks sir 😀
Beau you are such a lifesaver I feel like 90% of my knowledge comes straight from you and it breaks down all those complicated concepts everyone else overcomplicates
It would be good if this video gets updated with the Hooks, I know how, but I bet it would be way easier for starters than class method
This is the best video of all things for start as a MERN stack developer. I am really grateful to you and the way you have explained is far better than anything. Thank you so much for the great project!!
that 1 hour tutorial, learned in 1 week with still a little bit confusion on react, thankyou sir for such a great tutorial.
me too
Thank you Beau, this is the first project that I completely followed through. I really like the selected information you gave, they are very on point. And thanks the comment section for very helpful information too.
thank you, this is very useful.
a quick way to grasp MERN stack
1:08:55 , instead of using the normal functions and the binds in the constructor, you could use the arrow functions instead and 'this' won't be undefined, i tried it and it worked but i'm not sure if it has unwanted consequences ✌.
You made my new year rocking.Thanks for this detailed video.I was so confused about how to connect frontend with backend and here you go, so real smooth and i actually sat for 12 hours seeing just a 2 hour video, coded along with you, and understood the whole concept.
faced problem in establishing mongoDB successfully but googled it so high for 2 hours and fixed it.& the sol was just to add the ip whitelist.
one problem is still on, like i can't see the process in console, it comes with error like server disconnected, but sometimes it works . can you give me the sol. for this. i will be grateful
& HAPPY NEW YEAR :)
cool!
Truly awesome work dude. This video tutorial gives the exact idea of a MERN Stack development. Well done my friend. 👍👍
Thanks Beau! Recommended video, although classes in React are not used anymore, at least not in general. But for a beginner, it is a very useful tutorial. I hope to see an updated MERN course using hooks soon! Best of luck! God bless! :)
Coding along is a better practice than just pasting codes.
This course is completely insane, awesome!
after the 4th "and im gonna paste this code here" i just went to the github lmao
if anyone got a problem with connecting frontend to backend just make sure that u have two terminals one for running the backend and the other one for running react! and if u didnt watch the whole video at once u have to make sure to reconnect ur cluster again
And if you closed and reopened and nothing shows it helps to run nodemon server again in cd backend.
Hah! So, I enjoyed this tutorial quite a bit. I noticed the 123 Main Street, Grand Rapids MI and found that you and I both worked at a local coding bootcamp out here! Small world!
Was it Grand Circus?
@@matthewkruk1455 that's the one!
Thanks I’m taking a course at MIT and I’m taking in all I can!
"For extra security I always have the exact same password as my username" lol
Lmao
Thank you very much. Your work is concise but straight to the point. Excellent!
Why not use async/await??
facts...es6 ftw
Thank You Beau ! I Really Learn with you leasons ! Thanks so much !
the quality sound is very good
loved this tutorial! Thanks!
Cyf
Amazing tut man, a diamond resource to learn JS full-stack dev ! love ya!
This was a fun challenge running through this tutorial but converting everything to hooks!
Learning full stack dev from jerry seinfeld himself. Amazing
😄😄😄 I love this comment
I guess this is recorded before react hooks? All of the class components can be refactored to function components which saves considerable lines (this and using arrow functions). I'm doing that, if anyone wants to peek.
Thanks for the tutorial!
For anyone else wondering why their navbar doesn't vertically expand on smaller screens: Remove the "collapse" class from line 10 of navbar.component.js. I didn't notice while following along but Beau's code has a typo ("collpase") @ 55:23, which actually turned out to be beneficial for the end result lol.
so after 1 week I was able to create this whole project in functional component !!
🙂🙂
This was a nice tutorial.
Thankyou!!
Update :March 2020
../backend/server.js
mongoose.connect(uri, { useUnifiedTopology:true, useNewUrlParser: true });
Remove " useCreateIndex: true "in server.js as it doesn't require in the new mongoDB and shows warning.
thats the latest update ig
I really appreciate the concise and clear explanations in this tutorial. Good job!
This tutorial is awesome! Very concise and informative.
If anyone is not getting the "MongoDB connection successful" message;
1. make sure you are in "cd backend" when you do "nodemon server".
2. make sure you remove the "" symbols from "" in the database connection string.
3. make sure your username and password is for the atlas CLUSTER not your mongoDB account. Also it should have no special characters
You're a true blue Australian hero mate.
Great! You've solved it
I wanted to start a full stack project but am mostly a front end guy, this has put me on a very good start so thank you very much sir!
Why are we using POST to update the exercise? Shouldn't we be using PUT to update the data?
Thanks.
One of the best tutorials out there...thanks a lot man
At 1:22:45 when I try to create a new user, it tells me 404 not found, does anyone have the same error?
you saved my school project, thank you so much!
What kind of school is this ... Asking for such complex projects
This is awesome. Thank you so much. It's exactly what I wanted to learn, and it was explained very well. My mind is really blown by the idea of doing all the API requests from the browser, rather than a whole page being returned.
Question for anybody: how would you add authentication into this app? Middleware on the backend?
middleware
Thanks for the free content.
user is redirected to home page before exercise is actually updated in the database. this causes home page to display previous copy of the exercise. this is due to the fact that axios is asynchronous.
so instead of using "windows.location("/")" after axios, better option is to use "history.push("/")" inside axios.then.
If anyone else got stuck at 20:35 with some errors, you need to encode your password before insert it in the connection string, or you could also use the auto-generate it from user configuration in database-access page from mongodb site. And also, in the network access, add your IP.
Also there's a difference between your MongoDB password and collection password. Replace with your collection password.
@@luisady8990 How do I set the collection password?
@@drukey9206 It will ask you to set a password when you create a new cluster in MongoDB.
Thank you Beau! Great introductory video
Nicely explained thanks bob 😍
Can't believe I've never used mongoDB before. So easy!
Can you make a tutorial on how to put this behind user auth? so they have to login to see their list
if u r having trouble starting the server try changing line under "scripts:" in package.json to ""start":"nodemon server.js" also add "useUnifiedTopology:true" in mongoose.connect in server.js file
Please make a video on pagination for the Exercise List page by using reactjs
Thanks a lot sir, learnt a lot from this tutorial.
Learnt a lot while doing this project. Thanks a lot.
Great video using mern! i have refactor it to a function component instead and it seems very interesting
I found this very helpful. Clear explanations at a good pace. Thanks so much.
Use arrow functions instead of data binding.
Can you explain why should we do that?
@@predatorlogin303 It's less code. Switch a function to an arrow function in your code and comment out the binding and see if it works! Also, you don't need to use a constructor method to save state.
@@danjo2714 thanks man, appreciate your explanation
@@danjo2714 do you just remove the constructor method? do you need to save state somewhere else or is it not needed?
@@amalthomas4253 state = {} right at the top of the class
Hello, thank you for the tutorials, I really appreciate that you teach us this mern stack in an easy way to understand.
Very HelpFul. Thanks
25:54 just a video mark. Going for dinner now. Will update when I come back.
Did you come back? lol
It's been 3 days man! you ok?
@@Aoismusic I fear the VENM stack killed him
Dude..... dinner must be over by now.
I recommend you install a video resumer browser plugin. It's an absolute godsend.
Thanks, Beau. This was very helpful.
when i do the first POST request I get Error: Server returned nothing (no headers, no data)
very very helpfull and great content appreciate
most of the time can't create exercise log, don't know why
The course is very well explained and above all very detailed, thank you very much
Thank you so much for the tutorial! It was helpful. I have learned so many stuff from it.