Admin Dashboard + Node.js + Express.js

Bootstrap 5 integration with Node.js & Express.js

MDB Integration - Admin Dashboard built with the latest Bootstrap 5, Node.js, Express.js & Material Design

Admin Dashboard integration build with the latest Bootstrap 5, Node.js and Express.js. Various examples of implementation, backend and frontend functions, and much more.

Live preview

Prerequisites

Before starting the project make sure to install the following utilities:

Installation

To install the project please follow these steps:

  • Download and unzip an Advanced package
  • Run the terminal in /integrations/admin-dashboard-node-express directory, placed inside the package
  • Type npm install in the terminal

Database installation

To operate the database we will need a web server utility. We recommend XAMPP. Keep in mind that only Apache and MySQL modules are necessary. Here's the guide:

  • Install XAMPP and run as an administrator
  • Make sure that Appache and MySQL modules are running
  • MySQL should work on port 3306 (it's the default option)
  • Move to the phpmyadmin page (Admin button in the MySQL section) and create a new database called mdb_admin_dashboard_node
  • If you want to change MySQL db config, please update the .env file in the admin dashboard root directory. It contains the configuration of your database and app port. The defaults are:
    • DB_HOST=localhost
    • DB_NAME=mdb_admin_dashboard_node
    • DB_USER=root
    • DB_PASS=
    • PORT=3000

Run the application

To run the project please follow these steps:

  • Run the terminal in /integrations/admin-dashboard-node-express directory
  • Type npm start in the terminal
  • Application should create some default database records and return the message: Server is running on port 3000.
  • You can now open the http://localhost:3000/ page in the browser

Usage

Main view (not logged in user):

  • Panel with the login form for already registered users. By default there are two users:
    • email: admin@mdbootstrap.com, password: mdbootstrap, role: Admin
    • email: user@mdbootstrap.com, password: mdbootstrap, role: User
  • Panel with the registration form with client and server side validation.

Dashboard view (logged in user):

  • Sample content with some SEO statistics. The last chart and table are filled with the data from the MySQL table called traffic_data
  • Sidenav with links to My profile and User management (only with Admin role) pages
  • Navbar with user avatar and logout button

My profile page:

  • Section with user data (name, avatar) with an edit option
  • Section with user password change

User management page (only with Admin role):

  • Section with all users data
  • Ability to remove any user
  • Ability to change roles

Defaults

By default the application creates three MySQL tables:

users

  • id
  • name
  • email
  • password
  • avatar
  • role_id
  • created_at
  • updated_at

roles

  • id
  • name
  • created_at
  • updated_at

traffic_data

  • id
  • impressions
  • clicks
  • position
  • created_at
  • updated_at

Each of the above tables is populated with sample content by default. There are two users (admin@mdbootstrap.com, user@mdbootstrap.com), two roles (Admin, User), and five random traffic data records for the SEO dashboard.

Backend features

ORM (Object-Relational-Mapper):

In this application we use Sequelize. Sequelize is a promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server. It features solid transaction support, relations, eager and lazy loading, read replication and more. The documentaion can be found here

Models:

Models are the essence of Sequelize. A model is an abstraction that represents a table in your database. In Sequelize, it is a class that extends Model. The model tells Sequelize several things about the entity it represents, such as the name of the table in the database and which columns it has (and their data types. A model in Sequelize has a name. This name does not have to be the same name of the table it represents in the database. Usually, models have singular names (such as User) while tables have pluralized names (such as Users), although this is fully configurable.

In our project there are three model classes: User, Role, TrafficData.

Routes and controllers:

A route is a section of Express code that associates an HTTP verb (GET, POST, PUT, DELETE, etc.), a URL path/pattern, and a function that is called to handle that pattern. There are several ways to create routes. In our app we used the express.Router middleware as it allowed us to group the route handlers for a particular part of a site together and access them using a common route-prefix. Controllers represent methods which are used for adding model functionalities, such as creating, updating or deleting instances.

Middleware:

Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next. Middleware functions can perform the following tasks:

  • Execute any code
  • Make changes to the request and the response objects
  • End the request-response cycle
  • Call the next middleware function in the stack

If the current middleware function does not end the request-response cycle, it must call next() to pass control to the next middleware function. Otherwise, the request will be left hanging.

Frontend features

MDB UI KIT:

The project includes our ui kit, with which you can build basic views very quickly. Almost all application layouts were built with the MDB admin dashboard templates.

EJS (Embedded JavaScript templating):

EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript. We use EJS to show all frontend views and layouts. For more information please visit this documentation page

Views and Layouts:

All frontend content is placed in the views directory. There are two main pages (index, dashboard) and five more layouts (footer, navbar, sidenav, seo-dashboard, user-profile, user-management). Thanks to EJS we can show some content conditionally (e.g. depending on the user's role).