Master the MEAN Stack - Learn By Example
4.0 (477 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
32,048 students enrolled

Master the MEAN Stack - Learn By Example

Learn Full Stack JavaScript. Using AngularJS, Node.js, Express and MongoDB we will Build a MEAN-based Web Application.
4.0 (477 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
32,048 students enrolled
Created by Patrick Schroeder
Last updated 5/2017
English [Auto-generated]
Current price: $11.99 Original price: $194.99 Discount: 94% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 4.5 hours on-demand video
  • 39 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build a Full-Stack Web Application
  • Create CRUD Operations

  • Build RESTful API's

  • Upload Files Using both Angular and Node.js
  • Scrape Data from Pinterest
  • Add Infinite Scrolling to an Application
  • Add a Comment Area
  • Create Mongoose Schemas
  • Send Alerts and add View Animations
Course content
Expand all 42 lectures 04:29:20
+ Getting Started
8 lectures 39:18

Section overview. This includes installing MongoDB, how to use NPM and bower, and an overview of our starter files.

Overview and Setup

How to install mongoDB. My system is Windows 8.1 and will cover specifics for this system. We'll also see how to start 'mongod' and access the shell.

Installing MongoDB

We'll be using NPM and Bower as our package mangement in this course. NPM will handle our server side dependencies and bower will handle our client side dependencies.

Learn how to install dependencies using 'npm install' and 'bower install'.

NPM and Bower

We'll introduce the Daftmonk Angular full stack generator and what parts we're using in our application. And then we discuss the dependencies that will be included in this project.

Preview 06:19

An explanation of the app.js file and contents of the config folder.

Preview 05:18

An explanation of the routes.js file, auth folder and api folder.

Server Files Explained - Part 2

In this video we'll cover how the code works in the angular part of our app.

Preview 06:13

We'll look how to start the app using node and nodemon. Then we will run our application for the first time and create a new account.

Running the App
+ Adding the Gravatar
2 lectures 16:39

Edit our User model to include a String option to display a gravatar image.

Add Gravatar - Part 1

Include node-gravatar module and add this to our create user method. Replace user name

with gravatar image in right navbar menu area.

Add Gravatar - Part 2
+ Scraping Functionality
8 lectures 43:57

In this section we'll be building our scraping functionality. The app we're building allows users to add Looks with an image, title and description. They'll be able to do so either by adding a Link from Pinterest or by Uploading an image from a local file.

Preview 00:52

Pinterest now disables the viewing of pins if your not logged in.  This section is still valuable because you can easily add in a different site.  A new video will be added so we can scrape from Imgur instead.

Important Pinterest Update

In this lecture, we'll create our Look model. Our Look is going to define the item that users will be adding to our site.

Create Look Model

Create our image scraping API files and folders.

Build Scraper API

In this lecture we'll build our Pinterest scraper. We'll be using the Request and Cheerio node modules.

Code Our Pinterest Scraper

In this lecture, we add frontend files to to create an input field for the user to submit a Pinterest URL. We'll be using Angular Strap and Angular Motion.

Add HTML, CSS and Modal

We'll add the $watch listener function to check on changes being made to our view. Then pass the URL to our server controller to perform the scraping operation.

Then we'll display the scraped data within our modal.

Code the Main Controller

Pinterest isn't working anymore, but we can easily add a new file to scrape a different website.  So lets add

Add Imgur to Scrape Options
+ Scraping Upload Functionality
6 lectures 38:56

Add backend logic to download and save a scraped Pinterest image to our Look model.

Preview 07:16

Create the randomizer() and downloadURI() methods.

Build Utils Methods

Create the angular function to save and POST a new Look.

Add Scrape Post Function to Frontend

Create an apiFactory folder that will contain 2 factories. We'll use these to communicate with our API endpoints and remove $http from our controller

Refactor $http out of Controller

Add a panel to our main.html to display Looks as they are added. Include alerts to show success and fail messages.

Display Looks + Add Alerts

Add a new route that will display all Looks added on the main page.

Display All Looks in View
+ Uploading Look
3 lectures 21:20

Add CSS and HTML files. Take a first look at ng-file-upload and Multer. Use NPM to install multer version 0.1.8.

Preview 04:18

Create a new route for uploading files. Include Multer configuration in express.js file. Add a new controller method for handling file uploads.


Create frontend upload functionality. Create a new method called fileUpload in main.Ctrl.js for uploading files. Test to make sure uploading is working.

+ MyLooks Page
4 lectures 27:51

Set up our routing for use with future pages and API calls.


Add angular-grid for clean display of Looks we have added.

Preview 04:17

Show off all the looks a logged in user has added. Create functionality to edit and delete the Look.

MyLooks Page

Add the moment package to show a timestamp when Looks have been added. We'll also use this with our Comments area.

+ Single Look Page
3 lectures 37:27

Add a new section in our app to display individual looks.

Single Look Page

Display a comment area. Users can post a comment which will display their name, gravatar and timestamp.

Comment Area

Add the ability to upvote looks. Also, add a counter that increments views every time one of our Looks is clicked.

Upvote + Add Views
+ Finishing Up
7 lectures 42:03

A look back at what we've covered so far. And a look ahead to what needs to be done.

Preview 01:19

Add transitional animations. Edit the CSS files to add styling for our ui-view element.

Preview 02:51

Incorporate infinite scrolling into our app. Every time the user scrolls down, 3 new items will get loaded into the page.

Infinite Scrolling

Start creating our admin area.

Admin Area

Finish creating our admin area by editing our admin.Ctrl.js file.

Admin Area Part 2

Finishing up by creating our user profile area.

Profile Area
  • Have Node.js Installed
  • Knowledge of JavaScript fundamentals
  • Understand Basics of Angular 1.x

** Please note: this is not a 'beginner' course. You should already have some basic knowledge of both Node.js and AngularJS 1.x

In this course, you will learn to build a full stack web application using Node.js, AngularJS, Express.js and MongoDB. We will start with a sophisticated authorization template and work from there.

This is a hands-on project based course. The name of our app will be Best Dressed and will show off many interesting features utilized in real-world web applications.

By utilizing popular NPM modules and angular components we will build out our application to include the following functionality: upload capability, web scraping, infinite scrolling, single look detail pages, an admin area, a comment section, CRUD capabilities, and more.

We will be using Javascript on both the frontend and backend. And by using MongoDB as our database, we are able to make use of familiar JSON syntax.

What You Will Learn

  • What it takes to build a full stack web application
  • How to create and use a RESTful API's
  • Web scraping using the Request and Cheerio modules
  • How to create a Pinterest style view with infinite scrolling
  • How to Upload and save images
  • Implement view transitions using ngAnimate
  • Use Boostrap styling for responsive design
  • Build and use 3 different MongoDB schemas using mongoose
Who this course is for:
  • You should already know the basics of working with Node.js and AngularJS 1.x. This is course is not intended for complete beginners but those that have an understanding of the basic setup.