Log In
Join
for free
Log In
Join
for free
Back To Course Home
Building a Full-stack Application Using the MEAN Stack
0% completed
Course Overview
Before We Begin
Introduction to the MEAN Stack
What is the MEAN Stack?
Why Use the MEAN Stack?
Node and Angular CLI Versions
Course Project Overview: Course Management App
Quiz: Introduction to the MEAN Stack
The Angular Frontend - Designing the App
Angular Overview
Understanding the Folder Structure
Services, Interceptors, and Guards
Forms and Routers
Create and Serve the Angular Project
Adding Bootstrap 5 and Font Awesome
Create Navbar
Designing the Home Page
Designing and Adding Forms to our Registration Page
Designing and Adding Forms to our Login Page
Designing the Create Course Page
Designing the Edit Course Page
Designing the Course List Page
Add Routes to the Application
Summary: Designing the Angular Application
Quiz: The Angular Front-end Design
Course Assessment
MEAN Stack Assessment 1 (The Frontend)
The Backend: Adding NodeJS to our Project
Node.js Overview
Understanding the Folder Structure
Creating a Project
Setting up the .env file and Git Ignore File
Setting up the Start Scripts and Running the Server
Adding CORS, Express, and Morgan Middleware
Creating Error Handler Middleware
Quiz: Adding Node.js to our Project
Challenge: Creating a Web Server
Solution Review: Creating a Web Server
Setting up Mongo DB
MongoDB Atlas Overview
Setting up MongoDB & IP Whitelist
Setup Schemas and Models for Users and Course Collection
Connect to MongoDB Database Using Mongoose
Quiz: Setting up Mongo DB
Working with RESTful API
REST API Overview
Creating the Login and Register API using Express
Creating REST API for the Course Management Application
Create, Deploy, and Test the REST API on Heroku
Quiz: Working with RESTful API
Challenge: Making POST and GET Requests to a Public REST API
Solution Review: Making POST and GET Requests to Public REST API
Course Assessment
MEAN Stack Assessment 2 (The Backend)
Angular Services, The HttpClient Module, Providers and Dependency
Overview of Services in Angular
Overview of HTTPClient in Angular
Overview of Dependency Injection
Implement the User Service
Implement the Course Service
Quiz: Service, HttpClientModule, and Dependency Injection
Challenge: Displaying Data from a REST API
Solution Review: Displaying Data from a REST API
Implementing User Authentication
Create FormBuilder and Validators for the Register Page
Consuming REST API for the Register Page
Creating FormBuilder and Validators for the Login Page
Consuming REST API for the Login Page.
Implementing User Authentication Status in the Navbar
Adding the canActivate Route Guard to the Router Module
Adding Token Interceptors to Authenticate Requests in Angular
Quiz: Implementing User Authentication
Challenge: Making a Reactive Form Valid
Solution Review: Making a Reactive Form Valid
Implementing CRUD Functionality in the Frontend
Implementing Functionality to Add a New Course
Fetching Courses Created from the Database
Setting up the Activated Route to Update a Course
Consuming REST API for the Edit and Delete Functionality
Quiz: Implementing CRUD Functionality in the Frontend
Toast Notifications, Preloaders and Deployment
Add Toast Notification to Components
Adding Preloaders to Components
Deploying the Angular Project with Netlify
Quiz: Toast Notifications, Preloaders, and Deployment
Conclusion
Course Summary
Appendix
Installation of the MEAN Stack Technologies
Installing the Express Framework and npm Packages
Setting up the Express, CORS, and the Morgan Middleware
Installation and Set up of an Angular Application
Installation of ngx-toastr
Installation of ngx-spinner
Installation and Set up of Heroku CLI
Quiz: The Angular Front-end Design
Get hands-on with 1200+ tech skills courses.
Start Free Trial