Learn the MERN Stack - Full Tutorial (MongoDB, Express, React, Node.js)
⚠️ There is a new version of this course: • MERN Stack Course - AL...
Learn the MERN stack by building an exercise tracker application in this complete tutorial course. You will learn the basics of MongoDB, Express, React, Node.js, and Mongoose.
Tutorial developed by Beau Carnes.
💻Code: github.com/beaucarnes/mern-ex...
🔗MongoDB Atlas: www.mongodb.com/cloud/atlas?u...
🔗Article version: / learn-the-mern-stack-b...
If you like robot toys, check out Beau's other KZread channel: / robotfamily
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: www.freecodecamp.org/news
Пікірлер: 1 400
⚠️ There is a new version of this course: kzread.info/dash/bejne/n6Z8sLWantDXgZc.html
@jgv4945
3 жыл бұрын
Would you recommend watching both? Or does the new version cover exact the same but just up-to-date?
@ihsannuruliman3656
3 жыл бұрын
@@jgv4945 up to date of course.
@jgv4945
3 жыл бұрын
@@ihsannuruliman3656 not a valid answer to my question. So you didn't understand it.
@ihsannuruliman3656
3 жыл бұрын
@@jgv4945 alright sir
@isururanawaka5839
2 жыл бұрын
Thank you very much.
I like the title. I have seen that somewhere before...lol
@freecodecamp
5 жыл бұрын
@Traversy Media We love your work!
@shortssquad1
5 жыл бұрын
@Traversy Media love the way you teach brother. you kind of my first programming teacher. lots of love from india.
@WebZoneCode
5 жыл бұрын
Traversy Media is here, Nice
@fabriziotofanelli
5 жыл бұрын
@Traversy... hypnosis time... you have not seen anywhere... you have not seen anywhere... you have not seen anywhere... =)
@tone0757
5 жыл бұрын
Ha!
I am now in love with the MERN stack. Thank's for the introduction Beau!
Backend(Express): 12:02 Frontent (React): 43:32 Connecting Frontend to backend : 1:19:40
@PriyeshuGarg
4 жыл бұрын
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.
@falconnaman9979
4 жыл бұрын
@@PriyeshuGarg The correct spelling is "exercise".
@medoubella
4 жыл бұрын
@@PriyeshuGarg LOL
@PriyeshuGarg
4 жыл бұрын
@@falconnaman9979 my whole schooling was a lie 😂
@kollamkochunni
4 жыл бұрын
@@PriyeshuGarg I cannot thank you enough for the second point. The authentication error was driving me crazy.
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
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.
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!
@champ408
2 жыл бұрын
if you don't mind me asking, which bootcamp did you go to?
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.
You guys are simply awesome, thanks a zillion for this tutorial. God bless you
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.
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.
Awesome video! A lot of details, which will benefit beginners worldwide.
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
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.
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! :)
thank you, this is very useful. a quick way to grasp MERN stack
Great tutorial, really simple. I needed this refresher for work.
@steve905
Жыл бұрын
Where do you work that you're watching KZread videos for refreshers?
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
Gracias por el tutorial, en pleno 2022 me pongo a aprender recién MERN, tuve algunos problemas durante el curso por algunas librerías nuevas que se instalaron en lugar de usar las librerías del año 2019, pero pude solucionar todos los problemas y me funciona, excelente vídeo 😎
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!
@josevieraflores8312
Жыл бұрын
of course help thanks a lot my friend and yes that solution is not stable but works (id)
I really appreciate the concise and clear explanations in this tutorial. Good job!
Great Tutorial! Something I would like to say is that on 01:39:00 you said the difference between Class Components and Functional Components in React is that functional components don't support state and lifecycle methods which is not true anymore. You may use useState, useEffect and ... in functional components and they are even the preferred method these days. Thank you
@anilreddy12001
Жыл бұрын
yes. that is after the react hooks functionality has been implemented
Didn't know anything about react, but now I know more than before...thanks :)...pretty straight forward.
Thank you very much. Your work is concise but straight to the point. Excellent!
Amazing tut man, a diamond resource to learn JS full-stack dev ! love ya!
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!
@malindualwis1905
2 жыл бұрын
hey Anish, does your code works perfectly?
Thanks for the video. I learned react using hooks first since that was the direction where react was going, but I found alot of older tutorials were using classes so I decided to go backwards. I also never got the chance to link react with a backend until now.
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
"Ok, so I'll go to this file........... I'll paste in some code" Me: "FREAKING DAMMIT!!"
Very helpful tutorial for MERN stack. One issue I faced while doing it was that 'It wouldn't connect from my personal IP to MongoDB Atlas'. I was able to fix that issue by changing the network access setting in MongoDB to allow IP address from anywhere. If you are facing same problem fix it that way. PS: If you are having problem with him pasting code, you shouldn't be here. I believe this tutorial is for those who have the basic understanding of ReactJS, nodejs and express. Coding everyline would make it extremely long and hence uninteresting. You can learn the basics from other channels and come here.
One of the best tutorials out there...thanks a lot man
Awesome video. First time I see how things interact. Im new to React and getting into Node and the rest of the MERN pack. This helps a lot to understand how are things done between this technology. Thank 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!
@erenyeager4452
2 жыл бұрын
hey there. how are you doing now? ru working on mern?
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!
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 so much for this! Completed everything and understood it perfectly!
I lol'd so hard every time he said "I'm just going to paste this here".
@parikshitrawat8680
3 жыл бұрын
Hahaha
I feel like my head is going to explode but that was a great tutorial. Thank you!
Amazing Video. I love the clean code and explanation ... unlike other videos who spend most time typing and making mistakes in code.
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.
@AnandKumar-hi6by
3 жыл бұрын
I am an absoulter beginner is it a good video to start with???
As a mobile app and AI and desktop dev, this is the most challenging frameworks that I've ever worked on even with practice.
Thank you so much! I was hoping to understand how it works and your tutorial helped me a lot to see more clearly.
If i could like this twice i would! These are excellent. Thanks a million!
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
Thanks for this quick tutorial. Watched it in 1.5x speed. Now im feeling like Neo after he learned Jiu Jitsu :D
@subham-raj
4 жыл бұрын
2x always
@xavihernandes267
4 жыл бұрын
Ahah I love your comment ahah
@anatolio8689
4 жыл бұрын
Good call on increasing the speed
@the_information_society
4 жыл бұрын
@Robin Rowiski and then realized it was just a computer program meant to teach you something about the Matrix
@rajatgoyal8162
4 жыл бұрын
Hey can somebody please tell me how can I add authentication in this? Like login and signup page
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!
Thank you Beau! Great introductory video
the connection between front- and backend starts at 1:19:35 if you are interestet especially in that part
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.
@luisady8990
3 жыл бұрын
Also there's a difference between your MongoDB password and collection password. Replace with your collection password.
@drukey9206
2 жыл бұрын
@@luisady8990 How do I set the collection password?
@KirimotoTV
2 жыл бұрын
@@drukey9206 It will ask you to set a password when you create a new cluster in MongoDB.
Simply and very well explained. Thank you very much for this course.
I went through the entire tutorial. Thank you !!!!
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.
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 :)
@Hannah-ly6ff
3 жыл бұрын
cool!
Hello, thank you for the tutorials, I really appreciate that you teach us this mern stack in an easy way to understand.
This tutorial is awesome! Very concise and informative.
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!
@matthewkruk1455
3 жыл бұрын
Was it Grand Circus?
@rogerwinright2290
3 жыл бұрын
@@matthewkruk1455 that's the one!
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.
@pedrovitor2962
3 жыл бұрын
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
@caiquecarvalho771
2 жыл бұрын
Eu tb, to aprendendo inglês e programação. Nunca fui fã de vídeos em português. Por aqui eles explicam melhor.
Truly awesome work dude. This video tutorial gives the exact idea of a MERN Stack development. Well done my friend. 👍👍
This course is completely insane, awesome!
Great tutorial, nothing wrong with copying and pasting code, he explains it all line by line after so i dont see the problem.
the quality sound is very good
Great overview. Good job. Covers all the basics
One of the best videos I've ever had the pleasure to watch!
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?
@MuffinologyTrainer
2 жыл бұрын
middleware
Please make a video on pagination for the Exercise List page by using reactjs
Thank You Beau ! I Really Learn with you leasons ! Thanks so much !
This tutorial is really a big help for me. simple and easy to understand. Thank you
that 1 hour tutorial, learned in 1 week with still a little bit confusion on react, thankyou sir for such a great tutorial.
@uctrung9539
4 жыл бұрын
me too
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.
@bilguunsoninbayar873
4 жыл бұрын
Thank you very much! I was wondering how to get it fixed.
@adidegistir
4 жыл бұрын
Thank you very much!
@malamhari_
4 жыл бұрын
On firefox you can do the same things too, in the console log click the settings button and check the persist log
@centinela90
3 жыл бұрын
Nice observation Laura, thanks ;)
@cgn_slaps
3 жыл бұрын
Thank you sm
Thank you so much! Best tutorial ever!
Thanks Beau, very nice effort, keep it up and let me know if you have some more courses.
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!
@Hafsa0526
Жыл бұрын
Hey Anu. Good to know you enjoy learning. Are you a fresher/ Did you create any project in JavaScript frameworks?
@anukeswani9593
Жыл бұрын
@@Hafsa0526 Yes. I am a fresher and I have created a project using MERN
@Hafsa0526
Жыл бұрын
@@anukeswani9593 Thanks for responding Anu. For further discussion, connect to me using the contact in About section of my channel
Very good tutorial for beginners. Suggestion: Folder structure is very important for big projects. If these tutorials also include that will be very helpful. eg: Suppose If we have a lot of routes. If we write it in server.js file it will be very difficult to read. These are small things which have a big role when the project grows.
it was a great tutorial thank you,Beau Carnes appreciate it alot
Thank u dude!! Your work it's so great. It's a huge contribution to the dev comunity.
This is so informative and simple, loved it. Though, for some people (like me), increase video speed to 1.25, and enjoy. Quality content. Kudos.
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.
@sasindukarunathilaka2741
Жыл бұрын
yes
@josevieraflores8312
Жыл бұрын
thanks :)
@j-estrada
Жыл бұрын
Had the same issue. Thank you! Also, don't forget to import routes from react-router-dom. import { Routes } from "react-router-dom";
@sasindukarunathilaka2741
Жыл бұрын
@@j-estrada can you help me to create mern project with crud operations i cant create update and delete
@tusharsharma4571
Жыл бұрын
@@j-estrada Still white screen showing up Can you help me out
Fantastic tutorial , thank you so much for clear and simple explanation.
The course is very well explained and above all very detailed, thank you very much
Why are we using POST to update the exercise? Shouldn't we be using PUT to update the data? Thanks.
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.
This is a great tutorial on mongodb!
I love your enthusiasm (@ 1:00:10) :D ) ! Really great video, very easy to follow, and I love how you give great context into how everything is working together. (notes for myself: Frontend @ 43:43)
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 😀
after the 4th "and im gonna paste this code here" i just went to the github lmao
Thank you so much for the tutorial! It was helpful. I have learned so many stuff from it.
I found this very helpful. Clear explanations at a good pace. Thanks so much.
20:35 - Getting MongoDB error. Replaced useCreateIndex with useUnifiedTopology in server.js and now works.
@kartikeyabatura1845
2 жыл бұрын
Helped me out when I got stuck. Thanks!
@ivanzeikan8703
2 жыл бұрын
Thanks a lot
Can you make a tutorial on how to put this behind user auth? so they have to login to see their list
Thanks a lot Beau, that was very useful!
Thanks Jo for sharing, it was really helpful!
this is wonderful, thanks my teacher
@shivamdwivedi2051
4 жыл бұрын
I am getting an error during establish the database connection in the beginning. Did you face that too?
@muraterhan
4 жыл бұрын
@@shivamdwivedi2051 hi, did you write mongodb password to connect url?
@shivamdwivedi2051
4 жыл бұрын
Yes I did that too
Can you show please in a video how to deploy production version in a real hosting server? Thanks
Thanks. I have just started to watch this tutorial and I hope I will learn attractive informations
A good head start, nice one!
Entire tutorial in one phrase: "I'm gonna paste it here".
@gio4690
4 жыл бұрын
yup
@btrn_1995
4 жыл бұрын
LOOOOL
@ferhatacar5641
4 жыл бұрын
The whole Programming career is just copying and pasting
@gio4690
4 жыл бұрын
@@ferhatacar5641 not tutorials tho
@xcoldbloom
4 жыл бұрын
@Symbol how inefficient. i kept being glad that I didn't have to wait for him to type it all.
I have similar zsh setup. Loved the tutorial
Well done tutorial. You explain a lot in under two hours.
Why not use async/await??
@lckylke5751
3 жыл бұрын
facts...es6 ftw