Learning MEAN Stack by Building Real world Application

Learn how to build Full-Stack Web Application with Nodejs, Express, MongoDB, Angular8, Angular Material, and Passport

3.45 (226 reviews)
Udemy
platform
English
language
Web Development
category
instructor
5,848
students
16 hours
content
Dec 2020
last update
$59.99
regular price

What you will learn

Integrate Any Angular Application with Nodejs

CURD(Create,Read,Update,Delete) Operation with Nodejs, Express and Mongoose

CURD(Create,Read,Update,Delete) Operation with Nodejs, Express and Mongoose

JSON Web Token Authentication with PassportJs in MEAN Stack

Social(Twitter, Github, Google) Authentication with PassportJs in MEAN Stack

Send Email in Nodejs

Description

Today many enterprise leaders are struggling to use the diverse options available to create web development projects. With technological advancements taking place every few months, it becomes difficult to keep pace unless you are a fast learner. Just when the web development community was getting comfortable with LAMP, MEAN stack made its entry and boy it has completely redefined how web developers work.

MEAN Stack is an acronym for MongoDB, Express, Angular and Node.js – whereby all these four are integrated to form solution-built full-stack JavaScript applications.

Almost, every web development player in the market is trying to become a MEAN stack app developer.

Why MEAN Stack App Development is such a great choice?

Using the same programming language in both the front and back ends of the application has multiple benefits. For one thing, it makes data communication between server and client simpler and faster. It makes modifications to either end easier. It also promotes reusing code across the multiple technologies that in turn helps keep the application secure and stable.

1)Time Saver – as all the JavaScript libraries are combined together, it saves a lot of time for the developers as they can access all the libraries at one go. The time saved here can be used to advance the project further.

2) Speedy data storage and retrieval – MongoDB does not require any predefined regulation to establish field relations unlike MySQL database that cannot operate without predefined database schemas and rules. Moreover, addition or deletion of records is very easy in MongoDB – all thanks to the dynamic schemas that it relies on. All this ensures that the system becomes efficient and more speedy regular functions can be performed.

3) Uniform Programming Language – what works in favor of MEAN stack is that one can control both the front end and back end activities because of JSON which is compatible with MongoDB database, Express and Node.js server and Angular. As such the need for any other programming languages like PYTHON or PHP.

Furthermore, node.js framework reduces the page load time making it a hot favorite for web based applications.

4) OS Compatibility – MEAN stack is compatible with MS Windows, MAC OS and Linux. You still have doubts about the feasibility of MEAN stack?

5) Agility and Quality of Apps – the basic architecture of MEAN is set up to support automated testing; as such developers can easily make corrections as and when the situation arises. Hence one can expect agile and quality app development with MEAN stack.

6) MEAN stack supports the MVC architecture –The single programming language and flexible database of MEAN stack allows it to handle the complex procedures of MVC framework. This ensures that development work does not become tedious or less productive.

 You will learn how to:

  • Create Nodejs server with Express.js
  • Use ES6 with Nodejs
  • Create Restful APIS with Nodejs, Express and Mongoose
  • Secure Restful APIS with Passport and JWT
  • Social(Twitter, Google, Github) Authentication in Nodejs
  • CRUD(Create, Read, Update, Delete) Operation in Angular
  • Build Angular App with Angular Material, Material Data Table, and Material Dialog
  • Learn how to use Angular Material Components in Real world Application
  • JSON Web Token Authentication in Angular
  • Social(Twitter, Google, Github) Authentication in Angular
  • Generate PDF File in Nodejs
  • Download PDF File in Angular
  • Document RESTFUL APIS with Swagger
  • Send Email in Nodejs

Content

Angular Fundamentals

Install Tools
Create Angular Project using Angular-cli
Edit Your First Angular Component
Project File Review
Introduction to Modules
NgModule MetaData
Introduction to Components
Create your first Angular Component
Data Bindings
Pipes
Directives
Introduction to Services
Create Your Angular Service
Introduction to Dependency Injection
Providing Services

Components and Data Bindings

Inline Template
Showing an Array property with ngFor
Creating a class for the data
Interpolation
Property Binding
Attribute Binding
Adding Bootstrap
Class Bindings
Style Binding
Event Binding
Event Filtering
Template Reference Variable
Two Way Data Binding
Pipes

Building Components

@Input Property
Alias @Input Property
@Output Property
Passing Data to Events
Alias @Output Property
Styles Component
View Encapsulation
ng-content
ng-container

Final Project - Getting Started with Real World Application

Create Angular Project for our Real world Application
Complete Source Code for this Module
Important Note related to Angular Material Documentation
Angular Material Setup
Adding Prebuilt Material Theme
Adding Material Fonts
Creating Shared Module

Create Dashboard Layout on Frontend Angular Application

Complete Source Code for this Module
Creating Module using Angular-cli
Adding Lazy Loading
Lazy Loading Demo
Create Main Content Component
Create SideNav Component
Adding Sidenav to our Layout
Adding Toolbar in Sidebar Navigation
Adding List Items to the Side Navigation
Adding Toolbar on the top of Layout
Adding Mode to the Material Sidenav Navigation
Adding Responsiveness to Side Navigation
Debugging Side Navigation Responsiveness
Create Menu Icon
Displaying Menu Icon on Small Screen
Adding Material Card

Adding Routing in Angular

Complete Source Code for this Module
Refactor App Structure
Adding Nav List Items
Creating Invoices Module and Routing
Create Clients Module and Routing

Setup Node.js Server

Complete Source Code for this Module
Creating Express Server
Create Route in Express
ES6 Setup using Babel
Create npm script for Production
Setting up Prettier
ESlint Setup with Prettier
Configure Prettier with ESLint

Creating CRUD(Create, Read, Update, DELETE) API on Node.js Backend

Complete Source Code for this Module
Create Invoice Listing Endpoint
Create Custom Middleware in Express
Refactor App Structure to Controller and Routes
Refactor the config folder
Connecting to MongoDB
Creating new Model in Mongoose
Create new record in mongoose Model
Debugging Node.js App in Chrome
Debugging Node.js App in VS Code
Error Handling Middleware
Error Handling Middleware Demo
Creating Global Error Handling Middleware
Logging Http Request status using morgan middleware
Parsing the Request Body in Express
Create new record in MongoDB
Adding Validations through Joi
Find all Records from MongoDB
Handling Http status codes
Find Record by ID
Delete Record from MongoDB
Update Record by Id from MongoDB

Documentation for the REST APIS Using Swagger In Nodejs

Complete Source Code for this Module
Initial Setup for Documentation
Adding Meta Data for Swagger
Adding JSON Mime Types for Swagger
Create Swagger Model Definition
Documentation for the POST Endpoint
Documentation for the GET Endpoint
Documentation for FindOne Endpoint
Documentation for Delete Endpoint
Documentation for Update Endpoint
Update Build Script to add Swagger files

Creating CRUD with Reactive Forms and Material Data Table

Complete Source Code for this Module
Module Intro
Create Service in Angular
Handle CORS Issues on Backend
Adding Angular Material Data Table
Populating Records to the Data Table
Reformat the Date using Pipe
Redirect in Routing
Adding Material Menu in Data Table
Create Button to save new Invoice
Adding Routing for new Invoice
Create basic Form
Adding Material Date Picker
Adding Reactive Forms
Save and Cancel button in the Form
Sending create request to the backend server
Change the Color Scheme for Form Fields
Validations in Reactive Forms
Displaying Validation Error to User
Adding Success Notification
Error Handling Notification
Delete Invoice
Adding Notification for Delete Invoice
Refresh Data Table after deleting records
Adding Routing to update Record
Get the Route params using ActivatedRoute
Set the Object to the Reactive Forms
Send the Update Request to the backend

Pagination, Sorting and Filtering on Angular and Nodejs

Complete Source Code for this Module
Adding Pagination on Backend
Adding Documentation for Pagination
Refactor Get Invoices on Frontend
Adding Paginator Component
Bind the Length of Records in Pagination Controls
Change the Page Size using Page Event
Running Observables in Series
Adding Progress Spinner
Adding Styling for Spinner
Filtering on Backend
Adding Sorting on Backend
Adding Documentation for Sorting and Filtering
Implement ngAfterViewInit
Basic Setup for Sorting on Frontend
Adding Sorting on Fronetnd
Refactoring to Rxjs Merge
Creating Form Fields for Filter Invoices
Send Backend Request to Filter Invoices

Client Feature (Material Dialog and Material Data Table)

Complete Source Code for this Module
Module Intro
Structure a Node.js App feature by feature
Basic Setup for Client Module
Create Client Module in Mongoose
Validating Request Body Using Joi
Create Record Using Async/Await
Find All Clients
FindOne Client
Delete Client
Update Client
Adding Relationship between Client and Invoice
Populate Client with All Invoices
Add Client while Updating Invoice
Create Client Model Definition in Swagger
Adding Documentation for GET and POST Client
Adding Documentation for FindOne, Update, And Delete
Fetch Clients from the Backend
Load Clients to the Data Table
Adding Toolbar
Setup Basic Dialog
Refactor Client From Dialog to Separate File
Refactor width and height of Material Dialog
Create new Form in the Dialog
Create Reactive Forms inside Material Dialog
Validations for required Fields
Get the Data from Material Dialog
Save new Client
Handling Empty Results in Observable
Adding Spinner
Adding Edit and Delete Action Item
Passing Data to the Material Dialog
Set the Client to the Form
Update the Client
Update Title on Material Dialog
Delete Client
Refactor Save and Update to Conditionals
Add Material SelectBox
Adding Validations for Client

JSON Web Token Authentication with Passport

Complete Source Code for this Module
Basic Setup for User Module
Create User Model
Save new User in MongoDB
Encrypt the User Password
User Login
Fix typo for bcryptjs.compare method
Register Config to development
Register global Middlewares in Separate file
Configure Passport JWT Strategy
Debugging the Passport JWT Strategy
Code Review for Passport Library
Apply Authentication on Routes
Add Documentation for Signup
Adding Documentation for Login
Adding Authentication Header in Documentation

JSON Web Token Authentication in Angular

Complete Source Code for this Module
Create Auth Module
Creating Reactive Forms
Send Login Request to the backend Server
Save Token to LocalStorage
Create HTTP Token Interceptor
Apply HTTP Token Interceptor
Adding Title Dynamically
Adding Signup Button in the Form
Send Signup Request to the Backend Server
Error Handling
Adding Loading Spinner in Auth Form
Apply Routing Guards
Apply NoAuthGuard on Public Routes
Fixing Invoice Title
Adding Resolve Guards for Edit Invoice
Logout User

Social Authentication(Google, Twitter, Github) with Passport in Node.js

Complete Source Code for this Module
Setup Auth Module
Setup Auth Credentials From Google
Configure Passport-google Strategy
Setup Routes for Google Authentication
Serializing and Deserializing User in Passport
Understanding Passport Google Auth Flow
Add Scope for Email and Profile in Google Strategy
Find or create the user after Authenticated from Google
Refactoring Signup
Handle Duplicate Account Validation in Signup
Refactor Login
FIx Profile Error
Send JWT Token After Authenticated with Google Strategy
Redirect to Login After Failed Authentication
Create New Twitter Application
Setup Passport Twitter Strategy
Twitter Authentication with Passport
Creating developer Application in Github
Authenticate User with Github Strategy
Wrap Up

Social Authentication(Google, Twitter, Github) with Passport on Frontend

Complete Source Code for this Module
CORS Access Control Error in Google Authentication
Adding Proxy for the API in Angular
Redirect User to Dashboard Router after Authenticated
Extract Query Param in AuthGuard
Authenticate User from the backend Server
Fix Authentication in AuthGuard
Github and Twitter Authentication
Styling Social Buttons
Refactor Styling for Signup Buttons
Logout User on Backend
Logout User on Frontend
Fixing Http Interceptor on Lazy Loaded Modules
Adding Error Handling in Logout

Invoice View

Complete Source Code for this Module
Module Intro
Creating Invoice view Component
Adding View Action Item to Table
Apply Resolve Guard on Component
Populate Client with Invoice
Display Invoice Details to the Material Card
Styling Material Card for Invoice Details
Apply Routing for Edit Invoice
Calculate the Total Value included Tax

Download PDF Invoice

Complete Source Code for this Module
Module Intro
Installing Plugins to generate PDF File
Generate Basic Pdf File
Adding Bootstrap to Invoice Template
Generate Dummy Invoice
Render Dynamic Content to PDF
Display Total and SubTotal in the Invoice
Refactor Template Code into Methods
Download Invoice From Frontend
Download and Save PDF from Frontend
Adding Material ProgressBar
Adding Name Attribute for Local User
Adding User name and email to the Invoice
Fix Dynamic User name and Email in the Invoice
Adding Error Handling Method
Fetch Email from the Twitter Profile
Refactor getUser method

Forgot Password

Complete Source Code for this Module
Add Link for Forgot Password
Create Forgot Password Component
Design the Forgot Password Component
Create Forgot Password Route on Backend
Send Forgot Password Request from Frontend
Create Reset Link to Reset password
Create new Account at Ethereal
Send Reset Password Email to User
Spinner on Forgot Password
Create Reset Password Component
Design the Reset Password Form
Implement Reset Password on backend
Adding Password Match Validation
Reset Password Request from Frontend
Refactor Documentation for Signup
Fix Color typo for Client Select Box

Bonus

Download Source Code

Learning Path to become a full-stack developer

Learning Path to become a full-stack developer

Screenshots

Learning MEAN Stack by Building Real world Application - Screenshot_01Learning MEAN Stack by Building Real world Application - Screenshot_02Learning MEAN Stack by Building Real world Application - Screenshot_03Learning MEAN Stack by Building Real world Application - Screenshot_04

Reviews

Ishan
March 7, 2023
Instructor used older versions. Just for example in course Angular v5 is used and Angular 14 have been released on the day I am commenting.
Debajyoti
October 1, 2020
This Course is the Worst. Waste of Money. No Fundamental things Covered. Everything explained at a High level only. Not suitable for beginners.
Matheas
July 17, 2020
It is much informative in learning this course . I enjoyed the course. The way he taught really helps me to explore new skills in it .
Saritha
April 2, 2020
While purchasing it is showing angular 8 after purchasing the videos are from angular 5 .. and they explained only basic concepts. that to very little, it's very disappointment.. waste of purchasing this course.. i wasted my money
Sorin
April 1, 2020
Pros: - First teacher that creates a complex project splitscreen (editor left, output right) - I love the final project and features that you implemented, you covered more than most of the tutorials - I loved the fact you had the code clean, structured very well, code legacy (naming, folders, etc), not everywhere, but still coming again again to refactor Cons: - By time... while the project evolved you started to talk much faster, skip explanations, too much copy / paste from the documentation instead of typing it and explain it while you do it. - Rxjs / Observable where you use it is outdated (i found the solution in comment section of some of the videos, but not every time) - Some of the videos start with different code, compared to the last, so you need to pay attention. Summary: I would recommend this to anyone who has already some experience with Angular, if you never wrote a single line in Angular & NodeJs, Is hard to grasp the tutorial he provided. Even as a summary, I didn't enjoyed the first 3 Sections, and the last 3, I skipped the Invoice view, BUT overall the course is very good and it covers everything for the final project that you prepared, which is not simple, has a lot of stuff. My review started from 5 stars, decreased on the outdated content(rxjs), code modified without announcing in resources files or somewhere, copy/paste code documentation , after that you delete everything, starting to implement things without saying what are you about to implement, why, in which files etc
Issakah
June 13, 2019
So far so good. I have learnt new things especially the async and await commands. I am expecting things like how to upload images from the frontend and how to retrieve it from the server side.
Manish
November 23, 2018
Amazing tutorial. Please keep adding some new tips and tricks in this tutorial. Would love to have one solution, where we can deploy the MEAN stack on heroku with backend and frontend both in one single folder.
Brian
November 7, 2018
Course quickly devolves in to "let me show you what i'm typing, as I'm typing at full speed" with no break to understand why he's making the choices he's making, possible alternatives, or any theory at all. You're watching him type out the source code, essentially.
Khaled
September 8, 2018
well what i can say ??? i tried many cours on udemy that was very good ,BUT honestly this is the first time i fenish the project from A to Z, the way this guy starts the project and finish it is just what a newby needs .... after finishing this cours i almost fenished my own project for my own SHOP . am so proud of my application ,and iam so gratefull to Mr HAIDER , i am planing to finish my application then i'll buy his next courses . that was my opinion ... i do recomande this cours . good luck to every one and thank you HAIDER .
Mateusz
August 29, 2018
Cool real world example! Just missing deployment example to e.g. Heroku as Bonus. would be great... Do you think you will be able to add the heroku deployment bonus video?
Anna
July 28, 2018
This course definitely not for beginners. Haider Malik don't explains any basic stuffs. But for me his explanation enough. So in fact this course more about Cookbook for Upper immediate MEAN developer. And this is exactly what I need. I grateful to Haider for his job ! I want to see his course about best practices in Microservices with Node JS, I hope he will continue to create his courses for us. Thank You Haider.
Darwin
June 14, 2018
All in all, this is a very good course, as some one else mentioned, this is definitely not for beginners, you will get the most out of it if you have have been exposed to the stack before. A couple of new sections have been added to the course where Haider explains the basics of angular. I also liked the fact that Haider is very active in the Q&A section, so if you have questions, he's there to help!
Shubham
June 10, 2018
The instructor is not explaining the points very thoroughly, but course has good content so will keep watching
Pranay
June 7, 2018
Finally a MEAN stack course you can totally bank on, for getting yourself a technical jump start on building real world MEAN stack applications. Provides you with the necessary understanding and hands on implementation of all the components of a real world MEAN application(one that you might plan to build after learning MEAN stack). Please note that this course is not for absolute beginners who have little or no experience with Java script or Type script, Nodejs or mongo. A basic level understanding of all these will definitely sail you very smoothly through the course.
Alan
June 7, 2018
This is one of the best MEAN stack courses i had watched so far; this is not for "from zero beginners", you'll need to have some kind of background about node.js and angular. But once you have all that, you will understand everything, also i love how the app is structured at the end.

Charts

Price

Learning MEAN Stack by Building Real world Application - Price chart

Rating

Learning MEAN Stack by Building Real world Application - Ratings chart

Enrollment distribution

Learning MEAN Stack by Building Real world Application - Distribution chart
1691646
udemy ID
5/14/2018
course created date
7/9/2019
course indexed date
Bot
course submited by