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

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

Summary: Designing the Angular Application

A summary of our front-end application.

We'll cover the following

The Angular front-end design

The Angular front-end design

In this chapter, we implemented the design of our course management application.

We’ve covered various Angular features, such as routers, Bootstrap 5, Font Awesome, generating components with the Angular CLI, and mores.

Get hands-on with 1200+ tech skills courses.