Mastering MEAN Web Development: Expert Full Stack JavaScript
2.4 (25 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.
237 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Mastering MEAN Web Development: Expert Full Stack JavaScript to your Wishlist.

Add to Wishlist

Mastering MEAN Web Development: Expert Full Stack JavaScript

Become a master of the MEAN stack by creating a fully featured web app in one go
2.4 (25 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.
237 students enrolled
Created by Packt Publishing
Last updated 6/2016
Current price: $12 Original price: $95 Discount: 87% off
4 days left at this price!
30-Day Money-Back Guarantee
  • 4.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

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

Try Udemy for Business
What Will I Learn?
  • Get a grip on the new Angular2 framework to build powerful frontend apps.
  • Produce compelling and responsive designs using Bootstrap and SASS.
  • Master all the goodness that ES6 offers and build your site with Webpack and Babel.
  • Learn how to secure your app with login support that utilizes JSON Web tokens.
  • Create Express APIs that are flexible and powerful for your frontend to consume.
  • See the value of testing your app with Mocha and Protractor.
  • Gain experience with websockets, and enable two way communication between your server and clients.
  • Become proficient in querying, storing, and validating your data in MongoDB with MongooseJS.
View Curriculum
  • A practical step-by-step approach so that you can effectively incorporate the techniques to your own projects, along with understanding the ‘why’ behind each task.

Web development is moving fast and to keep up to mark, you need a technology stack that is . The MEAN stack includes MongoDb, Express, Angular, and Node.js. These tools provide a rich environment to build advanced web applications in a short space of time. All the pieces of the MEAN stack are practically tried and tested in large and small-scale organizations.

Mastering MEAN Web Development will guide you through all the necessary pieces to build a web app from start to finish. We will discuss the concepts and methods in depth, and shine light on how and why we use each piece of the MEAN stack.

We’ll begin by learning how to use Webpack and Babel to assemble our frontend. We’ll see how to leverage many of the new features in Angular2. We’ll create a RESTful API built with Node.js and MongoDB.

Along the way, we’ll touch up on best practices used to create, manage, and deploy web applications to production. Your skills and understanding of JavaScript will increase as you add web sockets, models, and other essential elements to your web application.

Mastering MEAN Web Development will cover all the topics you need to create your own web apps for organizations, small or big.

About The Author

Shane A. Stillwell is a full stack web developer specializing in MEAN stack web development. He has been a developer for over 15 years. Shane has a knack for cutting edge technology and uses it to make development faster, easier, and most importantly, fun.

Shane has built a wide variety of applications from mobile apps to large scale Angular and React web apps, to small hobby projects. Shane speaks and writes on full stack development hoping to help bring cutting edge technology closer to anyone with a desire to learn.

Who is the target audience?
  • If you are a JavaScript developer looking to advance your skills past the beginner or intermediate level, and step into the realm of expert this course is for you. If you’re on a quest to be a true Full Stack Web Developer, your search ends here.
Compare to Other JavaScript Courses
Curriculum For This Course
39 Lectures
Getting Started
4 Lectures 20:09

This video provides an overview of the entire course.

Preview 03:28

Starting with a blank slate, we need to make sure we have all the correct software products installed and get an overview of the tools we’ll be using. 

Installing the Basics

We will be generating a lot of JavaScript files that need to be combined into one usable file. 

Starting Your Site with Webpack

When we rely on memory alone to help us recall how to deploy or upgrade or why a certain module is imported, it will let us down. 

Creating a Good Documentation with
Making Your Site Shine
4 Lectures 20:41

Adding Bootstrap will give us a leg up with common CSS components that we will use throughout the site.

Preview 04:49

We want to include our own styles, but we also want to do it in a modular way. How do we keep our styles organized and add some helpers along the way? 

Using Custom SASS Styles

Icons will add the extra touch that our site needs and Font Awesome will give us hundreds of icons to choose from in an easy-to-use fashion. 

Including Font Awesome Icons

Having a mobile-friendly layout for our web app is essential when many of our visitors will be viewing the site on a mobile device. Being responsive to screen size with Bootstrap’s Grid layout will help. 

Responsive Design with Bootstrap Grid
Expanding Your Angular App
3 Lectures 23:38

The application will need several different pages to be able to create, view, list, and edit resources. 

Preview 09:51

After we’ve added routes to our web app, we need to show how we can navigate from one route to another within the app. 

Adding Navigation Links

The web app is going to need to utilize similar elements throughout the app. Creating reusable elements will cut down on the amount of repeat coding we have to do.

Developing Reusable Elements
Creating Express Routes
5 Lectures 40:06

Our API is bare and needs routes to be able to handle interaction with the frontend. We’ve decided to use RESTful routes for our resources, and will set them up in this video. 

Preview 10:58

There are many different ways to structure your API, but having so many ways can lead to pitfalls and difficulties while using APIs. This video will explore the best practices for creating APIs that are flexible to consume. 

Building a Usable API

We need to connect to MongoDB in our app to store our data. There are many different ways to accomplish this task. We’ll use Mongoose and show how to use environment variables to store sensitive data.

Connecting to MongoDB

Our app needs to store information in MongoDB, and Mongoose is the most feature-rich Node.js module for interacting with MongoDB. 

Adding Mongoose Models

Tests will ensure that our API endpoints behave as we expect them to behave. Integration tests can give us the confidence we need to know that our API remains the same as we add or change code. 

Writing Mocha Tests for Your Routes
Developing Angular Forms
4 Lectures 28:46

Now that we have a working frontend and backend API, we need to connect our Angular app to the API using the Http service. 

Preview 08:33

The business logic for our different resources can get scattered around the app if we don’t diligently create a place for them. Creating models will give us a source of truth for all our required logic. 

Using Rich Models in Angular

Validating form data takes a number of players to make it happen logically and give the user the best experience. We need to show how our form works with other components to validate user input. 

Validating Form Data

Testing the entire app through end to end testing allows us to make sure that the app always behaves as expected. This gives us confidence and saves us time from having to manually test the functionality of the app ourselves.

Installing and Testing with Protractor
Securing Your API
5 Lectures 37:11

Our app lacks any security or control over who can edit. We need to create users in our system that can log in and add or edit information in our app.

Preview 11:31

Our API needs to process the JSON Web Token sent to it by the client and decide whether the client is authorized to perform a protected operation or not.

Validating JWT in Express

The integration tests that we developed back in video 4.5 will now fail because we’ve added an authentication requirement to several endpoints. We now need to go back and update our tests to include a generated token

Updating Integration Tests

The backend API now requires authentication for some endpoints. We need to create sign-up and login pages that collect an e-mail and a password, and then store the resulting token. 

Storing the JSON Web Token

We now have a JSON Web Token stored locally, but we need to ensure that this token is submitted to the API to prove our authentication. 

Using HTTP Interception
Sending Transactional E-mails
4 Lectures 27:10

For certain tasks, it’s better to use a job queue rather than holding up the web server API process. Sending e-mails is a perfect task that can be put off momentarily for another process to pick up and finish.

Preview 06:33

A queue needs to have jobs so that the API can schedule them and a worker can process them. These jobs need to be defined with certain inputs and functions that it will need to accomplish to complete the job. 

Configuring a Job Queue

To send an e-mail, we’ll need to develop a template for both HTML and text versions of our e-mail. We’ll use JavaScript’s String Templates to accomplish this task. 

Designing an E-mail Template

The last step is to send our e-mail through an e-mail service provider. We’ll choose a provider and show how to connect using that provider’s API.

Connecting to an E-mail Provider
Including Real-time Updates
3 Lectures 17:06

So many websites these days offer real-time updates and notifications of changes. It’s imperative to understand how web socket updates work and how to integrate them into a web app.

Preview 04:12

We need to configure on our server and start emitting updates when a user logs in and when a new master is created. 

Configuring Real-time Event Messaging

Now that our backend is sending updates, the client needs to be configured to listen to these updates and update the UI accordingly.

Updating Angular with New Content
Deploying to Production
3 Lectures 22:06

Choosing the right setup for our MongoDB server is paramount. Losing data is not an option and minimizing downtime is critical to successful operations.

Preview 05:44

There are many different options for deploying on Node.js. We need to identify the right fit for our skills and business requirements. 

Buying a Node.js Server

Since our frontend has completely static files, we need to use Webpack to compile them and then deploy these static files on a location that best suits our needs. 

Building Your Site with Webpack
4 Lectures 18:44

The previous nine sections covered a lot of ground, and we will take a few minutes to recap how each section built on the previous and the new skills that were obtained in each section. 

Preview 04:31

Here, we will provide an overview of all the technologies we’ve used throughout our videos. MEAN usually includes many components working together; this will give a nice overview of how we use them. 

The previous nine sections covered a lot of ground, and we will take a few minut

The app we’ve built only touches the surface of some areas. There are more items we can add to our app that would make it outstanding. 

Ideas for Extending Your App

We want to send the viewer off with some next logical steps for furthering their education with the MEAN stack and becoming a skilled JavaScript expert. 

Resources for Further Learning
About the Instructor
Packt Publishing
3.9 Average rating
8,274 Reviews
59,171 Students
687 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.