MEAN / Angular Mini Project

Project Details

We will create CMS For Blog Website using MongoDB, ExpressJS, Angular, and NodeJS. We will use Express and NodeJS for Web API and MongoDB for the database. We will use Admin Panel and frontend on both side features.

Coding Technologies

Backend API: Express, Nodejs
Database: MongoDB
Frontend: Angular

User Feature

• Register
• Login / Logout
• Add Article
• View Article

Admin Feature

• Admin Panel for Article CRUD Operation (Add / Edit /Delete)
• Article Category (Add /Edit /Delete)
• Option to make Article Featured
• User Management
• Article Approval

Fronted Features

• Article Listing Page
• Article Details Page
• Display Article as Featured, Latest Article, Category Wise
• Static Pages: About Us, Contact US, Contact Form

Installing & Integrate Bootstrap in project

Create Project Modules & Component

Let’s create project Module:

Let’s create Articles Modules:

Let’s create service for article module:

Let’s create Components :

Let’s create components of staticpages module:

Let’s create service for staticpages module

Step-1: Open app.module.ts

open your app.module.ts to import articles and static pages module and paste the below code

Step-2: Open articles/articles.module.ts

open your articles/articles.module.ts to export the LatestArticleComponent component for showing this component on the root component app.component.html

Step-3: app.component.html

Create Home page layout structure

Theme Integration

styles.css

header.component.html

header.component.ts

banner.component.html

latest-articles.component.html

footer.component.html

Home Page Layout

Routing Configuration

App Routing Module Configuration

Edit the file src/app/app-routing.module.ts

articles-routing.module.ts Configuration

create the file articles-routing.module.ts in folder src/app/articles/

Edit the file src/app/courses/articles-routing.module.ts

staticpages-routing.module.ts Configuration

create the file staticpages-routing.module.ts in folder src/app/staticpages/

Edit the file src/app/staticpages/staticpages-routing.module.ts

Home Page Banner & Feature Article Routing

To set banner and featured view on the home page only. you just need to edit the below file

Edit the file src/app/app.component.ts

Edit the file src/app/app.component.html

Header Navigation

Set the routerLink and routerLinkActive in header component in menu link

src/app/header/header.component.html

Article Listing and Inner Page Design

Article listing page Design

Edit the file src/app/articles/article-list/article-list.component.html

Featured Article Right Widget Design

Edit the file src/app/articles/featured-articles/featured-articles.component.html

Article Categories List Widget Design

Edit the file src/app/articles/categories/categories.component.html

Add css for article lists and right widget

Edit the file src/styles.css and insert below css code

Article Details Page Design

Edit the file src/app/articles/article-details/article-details.component.html

About Us Page Design

Edit the file src/app/staticpages/about-us/about-us.component.html

Contact Us Page Design

Edit the file src/app/staticpages/contact-us/contact-us.component.html

Create Express App for Backend API

MongoDB Atlas Connection & User Models Schema

Install Mongoose Package to connect MongoDB with Nodejs/Express

Now we will create a models folder under the backend/api folder.

Next, we will create a user.js file to define MongoDB Atlas Connection and User Model Schema.

Edit the file backend/api/models/user.js

Please changes the database string with your MongoDB connection string.

Save User Records to MongoDB Cluster

Edit the file backend/api/routes/users.js

Now open the URL: http://localhost:3000/users to insert user records

Create User Account Modules & Component

Create Account Module

Create Registration Component under account folder

Create Login Component under account folder

Create service for account module

Create the design of registration page

Edit src/app/account/registration/registration.component.html

Create a class as accountinfo

Add/Edit the properties in the file src/app/account/accountinfo.ts

Edit the properties in the file src/app/account/accountservice.service.ts

Edit the properties in the file src/app/account/registration/registration.component.ts

Import the FormBuilder, Validators, FormGroup from @angular/forms

Import the AccountserviceService service and Accountinfo Class

Inject FormBuilder and AccountserviceService in constructor

Set the Validators for all controls

Create the method for createuserAccount

Edit the file src/app/app.module.ts

Import AccountserviceService and set it in provider array

Import HttpClientModule and set it in imports array

Import AccountModule and set it in provider array

import { HttpClientModule, HttpClient } from ‘@angular/common/http’; and set it in imports array

Edit the file src/app/account/account.module.ts

import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’;

Set ReactiveFormsModule it in imports array and FormsModule, ReactiveFormsModule in exports array

Edit the file src/app/account/account-routing.module.ts

Create route path for register page and define the component which we want to load.

Create API in Backend to submit register form data using post method

Edit the file backend/api/app.js

define app.use(‘/api’, usersRouter); in app.js

Edit the file backend/api/routes/users.js

Now we will create new route “register” using post method.

Access to XMLHttpRequest at ‘http://localhost:3000/api/register’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Edit the file backend/api/app.js

Add the below code to app.js to resolve the CORS policy

Now test and submit the register page form data, you will get success response and data will insert into mongodb database.

User Model Schema or User table Schema Validation

Edit the file backend/api/models/user.js

How to resolve below warning message on backend

(node:10270) [MONGODB DRIVER] Warning: Current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.

(node:10270) DeprecationWarning: collection.ensureIndex is deprecated. Use createIndexes instead.

Solution:

You have to add {useCreateIndex: true, useUnifiedTopology: true} in MongoClient constructor. Please check the below code

Check Email Exists function

If you want to check the current user enter an email that already exists or is not in database before register an new account. We will add the below function in the route file and pass this function with register post route as middleware.

In the below code you can see, I am using checkEmail as middleware.

Now test and submit the register page form data, you will get success response and data will insert into mongodb database.

How to Enctypt User Password submitted with Registration Form

To encrypt the user registration form password, we will install the package named bcrypt and use this package to create a password hash to store into the database.

Let’s install the package bcrypt. Follow the below steps:

Now we have to import or require this package in our backed route file

Edit the file backend/api/routes/users.js

Now we have to do some changes to register post route

Copy the below and replace your current code with the below one

In the above code, you will find

In the code, you can see we are using bcrypt hash function to create a password hash and Salt length as 10 to generate or salt to use.

After replacing the code, just refresh your register page and submit the form.

Wow Now the password is showing encrypted format in the database.

User Login

Now we will see the complete step about the login form, login services, login route, show success, and error message.

So let’s start with the login form creation

Create user login form

Edit src/app/account/login/login.component.html

Create a class as userloginfo

Add/Edit the properties in the file src/app/account/userloginfo.ts

Edit the properties in the file src/app/account/login/login.component.ts

Import the FormBuilder, Validators, FormGroup from @angular/forms

Import the AccountserviceService service and Userloginfo Class

Inject FormBuilder and AccountserviceService in the constructor

Set the Validators for all controls

Create the method for userlogin

Edit the file src/app/account/account-routing.module.ts

Create a route path for the login page and define the component which we want to load.

Add the properties in the file src/app/account/accountservice.service.ts

Import the Userloginfo Class and create userlogin service method to pass user login details

Create API in Backend to submit login form data using post method

Edit the file backend/api/routes/users.js

Now we will create a new route “login” using the post method.

Add Login route to navigation menu

Now open the URL: http://localhost:3000/login and enter your user email and password

Define User Role

Here we will see about user roles like admin, author.

Find below code and update your backend user schema and define the default role with the new user account creation

Edit the file backend/api/models/user.js

As in the above code, we define the new schema property as “role”.

Now we have to assign the predefined role value as “Author” at the time of the user registration.

Edit the file backend/api/routes/users.js

In the above code, you can see, I defined static predefined value for role as “Autor”.

We will update this userDetails under the registration route. You can find the complete code below.

Now you can test the functionality with new user registration.

Logout Function

Now we will work on the logout function after successfully loggedin.

Edit the file: src/app/header/header.component.html

Now we will add below logout code after the login link in the header.component.html file

In the above code, you can see the *ngIf condition to check the user is logged in or not. We will define the isloggedin default value as false in the header.component.ts file.

Edit the file: src/app/header/header.component.ts

First import the Router from “@angular/router”

Now we need to define the logout function as well as we need to assign the Router to a private variable using the constructor.

Also, we will define a custom variable isloggedin=false; to check user logged in or not

In the above code, you can find the if condition to check localStorage have “Login user” data or not. if the condition find true then we will assign isloggedin=true;

After the above code, we will define the logout function to remove the localStorage item when the user will click on the logout button.

When the localStorage item will remove, we will again change the isloggedin as false and navigate the user to the home page