MEAN Stack Application WalkthroughDate Published: 04/20/2019
This is a walkthrough video of the final application we developed following "Professional Application Development in MEAN Stack" learning path. We will learn how to add the menu, edit a page and attach the page to menu item.

Professional Application Development in MEAN StackDate Published: 11/21/2018
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 the steps. Up to first six parts, the working code is available on GitHub.

Professional Application Development in MEAN Stack - Last PartDate Published: 11/18/2018
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.

Professional Application Development in MEAN Stack - Part 10 - BDate Published: 11/12/2018
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.

Professional Application Development in MEAN Stack - Part 10 - ADate Published: 11/11/2018
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.

Professional Application Development in MEAN Stack - Part 9 - CDate Published: 11/05/2018
In the last part of Part - 9, we will update the View Page to render the dynamically created page through 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.

Professional Application Development in MEAN Stack - Part 9 - BDate Published: 10/30/2018
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 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, 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 ready now and all others are written using Angular tinymce control.

Professional Application Development in MEAN Stack - Part 9 - ADate Published: 10/27/2018
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 ready now and all others are written using Angular tinymce control.

Professional Application Development in MEAN Stack - Part 8Date Published: 10/14/2018
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.

Professional Application Development in MEAN Stack - Part 7Date Published: 09/17/2018
In this part, we will mostly work on the Admin section. We will develop Menu Mangement 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. PS: The source code for this part is private and only available if you subscribe and create the account with Full Stack Hub!

Professional Application Development in MEAN Stack - Part 6Date Published: 07/04/2018
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.

Professional Application Development in MEAN Stack - Part 5Date Published: 06/23/2018
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 user message and contact information. This would be a start of our journey to actually create the dynamic website.

Professional Application Development in MEAN Stack - Part 4Date Published: 03/17/2018
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 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.

Professional Application Development in MEAN Stack - Part 3Date Published: 03/04/2018
In this part, we will develop 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.

Professional Application Development in MEAN Stack - Part 2Date Published: 02/17/2018
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.

Professional Application Development in MEAN Stack - Part 1Date Published: 02/12/2018
This would be 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.

MEAN Stack with Angular 4, Auth0 Auth & JWT AuthorizationDate Published: 02/07/2018
In this short series of article, I would explain the step by step application development using MEAN stack (Angular 4) with User Authentication using Auth0 and Authorize our RESTful APIs request through JWT (JASON Web Token). We will develop our application in Visual Studio Code editor.