Build a full-stack MEAN application 2022 - Step by step Tutorial
ฝัง
- เผยแพร่เมื่อ 5 ต.ค. 2024
- Build a full-stack mean application from scratch, step-by-step with this video!
We will create a web application that can be used for storing, updating and deleting diary entries.
This application will use Angular (and bootstrap) for the front-end, node and express JS for the backend server, and mongo db for data persistence!
Link to source code:
github.com/4ne...
🕒 Timestamps 🕒
00:41 - Setting up Angular
03:22 - Adding Bootstrap 3
04:27 - Creating a HTML Table
05:50 - Angular Shared Services
07:55 - Populating data from an array
09:02 - Adding action buttons to each entry
09:47 - Deleting diary entries
11:14 - Angular Subjects
13:39 - Angular Reactive Forms for adding entries
20:07 - Editing a Diary Entry
26:12 - Splitting the Application
29:11 - Creating a node server
33:12 - Getting started with Express
37:03 - Using next()
37:56 - Registering URI's
38:44 - Migrating Data from Angular to Express
40:41 - Angular HTTP requests
48:15 - Making POST requests
52:22 - Making DELETE requests
56:22 - Making PUT requests
01:00:00 - Setting up MongoDB
01:02:30 - Using Mongoose
01:06:10 - Connection our app to MongoDB
01:08:11 - Saving to MongoDB
01:08:56 - MongoDB Shell
01:10:32 - Fetching data with MongoDB
01:13:33 - Deleting from MongoDB
01:15:43 - Editing data with MongoDB
Please like, subscribe and leave a comment to let me know what you think!
Visit my website for all my blogs and videos on software engineering: www.aneesh.co.uk
Icon made by FreePik from www.flaticon.com
thx man, plz create more mean stack tutorials
thannks man with this mean stack tutorials l was little bit rust but now am back on the game ...... great job
Thank you!
@@AneeshMistry anytime 😊 man
Thank you so much, this is an amazing tutorial! Hope your channels becomes successful.
Thank you!
This was great! Very thorough video and educational. Great job on this. I can see this going far.
Thanks Vishul!
Wow thanks! So well done - very grateful that you've created this introduction 🙌
Thank you!!
Just one more heads-up: when returning back to the Angular files after creating the server and the Express Middleware, your objects and methods are renamed, so that makes it a bit hard to follow... Maybe you have a automatic refactoring, but if one watches the video chronologically, it doesn't show, so that could be confusing noobs like me :)
@@veebxl thank you for the feedback - yes that can be a little difficult to follow. I will bare this in mind for future videos :)
I'm not sure if you thought speeding up the typing in the tutorial would be of a certain benefit or something. For us watching it isn't. We just have to pause, playback at half speed...rewind the video again and again. Much easier to slow everything down if anything. Thank for the tutorial though.
Thanks! I’ll reduce the amount I speed it up by in future videos, appreciate the feedback :)
Thanks
Thank you so so much! I’m glad you could find this helpful. This has made my day!
@@AneeshMistry No really , just a small token of gratitude - I am learning so much, the videos are clear, concise and fast - very helpful, thanks!
Great video! However, even after configuring, I still encounter CORS errors on requests - DELETE and UPDATE :( POST is fine , before the sync with database 59:46
EDIT: I git it, forgot about slash at the end of the req URL with ids
Perfect thanks!
This is great. Well done. Could you please add login and registration with Authentication/Authorization? to make it more robust for us just learning ?Thanks
Hi David, thank you! A mongodb authentication video will be out in a couple weeks!
Very usefull video for begginers
Thank you!
Angular with Java is a good idea? Or React is better?
I would say the front end framework you use is your preference. I learnt Angular as I believe React is a little more complex. Both will interact with a backend REST service the same way
Muito bom vídeo, parabéns pelo conteúdo.
Obrigada!
Do you have course on Udemy?
Hey! I don’t but may create one in 2023!