MERN Stack Tutorial - Book Store Project
HTML-код
- Опубликовано: 2 июн 2024
- Learn the MERN stack (MongoDB, Express, React, Node.js) in this crash course for beginners. Here are some of the topics you will learn about:
- Backend CRUD
- Backend Router
- CORS Policy
- MongoDB operations
- Frontend CRUD
- Frontend Router
💻 Code: github.com/mohammad-taheri1/B...
✏️ Course developed by @DevEmpower
⭐️ Contents ⭐️
⌨️ (00:00) Intro
⌨️ (01:10) Create Node.js project from scratch
⌨️ (03:39) Create our first Http Route
⌨️ (06:01) Add MongoDB and mongoose to node js
⌨️ (08:52) Create Book model with mongoose
⌨️ (10:53) Save a new Book with mongoose
⌨️ (13:31) Get All Books with mongoose
⌨️ (15:08) Get One Book by id with mongoose
⌨️ (16:29) Update a Book with mongoose
⌨️ (18:36) Delete a book with mongoose
⌨️ (20:09) Refactor Node js with express router
⌨️ (22:23) CORS policy in Node js and Express js
⌨️ (25:21) Create React project, Vite, Tailwind CSS
⌨️ (27:41) SPA and Add react router dom
⌨️ (29:52) Show Books List in React
⌨️ (35:39) Show Book Details in React
⌨️ (39:02) Create Book in React
⌨️ (42:02) Edit Book in React
⌨️ (44:27) Delete Book in React
⌨️ (46:35) Show Books List as Card
⌨️ (52:30) Make Book Card a single component
⌨️ (54:08) Add Book Modal
⌨️ (58:06) Improve User Experience (UX) with beautiful alert
⌨️ (1:01:43) Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
My dear friends, I'm glad to be here. Thanks for watching this tutorial.
Some of You have problems on different parts of this tutorial. But I cannot see the notifications of this video. In order to debug your codes:
Please go to my channel and go to playlists section. There You can find the playlist of this tutorial in 22 tiny parts. I kindly ask you to implement codes exactly as those parts and in any time you faced an error or bug, please leave a comment there and talk about Your problem, This way, it is easier to debug the codes.
Best,
Mohammad
I commented on the video on your channel. thanks
@@atlmattador You're welcome 🌹
@@DevEmpower i look forward to your reply on your video. at a standstill with it. thanks
Although the title suggests - for beginners , you did not explain it in the way it should be for beginners. Could have written the code instead of copy pasting the code.
@@kanishk1149 I respect your opinion. Let me explain about this video:
The main purpose of a tutorial is to show You how You can implement something. So, in this video I explained everything line-by-line completely from scratch. And I showed the commands word by word. It is not a copy-pasting. In copy-pasting, The instructor will paste 100 line of codes and then just give you a quick overview of it😊.
I appreciate this so much as a self taught fullstack student. My favourite side of the internet
the only time you fail is when you give up !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! goodluck dieregorn!
same. how is your journey going bro?
same here, i love fCC
Doing the project is beneficial, but if you don't have any connections, the job search process may take months, perhaps 6, 8, or even 12 months.
The Chanel is Changing my life, I was just thinking how to learn backend and boom this video
Same 😂
Bruh same
Same
How is a nosql backend learning backend .
Yeah I would love some Chanel to change my life too, kinda too expensive tho.
Very fast paced, clear and well instructed combined with the fundemental knowledge to get you started while also coding an application.
One of the better tutorials i've encountered in my 4 years as self-taugth fullstack developer
Thanks so much for this. Especially loved the brevity. Speeding things up to show end product quickly. Putting control in the user's hand to pause when necessary, while cconsulting Github files for guidance.
My First MERN Stack Application, completed in just 3 days as a begginer🤩🤩
seeing Mohammad Tahir as a mentor so glad.
nice efforts to you and great for the channel
Excellent work. This is my first full stack project to understand the connection between frontend and backend. Its a small project and the tutor really explained very important concepts in a concise one hour video. Excellent work. I have been looking for such as I am already a frontend and started delving into backend. THIS IS SO HELPFUL. YOU WONT REGRET IT. JUST ONE HOUR AS WELL. THANK YOU SO MUCH!!!!!
Very nice how long have you been working on coding ?
Great! Just what I can spend the weekend with. Thank you!
Best tutorial for the developer who wants to learn how to integrate nodejs with React and also want to revise the node.js
Wow, this MERN stack tutorial is an absolute gem! 🌟 The way you effortlessly navigate through MongoDB, Express, React, and Node.js is truly commendable. Your explanations are clear, concise, and make the entire MERN development process feel like a captivating journey.
I appreciate how you break down complex concepts into easily digestible chunks, making it accessible for both beginners and seasoned developers. The seamless integration of frontend and backend technologies showcased in this video is not just informative but also a visual delight.
Your passion for MERN stack development shines through, and it's contagious! Watching this tutorial has not only expanded my understanding of these technologies but has also inspired me to embark on my own MERN projects with newfound confidence.
Thank you for sharing your expertise and making learning such a joyful experience. Looking forward to more insightful content from your channel! 👏🚀 #MERNStack #CodingJoy #TechExcellence
Best course for the beginner for the MERN Stack development, who wants to learn MERN by creating a project I found this very helpful in brushing up all my skills as the project was in the most structured way possible
This was the best full stack video I have ever found I cant believe I understood how to build a basic full stack app in this video better then any other course ive done in the last two years lol
I love this channel because of tutors like you, this channel really helped me to become a self taught Full Stack Engineer.
Are u working}
@@abhishekcode yes brother
Hello, I have a doubt, so the thing is I have interview to attend, in which they have mentioned mern stack as a requirement, but I don't have any knowledge about this topic
Can I add this project for mern stack
One of the best explanation in all over internet, i just love the level of simplicity he explained 👏👏🤝🤝
this is so cool, as a first time fullstack developer with zero experience, this is just enough to get started I believe so. Kudos!! thank you so much for sharing this tutorial. New subscriber!!!
Amazing!! loved the tutorial, the project was simple and the way the tutor explained was amazing! was easy to follow the tutorial till the end!!
I'm glad to have completed the full projects, and I'm looking to develop adding book covers/images and an authentication process.
I really appreciate this tutorial as a FullStack self taught developer.
Dear Mohammad, I recently had the opportunity to go through your MERN app tutorial and I found it to be quite interesting and useful. The code was clear, to the point and I learned a lot from it. Also, I must point out that I literally had no issues with either part of the tutorial - structure of the app is explained at lightning speed, yet nicely and I had no issues with the packages. I have noticed that a significant portion of the tutorial time was spent typing out the Tailwind CSS code, however I do understand the importance of styling. Think of it as a suggestion to, maybe, do the CSS separately so the focus is more on the MERN-specific aspects, unless you prefer Tailwind which is cool 'cause it looks cool, if anything. Thanks again for the great content! Nebojsa
I refreshed my one year with one hour. Thank you :)
🌹
@DevEmpower - thank you so much. Fantastic tutorial and great way of explaining. Plain and simple
Thanks so much for sharing this! I learned a ton, especially about how the frontend and backend play together. Really insightful stuff!
Thank you so much. This tutorial was really helpfully. I successfully completed my first MERN stack application
I learnt a lot .. linking the frontend with backend ..Thank you so much for this beautiful crash course
Wow, this tutorial is absolutely fantastic! 🚀 The step-by-step explanations were incredibly clear, making it easy for me to follow along and understand every concept Thank you so much for creating such an excellent tutorial! It's undoubtedly the best one I've come across. Keep up the great work!
I was waiting for this video 😊
Excellent Tutorial - really enjoyed it !
Its nice code camp released new projects all the time because tech is changing so fast its nice to have up to date videos
Awesome tutorial. I thought, the front end had bit of unnecessary use of few things which made it difficult to understand the react but, somehow you explained everything. Thanks
Thank you for creating this training!
This is a great tutorial for those with frontend knowledge and strong js fundamentals. My tip is don't be intimidated by the code/syntaxes. Focus on the concept on how to build front and backend and how to connect and make them communicate. THANK YOU FOR THIS TUTORIAL!
Do you have any beginners backend project links?
such a great tutorial and good pace. I especially love the middleware and other node js dependancies that you chose to use--thanks thanks!
Great video!! Pasting all the code instead of writing it really kept the video from going boring/tedious.
i love this channel,and when i get my first job preety soon , i will donate for you guys to continue this wonderful service
Very good and simply explanation. Thanks
Aaah something I was looking for Thanks
I really appreciate this computer learning experience amazing
Finally Completed the project Thanks🥰
What a tutorial! Too Good. Wonderful!
Oooh! Wonderful this was something i was looking for please add more project on MERN STACK and as well create about React Native Onces Thnks All 👌👌👌
This was awesome. Thank you so much !
Thank you so much man, wonderful teaching
Awesome video before it I had no clue about MongoDB now I can make my db and some full stack apps. Thank you!
Very good course content! 😀 Learnt a lot.
great work brother,learned more from this.thank you, need more project like this
Muito bom, muito obrigado 👏👏👏
Certainly, I hope that watching this video will help me succeed in my job interview.😂
Waited for this one
Thanks so much for this course. The best course for the beginner easy to learn MERN stack
one of the best video to learn mern👏👏👏
Simple and awesome tutorial 🤘👏
Thanks for the video. Really appreciate it!
Great tutorial! Simple project explaining the basics well.
I must say Thank You for the incredible guide! It took me about 2 weeks between watching children and helping run a house, but all of it was worth it to see the finished project on screen!
Thank you for the awesome, very well-detailed guide!
Very good how long have you been coding ?
excellent tutorial. Really helpful
those who dont see books in frontend and thier code is correct this may solve your problem as it did work for me
check brackets after (book,index)
wrong: (book, index) {}
correct :(book,index)()
hope this helps
awesome tutorial, learnt a lot handson, really appreciate.
Amazing!! loved it
10:51 the schema is updated but the model is still named "Cat", you need to change it to "Book"
now shown in the video but he definitely would have changed it😂😂😂😂😂😂
also _id: String , to include in book model? 404 request are not working
very nice tutorial, as a intermediate dev the speed was nice.
thank you so much!!! this is really useful video for beginners and intermidate developers.
just completed the tutorial took almost 13 hours over the span of three days, overall nice tutorial👍👍
Glad to hear that
Hey bro can send the project
@@omkar00097 check description and there you can see a github link to the project
.find and .create methods are not working
@@garimanagarwal1571 share error and code(github)
Loved this tutorial!
Thanks for this video, Helped allot. Keep up the good work.
awesome tutorial. i need this so much!
Thank you so much for the tutorial !
Always ready for coding
This is great! Thanks
The video was very helpful helped me strengthen my concepts and helped me learn new and better coding practices Thanks a lot for the video!!!!!!!!!!!!!!!!!!!!!!!
Now I can add these to my resume
crystal clear,thank you very much
Thank you for this!!
Amazing project
This is a veru helpfull and clear project, thanku!
excellent tutorial ..enjoyed it
Beautiful!
Very good Step by Step teaching...😊
I really enjoyed the tutorial. Easy to understand😉😉
Great video this help me learn a lot more about MERN stack. I wasn't expecting the tailwind css tho.
Yeah, I can confidently add tailwind to my resume skill list now. Pretty damn useful.
it helps a lot Thanks and I expect more ...
thanks this was clear and understandable.
Thanks! For this video.
That was Great ! Thanks
*Mind-blowing dude! Loved this! Thanks a bunch*
❤❤ 💯💯 ⚡⚡
_P.s.- must have basic knowledge of MERN STACK before delving into project making!_
Happy coding! 😊
best explication thank you so much
Thank you so much it's really help me.
Excellent work🤩🤩🤩
this guys accent is soo thick i barely understood what he was saying yet i understood what was happening 10/10
only MERN project tutorial that ive completed great work!
Thanks Great Tutorial
would be great if you can show how to deploy with this mono-repo setup
Just finished the whole tutorial.. It was so awesome..teacher is very good. Learned lot of new things.. Now im gonna deploy this.
hello,,, can you plz explain how your'e going to upload this project?
@@crosswalker45 you can deploy the backend to render and use that api link in front end.. You can host the fronted to netlify.
@@terokmaximus6841how can I do that? Can you refer me any good video/blog?
@@terokmaximus6841also say how to deploy backend website projects.
@@terokmaximus6841hey could you please help me I hv some questions}?
18:03
If the PUT request for updating isn't working for you:
In postman, try checking the Headers section and see if "Content-Type" is set to the value "application/json"
If its not there , add it.
This video is absolutely useful for me, thank you so much. Worth the money for internet kk :D
This is Great tutorial🙏
Amazing!!
If jobs had where you learn from options I will proudly say your channel name❤
Awesome MAN
Great video!
This is Great!
@DevEmpower Thank you for the video. I have been working on building the project but I am experiencing problems with the Get All Books with Mongoose part. When I use the get request on Postman it gives me error 404, however the Post request worked out fine. I checked if whether my code was correct multiple times, and it was, can you kindly assist me on what i might be missing?