Master the MEAN stack and its components to create dynamic web applications.

Become a MEAN Stack Developer

In this module, we'll learn how to build a full-stack application using the MEAN stack. We'll begin with the frontend by learning how to create and set up an Angular application from scratch. Next, we'll learn to implement routing, router guards, token-based authentication, authorization, error handling, and dependency injection in an Angular application. Next, we’ll shift our focus to the backend. We'll use Node.js, Express, and MongoDB to create REST APIs. Additionally, we'll learn to create middleware for handling errors, token verification, setting up models and schemas, creating a database using MongoDB, and the concept of separation of concern.


By the end of this module, we’ll understand how to connect both the backend and the frontend to create a full-stack application, as well as how to deploy a fully functional application.

Building a Full-Stack Application Using the MEAN Stack

Which command compiles an Angular application into an output directory named `dist` in preparation for deployment?


Which command compiles an Angular application into an output directory named <code>dist</code> in preparation for deployment?

When hosting an Angular application on Netlify, which file is used to ensure all routes work properly?

When hosting an Angular application on Netlify, which file is used to ensure all routes work properly?

Which schema helps suppress errors due to adding third-party packages in Angular?

Which schema helps suppress errors due to adding third-party packages in Angular?

Which module enables animation capabilities in an Angular application?

Which module enables animation capabilities in an Angular application?

Which is *not* an option in the 
 `<ngx-spinner></ngx-spinner>` tag?

Which is not an option in the
<code>&lt;ngx-spinner&gt;&lt;/ngx-spinner&gt;</code> tag?

Which rule in CSS allows a style sheet to be accessible to another style sheet?

Which rule in CSS allows a style sheet to be accessible to another style sheet?

Which folder gets uploaded to Netlify when using the manual method to deploy?

Which folder gets uploaded to Netlify when using the manual method to deploy?

When implementing the `ngx-spinner` package in an Angular application, which service gets injected into our `.ts` file?

When implementing the <code>ngx-spinner</code> package in an Angular application, which service gets injected into our <code>.ts</code> file?

Test your knowledge on toast notifications, preloaders, and deployment by completing the quiz in this section.

Let's Start MEAN Stack Development

The Angular Frontend - Designing the App

MEAN Stack Assessment 1 (The Frontend)

The Backend: Adding NodeJS to our Project

Setting up Mongo DB

Working with RESTful API

MEAN Stack Assessment 2 (The Backend)

Angular Services, The HttpClient Module, Providers and Dependency

Implementing User Authentication

Implementing CRUD Functionality in the Frontend

Toast Notifications, Preloaders and Deployment

Appendix

Conclusion

Quiz: Toast Notifications, Preloaders, and Deployment