Part 12 of The MERN Stack Project Series - In this lesson, we review and refactor the code in our MERN Stack Project. During the review, I address some viewer questions and explain decisions as well as refactor the code along the way. This tutorial is not for beginners. If you are a beginner, check out my full courses all in one playlist here: ua-cam.com/play/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm.html
Honestly you are the only professor I have seen that code and explain such a well crafted web development project with such perfection. Every code added by you in any video has an explaination from you. I am very thankful for this tutorial.
I'm an intermediate PHP developer and I was lucky to come across your channel. I was particularly awed by your technique and approach in teaching because I was able to grasp the concepts quickly and I was able to learn all your series regarding MERN in less than two weeks. Thank you so much sir Dave. This is a game changer for me in my career. I hope I can get a project the soonest so I can dedicate it to you and have coffee together as my thanks. God bless sir!
I like refactoring, especially when it comes with the comfortable feeling that I finished the project before the deadline and still had some time for improvements . Thanks Dave,
I agree my friend! Good to hear from you, Ahmad! Have you joined my Discord server? I think your insight there would be valuable for many with questions.
@@DaveGrayTeachesCode I joined your Discord server for sure my friend, but unfortunately I always lack of time and electricity (besides having a lot of troubles these days), Thank you for your kind words and for encouraging my humble skills 😎✔
Hello Dave, in the prefetch component ( 21:42 ), we have 2 lists to prefetch(notes and users), if we have more than 5 or 10 lists for example (notes,users,books, etc), should we prefetch all of them? is this gonna affect the performance?
The prefetch happens behind the scenes so it shouldn't impact the current render. If you are loading in a huge database and creating many separate caches, it would be good to wait. Pair down the preloads to only what you know or _think_ will be accessed soon.
@@DaveGrayTeachesCode so can i have 2 prefetch components for example one for admin dashboard and one for normal user, so in the app.js i can use the prefetch for admin route and one for normal users. is this right? or just use one prefetch component and prefetch all data ? thanks in advance
Thank you much Dave, this is great. Can you please make the filtering of a specific user notes in the backend, lets say if the user is an employee the back will only send the notes assign to that specific user. Cheers for the work
You're welcome! You could do that. I purposefully did not in this project so I could demonstrate more filtering, permissions, etc in the frontend. Likewise, for role-based access control on each of the CRUD routes. I did do this with middleware to verify roles in my Node.js course if you are curious.
Thanks Dave, excellent as always 🙏. My question is, if we are replacing our selector in the Note component with the useGetNotesQuery hook (26:00), is there any further use for the original selector, or any of the other selectors defined in the slice? And if not, is it safe to remove lines 81 and below from notesApiSlice?
Dave, first off excellent tutorials, I have learned a lot from your channel and teaching techniques. I was wondering though, if you wanted to skip the public screen and go straight to the login screen what sort of modifications would you need to do? Again, a big thanks for your time and effort(s).
It is because we are also providing a default. Other settings/validators like default can also be specified within the object. If nothing else is needed, type: [String] by itself would be ok.
@@DaveGrayTeachesCode but it ends up being the same thing right? on the database? this is just personal preference? are we optimizing the creation process in any way?
Such a huge attention pull you got here; I left all other those just to watch this till the end. The amount of details you have in this series is tremendously huge. I use this series to design a project, just wondering, with how the backend is set, will it handle many requests without breaking a sweat 😓? Like 1M requests Heard something about exporting schemas instead of models to handle many connections, how can we use that into our existing server. Thanks, Greetings from Tanzania 🇹🇿
Great questions! And thank you for the kind words 🙏 This project is for a small repair shop and the employees will be the only ones logging in, creating new notes, etc. - so not much to worry about scaling to 1M requests here. ...but your question asks if it could scale - and that just depends. Like 1M requests all at once? Or spread out over time? Unlikely to receive them all at once in most applications. With scaling, you need to look at each aspect of the app and it can be a complex topic. Here's a link to a scaling Node.js article: www.freecodecamp.org/news/scaling-node-js-applications-8492bd8afadc/ and here is a link for Mongoose and MongoDB optimizations: itnext.io/performance-tips-for-mongodb-mongoose-190732a5d382 ...and another for MongoDB scaling: www.mongodb.com/basics/scaling
Dave, please could you explain the use of the string 'notesList' and 'usersList' as an arg in options for "useGetUsersQuery", "useGetNotesQuery" and in the prefetch dispatch? 🙏🏾 I've been through the docs again and I'm very confused. We're bringing back all the users and notes so what are the args for?
Good question - I had hoped that I explained it well enough in the video, but to expand on that, the arg in useQuery is used as a cache key. This identifies the query cache to get data from and update if needed. If you use Redux Devtools, you can open the subscriptions and see we have a subscription to 'getNotes' and to 'getUsers'. This cache key identification also helps us to avoid unnecessary network requests when we already have the data. We are using a polling interval in each of the List components to update the data at regular intervals.
@@DaveGrayTeachesCode OK, I've found the section in the docs where it mentions the cache key is a combination of the endpoint + the arg, so I think I undersand now. Thanks for responding so quickly and ending my pain 👍🏾
I hoped I had explained this well enough, but I certainly understand wanting to dive deeper on this topic. Both of these methods are being called manually in my examples. initiate() is used to prepopulate the initial Redux state. This method is also used in my Redux course as it follows the documentation from the Redux site for the blog project. It works great...BUT the component remains mounted and subscribed to this state. When we use RTK Query - even with polling interval queries - it sees this state already exists and does not update our components with new data from the server. It shows our updates because we also update our local state - but not updates coming from other users. Therefore, in an application like this where we need to see note and user updates provided by other users, it is better to simply prefetch() our endpoint queries - this is tied directly to the RTK Queries that we update with polling intervals. The prefetch provides us with the same benefit we were using initiate() for, but it allows for updates from the server. I hope this deeper dive explanation helps!
According to the docs, initiate creates a lifetime subscription to the endpoints meaning you have to manually unsubscribe - otherwise the data will permanently stay in the cache. Prefetch does a very similar thing except it doesn't create a life-time subscription which isn't necessary as components will create their own subscriptions or join existing ones and populate the cache as needed. You can even remove prefetch and the application will work just fine as the userList and notesList components pull the data in regardless, prefetch is just being used to get that data quicker
Hey Dave, great video as always, quick question: when would be an appropriate use case for the native "crypto" vs "bcrypt"? Is it a preference, security, or something else?
Hi Royce - good questions! 2 appropriate cases are demonstrated in this series - 1) crypto was used to create secret keys stored as environment variables for token creation and 2) bcrypt was used to hash passwords for storage in MongoDB and to read those hashed passwords when needed. Regarding preference, security, or something else - the answer is preference. The native Node.js crypto is very easy to use in a terminal window for creating keys. Likewise, I prefer how bcrypt works in my controller methods. I hope this helps!
This MERN Stack Project uses multiple pages. You can learn more about React Router which allows multiple pages here: ua-cam.com/video/XBRLVRjZ3CQ/v-deo.html
@@DaveGrayTeachesCode I built application with Vite. After I deployed the app, when ever I navigate to other pages and refresh it shows 404. I don't know why?
Hi Dave. Please i make search bar and filter in mern project. I don't understand how to retrieve but data with api express. Thanks Dave! for your efforts for the community
I had a problem with updating and deleting both notes and users, I keep getting CORS error even thought I set the corsoption in the backend just like u did in ur tutorial, the network: CORS error fetch apiSlice.jsx:22 this line contains: let result = await baseQuery(args, api, extraOptions)
I have finished tutorial have build the thing based on your tutorial.But My new notes is not creating new notes when I press save . console showing failed to upload the resource?could you help me?
Sir I have one question about assigned roles, I want to change the roles which is available just for top level like a manager and an admin, employee didn't have access to that feature but when he or she created the note, the note as default assigned to their self as employee? or assigned base on who logged in to the system. Sorry if my English bad, because this language is not my native language, thank you in advance.....
The person who creates the note does not have to be the person assigned to the note. It is not based on who is logged in. This lets whoever is working at the time assign the note to the appropriate employee, manager, etc.
Thank you for your fantastic courses Dave!! Two quick questions. How are you affiliated to ZTM? Are those courses linked in the description taught by yourself? Also, are you planning on creating TypeScript content? It's being used more and more in jobs these days so it's probably a good one to do. Thank you!
Thank you very much! 🙏 1) I do not teach courses at ZTM, but I have reviewed their content and found it was quality that I was willing to provide links to. Anyone who does buy their courses helps support my channel. I think they have several courses that are good follow-ups to the content I am providing here. 2) Yes, I recently provided a community poll (see the community tab for my channel) and most requested MERN content (this series) which was followed by Typescript and Next.js. You can expect to see both of those very soon.
Sir i followed your course, it was amazing I want to know how to upload files using rtk query , when I tried it sends empty data 🙄. Sir, Can help me ??
While I do not have a combined tutorial with RTK Query and uploading files, I do have a couple of tutorials about uploading files. You can take the concepts from these and combine them with what you have learned about sending requests to reach your goal. 1st - uploading files: ua-cam.com/video/4pmkQjsKJ-U/v-deo.html and 2nd - a TinyPNG clone with draggable upload: ua-cam.com/video/jEjo9UytpIc/v-deo.html
Part 12 of The MERN Stack Project Series - In this lesson, we review and refactor the code in our MERN Stack Project. During the review, I address some viewer questions and explain decisions as well as refactor the code along the way. This tutorial is not for beginners. If you are a beginner, check out my full courses all in one playlist here: ua-cam.com/play/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm.html
Honestly you are the only professor I have seen that code and explain such a well crafted web development project with such perfection. Every code added by you in any video has an explaination from you. I am very thankful for this tutorial.
I'm an intermediate PHP developer and I was lucky to come across your channel. I was particularly awed by your technique and approach in teaching because I was able to grasp the concepts quickly and I was able to learn all your series regarding MERN in less than two weeks. Thank you so much sir Dave. This is a game changer for me in my career. I hope I can get a project the soonest so I can dedicate it to you and have coffee together as my thanks. God bless sir!
Sir Dave! you are contributing a lot to beginner developers, I just wanted to thank you❤
You're very welcome!
I like refactoring, especially when it comes with the comfortable feeling that I finished the project before the deadline and still had some time for improvements .
Thanks Dave,
I agree my friend! Good to hear from you, Ahmad! Have you joined my Discord server? I think your insight there would be valuable for many with questions.
@@DaveGrayTeachesCode I joined your Discord server for sure my friend, but unfortunately I always lack of time and electricity (besides having a lot of troubles these days),
Thank you for your kind words and for encouraging my humble skills 😎✔
Thanks Dave! for your efforts for the community
Keep Safe!
You're welcome, Romar!
Hello Dave, in the prefetch component ( 21:42 ), we have 2 lists to prefetch(notes and users), if we have more than 5 or 10 lists for example (notes,users,books, etc), should we prefetch all of them? is this gonna affect the performance?
The prefetch happens behind the scenes so it shouldn't impact the current render. If you are loading in a huge database and creating many separate caches, it would be good to wait. Pair down the preloads to only what you know or _think_ will be accessed soon.
@@DaveGrayTeachesCode so can i have 2 prefetch components for example one for admin dashboard and one for normal user, so in the app.js i can use the prefetch for admin route and one for normal users. is this right? or just use one prefetch component and prefetch all data ? thanks in advance
Thank you much Dave, this is great. Can you please make the filtering of a specific user notes in the backend, lets say if the user is an employee the back will only send the notes assign to that specific user.
Cheers for the work
You're welcome! You could do that. I purposefully did not in this project so I could demonstrate more filtering, permissions, etc in the frontend. Likewise, for role-based access control on each of the CRUD routes. I did do this with middleware to verify roles in my Node.js course if you are curious.
Thanks Dave, excellent as always 🙏. My question is, if we are replacing our selector in the Note component with the useGetNotesQuery hook (26:00), is there any further use for the original selector, or any of the other selectors defined in the slice? And if not, is it safe to remove lines 81 and below from notesApiSlice?
Dave, first off excellent tutorials, I have learned a lot from your channel and teaching techniques. I was wondering though, if you wanted to skip the public screen and go straight to the login screen what sort of modifications would you need to do? Again, a big thanks for your time and effort(s).
Man you're too good thanks for teaching me new things
Glad I could help!
Hey dave! Could you tell me the difference at timestamp @10:00, between roles: [...] and roles: type: [String]?
It is because we are also providing a default. Other settings/validators like default can also be specified within the object. If nothing else is needed, type: [String] by itself would be ok.
@@DaveGrayTeachesCode but it ends up being the same thing right? on the database? this is just personal preference? are we optimizing the creation process in any way?
@@draicorfor the project, yes. I was showing how to provide a default value as part of the tutorial.
Such a huge attention pull you got here; I left all other those just to watch this till the end.
The amount of details you have in this series is tremendously huge.
I use this series to design a project, just wondering, with how the backend is set, will it handle many requests without breaking a sweat 😓? Like 1M requests
Heard something about exporting schemas instead of models to handle many connections, how can we use that into our existing server.
Thanks, Greetings from Tanzania 🇹🇿
Curious about this also
Great questions! And thank you for the kind words 🙏
This project is for a small repair shop and the employees will be the only ones logging in, creating new notes, etc. - so not much to worry about scaling to 1M requests here. ...but your question asks if it could scale - and that just depends. Like 1M requests all at once? Or spread out over time? Unlikely to receive them all at once in most applications. With scaling, you need to look at each aspect of the app and it can be a complex topic. Here's a link to a scaling Node.js article: www.freecodecamp.org/news/scaling-node-js-applications-8492bd8afadc/ and here is a link for Mongoose and MongoDB optimizations: itnext.io/performance-tips-for-mongodb-mongoose-190732a5d382 ...and another for MongoDB scaling: www.mongodb.com/basics/scaling
@@DaveGrayTeachesCode thanks.
You're such a wonderful person Dave
@@DaveGrayTeachesCode thanks again, I really enjoyed reading those articles especially the first link (scaling-node application)
Dave, please could you explain the use of the string 'notesList' and 'usersList' as an arg in options for "useGetUsersQuery", "useGetNotesQuery" and in the prefetch dispatch? 🙏🏾
I've been through the docs again and I'm very confused. We're bringing back all the users and notes so what are the args for?
Good question - I had hoped that I explained it well enough in the video, but to expand on that, the arg in useQuery is used as a cache key. This identifies the query cache to get data from and update if needed. If you use Redux Devtools, you can open the subscriptions and see we have a subscription to 'getNotes' and to 'getUsers'. This cache key identification also helps us to avoid unnecessary network requests when we already have the data. We are using a polling interval in each of the List components to update the data at regular intervals.
@@DaveGrayTeachesCode OK, I've found the section in the docs where it mentions the cache key is a combination of the endpoint + the arg, so I think I undersand now.
Thanks for responding so quickly and ending my pain 👍🏾
awesome dev, don't worry everything is fine
Thank you, Dharmesh! We keep getting a little better every day! 🚀
You are excellent teacher!!!!
Can you explain what is the differences between initiate() and prefetch()? And why did you use prefetch()
I hoped I had explained this well enough, but I certainly understand wanting to dive deeper on this topic. Both of these methods are being called manually in my examples. initiate() is used to prepopulate the initial Redux state. This method is also used in my Redux course as it follows the documentation from the Redux site for the blog project. It works great...BUT the component remains mounted and subscribed to this state. When we use RTK Query - even with polling interval queries - it sees this state already exists and does not update our components with new data from the server. It shows our updates because we also update our local state - but not updates coming from other users. Therefore, in an application like this where we need to see note and user updates provided by other users, it is better to simply prefetch() our endpoint queries - this is tied directly to the RTK Queries that we update with polling intervals. The prefetch provides us with the same benefit we were using initiate() for, but it allows for updates from the server. I hope this deeper dive explanation helps!
@@DaveGrayTeachesCodeThank you, Dave. This explains a lot.
According to the docs, initiate creates a lifetime subscription to the endpoints meaning you have to manually unsubscribe - otherwise the data will permanently stay in the cache. Prefetch does a very similar thing except it doesn't create a life-time subscription which isn't necessary as components will create their own subscriptions or join existing ones and populate the cache as needed. You can even remove prefetch and the application will work just fine as the userList and notesList components pull the data in regardless, prefetch is just being used to get that data quicker
Your tutorials are gold, many thanks Dave! 🙏
Thank you for the kind words!
Hey can you help out with sending query params like filtering and also pagination will really appreciate it
Hey Dave, great video as always, quick question: when would be an appropriate use case for the native "crypto" vs "bcrypt"? Is it a preference, security, or something else?
Hi Royce - good questions! 2 appropriate cases are demonstrated in this series - 1) crypto was used to create secret keys stored as environment variables for token creation and 2) bcrypt was used to hash passwords for storage in MongoDB and to read those hashed passwords when needed. Regarding preference, security, or something else - the answer is preference. The native Node.js crypto is very easy to use in a terminal window for creating keys. Likewise, I prefer how bcrypt works in my controller methods. I hope this helps!
Please can you create a video on how to *create multiple pages in React*.
This MERN Stack Project uses multiple pages. You can learn more about React Router which allows multiple pages here: ua-cam.com/video/XBRLVRjZ3CQ/v-deo.html
@@DaveGrayTeachesCode I built application with Vite. After I deployed the app, when ever I navigate to other pages and refresh it shows 404. I don't know why?
Hi Dave.
Please i make search bar and filter in mern project. I don't understand how to retrieve but data with api express.
Thanks Dave! for your efforts for the community
Dave let me tell you something.
You are !
Thank you so much for your tutorials.
Please can you give us a full course in Java?
You're welcome! Java is not my area of expertise. Maybe someday 😀 Many other topics on the way though! 🚀
I had a problem with updating and deleting both notes and users, I keep getting CORS error even thought I set the corsoption in the backend just like u did in ur tutorial, the network: CORS error fetch apiSlice.jsx:22
this line contains: let result = await baseQuery(args, api, extraOptions)
Love your work dave you deliver top content❤❤
Thank you!
I have finished tutorial have build the thing based on your tutorial.But My new notes is not creating new notes when I press save . console showing failed to upload the resource?could you help me?
Pinned comment on Video #3 of this series has the answer: ua-cam.com/video/cUV3uYXEOxI/v-deo.htmlsi=wzObLdkAxij2OzzK
Sir I have one question about assigned roles, I want to change the roles which is available just for top level like a manager and an admin, employee didn't have access to that feature but when he or she created the note, the note as default assigned to their self as employee? or assigned base on who logged in to the system. Sorry if my English bad, because this language is not my native language, thank you in advance.....
The person who creates the note does not have to be the person assigned to the note. It is not based on who is logged in. This lets whoever is working at the time assign the note to the appropriate employee, manager, etc.
Thank you for your fantastic courses Dave!! Two quick questions. How are you affiliated to ZTM? Are those courses linked in the description taught by yourself? Also, are you planning on creating TypeScript content? It's being used more and more in jobs these days so it's probably a good one to do. Thank you!
Thank you very much! 🙏
1) I do not teach courses at ZTM, but I have reviewed their content and found it was quality that I was willing to provide links to. Anyone who does buy their courses helps support my channel. I think they have several courses that are good follow-ups to the content I am providing here.
2) Yes, I recently provided a community poll (see the community tab for my channel) and most requested MERN content (this series) which was followed by Typescript and Next.js. You can expect to see both of those very soon.
@@DaveGrayTeachesCode fantastic news! Next.js is indeed another must these days. Couldn't be happier, thanks!
Great video I'm your new subscriber
Thanks and welcome!
Sir i followed your course, it was amazing
I want to know how to upload files using rtk query , when I tried it sends empty data 🙄.
Sir, Can help me ??
While I do not have a combined tutorial with RTK Query and uploading files, I do have a couple of tutorials about uploading files. You can take the concepts from these and combine them with what you have learned about sending requests to reach your goal. 1st - uploading files: ua-cam.com/video/4pmkQjsKJ-U/v-deo.html and 2nd - a TinyPNG clone with draggable upload: ua-cam.com/video/jEjo9UytpIc/v-deo.html
your are is the best one
Thank you!
Nextjs with NODE EXPRESS WILL BE A BETTER HELPFUL FO US
In the community poll, NextJS came in 3rd after MERN and Typescript. I do plan to cover it.
@@DaveGrayTeachesCode Thankyou for your apprecation
Thank you so much for the MERN series, I was so happy for it 👍😊👏🫡🤝🫰🏻👌🫠🤗
You're welcome! One more lesson to go - review and deploy! 🚀