All in One Offer! | Access Unlimited Courses in any category starting at just $29. Signup today. Offer Ends in: 7 Days!

Browse Library

Learning MEAN Stack by Building Real world Application

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

Instructed by Haider Malik

$29 Get Unlimited Learning Access
7 days left at this price!
30 days money back guarantee
$29
It Includes
  • Get Full Access to the platform
  • Access to 16000+ online courses
  • High Quality Recorded Lectures
  • Learn Online from Mobile/PC/Tablet
  • Assignments & Projects
  • Online iLab Access
  • Certificate of Completion
  • Download for offline viewing
  • Free Instructor Support
  • Access valid for 1 user only
  • Cancel Anytime
Add to Wishlist Remove Wishlist
  • 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

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

  • Basic NodeJS/Express and Angular Experience is required
  • Intermediate Angular Developer who want to learn full-stack web development
View More...

Section 1 : Angular Fundamentals 15 Lectures 00:42:21

  • Lecture 1 :
  • Create Angular project using Angular-cil Preview
  • 00:03:04
  • Lecture 2 :
  • Edit Your First Angular Component
  • 00:01:14
  • Lecture 3 :
  • Project File Review
  • 00:00:45
  • Lecture 4 :
  • Introduction to Modules
  • 00:01:46
  • Lecture 5 :
  • NgModule Meta Data
  • 00:04:10
  • Lecture 6 :
  • Introduction to Components
  • 00:02:03
  • Lecture 7 :
  • Create your first Angular Componen
  • 00:05:08
  • Lecture 8 :
  • Data Bindings
  • 00:06:10
  • Lecture 9 :
  • Pipes
  • 00:03:00
  • Lecture 10 :
  • Directives
  • 00:04:47
  • Lecture 11 :
  • Introduction to Services
  • 00:02:01
  • Lecture 12 :
  • Create Your Angular Service
  • 00:01:58
  • Lecture 13 :
  • Introduction to Dependency Injection
  • 00:01:58
  • Lecture 14 :
  • Providing Services
  • 00:04:17
  • Lecture 15 :
  • Find all Records from MongoDB

Section 2 : Components and Data Bindings 14 Lectures 00:21:03

  • Lecture 1 :
  • Inline Template
  • 00:02:51
  • Lecture 2 :
  • Showing an Array property with ngFor
  • 00:01:04
  • Lecture 3 :
  • Creating a class for the data
  • 00:03:08
  • Lecture 4 :
  • Interpolation
  • 00:01:03
  • Lecture 5 :
  • Property Binding
  • 00:01:35
  • Lecture 6 :
  • Attribute Binding
  • 00:00:53
  • Lecture 7 :
  • Adding Bootstrap
  • 00:02:03
  • Lecture 8 :
  • Class Bindings
  • 00:01:09
  • Lecture 9 :
  • Style Binding
  • 00:00:54
  • Lecture 10 :
  • Event Binding
  • 00:01:06
  • Lecture 11 :
  • Event Filtering
  • 00:01:13
  • Lecture 12 :
  • Template Reference Variable
  • 00:01:07
  • Lecture 13 :
  • Two Way Data Binding
  • 00:01:19
  • Lecture 14 :
  • Pipes
  • 00:01:38

Section 3 : Building Components 9 Lectures 00:25:54

  • Lecture 1 :
  • @Input Property
  • 00:03:35
  • Lecture 2 :
  • Alias @Input Property
  • 00:00:45
  • Lecture 3 :
  • @Output Property
  • 00:03:35
  • Lecture 4 :
  • Passing Data to Events
  • 00:02:27
  • Lecture 5 :
  • Alias @Output Property
  • 00:00:34
  • Lecture 6 :
  • Styles Component
  • 00:02:01
  • Lecture 7 :
  • View Encapsulation
  • 00:05:54
  • Lecture 8 :
  • ng-content
  • 00:05:43
  • Lecture 9 :
  • ng-container
  • 00:01:20

Section 4 : Final Project - Getting Started with Real World Application 6 Lectures 00:10:03

  • Lecture 1 :
  • Create Angular Project for our Real world Application
  • 00:03:04
  • Lecture 2 :
  • Important Note related to Angular Material Documentation
  • Lecture 3 :
  • Angular Material Setup
  • 00:02:13
  • Lecture 4 :
  • Adding Prebuilt Material Theme
  • 00:00:57
  • Lecture 5 :
  • Adding Material Fonts
  • 00:01:28
  • Lecture 6 :
  • Creating Shared Module
  • 00:02:21

Section 5 : Create Dashboard Layout on Frontend Angular Application 15 Lectures 00:36:12

  • Lecture 1 :
  • Create Module using Angular-Cil
  • 00:01:54
  • Lecture 2 :
  • Adding Lazy Loading
  • 00:04:55
  • Lecture 3 :
  • Lazy Loading Demo
  • 00:01:24
  • Lecture 4 :
  • Create Main Content Component
  • 00:02:09
  • Lecture 5 :
  • Create SideNav Component
  • 00:03:40
  • Lecture 6 :
  • Adding Sidenav to our Layout
  • 00:03:42
  • Lecture 7 :
  • Adding Toolbar in Sidebar Navigation
  • 00:01:12
  • Lecture 8 :
  • Adding List Items to the Side Navigation
  • 00:00:59
  • Lecture 9 :
  • Adding Toolbar on the top of Layout
  • 00:00:42
  • Lecture 10 :
  • Adding Mode to the Material Sidenav Navigation
  • 00:02:07
  • Lecture 11 :
  • Adding Responsiveness to Side Navigation
  • 00:05:52
  • Lecture 12 :
  • Debugging Side Navigation Responsiveness
  • 00:01:28
  • Lecture 13 :
  • Create menu Icon
  • 00:02:48
  • Lecture 14 :
  • Displaying Menu Icon on Small Screen
  • 00:01:31
  • Lecture 15 :
  • Adding Material Card
  • 00:01:49

Section 6 : Adding Routing in Angular 4 Lectures 00:14:23

  • Lecture 1 :
  • Refactor App Structure
  • 00:04:10
  • Lecture 2 :
  • Add NAV List Items
  • 00:01:55
  • Lecture 3 :
  • Creating Invoices Module and Routing
  • 00:05:27
  • Lecture 4 :
  • Create Clients Module and Routing
  • 00:02:51

Section 7 : Setup Node.js Server 7 Lectures 00:12:34

  • Lecture 1 :
  • Creating Express Server
  • 00:01:49
  • Lecture 2 :
  • Create Route in Express
  • 00:00:37
  • Lecture 3 :
  • ES6 Setup using Babel
  • 00:02:32
  • Lecture 4 :
  • Create npm script for Production
  • 00:01:15
  • Lecture 5 :
  • Setting up Prettier
  • 00:01:45
  • Lecture 6 :
  • ESlint Setup with Prettier
  • 00:02:48
  • Lecture 7 :
  • Configure Prettier with ESLint
  • 00:01:48

Section 8 : Creating CRUD(Create, Read, Update, DELETE) API on Node.js Backend 21 Lectures 00:36:39

  • Lecture 1 :
  • Create Invoice Listing Endpoints
  • 00:02:23
  • Lecture 2 :
  • Create Custom Middleware in Express
  • 00:01:35
  • Lecture 3 :
  • Refactor App Structure to Controller and Routes
  • 00:03:03
  • Lecture 4 :
  • Refactor the config folder
  • 00:01:22
  • Lecture 5 :
  • Connecting to MongoDB
  • 00:01:37
  • Lecture 6 :
  • Creating new Model in Mongoose
  • Lecture 7 :
  • Create new record in mongoose Model
  • 00:04:19
  • Lecture 8 :
  • Debugging Node.js App in Chrome
  • 00:02:05
  • Lecture 9 :
  • Debugging Node.js App in VS Code
  • 00:01:46
  • Lecture 10 :
  • Error Handling Middleware
  • 00:01:48
  • Lecture 11 :
  • Error Handling Middleware Demo
  • 00:00:51
  • Lecture 12 :
  • Creating Global Error Handling Middleware
  • 00:03:23
  • Lecture 13 :
  • Logging Http Request status using morgan middleware
  • 00:01:50
  • Lecture 14 :
  • Parsing the Requested Body in Express
  • 00:01:43
  • Lecture 15 :
  • Create a New Record in MongoDB
  • 00:01:28
  • Lecture 16 :
  • Adding Validations through Joi
  • 00:07:26
  • Lecture 17 :
  • Find all Records from MongoDB
  • Lecture 18 :
  • Handling Http status codes
  • Lecture 19 :
  • Find Record by ID
  • Lecture 20 :
  • Delete Record from MongoDB
  • Lecture 21 :
  • Update Record by Id from MongoDB

Section 9 : Documentation for the REST APIS Using Swagger In Nodejs 10 Lectures 00:20:21

  • Lecture 1 :
  • Initial Setup for Documentation
  • 00:02:27
  • Lecture 2 :
  • Adding Meta Data for Swagger
  • 00:03:14
  • Lecture 3 :
  • Adding JSON Mime Types for Swagger
  • 00:02:33
  • Lecture 4 :
  • Create Swagger Model Definition
  • Lecture 5 :
  • Documentation for the POST Endpoint
  • Lecture 6 :
  • Documentation for the GET Endpoint
  • 00:02:17
  • Lecture 7 :
  • Documentation for FindOne Endpoint
  • 00:03:41
  • Lecture 8 :
  • Documentation for Delete Endpoint
  • 00:01:29
  • Lecture 9 :
  • Documentation for Update Endpoint
  • 00:03:07
  • Lecture 10 :
  • Update Build Script to add Swagger files
  • 00:01:33

Section 10 : Creating CRUD with Reactive Forms and Material Data Table 27 Lectures 01:28:23

  • Lecture 1 :
  • Module Intro
  • 00:01:22
  • Lecture 2 :
  • Create Service in Angular
  • 00:07:08
  • Lecture 3 :
  • Handle CORS Issues on Backend
  • 00:01:43
  • Lecture 4 :
  • Adding Angular Material Data Table
  • 00:03:16
  • Lecture 5 :
  • Populating Records to the Data Table
  • 00:03:20
  • Lecture 6 :
  • Reformat the Date using Pipe
  • 00:01:09
  • Lecture 7 :
  • Redirect in Routing
  • 00:01:44
  • Lecture 8 :
  • Adding Material Menu in Data Table
  • 00:03:45
  • Lecture 9 :
  • Create Button to save new Invoice
  • 00:03:01
  • Lecture 10 :
  • Adding Routing for new Invoice
  • 00:04:18
  • Lecture 11 :
  • Create basic Form
  • 00:03:26
  • Lecture 12 :
  • Adding Material Date Picker
  • 00:01:52
  • Lecture 13 :
  • Adding Reactive Forms
  • 00:05:22
  • Lecture 14 :
  • Save and Cancel button in the Form
  • 00:02:17
  • Lecture 15 :
  • Sending create request to the backend server
  • 00:03:53
  • Lecture 16 :
  • Change the Color Scheme for Form Fields
  • 00:01:40
  • Lecture 17 :
  • Validations in Reactive Forms
  • 00:02:09
  • Lecture 18 :
  • Displaying Validation Error to User
  • 00:02:58
  • Lecture 19 :
  • Adding Success Notification
  • 00:04:14
  • Lecture 20 :
  • Error Handling Notification
  • 00:01:43
  • Lecture 21 :
  • Delete Invoice
  • 00:03:41
  • Lecture 22 :
  • Adding Notification for Delete Invoice
  • 00:02:50
  • Lecture 23 :
  • Refresh Data Table after deleting records
  • 00:02:34
  • Lecture 24 :
  • Adding Routing to update Record
  • 00:02:44
  • Lecture 25 :
  • Get the Route params using ActivatedRoute
  • 00:03:37
  • Lecture 26 :
  • Set the Object to the Reactive Forms
  • 00:03:39
  • Lecture 27 :
  • Send the Update Request to the backend
  • 00:08:58

Section 11 : Pagination, Sorting and Filtering on Angular and Nodejs 18 Lectures 01:04:37

  • Lecture 1 :
  • Adding Pagination on Backend
  • 00:05:09
  • Lecture 2 :
  • Adding Documentation for Pagination
  • 00:04:06
  • Lecture 3 :
  • Refactor Get Invoices on Frontend
  • 00:01:54
  • Lecture 4 :
  • Adding Paginator Component
  • 00:01:27
  • Lecture 5 :
  • Bind the Length of Records in Pagination Controls
  • 00:01:43
  • Lecture 6 :
  • Change the Page Size using Page Event
  • 00:08:25
  • Lecture 7 :
  • Running Observables in Series
  • 00:03:12
  • Lecture 8 :
  • Adding Progress Spinner
  • 00:05:18
  • Lecture 9 :
  • Adding Styling for Spinner
  • 00:02:13
  • Lecture 10 :
  • Filtering on Backend
  • 00:01:41
  • Lecture 11 :
  • Adding Sorting on Backend
  • 00:03:56
  • Lecture 12 :
  • Adding Documentation for Sorting and Filtering
  • 00:01:51
  • Lecture 13 :
  • Implement ngAfterViewInit
  • 00:01:26
  • Lecture 14 :
  • Basic Setup for Sorting on Frontend
  • 00:04:07
  • Lecture 15 :
  • Adding Sorting on Fronetnd
  • 00:06:21
  • Lecture 16 :
  • Refactoring to Rxjs Merge
  • 00:05:59
  • Lecture 17 :
  • Creating Form Fields for Filter Invoices
  • 00:02:12
  • Lecture 18 :
  • Send Backend Request to Filter Invoices
  • 00:03:37

Section 12 : Client Feature (Material Dialog and Material Data Table) 38 Lectures 01:53:43

  • Lecture 1 :
  • Module Intro
  • 00:01:02
  • Lecture 2 :
  • Structure a Node.js App feature by feature
  • 00:06:01
  • Lecture 3 :
  • Basic Setup for Client Module
  • 00:03:01
  • Lecture 4 :
  • Create Client Module in Mongoose
  • 00:01:33
  • Lecture 5 :
  • Validating Request Body Using Joi
  • 00:03:39
  • Lecture 6 :
  • Create Record Using Async/Await
  • 00:01:34
  • Lecture 7 :
  • Find All Clients
  • 00:01:20
  • Lecture 8 :
  • FindOne Client
  • 00:01:05
  • Lecture 9 :
  • Delete Client
  • 00:02:06
  • Lecture 10 :
  • Update Client
  • 00:03:49
  • Lecture 11 :
  • Adding Relationship between Client and Invoice
  • 00:03:09
  • Lecture 12 :
  • Populate Client with All Invoices
  • 00:00:46
  • Lecture 13 :
  • Add Client while Updating Invoice
  • 00:00:23
  • Lecture 14 :
  • Create Client Model Definition in Swagger
  • 00:01:47
  • Lecture 15 :
  • Adding Documentation for GET and POST Client
  • 00:04:49
  • Lecture 16 :
  • Adding Documentation for FindOne, Update, And Delete
  • 00:03:38
  • Lecture 17 :
  • Fetch Clients from the Backend
  • 00:06:52
  • Lecture 18 :
  • Load Clients to the Data Table
  • 00:02:11
  • Lecture 19 :
  • Adding Toolbar
  • 00:02:43
  • Lecture 20 :
  • Setup Basic Dialog
  • 00:05:17
  • Lecture 21 :
  • Refactor Client From Dialog to Separate File
  • 00:03:20
  • Lecture 22 :
  • Refactor width and height of Material Dialog
  • 00:00:32
  • Lecture 23 :
  • Create new Form in the Dialog
  • 00:03:02
  • Lecture 24 :
  • Create Reactive Forms inside Material Dialog
  • 00:04:25
  • Lecture 25 :
  • Validations for required Fields
  • 00:02:52
  • Lecture 26 :
  • Get the Data from Material Dialog
  • 00:02:21
  • Lecture 27 :
  • Save new Client
  • 00:05:43
  • Lecture 28 :
  • Handling Empty Results in Observable
  • 00:02:59
  • Lecture 29 :
  • Adding Spinner
  • 00:02:27
  • Lecture 30 :
  • Adding Edit and Delete Action Item
  • 00:01:49
  • Lecture 31 :
  • Passing Data to the Material Dialog
  • 00:03:34
  • Lecture 32 :
  • Set the Client to the Form
  • 00:03:53
  • Lecture 33 :
  • Update the Client
  • 00:07:18
  • Lecture 34 :
  • Update Title on Material Dialog
  • 00:01:41
  • Lecture 35 :
  • Delete Client
  • 00:02:08
  • Lecture 36 :
  • Refactor Save and Update to Conditionals
  • 00:00:41
  • Lecture 37 :
  • Add Material SelectBox
  • 00:06:47
  • Lecture 38 :
  • Adding Validations for Client
  • 00:01:26

Section 13 : JSON Web Token Authentication with Passport 14 Lectures 00:59:29

  • Lecture 1 :
  • Basic Setup for User Module
  • 00:03:06
  • Lecture 2 :
  • Create User Model
  • 00:01:14
  • Lecture 3 :
  • Save new User in MongoDB
  • 00:04:19
  • Lecture 4 :
  • Encrypt the User Password
  • 00:04:53
  • Lecture 5 :
  • User Login
  • 00:05:27
  • Lecture 6 :
  • Register Config to development
  • 00:01:45
  • Lecture 7 :
  • Register global Middlewares in Separate file
  • 00:04:44
  • Lecture 8 :
  • Configure Passport JWT Strategy
  • 00:08:06
  • Lecture 9 :
  • Debugging the Passport JWT Strategy
  • 00:04:02
  • Lecture 10 :
  • Code Review for Passport Library
  • 00:07:16
  • Lecture 11 :
  • Apply Authentication on Routes
  • 00:03:18
  • Lecture 12 :
  • Add Documentation for Signup
  • 00:03:20
  • Lecture 13 :
  • Adding Documentation for Login
  • 00:03:03
  • Lecture 14 :
  • Adding Authentication Header in Documentation
  • 00:04:56

Section 14 : JSON Web Token Authentication in Angular 16 Lectures 01:10:14

  • Lecture 1 :
  • Create Auth Module
  • 00:03:13
  • Lecture 2 :
  • Creating Reactive Forms
  • 00:05:38
  • Lecture 3 :
  • Send Login Request to the backend Server
  • 00:09:24
  • Lecture 4 :
  • Save Token to LocalStorage
  • 00:05:34
  • Lecture 5 :
  • Create HTTP Token Interceptor
  • 00:05:48
  • Lecture 6 :
  • Apply HTTP Token Interceptor
  • 00:01:33
  • Lecture 7 :
  • Adding Title Dynamically
  • 00:01:42
  • Lecture 8 :
  • Adding Signup Button in the Form
  • 00:05:26
  • Lecture 9 :
  • Send Signup Request to the Backend Server
  • 00:02:30
  • Lecture 10 :
  • Error Handling
  • 00:00:58
  • Lecture 11 :
  • Adding Loading Spinner in Auth Form
  • 00:02:29
  • Lecture 12 :
  • Apply Routing Guards
  • 00:08:33
  • Lecture 13 :
  • Apply NoAuthGuard on Public Routes
  • 00:02:32
  • Lecture 14 :
  • Fixing Invoice Title
  • 00:01:17
  • Lecture 15 :
  • Adding Resolve Guards for Edit Invoice
  • 00:08:39
  • Lecture 16 :
  • Logout User
  • 00:04:58

Section 15 : Social Authentication(Google, Twitter, Github) with Passport in Node.js 20 Lectures 00:55:41

  • Lecture 1 :
  • Setup Auth Module
  • 00:02:36
  • Lecture 2 :
  • Setup Auth Credentials From Google
  • 00:01:39
  • Lecture 3 :
  • Configure Passport-google Strategy
  • 00:03:39
  • Lecture 4 :
  • Setup Routes for Google Authentication
  • 00:01:32
  • Lecture 5 :
  • Serializing and Deserializing User in Passport
  • 00:03:55
  • Lecture 6 :
  • Understanding Passport Google Auth Flow
  • 00:03:34
  • Lecture 7 :
  • Add Scope for Email and Profile in Google Strategy
  • 00:01:03
  • Lecture 8 :
  • Find or create the user after Authenticated from Google
  • 00:05:20
  • Lecture 9 :
  • Refactoring Signup
  • 00:04:25
  • Lecture 10 :
  • Handle Duplicate Account Validation in Signup
  • 00:01:13
  • Lecture 11 :
  • Refactor Login
  • 00:04:25
  • Lecture 12 :
  • Fix Profile Error
  • 00:02:23
  • Lecture 13 :
  • Send JWT Token After Authenticated with Google Strategy
  • 00:02:50
  • Lecture 14 :
  • Redirect to Login After Failed Authentication
  • 00:00:43
  • Lecture 15 :
  • Create New Twitter Application
  • 00:02:14
  • Lecture 16 :
  • Setup Passport Twitter Strategy
  • 00:04:20
  • Lecture 17 :
  • Twitter Authentication with Passport
  • 00:03:08
  • Lecture 18 :
  • Creating developer Application in Github
  • 00:01:30
  • Lecture 19 :
  • Authenticate User with Github Strategy
  • 00:04:37
  • Lecture 20 :
  • Wrap Up
  • 00:00:35

Section 16 : Social Authentication(Google, Twitter, Github) with Passport on Frontend 13 Lectures 00:42:33

  • Lecture 1 :
  • CORS Access Control Error in Google Authentication
  • 00:04:37
  • Lecture 2 :
  • Adding Proxy for the API in Angular
  • 00:04:19
  • Lecture 3 :
  • Redirect User to Dashboard Router after Authenticated
  • 00:03:37
  • Lecture 4 :
  • Extract Query Param in AuthGuard
  • 00:04:21
  • Lecture 5 :
  • Authenticate User from the backend Server
  • 00:03:57
  • Lecture 6 :
  • Fix Authentication in AuthGuard
  • 00:05:39
  • Lecture 7 :
  • Github and Twitter Authentication
  • 00:01:04
  • Lecture 8 :
  • Styling Social Buttons
  • 00:05:21
  • Lecture 9 :
  • Refactor Styling for Signup Buttons
  • 00:00:18
  • Lecture 10 :
  • Logout User on Backend
  • 00:01:38
  • Lecture 11 :
  • Logout User on Frontend
  • 00:02:23
  • Lecture 12 :
  • Fixing Http Interceptor on Lazy Loaded Modules
  • 00:03:41
  • Lecture 13 :
  • Adding Error Handling in Logout
  • 00:01:38

Section 17 : Invoice View 9 Lectures 00:26:06

  • Lecture 1 :
  • Module Intro
  • 00:00:42
  • Lecture 2 :
  • Creating Invoice view Component
  • 00:02:11
  • Lecture 3 :
  • Adding View Action Item to Table
  • 00:02:49
  • Lecture 4 :
  • Apply Resolve Guard on Component
  • 00:01:57
  • Lecture 5 :
  • Populate Client with Invoice
  • 00:00:45
  • Lecture 6 :
  • Display Invoice Details to the Material Card
  • 00:04:02
  • Lecture 7 :
  • Styling Material Card for Invoice Details
  • 00:02:09
  • Lecture 8 :
  • Apply Routing for Edit Invoice
  • 00:08:06
  • Lecture 9 :
  • Calculate the Total Value included Tax
  • 00:03:25

Section 18 : Download PDF Invoice 17 Lectures 00:53:38

  • Lecture 1 :
  • Module Intro
  • 00:00:32
  • Lecture 2 :
  • Installing Plugins to generate PDF File
  • 00:02:15
  • Lecture 3 :
  • Generate Basic Pdf File
  • 00:02:32
  • Lecture 4 :
  • Adding Bootstrap to Invoice Template
  • 00:01:50
  • Lecture 5 :
  • Generate Dummy Invoice
  • 00:01:00
  • Lecture 6 :
  • Render Dynamic Content to PDF
  • 00:03:32
  • Lecture 7 :
  • Display Total and SubTotal in the Invoice
  • 00:04:20
  • Lecture 8 :
  • Refactor Template Code into Methods
  • 00:04:06
  • Lecture 9 :
  • Download Invoice From Frontend
  • 00:03:59
  • Lecture 10 :
  • Download and Save PDF from Frontend
  • 00:01:44
  • Lecture 11 :
  • Adding Material ProgressBar
  • 00:02:39
  • Lecture 12 :
  • Adding Name Attribute for Local User
  • 00:08:55
  • Lecture 13 :
  • Adding User name and email to the Invoice
  • 00:05:55
  • Lecture 14 :
  • Fix Dynamic User name and Email in the Invoice
  • 00:03:47
  • Lecture 15 :
  • Adding Error Handling Method
  • 00:01:08
  • Lecture 16 :
  • Fetch Email from the Twitter Profile
  • 00:04:46
  • Lecture 17 :
  • Refactor getUser method
  • 00:00:38

Section 19 : Forgot Password 16 Lectures 00:58:18

  • Lecture 1 :
  • Add Link for Forgot Password
  • 00:03:29
  • Lecture 2 :
  • Create Forgot Password Component
  • 00:02:10
  • Lecture 3 :
  • Design the Forgot Password Component
  • 00:05:00
  • Lecture 4 :
  • Create Forgot Password Route on Backend
  • 00:02:38
  • Lecture 5 :
  • Send Forgot Password Request from Frontend
  • 00:03:45
  • Lecture 6 :
  • Create Reset Link to Reset password
  • 00:06:20
  • Lecture 7 :
  • Create new Account at Ethereal
  • 00:01:06
  • Lecture 8 :
  • Send Reset Password Email to User
  • 00:10:10
  • Lecture 9 :
  • Spinner on Forgot Password
  • 00:02:31
  • Lecture 10 :
  • Create Reset Password Component
  • 00:01:24
  • Lecture 11 :
  • Design the Reset Password Form
  • 00:03:03
  • Lecture 12 :
  • Implement Reset Password on backend
  • 00:05:01
  • Lecture 13 :
  • Adding Password Match Validation
  • 00:02:16
  • Lecture 14 :
  • Reset Password Request from Frontend
  • 00:07:58
  • Lecture 15 :
  • Refactor Documentation for Signup
  • 00:01:02
  • Lecture 16 :
  • Fix Color typo for Client Select Box
  • 00:00:25
  • How do i access the course after purchase?

    Once you purchase a course (Single course or Subscription), you will be able to access the courses instantly online by logging into your account. Use the user name & password that you created while signing up. Once logged in, you can go to the "My Courses" section to access your course.
  • Are these video based online self-learning courses?

    Yes. All of the courses comes with online video based lectures created by certified instructors. Instructors have crafted these courses with a blend of high quality interactive videos, lectures, quizzes & real world projects to give you an indepth knowledge about the topic.
  • Can i play & pause the course as per my convenience?

    Yes absolutely & thats one of the advantage of self-paced courses. You can anytime pause or resume the course & come back & forth from one lecture to another lecture, play the videos mulitple times & so on.
  • How do i contact the instructor for any doubts or questions?

    Most of these courses have general questions & answers already covered within the course lectures. However, if you need any further help from the instructor, you can use the inbuilt Chat with Instructor option to send a message to an instructor & they will reply you within 24 hours. You can ask as many questions as you want.
  • Do i need a pc to access the course or can i do it on mobile & tablet as well?

    Brilliant question? Isn't it? You can access the courses on any device like PC, Mobile, Tablet & even on a smart tv. For mobile & a tablet you can download the Learnfly android or an iOS app. If mobile app is not available in your country, you can access the course directly by visting our website, its fully mobile friendly.
  • Do i get any certification after completing the course?

    Yes. Once you succesfully complete any course on Learnfly marketplace, you get a certiifcate of course completion emailed to you within 24 hours with your name & the Learnfly badge. You can definately brag about it & share it on your social media or with friends as one of your achievement. Click here to view the sample certificate Click Here
  • For how long can i access my course after the purchase?

    If you buy a single course, that course is accessible to you for a lifetime. If you go for a premium subcription, you can access all the courses on Learnfly marketplace till your subscription is Active.
  • Whats the difference between Single Course Purchase & Go Premium option?

    With Single Course Purchase, you only get an access of one single course. Whereas, with premium monhtly or annual subscription, you can access all the existing or new courses on learnfly marketplace. You can decide what option suits you the best and accordingly you can make your purchase.
  • Is there any free trial?

    Currently, we don't have any free trial but it may be available in near future.
  • What is the refund policy?

    We would hate you to leave us. However, if you are not satisfied, you can ask for a full refund within 30 days & we will be happy to assist you further.

Haider Malik,

Fullstack Javascript developer and Instructor Haider Malik is the founder of fullstackhour. He is a full-stack Javascript developer. He is passionate about everything JavaScript, and he loves exploring new libraries. He’s had extensive experience developing software and working with teams to improve how software is developed to meet business objectives.Although his primary focus is on outcomes, implementation often includes technical competency
View More...
the-extreme-web-development-course

The Extreme Web Development Course

By : Paul Carlo Tordecilla

Lecture 124

develop-your-own-chrome-extension-firefox-plugin

Develop your own Chrome Extension &...

By : Harshit Srivastava

Lecture 15

the-ultimate-codeigniter-3-course

The Ultimate Codeigniter 3 Course

By : Paul Carlo Tordecilla

Lecture 23

superb-advance-javascript-become-javascript-professional

Superb Advance Javascript - Become ...

By : Paul Carlo Tordecilla

Lecture 28

application-development-with-ibm-watson

Application development with IBM Wa...

By : Harshit Srivastava

Lecture 14

learn-react-16-and-redux-by-building-real-world-application

Learn React 16 and Redux by buildin...

By : Haider Malik

Lecture 74

Sign up and start learning
By signing up, you agree to our Terms of Use and Privacy Policy
Reset Password Request
Enter your email address and we'll send you a link to reset your password.