Many organizations use admin dashboards to track business-critical data and provide insight into impactful decision-making. Strong dashboards and enhanced data visibility allow organizations to accurately track their data and ensure operations are running smoothly in real-time. While there are several dashboard solutions on the market, a commonly used one is AdminLTE. AdminLTE is an admin dashboard solution that can be used to increase visibility into sales, e-commerce, order listings, task management, and more. Learning to effectively use AdminLTE can save engineers valuable time and resources by eliminating the need to manually build admin dashboards from scratch for different business needs.
In this article, we'll create an interactive AdminLTE dashboard that displays sales data stored in an SQLite database. We'll walk through how to create a server using Node.js, fetch data from the database, and return it to the frontend, where it will be displayed using the AdminLTE dashboard. AdminLTE can be implemented in various frameworks, but we will focus on React implementation.
What Is AdminLTE?
AdminLTE is an open-source admin dashboard and control panel theme that provides a range of popular and reusable web components. AdminLTE is built on top of Bootstrap and has an active community of users and developers. It's fast and lightweight and provides a wide range of features. These features include verified HTML5 and CSS3 syntax by W3C services, mobile-first responsive design that fits many resolution types, and over 1,000 Font Awesome icons, Ionicons, and Glyphicons.
AdminLTE is also compatible with all major browsers and works well with frameworks such as Laravel, Angular, React, Bootstrap, and Vue.js.
Let's dive into building the AdminLTE dashboard.
Building an interactive dashboard using AdminLTE
To follow this guide, ensure you have the following:
- Node.js and Yarn installed on your local machine
- A code editor and a browser installed on your local machine
You can access the complete code for the application in this GitHub repo.
To get started, let's create the database needed to pull the sales data.
Creating a database
First, create a folder named
AdminLTE. Inside this folder, create two subfolders named
server. Open the
server folder in the code editor. Then run the following commands in the integrated terminal to initialize a Node.js project and install the backend dependencies:
In terms of the dependencies, we will be using the following:
- sqlite3 will be used for the database
- node-fetch@2 will be used to fetch data for seeding the database
- Express will be used to create the server and an API endpoint
- CORS will be used to allow communication with the frontend
package.json file and add the following code for the scripts below the
"license": "MIT" key-value pair:
With the dependencies installed, create a file called
db/salesData.db inside the
server folder. This will be used as the database file. Create a new file called
seeddb.js in the
server folder and paste the code below. This file will be used to seed the database:
The above code connects to the provided database file with read and write permissions and logs a message to the console upon successful connection. It fetches dummy sales data from the provided URL and converts the response to JSON. The code then creates a table inside the database with specified fields, loops through the data, and inserts it into the database. Lastly, it reads the data from the database and displays it in the terminal.
Next, run the following command in the terminal to seed the database:
Creating an API to get sales data
After creating a database, let's create an API that will get sales data for our dashboard.
server folder, create an
index.js file and paste the following code:
The code above imports all the required dependencies, creates an instance of the server, allows CORS requests, and specifies the port on which the server will run. It then creates a route on the server that allows the GET HTTP method. When this route is invoked, a connection to the database is established, where all the data is then fetched from and returned to the frontend. The database connection is then closed.
To start the server, run the following command inside the terminal:
Reading and displaying data using AdminLTE
Next, let's set up AdminLTE to read and display the sales data.
To read and display data in the frontend, navigate to the
client folder created earlier and run the following command in the terminal to create a React app in the same folder:
Once the React app is created, run the following command in the terminal to install AdminLTE as a dependency:
AdminLTE has three dashboard versions that we can use. We'll focus on Dashboard v1. The dashboard will contain a main header, a sidebar, and a content area. The content area will contain groups of cards to display the data from the database.
Navigate to this page, which contains the dashboard version we will use, then right-click on the page and select View page source or press Ctrl+U on the keyboard.
From the page markup, copy the elements between the closing
<title> tag and opening
<body> tag and paste them into the
<head> section of the
Next, scroll to the bottom of the source page, copy the
<script> tags, and paste them into the
<body> section of the
client/public/index.html file should now look like this:
client/node_modules/admin-lte, locate the
plugins folders, and copy and paste them into the
Fetching data from the backend and creating components
Next, let's create the components displayed on the dashboard. We'll also implement the data fetching logic to retrieve the sales data from the backend using the
useEffect hook and store it in a variable so that it can be accessed by the components.
To start, open the
src/App.js file and replace the existing code with the following:
In the above code, we import the necessary components that will be created in the next step. We also import the
useEffect hook to fetch the data from the server, as well as the
useState hook to store the fetched data.
useEffect hook fetches the data on the initial page load from the URL where the server is running, converts the data to JSON, and stores it in
salesData variable is later passed on to the
Content component as a prop.
To create the components, make a new
components folder inside the
src directory and create the following three files inside:
Creating the main header component
Let's now create the main header component. This will contain a dummy navigation bar for the dashboard.
Header.jsx and paste in the following code:
The above code creates the dashboard's main header with hard-coded data.
Once complete, let's create the main sidebar component.
Creating the main sidebar component
To create the main sidebar component, open
Sidebar.jsx and paste the following code:
The above code creates a dummy main sidebar component that contains hard-coded information, such as user details. In a real-world project, this information, such as user profile picture and username, would be fetched from the database upon successful login.
Once the main sidebar component has been created, we'll build the main content component.
Creating the main content component
The main content component will be used to display data from the backend. To create this component, open
Content.jsx and paste the following code:
In the code above, the necessary components are imported, and the props passed from the
src/App.js file are destructured and passed into all the components.
To create the imported content components, create a folder titled
src/components/content and create the following two files inside that folder:
Once these two files are created, let's walk through adding the overview component using the
The overview component
This component will show the overview of the data from the backend, including the total sales amount, units sold, regions, managers, and salesmen.
Overview.jsx file and paste in the following code:
This component receives
data passed as props from the
Content.jsx file. Using the code above, we create an array for all the data that will be displayed. These arrays are then populated by looping through
data using a
To get the total sales amount and the total units sold, we use the
reduce method to retrieve the sum of all the units in the array. To get the total managers, regions, and salesmen, we use the
Set object to get the unique values only, push them into an array, and find the length of the array.
The regional component
Let's now create the regional component using the
Regional.jsx file. The regional component will show the total sales amount and units for a certain region.
Regional.jsx and paste in the code below:
Using the code above, we create an array for each region, loop through the
data, and push every sale entry into its corresponding region array. To get the total sales per region, we use the
map method to loop through the array, which returns an array of sales amounts. We then use the
reduce method to get the sum of all the elements in the array. The same concept is used for the total units per region.
Running the application
Once we have built all of the necessary components, it's time to run the application.
To confirm that the application is running, open
AdminLTE/server and run the following command:
AdminLTE/client and run the following command:
http://localhost:3000/ in your browser. You should see the following sales dashboard with the corresponding components created:
And that's how you build a sales dashboard using AdminLTE!
Although AdminLTE is a popular platform used to build admin dashboards, it is limiting for enterprise-grade dashboards. AdminLTE does not allow users to build custom components and implementing it using React can be difficult since users must change the HTML code into JSX for components. Users also must implement their own data-fetching logic and state management system, and AdminLTE does not offer a streamlined way to populate its components. This can make building dashboards using AdminLTE challenging for users. Luckily, there is a streamlined and robust alternative that offers a quick and easy way to build and customize internal dashboards.
Airplane as a better alternative to AdminLTE
Airplane is an internal tooling platform that allows users to build enterprise-grade tasks and dashboards in minutes using queries, APIs, and more. The platform offers Airplane Views to easily build custom dashboards and UIs in under 15 minutes.
Unlike AdminLTE, Airplane Views offers data-fetching logic, component state management, and permissions management systems to streamline the dashboard creation process without compromising security. Building a View in Airplane is easy through its extensive pre-built component and template libraries. In addition to pre-built items, Airplane also makes it easy for users to create custom components using standard React patterns.
In addition to Views, Airplane offers Tasks, which are powerful single-operation or multi-step functions that anyone on your team can execute, task scheduling, which replaces cron by running tasks automatically at certain time intervals, and more.
Airplane allows users to quickly build powerful, custom dashboards to fit their organizations' unique needs. If you're looking for a robust platform with strong defaults and customization capabilities, then Airplane is a great fit for you. To learn more about admin dashboards, check out our blog for content on building a Python admin dashboard, getting started with Active Admin, Django admin crash course, and more.
Author: Kevin Kimani
Kevin Kimani is a FullStack Web Developer and Technical Writer who enjoys teaching complicated concepts in simple ways. He enjoys creating websites, writing technical articles, and collaborating on open-source projects.