Dark Admin Dashboard — Coded in two Python flavors with automation tools
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!
- 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 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.
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).
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):
- I’ve built 100+ open-source apps with automation tools
- Open-Source Web Apps — Grouped by UI Kits
- Admin Dashboards — 20+ Free Admin Panels built with tools
- Dark Admin Dashboards — Open-Source and Free
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 #1 — UI 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 #2 — Boilerplate 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):
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:
Thanks for reading such a long & boring post.
Resources & Links
- Flask Dashboard Black — Free Version (product page)
- Django Dashboard Black — Free Version (product page)
- Open-Source Admin Dashboards — free admin panels
- Web Apps with Black Design — provided by AppSeed
- Flask Black Admin PRO — used the PRO version of Black Dashboard
- Django Black Dashboard PRO — the Django version of PRO UI-Kit