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.1 (281 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
14,231 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 42
  • Length 4.5 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2016 English

Course Description

** 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

What are the requirements?

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

What am I going to get from this course?

  • 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

What is the target audience?

  • 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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
01:49

Welcome to the course!

Section 2: Getting Started
00:54

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

04:03

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.

03:40

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'.

06:19

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.

05:18

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

09:30

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

06:13

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

03:21

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.

Section 3: Adding the Gravatar
07:50

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

08:49

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

with gravatar image in right navbar menu area.

Section 4: Scraping Functionality
00:52

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.

01:24

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.

06:16

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.

08:52

Create our image scraping API files and folders.

08:16

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

06:17

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.

08:08

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.

03:52

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

Section 5: Scraping Upload Functionality
07:16

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

03:07

Create the randomizer() and downloadURI() methods.

05:49

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

07:16

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

08:37

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

06:51

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

Section 6: Uploading Look
04:18

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

08:01

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

09:01

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

Section 7: MyLooks Page
06:28

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

04:17

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

12:18

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

04:48

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

Section 8: Single Look Page
10:52

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

15:55

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

10:40

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

Section 9: Finishing Up
01:19

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

02:51

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

07:26

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

07:59

Start creating our admin area.

13:35

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

08:23

Finishing up by creating our user profile area.

Conclusion
00:30

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Patrick Schroeder, Software Developer

Patrick Schroeder is a self-taught full stack JavaScript developer. He enjoys working with Angular, Node.js, Mongodb, React.js, Firebase, and anything else javascript related. Patrick is passionate about teaching Javascript. He loves to help others understand difficult concepts by creating clear presentations that gradually builds to full comprehension of a given topic. He is very interested in furthering his knowledge of IOT and wearable products with the intention of teaching cutting edge technologies and collaborating to bring new products to life. 

Ready to start learning?
Take This Course