Dark Admin Dashboard — Coded in two Python flavors with automation tools

AppSeed.us
Jan 19 · 5 min read

Hello Coders,

This article presents two open-source admin panels coded in Python language on top of some popular web frameworks: Flask and Django. The UI Kit used to style the apps is the Black Dashboard design (free version) crafted by the Creative-Tim agency.

Besides the free products, the article will describe briefly the process used by the AppSeed platform to generate the products. Thanks for reading and let me know your thoughts in the comments!

Topics covered:

  • Black Dashboard Design — a short presentation.
  • Links to the open-source products (for those in a rush).
  • Present in a few sentences the automation process used to generate the web apps.
  • Explain how to build web apps — help beginners to have a good start and see something nice on the screen in a few minutes.

Black Dashboard Design

Black Dashboard is a beautiful BS4 admin dashboard template crafted by the Creative-Tim agency with a huge number of components built to fit together and look pretty nice. Black Dashboard comes packed with all plugins that you might need inside a project and documentation on how to get started. It is light and easy to use, and also very powerful — the official product quote.

Black Dashboard — The product thumbnail.
Black Dashboard — The product thumbnail.
Black Dashboard by Creative-Tim — The official product thumbnail.

Admin Panel Links

For those that are already familiar with the design or just want to build the apps right away, please access the links:

Both apps are generated with a basic set of features built on top of a simple and modular code-base:

  • UI-Ready (HTML pages converted to Jinja2 and Django templates)
  • SQLite, ORM, Alembic (for Flask version)
  • Modular design (Blueprints for Flask)
  • Session-Based Authentication (login, register)
  • Deployment scripts: Docker, Gunicorn, WSGI, ASGI

In order to use the apps right away, the workstation must have Python3 installed and optionally the GIT command tool. For instance, to build the Flask version of the dashboard, we need to type just a few commands in the terminal:

$ # Get the code
$ git clone https://github.com/app-generator/flask-black-dashboard.git
$ cd flask-black-dashboard
$
$ # Install modules (SQLite version)
$ pip3 install -r requirements-sqlite.txt
$
$ # Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=run.py
$
$ # Start the application (development mode)
$ flask run
$
$ # Visit the app in browser: http://127.0.0.1:5000/

If all goes well, we should see the login page (the app redirects guests to the authentication pages).

Dark Admin Dashboard — Login Screen

The Automation process

In one simple sentence, AppSeed generates simple UI-Ready web apps in different languages and patterns using only flat HTML as input.


The automated workflow has been presented before in a series of articles published on many platforms and communities (Dev.to, Reddit, AppSeed Blog, here on Medium):

For newcomers, I will reiterate how the platform works in a few sentences:

The platform uses flat HTML as input and produces simple UI-Ready web apps enhanced with authentication, database, ORM, in different languages and patterns (only simple stuff, and basic modules). Once our R&D will advance, the developers will have the possibility to add and configure more options (database engine, deployment configuration, etc…) using a visual interface.

Phase #1UI processing

This includes components extraction, master pages detection, hard-coded texts removal, sometimes assets management tuning (CSS compression, JS minification, etc) using an HTML parser coded in Python BS4 (not open-source).

Phase #2Boilerplate Code provisioning

Once the HTML is processed, the automated workflow injects the layouts and components into simple boilerplate code enhanced with basic features and modules: authentication, database, ORM, deployment scripts.

Using this new approach, simple web apps are produced much faster and with less manual work involved. In 2019, more than 170 open source web apps were generated and published on Github, under permissive licenses (MIT, LGPL):


Django Dashboard Black

In order to make this article useful also for students and beginners, we will describe the build process for the Django version: Django Black Dashboard.

Step #1 — Clone the dashboard source code

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

Step #2 — Install Modules

Each Python project has some dependencies and modules used in the code, and this project is not an exception. All modules required to have a successful build are located in the requirements.txt file. Let's install all the stuff using a Virtual environment:

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv --no-site-packages env
$ source env/bin/activate
$
$ # Install modules
$ pip3 install -r requirements.txt

Step #3 — Setup Database

Our free dashboard requires a minimum database set up by creating a few tables used to manage the users and permissions. This phase can be solved with only two commands typed in the console:

$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate

Step #4 — Start the app

At this point, we have the app dependencies installed, the database has the necessary tables created, all we need is to see something on the screen.

$ # Start the application (development mode)
$ python manage.py runserver
$
$ # Visit the app in browser: http://127.0.0.1:8000/

By visiting the app in the browser, we should see the login page. If the registration and authentication actions are successful, the app will unlock the main dashboard page and the contextual menus:

Django Dashboard Black — Dashboard Page

Django Dashboard Black — User profile page

Django Dashboard Black — RTL Support Sample Page

Thanks for reading such a long & boring post.


Resources & Links

Black Dashboard PRO — Django Version

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade