Master the MEAN Stack - Learn By Example
4.2 (358 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.
24,907 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Master the MEAN Stack - Learn By Example to your Wishlist.

Add to Wishlist

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.2 (358 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.
24,907 students enrolled
Created by Patrick Schroeder
Last updated 7/2016
English
Current price: $10 Original price: $200 Discount: 95% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4.5 hours on-demand video
  • 29 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
Requirements
  • Have Node.js Installed
  • Knowledge of JavaScript fundamentals
  • Understand Basics of Angular 1.x
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
Who 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 42 Lectures Collapse All 42 Lectures 04:29:20
+
Introduction
1 Lecture 01:49

Welcome to the course!

Preview 01:49
+
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
00:54

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
04:03

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
03:40

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
09:30

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
03:21
+
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
07:50

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
08:49
+
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
01:24

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
06:16

Create our image scraping API files and folders.

Build Scraper API
08:52

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

Code Our Pinterest Scraper
08:16

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
06:17

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
08:08

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

Add Imgur to Scrape Options
03:52
+
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
03:07

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

Add Scrape Post Function to Frontend
05:49

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
07:16

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
08:37

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

Display All Looks in View
06:51
+
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.

Multer
08: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.

Ng-File-Upload
09:01
+
MyLooks Page
4 Lectures 27:51

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

Routing
06:28

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
12:18

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

Moment
04:48
+
Single Look Page
3 Lectures 37:27

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

Single Look Page
10:52

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

Comment Area
15:55

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

Upvote + Add Views
10:40
+
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
07:26

Start creating our admin area.

Admin Area
07:59

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

Admin Area Part 2
13:35

Finishing up by creating our user profile area.

Profile Area
08:23

Conclusion
00:30
About the Instructor
Patrick Schroeder
4.3 Average rating
4,901 Reviews
79,434 Students
8 Courses
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.