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

Setting up the .env file and Git Ignore File

Learn to set up the .env and the Git ignore files.

Setting up the `.env` file

Previously, we discussed what the .env (environmental variables) file is all about. To recap, it’s a text file that contains credentials we want to keep secret and secure.

For our use case, three items are kept in the .env file:

MONGO_URL: Mongo DB Atlas URL secret
JWT_SECRET_KEY: JSON web token secret key
PORT: Local port

Get hands-on with 1300+ tech skills courses.