Flask Black Dashboard - Free admin panel with Black Design
Tags: flask, dashboards, opensource
Published: 2020-03-22 16:06:01

---
title: Flask Black Dashboard - Free admin panel with Black Design
published: true
description: A simple and free admin dashboard coded in Flask on top of beautiful black design (MIT License)
cover_image: https://raw.githubusercontent.com/app-generator/static/master/products/flask-dashboard-black-screen.png
tags: flask, dashboards, opensource
canonical_url: https://appseed.us/admin-dashboards/flask-dashboard-black
---

Hello coder, 
This article presents **[Flask Black Dashboard](https://appseed.us/product/black-dashboard/flask/)** an open-source Flask starter provided with basic modules, authentication, and deployment scripts. This project can be downloaded directly from GitHub under the MIT license and based on the permissive license can be used for unlimited hobby & commercial projects. 

- 👉 [Black Dashboard Flask](https://appseed.us/product/black-dashboard/flask/) - `product page`
- 👉 [Black Dashboard Flask](https://flask-black-dashboard.appseed-srv1.com/) - `LIVE Demo`

---

![Flask Dashboard Black - Open-Source admin dashboard provided in Flask by AppSeed.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8doeexer7paz99842oa.gif)

---

** Short-Intro **

A basic introduction of terms for newcomers. In case you are familiar with the information presented in this section, please jump to the next section, and set up the environment. 

---

## What is **[Flask](https://appseed.us/admin-dashboards/flask/)**

[Flask](https://www.palletsprojects.com/p/flask/) is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja and has become one of the most popular Python web application frameworks.

Compared to his older brother Django, Flask provides a lightweight codebase and more freedom to the developer. This might be a good thing because you have more freedom in terms of app design and structure but at the same time, this freedom might inject problems when your application becomes complex.

---

## ✨ What is [Admin Dashboard](https://appseed.us/admin-dashboards)

A dashboard is a set of pages that are easy to read and offer information to the user in real time regarding his business. A **dashboard** usually consists of graphical representations of the current status and trends within an organization. Having a well-designed dashboard will give you the possibility to act and make informed decisions based on the data that your business provides - *definition provided by [Creative-Tim - Free Dashboard Templates](https://www.creative-tim.com/blog/web-design/free-dashboard-templates/?AFFILIATE=128200)*.

---

## ✨ [Black Dashboard](https://appseed.us/ui-kit/black-design) Design

**Black Dashboard** is a beautiful Bootstrap4 **Admin Dashboard** with a huge number of components built to fit together and look amazing. If you are looking for a tool to manage and visualize data about your business, this dashboard is the thing for you. 
It combines colors that are easy on the eye, spacious cards, 
beautiful typography, and graphics.
Besides the modern layout, the product is released under the MIT license and is actively supported and constantly improved. 

---

## The Environment

As mentioned, the product is built on top of **Flask**, a popular Python Web Framework. To build the app, **Python3** should be installed properly in the workstation. If you are not sure if Python is properly installed, please open a terminal and type `python --version`. The full list of dependencies and tools required to build the app:  

- [Python3](https://www.python.org/) - the programming language used to code the app
- [Git](https://git-scm.com/) - used to clone the source code from the Github repository

If you are a little bit unsure how to set up the environment, might be a good idea to spare a few minutes and read the full documentation provided for this app: [Flask Dashboard Black Docs](https://docs.appseed.us/products/flask-dashboards/black-dashboard).

---

> Check Python (using the terminal)

```bash
$ # Check Python version
$ python --version
Python 3.7.2 # <--- All good
```

---

> Check GIT command tool (using the terminal)

```bash
$ # Check git
$ git --version
$ git version 2.10.1.windows.1 # <--- All good
```
---

## Flask Dashboard - code structure

The code-base generated by the AppSeed platform respects the best practices and tries to keep things as simple as possible. Like all other apps provided by the platform, Flask Dashboard Black comes only with a basic set of features, easy to extend by the anyone that has a basic programming knowledge.  


```bash
< PROJECT ROOT >
   |
   |-- app/                      # Implements app logic
   |    |-- base/                # Base Blueprint
   |    |-- home/                # Home Blueprint
   |    |
   |   __init__.py               # Initialize the app
   |
   |-- requirements.txt          # Development modules
   |
   |-- .env                      # Environment Configuration 
   |-- config.py                 # Set up the app
   |-- run.py                    # Start the app - WSGI gateway
   |
   |-- *********************************
```

---

## Build the dashboard

The first step is to pull the source code in our workstation. This can be done by download the ZIP archive of the code or using GIT to clone the project locally (the recommended way). 

```bash
$ # Get the code
$ git clone https://github.com/app-generator/flask-black-dashboard.git
$ cd flask-black-dashboard
```

---

If **GIT** is properly installed in our system, the dashboard source code is now available in the `flask-black-dashboard` directory. Once we have the source code, the next step is to install the modules (aka dependencies). Usually, an application requires a set of modules used to implement the dashboard and our app is not an exception. 

```bash
$ virtualenv env
$ source env/bin/activate
$
$ pip3 install -r requirements.txt
```

---

If all goes well, the dependencies listed in the `requirements.txt` are installed and ready to be used by the application. The next step is to update the environment where the app runs with a few variables used by Flask Framework. 

```bash
$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ # Set up the DEBUG environment
$ export FLASK_ENV=development
```

The first variable `FLASK_APP` informs Flask what file to execute first (the entry point). The second variable `FLASK_ENV` is optional, but recommended if we want to DEBUG our application and collect runtime information when something is not working as expected. 

> Well, let's see something nice on the screen

The last step, is to start the app. This can be done with one single command, using the server provided by the Flask Framework: 

```bash
$ # Start the application (development mode)
$ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)
$ # --port=5000    - specify the app port (default 5000)  
$ flask run --host=0.0.0.0 --port=5000
$
$ # Access the dashboard in browser: http://127.0.0.1:5000/
```

By default, the app starts on port `5000`. In case this port is already in use by another process, just execute the flask command with another value as the argument for the `port` variable:

```bash
$ # Start the dashboard on port 9999
$ flask run --port=999
$
$ # Access the app in the browser: http://127.0.0.1:9999/
```

If all goes well, we should see the login screen (the application redirects guests to the login page). Please create a new user using the registration page, and authenticate. Some nice pages should be visible on the screen :

---

> Flask Dashboard Black - Main Dashboard Page

![Flask Dashboard Black - Main Dashboard Page](https://raw.githubusercontent.com/app-generator/static/master/products/flask-dashboard-black-screen.png)

---

> Flask Dashboard Black - UI Kit Notifications

![Flask Dashboard Black - UI Kit Notifications](https://raw.githubusercontent.com/app-generator/static/master/products/flask-dashboard-black-screen-1.png)

---

> Flask Dashboard Black - User profile page

![Flask Dashboard Black - User profile page](https://raw.githubusercontent.com/app-generator/static/master/products/flask-dashboard-black-screen-3.png)

---

> **Thanks for reading!** For more resources, feel free to access:

- 👉 More [Flask Dashboards](https://appseed.us/admin-dashboards/flask/) crafted in Django, Flask, and `React`
- 👉 More [Flask Apps](https://appseed.us/apps/flask/) - free & PAID