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

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

Course Project Overview: Course Management App

Learn about the project we’ll ultimately be building in this course.

Features of the application

As we proceed in this course, we’ll build a course management application. The idea behind this application is to create a system that enables us to keep track of the various courses we’re taking online.

Get hands-on with 1300+ tech skills courses.