Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 1/2]
Вставка
- Опубліковано 7 лип 2024
- Using React, Node.js, Express & MongoDB you'll learn how to build a Full Stack MERN Project - from start to finish. The App is called "Memories" and it is a simple social media MERN application that allows users to post interesting events that happened in their lives.
Part 2 is NOW OUT - • Full Stack MERN Projec... 🚀
📙FREE Ultimate MERN Guide: resource.jsmastery.pro/mern-g...
💻JS Mastery Pro - jsmastery.pro?discount=youtube
✅ A special UA-cam discount code is automatically applied!
📚 Materials/References:
GitHub Code (feel free to give it a star ⭐): github.com/adrianhajdin/proje...
HTTP status codes: www.restapitutorial.com/https...
MongoDB Atlas: www.mongodb.com/cloud/atlas
MemDev: mem.dev/
Styles Files: gist.github.com/adrianhajdin/...
Image: bit.ly/memories_image
📧 Join our JavaScript Mastery's Newsletter on Web Development, JavaScript & React to get exclusive programming guides, tips & tricks, and entire e-books: resource.jsmastery.pro/newsle... 🔥
⭐Hostinger is my personal recommendation for hosting - www.hostinger.com/javascriptm...
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
💼 Business Inquiries: javascriptmastery00@gmail.com
🌎 Find Me Here:
Instagram: / javascriptmastery
Patreon: / javascriptmastery
Chapters:
00:00 Intro + Demo
02:28 Backend Setup
06:18 Frontend Setup
8:46 index.js Setup
10:21 MongoDB Setup
12:01 Connecting to the Database
15:45 Routing
18:40 Backend Folder Structure
23:39 Controllers
28:50 JSX Structure
36:58 Styling
42:01 Redux!
57:07 Form
1:09:05 Create a Post
1:13:23 MERN
#mern #reactjs #nodejs
![Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 2/2]](http://i.ytimg.com/vi/aibtHnbeuio/mqdefault.jpg)
![Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 2/2]](/img/tr.png)
I have been ignoring this recommendation for a few days thinking it's just another one of those tutorials that leave me with a million questions at the end but boy was I wrong. This is clearly the best MERN stack tutorial I have come across on YT. I love the organization of the back and front end. Makes it easier to understand how everything is linked. And you aced it with the Redux explainer too, not many do that. Many thanks!
I still have a million questions
Right, brotha' ! :D
@@levihalperin7649 🤣🤣🤣
@@levihalperin7649 You should just ask and clear those here or somewhere else.
Clear, concise and no unnecessary cramming of third party modules. The fact that this is free plus the additional MERN Auth video is incredible. Thanks for providing top class education for everyone to access.
Glad you like it Henry!
Hi there, I love your comment so much. I want to use your comment as a testimonial for my upcoming course platform, is that all right with you? :)
@@javascriptmastery yeah of course :)
@@javascriptmastery Hi, is there an updated version of this project that we can start our journey with?
hey, does this course have any pre-requisites? I'm just a beginner, can I still follow without any prior knowledge?
Just want to thank you so much for this amazing course, I never seen any UA-cam channel explain as great as you do.
Ya right 😊
Absolutely killed it! The fact that it is also free also surprises me since I was not able to access any web development course for free. Best tutorial for Full Stack Development!! I loved it, especially because it is absolutely free!!
I had attended a coding bootcamp a couple years ago while working full time and this part of it, routes and CRUD, and linking the server with the client, it was all incredibly challenging for me. There is almost nothing intuitive about any of the commands, you just have to use them perfectly or they don't work. By the end of the course when these concepts were explained I was so sleep deprived that nothing sunk in. I had expected I would need to watch several videos to piece this all together again but here are these two videos that explain the whole process so amazingly clearly. I am sure this has just saved me a ton of time. Very much appreciated!
Thank you!! 🙌
You are definitely not the hero we deserve, but the superhero we needed.
You, my friend, are awesome!
Thanks!!
Your Tutorials are absolutely brilliant. I cannot thank you enough for teaching new developers like me.
I was looking to buy a course on Udemy, until I found this series on UA-cam
I was always searching for MERN tutorials and I can say that this is the BEST one you can found!!
Thanks a lot
Thank you! 🙌
This is great Job.
Covered everything 'front, back and in between'... This will push every intermiadiate Dev to a higher level. Thanks alot man.
Part 2 is as great as it sounds.
Leegoo 💪💪💪🚀
Thank you man! Appreciate it!
One of the best free tutorial videos on the internet! Straight to the point, no waste of time. I'd be happy to pay a version of a training where you deep dive into the logic of each section!
Thank you so much!
I've just started and this is brilliant. You deserve all the success in the world.
You are a blessing to junior developers like me
Yoooo thanks for this!! It's a great breakdown of everything working together which is great so I know what to look for while doing my course work! Just realized I'm deffo a fan of your work (this is the 3rd video of yours i've seen without realizing it) so thank you soooo much for uploading these tutorials and projects!!!
Thank you man, appreciate it!
for you guys out there in 6 months, I want you to know I've been checking this channel before this dude had 1m+ subscribers!
absolutely amazing work.
Haha, thank you!! 🙌
I can see that you are a good teacher, i have not even finished watching the video, just by listening to your voice, i am able to tell that u are a good teacher
Thank you so much for this video :) I'm really impressed how you've managed to put here all these nice and useful technologies. The structure and code look so clean, beautiful :D
Thank you adrian ! I was looking for something like this to learn MERN stack and this was the video that cleared a lot of my doubts . You are the best. :)
Thanks! 😊
Hi Aditya! Are you a student or working currently? Would you be interested in exploring job opportunities in web development?
@@shivanigaddagimath6105 hii i am interested u have any ?
@@shivanigaddagimath6105 do u have any opportunities?
This really is a fantastic tutorial series. Its such a huge injection of knowledge, but the explanations make it all seem as clear as day.
Awesome video mate! As a junior dev this was really helpful at getting my head around the client VS server side of things and how the mern stack interacts!
Whether your backend is connected to the frontend,did you have completed the project,....,.... whether this project will work......pls do response bro.....😢😢😢😢😢😢😢😢😢😢😢😢😢
I really like the fact that you take some time to read the comments and replay some!! master+ empathetic, thanks bud
This lecture has everything I wanted to learn and know. Thanks for the kind explanation and high quality project.
What would have happened to us without this channel. You are so amazing, man. Your way of explanation is so awesome and precise. Please make a video of a project related to voice channels like discord. I really want to learn that functionality.
thank you so much man, I lost my bootcamp projects due to mongoDB conversion to atlas, and after struggling for awhile your video helped me fix that.
JS is one of my best tutors on UA-cam. You are giving us so much value for free. Thank you so much.
Simply one of the best MERN tutorials I've ever seen, congrats and thank you for all your work.
Thank you so much Juan!
pd. What's the extension for the styling console terminal? :o
I am halfway through this and this is amazing. I just finished my coding class on the MERN stack. This is my first project. Nice and easy to follow. Great explanations on what is happening.
Where did you get this coding class on the MERN stack?
Can't wait to complete this project. Thanks man for making our developer journey easy.
This is the best content of full stack developing that I saw since 1 year of coding, thank you so much.
Hi, can a user delete other people's post in this app?
if you're getting Error: `useFindAndModify` is an invalid option. as an error, dont need to add this line anymore, its deprecated.
Thanks!
THANK YOU
MVP!
Thank you
Thank you man ❤️
We can't be thankful enough ❤️
No problem! ❤️
Bro, I cannot thank you enough, this is a wonderful exhibition of JavaScript Mastery(literally). thanks and god bless.
Thanks a lot, for such a ❤️ course, really excited to now going for part 2, part 3 and part 4. You are really a gem.
Thank you so much for this. Loving it.
One note that I had to install some modules that the instructor did not mention or I missed the step when he did. Instructions were there to install react-redux but not for redux and redux-thunk. I kept getting compile error when I tried to start the server. After reading the error message, I installed these two and the code compiled fine.
Woah.. This is literally an ultimate mern project to learn for the beginners
Exactly!
but I am a lot confused from the redux part god help mee......................... ):
Dude we need another full MERN application course that, this is almost 2 years old now, your videos are INSANE
this is some next level teaching ! Never thought MERN could be that Simple !! Hats off, Amazing Programmer !!
This was a really good tutorial I have seen in a long time. Can't wait for part 2 :)
Awesome, coming soon! 🔜
Honestly, the best tutorial on mern stack. Loved it.
Thank you so much!
crazy how i hadn't come across your channel before now. Very detailed and concise explanations. Thanks. Great delivery. Great work.
this is the best REACT tutorial ever, thank you so much
Thank You Adrian, this is some high level content. As always your way of explaining was on point. thank you for being our Javascript master.
Hey Jay! Are you a student or working currently? Would you be interested to explore job opportunities in web development?
Love this video for being informational while having great pacing and editing - you clearly put in a lot of work making this and it shows.
Thank you!
This demo series- like all the videos you share - is awesome and incredibly informative.
love the tutorial!just one note for those who are starting with it: import xxxx from ''xxxx'' doesn't work, require('''') is ...well required (sorry about that:)
Same goes with exporting routes, instead of regular *export deafult router* it has to go with module.export=router
Thank you for helping out a brand new web developer learn the MERN stack. I appreciate it very much. You have no idea how much I appreciate it. I am celebrating tonight because of you.
Amazing stuff. Exactly what I needed. Thank you so much for this.
Thank you!
Your channel is real gem for serious JavaScript developers. I subscribed.
Thank you for the excellent video. I am beginner on React and was a bit confused on the Redux uses. But the video has inspired me to learn more. Great work!!
Tried looking for good MERN stack tutorials and yours is by far the most impressive one :)
Thank you!
Hey why is he using body parser when express has all of it built-in 🤨
@@javascriptmastery What extensions do you use on vscode?
Thank you for this first part. I really am a code-along learner and this was a very good project to code along with!
hey could your help me i followed the code line by line but im getting an error
PS F:\memories-app\server> npm start
> server@1.0.0 start F:\memories-app\server
> nodemon index.js
[nodemon] 2.0.15
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
F:\memories-app\server
ode_modules\express\lib\application.js:355
return this.settings[setting];
^
TypeError: Cannot read property 'case sensitive routing' of undefined
at Object.set (F:\memories-app\server
ode_modules\express\lib\application.js:355:25)
at Object.enabled (F:\memories-app\server
ode_modules\express\lib\application.js:422:23)
at Object.lazyrouter (F:\memories-app\server
ode_modules\express\lib\application.js:140:27)
at Object.use (F:\memories-app\server
ode_modules\express\lib\application.js:214:8)
at file:///F:/memories-app/server/index.js:8:13
at ModuleJob.run (internal/modules/esm/module_job.js:169:25)
at async Loader.import (internal/modules/esm/loader.js:177:24)
at async Object.loadESM (internal/process/esm_loader.js:68:5)
[nodemon] app crashed - waiting for file changes before starting...
OMG! love your content.
From this channel I just build 3 projects on React and after that directly I landed a Job 😃
Amazing course I really appreciate the work you put into this. It is a lot of value packed in two videos.
After watched this good introductory course, I started to keep saying myself "that's it" again and again all day long :-)
You and me both! haha
Africa~kenya is growing because of you thank you for a good job, personally you've helped me.
i love your organization man this is super clean you have no idea how this helped me improve my coding skills ^^ thanks a lot
Thanks senpai! I gotta say you're my favourite teacher/mentor
Thanks! 😊
ua-cam.com/video/nPCfL_fuUk4/v-deo.html looks like linkedin clone with firebase as well easy explanation with github repo
you really deserve more than like, this channel is more than fantastic❤❤
Thanks! ❤️
I like your teaching style. For example here at 1:11:30 where you ask yourself what to do, and (I suggest it) then you respond after and hopefully I find it right. I really like it :)
The app lets user to submit empty posts as well, we can add client side and server side conditions to prevent user from submitting an empty post.....awesome teaching..thanks a lot for such videos
Exactly what I was looking for. Thank you for your effort!
Thanks
1:05 We can move onChange function outside the TextField element and use the following syntax:
const handleChange = (e) => {
setPostData({
...postData,
[e.target.name]: e.target.value
});
And inside of TextField call this function:
Hi, I loved the course. I am a complete newbie and have never coded in my life but wanna get into it. Was very easily understandable. Just one small correction which is not even relevant to the MEAN stack- about styling - for spacing between form input fields - use [ margin="normal" ] in each element in the Form.js inside the Form folder.
Really grateful for such an amazing project.
Super amazing tutorial, I have tried a few and I am only 30 minutes into this one. By far the clearest and I can understand all they back end code now. Great work looking forwards to watching more! Thank you!!
Does it work the same? I mean it's 2 years old
Thanks for this content i really appreciated , regards from Chile
Keep going!
Greetings to Chile!
Wow, you're so selfless. Thank you.
No problem :)
I can't thank you enough for this! Liked and subbed! Will also recommend this to my classmates and peers. You deserve all the love!
Thank you! 🙌
I have just finished part one and for the first time, I have understood how to connect the backend to the front-end.
Great tutorial
Teleqram me 👆⬆️.
yeeeeeeeeeeeessss I have been waiting for this for so long, I am so excited to build this one, I have almost built all your react projects.❤💥
It is finally here! 👌
can you please help me out in fixing my error
@@kanchansharma8454 whats ur problem idk if i could help you
@@kanchansharma8454 Hey Kanchan! Are you a student or working currently? Would you be interested to explore job opportunities in web development?
Hey Deekshanta! Are you a student or working currently? Would you be interested to explore job opportunities in web development?
amazing, please continue! nice content! you have a new registred!
Thanks!
Fantastic project, instruction, teaching, etc. Thank you for the project! Glad I found this!
Excellent video Adrian! I found many series of MERN projects, but they had bad practises.
Keep making Javascript stuff, thank you very much !
cheers from Madrid
thank you bro!!! hope you never stop making amazing tutorials in youtube
Thank you! 😊
Hi Manikanta! Are you a 2021 pass out or a working professional? Would you be interested to explore web development job opportunities?
I have learnt and got some experience in React. Then nowadays I am learning Backend.
I really wanted this to know how to connect everything and deploy....better timing
😇❤️
I'm glad my video was helpful 👌
you have literally debunked where I was stuck. I felt something was off considering my redux implementation involved a mixture hooks and "the old ways". Thanks so much man.
Thank you for sharing your knowledge! Now I am starting part 2 of your video! Have a good day!
This is great, Thanks for your hardwork ❤️
Glad you like it! ❤️
Finally the Best course from the best Teacher Thank u.
Glad you think so!
this is probably the best mern app tutorial using redux on youtube.
Thank you so much!
I have ADHD and have comprehension issues. But for some reason, I can actually sit and listen to your videos! Not only that, I'm also learning and understanding them too!
Seems like its the best one that I found on youtube!
But I have to come back later since Im not readied especially in the redux part😂
Same lol
SAAAAME ;'D
I can say the only one word for you and your channel. "Love".
insane job, you gave us so much ressources, I'm a React beginner and I thanks you
well when this tutorial coming. 2020 isn't too bad at all. Amazing tutorial dude!
Thank you!
This looks so cool. Thanks for the video.
You bet!
thank you dude. world is spinning around because of the guys like you.
I would love a version of this project and video with react routing as well, this was so clearly and concisely explained!
Wow, this is amazing!
Short explanation and Quickly continue to the next step without any more bullshit
Thank you!!
@@javascriptmastery Thank you so much for this course
please can you explain this in a lot more detail please for beginners like me it's quite complex to undestand
This is great man, keep making the mster of js....
Will do
@@javascriptmastery Can yo make Vue and Nuxt tutorial with firebase auth and data persistence?
Am a fun of react js, but learn VueJs is also...
Any body supporting the same to like.
I was thinking of project to help me practice my coding, and this is awesome. A lot of information as usual, but great. Thanks.
You are amazing. That was exactly what I was looking for. I learned every single information you give in different sources but I was always confused about how to stick them together. Thanks to this video, everything is clear for me. I will be back and watch it whenever I need. Thank you.
One of the best MERN course🔥. Thank you JS Mastery 🙏
Glad you like it! 😊
Hey! Are you a 2021 pass out or a working professional? Would you be interested to explore web development job opportunities?
@@shivanigaddagimath6105 I'm a working professional.. but yes I would be interested to explore job opportunities..
@@sivalingams.k3521 That's great! Can we please get in touch via LinkedIn or mail? Just search Shivani Gaddagimath on LinkedIn and request to connect! The first profile that pops up is mine.
@@sivalingams.k3521 Please get in touch on LinkedIn if interested.
well.. took over 20 hours to figure out.. but finally did part 1! thankful for you javascript mastery!!!!
Great job Daniel!
Good looking out man. Great addition to the community 👍
1. Bigups for creating this tutorial. Loving it all the way from Kenya
2. A key issue I found is when adding the onDone for selectedFile. A key point to put across is the anonymous callback function variable needs to be using "{}"parenthesis otherwise it will fail. Had to review your code to find the issue.
Other than that. I'm really enjoying coding along with you. For sure as everyone is saying Redux is very confusing. But after coding for a long time. I know there are things you learn after doing them a long time so I am glad you added it in the project. I can't wait to see what Part 3 will hold :)
Thanks! Coming this Friday!
Spent 2 hrs finding this bug for ( { base64 } ). Thanks for the input @DogNgethe
Finally I learned how to upload image to MongoDb! Thank you so much❤️
Glad you like it!
Can you tell me how please?
@@emreerkorkmaz4865 It's in the video, you convert the image to base64 then store it in MongoDb
@@ahmadmuslih I've fixed the error. Thank you.
Edit: Solution is simple. It was a typo. Check your code or use typescript instead.
yeah that right
Your content change people's lifes. Thanks for sharing your knowledge!
This is exactly what I was looking for! Great work bro
if "type": "module" doesn't work please update node to 14 or above!
his terminal : everything looks cool keep up the good work server is running you gonna be rich
my terminal : 999 errors 95 bugs 584 bananas
You have a gift! Do what you do because you are Great!!! and very Precise, which is very important in the industry! Thank you very much for watching this movie. Now hopefully Part 2 is as good as Part 1! I will keep an eye on you. I keep my fingers crossed for your development because I think you have Huge potential !!! don't waste it! Best regards and see you soon ! :D ;)!