This is a professional MEAN stack application development beginner series to learn from scratch about the MEAN stack.
Introduction
This is a complete professional MEAN stack application development series for beginners where we will learn the MEAN stack from scratch. We will initiate the project from the beginning, learn each step why and how we are doing it. We will finish the application development with the complete code snippet along with the steps. Up to the first six parts, the working code is available on GitHub.
Let's Start
This solution is implemented in Angular 5 that should work with Angular 6/7 but since Angular 6 and 7 has some updates, e.g., file name, Angular Material, RxJs library, etc. Please let me know if you get an error on any step, I will update it.
This would be the article series where we will develop the professional website in MEAN stack and finally deploy it to a server. First, we will develop a static website with Angular 5 and use node.js only to run the website on a server. Later, we will develop a small content management system to dynamically control the website content with MongoDB on the backend.
In the first part, we set up the development environment, installed the necessary software and created the basic Angular application through Angular CLI. Since we are planning to heavily use Angular Material components, we installed the required packages for it and imported them in AppModule to use them application wide. In this part, we will mostly work on designing our home page using bootstrap menu component, Angular material Card component and third-party carousel control, etc.
In this part, we will develop a Contact Us page where a user can provide their contact information and ask any query or give a suggestion, this information would be emailed to admin. We will implement Angular Reactive Form and implement email functionality in Node.js.
In the previous part, we created the Contact Us page by using Angular reactive form, implemented the client side validation and created DataService to send the user information from the Contact Us page to the server side. In this part, we will implement the server side code in Node.js to take the user information and email it to the admin.
In this part, we will create MongoDB database, the Contact us page model in server side (Node.js), save the user message information into the database and send an email to website admin with a user message and contact information. This would be the start of our journey to actually create a dynamic website.
In this part, we will create the menu items APIs in node.js and dynamically load them instead of the hardcoded menu (Home, Services, Our Clients, etc.). We will then update our client application to load the menu through API and create the menu links accordingly.
In this part, we will mostly work in the Admin section. We will develop Menu Management page where we can add, update, delete and view the website's menu items. We will also develop our own Data Grid control that would be used in all future Admin pages, e.g., manage contacts, pages, etc. P.S.: The source code for this part is private and only available if you subscribe and create the account with Full Stack Hub!
In earlier parts, we created the Contact Us page to get the user feedback, the user message is only sent in an email to the site admin, in this part, we will also save the message in the database and create the Admin page to manage them, we will use the same Data Grid control we created in the previous part and this time, we will only provide the delete message functionality.
This is an important part of series where we will create the Page Management APIs in node.js and front-end in Angular, we will be able to create the pages, add the content (text, images, links, etc.) and attached them with the menu items that we have developed in earlier part as Menus Management. You would be able to create as many pages as you want and update them anytime without touching the application code, that will act as a simple Content Management System. For the page editor, we will use tinymce control for Angular that works great to provide us with different features to create an awesome front-end page. In fact, the article you are reading now and all others are written using Angular tinymce control.
In this part of Part 9, we will develop the front-end in Angular, we will be able to create the pages, add the content (text, images, links, etc.) and attach them with the menu items that we have developed in earlier part as Menus Management. You would be able to create as many pages as you want and update them anytime without touching the application code, this will act as a simple Content Management System. For the page editor, we will use tinymce control for Angular that works great to provide us with different features to create an awesome front-end page. In fact, the article you are reading now and all others are written using Angular tinymce control.
In the last part of Part - 9, we will update the View Page to render the dynamically created page through the Manage Page component in the Admin section. Our top menu is also managed in the Admin section, the Manage Page section stores the corresponding menu item when we create the new page. When the user will click on any menu item, the menu ID will pass to View Page that will load the page HTML from the database and render it on the screen.
In previous parts, we developed the Admin section to manage the Menu, User Messages, and Pages. In this part, we will secure the Admin section by implementing the login functionality. On the client side, we will learn how to implement the Angular Guard, JSON Web Token (JWT) and browser local storage. On the server side, we will use bcrypt to compare the hash password, JSON web token to create the public key and embed into the login API response.
In Part 10 - A, we developed the login API in node.js, in this part, We will develop the client side in Angular. We will develop the Login/Logout functionality and learn how to use Angular JWT and browser local storage. The only authenticated user would be able to access the admin section after this part.
This is the last part of series where we will develop the Search functionality for our website. Later, we will implement the Authentication Guard for admin section, a user won't be able to go to the admin section without login. We will also add the HttpIntercepter to automatically embed the token in HTTP requests. In the end, we will update Express.js APIs to take care of JWT and deployment preparation steps.
