Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 2/2]
Вставка
- Опубліковано 20 лип 2024
- This video is the second part of a two-part series where you'll learn React, Node.js, Express & MongoDB. You'll also 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.
📙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!
Part 1 - • Full Stack MERN Projec...
Part 3 - • MERN Auth - Login with...
📚 Materials/References:
Background: www.svgbackgrounds.com/
GitHub Code (feel free to give it a star ⭐): github.com/adrianhajdin/proje...
📧 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... 🔥
💼 Business Inquiries: javascriptmastery00@gmail.com
🌎 Find Me Here:
Instagram: / javascriptmastery
Patreon: / javascriptmastery
Chapters
00:00 Intro
01:27 Posts
12:52 Update Functionality
34:33 Debugging
37:28 Delete Functionality
44:47 Like Functionality
51:14 Additional Fixes
55:40 Mobile Responsiveness
1:00:48 Action Constants
1:06:40 Environmental Variables
1:10:58 Deployment
1:21:15 Part 3?
#mern #react #node
![Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 1/2]](/img/n.gif)
Part 3, Authentication
And Google OAuth!
I up vote this.
Please use passport auth
passport auth
Use jwt. :)
This is the best MERN tutorial I ever learned. Frankly speaking, It's better than other training courses on Udemy which cost us too much! I really appreciate!!
Adrian, you are my main instructor. Of about 200 tutorials I have watched and hundreds of hours online working courses etc past year or so you are the best instructor I have seen. Your Complete Path To JS Mastery has me so well informed on JS that I got through part one of this MERN tutorial, Memories App successfully with few problems. Plus I understand most of it well enough that I have confidence I will be able to build my own CRUD apps from scratch soon. Thank you!
can't believe this tutorial covers everything. I love how clean and concise your code is. thank you so much for making these videos!
Can you help me with this error that i got in posts.js It says cannot read property of undefined reading ('length'). It was the condition: if (!posts.length && !isLoading) return 'No posts'
Hey adrian! Thank you for everything you covered in this series. This was the series that actually cleared all doubts I ever had about how to connect backend and frontend. Hopefully I'd be able to make MERN apps now. 🙏🙏🙏
Thank you! 😊
Can you help me with this error that i got in posts.js It says cannot read property of undefined reading ('length'). It was the condition: if (!posts.length && !isLoading) return 'No posts'
How to Sort the post , so the newst post will appear first.
Edit:
SOLVED, just simply edit the server side., by modify the query become find().sort( [ [ 'createdAt', -1 ] ] ) ;
I was learning only front end up to this point and I was afraid of the leap into backend territory, as you always are when it comes to something new, but thanks to this series I was able to build a full stack app, different from what you presented, with just focusing on server and data handling parts without previous experience with backend! Mad props to you sir!
Now that i see how can i conneect the backend and the fronted, i feel more confident to do my own projects, i might do a project similar to this one, but with different fundamental point
Thank you my man !
I agree; I follow and learn by doing for the first time, and I should implement the same things on my own idea with a different project.
@@MDABDULMOMINRiyadh like, a Facebook clone, think about it
I'm going to be totally honest man, I don't usually comment but this is incredible. You've gotten me from very proficient in standard html, css and js and basic node all the way to fullstack mern with good understanding in the span of about 10hours (yes I was a little slow and paused plenty)... very much appreciated.
Amazing, congrats!
Hey, did you created the same project along with the video? I need someone's help as I am getting few errors. Its quite urgent , please consider replying at - p3021kumar
Just finished this follow along, it took me longer than it probably should have... Absolutely awesome video! I am currently a student and just finished my first quarter doing server-side so we haven't learned how to deploy or how to link client and server-side. I am practicing on my winter break and now feel like I'm already ahead for next quarter. I would love to see the same thing everyone else is requesting. Thank you for your time and efforts!
Glad it was helpful! Part 3 Coming next Friday!
Amazing! Anyone who wants to see a practical example of a MERN App after learning (or even brushing through) the main concepts, this is the project for you.
Thank you Adrian. That's one of the rarest tutorials about the mern stack. I definitely recommend beginners to watch. I liked the part when you showed us your debugging process and said that it is okay. Thanks again.
Right brother ❤️
If anyone had a problem when they hosted their server with Heroku, one fix might allowing acess from any ip to your mongo db atals. At least that worked for me! Cheers!
Thanks for letting people know!
Thank you so much! Doing this, worked for me as well !!!
thanks heaps! I was stuck for an entire day and you made my day
If this fix doesn't work, you can check your package.json in the server file, and check if 'nodemon' is under dependecies. If it is not, just run 'npm install nodemon --save' in your server file, add and push everything to heroku and you should be set.
That's like saying if the lock on your door is broken, you can just remove the door entirely and that'll solve the problem.
Please make a part 3 video. We want to see authentication in mern stack. How to hash our password in nodejs etc.
Great suggestion, I might do that!
@@javascriptmastery Please do this :)
plz
PART 3 IS NOW LIVE! 🎉
use
bcrypt
Man, you really mastered this stuff. I like how you go over debugging and like these tips with variables and everything.
Great great content man
Thank you! 😊
I like how you include the little bugs that sometimes come naturally. Makes it feel very authentic.
Great course.
Thank you so much!
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? :)
I walked through every byte of these two videos and built a web. Even though I have been following a 1 months course on React & Redux, I couldn't quite get how all this works, but with these videos now I think I started understanding. Thank you so much! And I am strongly for the part 3! Authentication, plz!!!
Thank you Sophie!
met too, didn't have an idea what's going on.. now started to realize.
I love your comment! May I use it as a testimonial for my upcoming course platform? :)
Holy cow, I just watched these 2 videos to get a "big picture" look at making a full-stack app. I'm a front-end dev who hasn't done any back-end work yet. What a huge number of things to remember and connect together in order to get it all working. I was completely lost during most of the redux/mongoDB/actions/mongoose stuff. Phew, got a lot to learn. Nice video though! Hope to get there someday.
Really waited for this part. Your tutoring is so cool. I learnt a lot from this and I would also love the part 3 with pagination and authentication.
Thank you, really appreciate it!
This project will help you to enhance your knowledge ua-cam.com/video/zjb-D2cQrvI/v-deo.html
Was waiting for the second part.
Appreciate your effort for doing long tutorials, this is very helpful and gives an insight into how the redux works.
Thank you so much!
Fantastic video! Please consider making a part 3, as well as other mern stack builds!
Your tutorials are not just great, but also fun to watch
@53:45 you can also add .trim() to make it so that users cannot add a space to the form: tags: e.target.value.trim().split(","). Also, this can cause empty hashtags if users enter an input with multiple commas like: tag1,,,tag2,. But, you can alleviate this error by adding the following logic to Post.js component for tags as follows: {post.tags.map((tag) => (tag === "" ? "" : `#${tag} `))}. Hopefully that helps anyone who wanted to handle these edge-cases.
Incredible video! Thank you! I love how you explain WHY things are done and not just HOW. Makes this so much better than most others out there.
I love your comment! May I use it as a testimonial for my upcoming course platform? :)
@@javascriptmastery yes for sure!
@@mykasoda please send me an email at javascriptmastery00@gmail.com
I have learned most from your videos rather than my college. Thanks for such great content.
Hi Shubham, are you a fresher passing out in 2021? Would you be open to job opportunities in web development currently?
This is so awesome! Finally finished both videos and now I have a perfectly running MERN application that I can show my teachers. Thanks so much!
Awesome, enjoy! 😊
This second part is excellent, I hope the third part will be posted soon with authentication!
I learned a lot from this tutorial, thanks!
Stay safe!
Thank you! Stay safe.
Hi, Thank you so much for this product (and channel) please record part 3 of this wonderful tutorial. I know it takes a lot of time and effort. But this is gold! Thanks again.
Thank you!
Perfect Tutorial! Loved every single minute of it. Been following you & learning so much. Thank you!
Thank you so much!
Finally I understood how redux works and how can it be implemented. Thanks Adrian for these great tutorials.
Wait, it's one week already? Will build this very soon.
And yes, do the part 3!
Yep, exactly one week! 😊
PART 3 IS NOW LIVE! 🎉
Hey Susnata! Are you a student or working currently? Would you be interested in exploring job opportunities in web development?
Yes, really like this three part MERN tutorial having login authorization and authentication is great! thank you, James
You're very welcome!
Great course! I am liking and learning from all the videos. Thank you for making this freely available.
was taking a udemy course, lots of theory and runaround. This tutorial plugged all those pieces in and made a ton of sense. Thanks so much.
Can you help me with this error that i got in posts.js It says cannot read property of undefined reading ('length'). It was the condition: if (!posts.length && !isLoading) return 'No posts'
Definitely authentication and authorization brother. That makes it complete. Love the course, Even though I can recreate this project myself I'm still watching, hoping to get important concepts ❤️❤️❤️
Thank you! 🙌
Hello Badri! Have you created many projects in MERN or react? Are you 2021 passout and interested in exploring job opportunities in web development?
You are really taking my basic react knowledge to the next level. Thank you.
Happy to hear that!
Great work!! Please keep creating such content .Really admire the work you are doing!!😊
Thank you guy for covering everything we need to know in these series. I appreciate it. I loved how clean your code is, I hope you will continue clear our doubts. Awesome!!!!
Can you help me with this error that i got in posts.js It says cannot read property of undefined reading ('length'). It was the condition: if (!posts.length && !isLoading) return 'No posts'
If getting "h10" error after clicking "Open app" in Heroku, try changing procfile code to "web: node index.js" (omit the quotes). This worked for me. Fantastic tutorial!
This works!
Part 3 is very much needed with authentication, Paging etc. Also I wanted to know any other cloud servers available for free
Yes please give us a part 3 for authentication. it would also be good if users could comment on other users' posts.
Part 3 please!!! BEST videos I have found so far, great explanation of what's important yet concise. Thank you!!!
Glad you like it!
You are the king we've all been waiting for. God bless you.
Brother, please make part-3. Eagerly waiting for it. This is my first comment in YT. U r d best instructor out there.
Thanks!
I took three breaks from this course and tried different courses , each time i feel like that this is more convenient then the others... So updated so easy to follow so friendly and makes since < duo to Ur explanations
organized
... I hope you keep up your GREAT work
Thank you!!
@Anas Can you tell me what other courses you tried, thanks for the help in advance 😁
I got tons of errors! Errors are in the Posts.js-map, Post.js-selectedFile! No idea how do I solve them! Would you be able to help me?
You are really awesome bro ! I love that you explain everything in a clear way !
Thank you for putting this out here Adrian.
This is some impartful!!
This was the awesome video from A-Z
Right from development till deployment.
Thank you for the video.
Waiting for the 3rd part. 👌👌👌👌
Thank you!
If you get an error on your deployed app page, might be because you skipped adding 0.0.0.0 to whitelisted IPs in MongoDB Atlas. I think it's best if we whitelist the IP for the Heroku IP only, but I guess it is dynamic.
Thanks for pointing that out!
Gracias por toda la info. gente, me encanto el tutotrial aunque loo intente todo pero aun asi no puedo lograr el deploy completo, al abrir la App me da un 404.
thanks bro
Thanks bro.
I was so happy on seeing the PART 3 (with JWT) 🔥
This guy is amazingggg!!!!!! 🙌
I love these 'shorter', but still useful videos. I don't usually have 20hrs to go thru long tutorials (usually 10hr video takes 20hrs of hands on work).
Please make part part 3 which includes authentication, password hashing, JWT.
I love MERN stack because we need to spend time on one language that is JS🔥🔥🔥
Hi Ravi! Are you a student or working currently? Would you be interested in exploring job opportunities in web development?
This is great, Really enjoyed all the time. Thanks very much for the detailed explanation on each section. Expecting more wonders from you!!!
Awesome!!! This is my first try doing MERN and it worked! Thank you dude! I learned so much! Worth it!
Tip: Stuck on bug? Read comments, console and a little google. Happy coding!
31:31. You don't need to put currentId in useEffect of the cuz when submit for updating in . It will update the posts in store(if the request succeeded ) then and will be updated with the new state.
if (!mongoose.Types.ObjectId.isValid(id)) return res.status(404).send('No post with that id');
“id is not defined”
I get this when doing the update functionality??? Can you help me please
@@auauboiwowo102 maybe it's the typo _id, not id
Its great to learn bro, normally the videos for the MERN projects are shown with old js ways, but this concepts is perfect to code and be updated bro, hope that we will see its next part!! just like app.listen(), we.listen(JSMastery) bro :)
Thanks! 😊
Hello Kailash, are you a fresher in web development and open to job opportunities in the same? Where are you based?
Nowadays, i m lacking behind from the position, thanks for the reply!!
@@kailashraizelmaden4684 Hey Kailash! If you are a fresher based in India and looking for opportunities in web development, please connect with me using the information on my channel.
Super clear, professional teaching ! Thank you !
Part 3 for authentication based
on redux saga required!! Appreciate your efforts.
If you're struggling to deploy to heroku, follow these steps:
Make sure your mongoDB network access is set to anywhere
Make sure your .env file is correct
Also remove the '|| 5000' from your PORT variable
After everyhting is done, commit the new changes, and push to heroku again. Then type in the terminal after the push has completed 'heroku restart'
This worked for me :) Stuck for like 25mins yo XD
Thank You! btw Beginner here, if I wanna commit new changes to heroku, should I type in the terminal or press the commit button on the left side of VSCode?
@@shiyapiku I'd recommend following the heroku steps for committing again. Although I think heroku watched the repo you linked, so pushing and updating the repo in github should work too. Usually in the terminal is nice, but doing it through the sidebar I'm VSC also works. Terminal just has that more programmy feel to it :)
@@rubenverster250 Mb, didn't realised there's a way to deploy using GitHub, anyways my app is running w/o problems, Thank you so much for the reply :)
what does your env variable have?
@@sautortheratkiller9172 Hey man. Haven't touched this in 3 months, so I dunno hey ':)
Really love your content Sir. Lots of love from bottom of my heart.
The important thing is we want the part3.
Thank you so much!
Hi Sourav! Are you a 2021 passout and open to exploring job opportunities in web development currently?
Thank you, it's veeeeeeery useful. And I appreciate that you prepared css styles and it took little time. You are such an amazing teacher. Thanks again and good luck
Thanks so much for the great videos! Looking forward to Part 3. "THAT'S IT!"
Thanks!
Do you all need part 3?
What are you waiting for just simply touch the LIKE button just like I did😉
PART 3 IS NOW LIVE! 🎉
@@javascriptmastery WOW! Thank You so much brother for giving us all of these at no cost.
Can't touch like button twice.
Part3: Set Limit of Post per Page, click next page to load more... ❤❤❤
Coming if a lot of people request it! 😊
@@javascriptmastery I request it! maybe infinite scrolling or 'load 10 more' though
Please we are requesting for it 🙏❤
So detailed and perfect demonstration! Thanks a lot for this.
Eagerly waiting for part 3 with Authentication! :)
Glad you liked it! Coming soon!
I love how happy you were when you guessed the direction property name correctly for Material-UI
Hahah thanks!
Will watch it later but definitely the content is going to be damn practical and nice.. last video of mern was also awsm..
Thank you!
Hey Kartik! Are you a 2021-passout and open to job opportunities in web development currently?
Thanks a lot JavaScript mastery ❤️❤️❤️
Finally I created a MERN stack project
I'm glad! 😊
One of the best YT channel to learn react. All your content are of such good quality that its hard to believe it's free.
Love your channel.
Thank you so much, I appreciate it!!
Hey Sonuraj, are you a student or a fresher? Are you currently open to job opportunities in web development?
Gosh this is the best MERN stack video i have watched, i learnt alot that am proud of . With this knowledge i can build many things wow ❤, thank you so much
Any one get error on the deployed App? The backend deployment was succeed but, when i open the app, the page said its error.
Edit:
Its solved.
When I check the log, it said there is a problem with mongo db atlas connection.
So I go to mongo DB atlas, and make all ip have the access.
god bless u
Yes, you gotta make a part 3!!!!!
Will do!
@@javascriptmastery Thank you!Looking foward to this
@@javascriptmasterythanks a lot for your time to do this excellent course.. I've implemented along with authentication(jwt Auth)🙂.. Super excited to see your way of doing it.
fond-memories.netlify.app
@@johndoe-cq3de how to did it ?
you saw any tutorial?
@@oshri1997 Actually im not new to js.. I've already implemented Auth a couple of times so
subscribed. liked this video :) this is awesome, I appreciate your style of teaching, very easy to understand. Would also love a part 3. Thank you for this.
Bro, i love the way you cover everything in this second part, i'm already working on an MERN App and your videos make me feel more confident, thank you for share this knowledge with us, masterrrrrrrr 🔥🔥
Can you help me with this error that i got in posts.js It says cannot read property of undefined reading ('length'). It was the condition: if (!posts.length && !isLoading) return 'No posts'
Thanks, great video. If you put dispatch in the dependency array of the useEffect in Form component it will rerender the page when you update.
useEffect(() => {
if (post) setPostData(post);
}, [post, dispatch]);
Thanks!
still doesn't work... even after implementing this fix.
I have same issue, did you find the solution?
while deploying using heroku i got an "Application Error" saying ::
Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs --tail
Hey Pawan, are you a fresher and looking out for opportunities in web development currently? Would you be interested in exploring full-time positions in the same?
Amazing videos series. Hurry to watch the part 3.
To anyone else struggling with the deployment phase -- the mongoDB Atlas cluster needs to have your Heroku IP address whitelisted, or alternatively you can whitelist all IP addresses while you're testing your app. My deploy phase kept crashing and I didn't know why, but after 40 minutes of troubleshooting I realized that the heroku IP address couldn't access the database.
Thank you so much for this video. I've been a front-end Engineer for the past year and haven't had time to jump into the full-stack / backend stuff, so this came in so clutch.
I really appreciate your fine work. Guys like you are true Gems in the WEB DEV Universe. Thanks.
Thank you man!
Hey Susmito, have you created any projects using react or MERN ? Are you a fresher and open to job opportunities in web dev currently?
@@shivanigaddagimath5994 hi Shivani. Yes I have created projects on MERN stack and I am not a fresher.
about job opportunity... are there any openings you have to offer?
@@susmitobhattacharyya1668 Yes, we currently have opening for freshers and experienced candidates in web development. You can connect with me to know more. Please find my contact information on my channel.
great content sir, please i am eagerly waiting for the part 3. include pagination, search functionality and authentication if possible. thank you sir
Thanks!
Can you help me with this error that i got in posts.js It says cannot read property of undefined reading ('length'). It was the condition: if (!posts.length && !isLoading) return 'No posts'
Thankss a lot! The deployment portion is really vividly explained :)
Most straightforward MERN tutorial ever! You are brilliant!
Can you help me with this error that i got in posts.js It says cannot read property of undefined reading ('length'). It was the condition: if (!posts.length && !isLoading) return 'No posts'
It is was great video for both front and back-end that is ES6 syntax coding... thank you sir.
Glad you like it!
Hey Koushik, are you a 2021 passout and open to exploring job opportunities in web development?
@@shivanigaddagimath5994 Hi, actually I am a 2020 passout student with under-graduation...
@@koushi_ku Hi Koushik, are you open to exploring full-time positions in web development currently? If yes, please connect with me using the contact information on my channel.
@@koushi_ku Hey Koushik, we would be interested to connect with you. Please contact me using the information on my channel.
thanks ...was waiting for this eagerly.
one query : Is it possible to do this with react hooks only ...i mean could we just drop redux..
Yes, but Redux makes it more scalable, and makes state management across the app easier.
@@javascriptmastery ok thanks sir
seeing this after 2 years this is well explained and the quality of the content is very high never seen this in any youtube channel
Do part 3 please ! Your teaching is so good taking so much value from this just wanna say thank you. 🙏
Will do it! 😊
Heroku is not free anymore right ?
Everybody smash that freaking like button ....🔥🔥
We need part 3!!!!
Thank you!! 🙌
PART 3 IS NOW LIVE! 🎉
An absolutely amazing tutorial. Thank you!!
Just an awesome tutorial indeed with all the explanation neded.. Thanks Mastery!! :)
Will look forward for the 3rd part with authentication using passport, oauth, google signin and pagination.
📙FREE Ultimate MERN Guide: resource.jsmasterypro.com/mern-guide
Finalllyyyy
yaaaaaashhh, thank youu !!!
Thank you!
You said 3rd video on 5-10k likes yet you did it at 2.8k likes,you are such a great man,thank you sir!!!!
Thank you sir!
Give us the third episode as a gift. You can do it, Santa!
PART 3 IS NOW LIVE! 🎉
Really good video - lots of secondary items to look into - thanks - hope you do more
Material UI and part 3 authentication. You explain very well and really love your video! This is extremely cool for beginner to have the overall picture of MERN Project or even to other project development!
Coming soon!
Can you help me with this error that i got in posts.js It says cannot read property of undefined reading ('length'). It was the condition: if (!posts.length && !isLoading) return 'No posts'
if anyone gets an error when deploying in Heroku, make sure to check the settings,
inside your project setting add config_vars (connection_url and password)
wow man, that helped out a lot! thank you.
M not able to get can u plz explain @shiva Shankar?
@@ishitaagarwal8873 check your Heroku project settings and add config_vars (connection_url and password)
@@shivashankar6043 Hey when we are dispatching the action in form.js within the handleSubmit i am getting the following error.Actions must be plain objects. Use custom middleware for async actions. It works if i just dispatch it as dispatch(createPost) but fails if i dispatch it as disPatch(createPost(postData))
@@ankita1464 I'm also got the same error, just go to the server >controllers>post. Js file and make sure you are sending the data without the object
(res.status(200). Json(postMessages)
Everything works perfectly as shown on tutorial and I think you've done an amazing job providing this for free. My only query would be about using base64 encoding to store to mongo and then display back on the website. I've noticed that if I upload an image that's too big the site will simply crash as the base64 string is too long, and that if I use a much smaller image but have multiples memories the page is taking a long long time to load due to the site haven't to read all of the base64 strings from the mongoDB database. Dunno if this is the norm for using this method of image uploading/displaying or if I've simply done something wrong, could you please advise :)?
These potential bugs are possible, you've done nothing wrong. For bigger apps I wouldn't advise to store images as base64 strings, rather, you could store complete images separately. Feel free to research on that topic 👌
i am facing the same problem... Can you help?? even after deploying the loading time is too much and likes take much long to update
This is so good that I dont have enough words to describe,
just have one humble request please come with one more mern project just one more so will feel more confident.
The past week seems long for me because of waiting for this awesome part. thanks for the content
Well, it's here now! 👌
You are God for people like me !!
I'm just a regular human 👌
Hey Nimish, are you a fresher in web development and want to explore job opportunities in the same?