Black Dashboard - Open-Source Admin Panels built with automation tools

Hello Coders,

This article presents two open-source admin panels built with automation tools using a beautiful black design UI Kit, provided by Creative-Tim agency: Black Dashboard.

Topics covered:

  • A few words about the Black Dashboard design
  • Links to the open-source apps: product pages, source code, LIVE demo or yTube presentation
  • The automation process - a short introduction
  • The code structure and build instructions for both admin panels
  • Links to the PRO versions -  Flask Black Dashboard PRO, and Django Black Admin PRO

Thanks for reading! Enjoy this free products? Join the AppSeed community on Discord, Facebook or Twitter for more free apps.

Black Dashboard Design

Black Dashboard is a beautiful BS4 Admin Dashboard 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.

Read more about this product on the official page (Creative-Tim.com)
Black Dashboard - Open-Source Admin Panel

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

In order to use the apps, the workstation must have Python3 installed, (optionally) GIT command tool (for cloning the sources by using the console). The build instructions saved in the README files should be enough to see the admin panels up & running in the browser. In case of any issues, join us on Discord or open a new issue using Github (we provide support for all generated apps).


The Automation process

In one sentence, AppSeed is a platform that generate simple UI-Ready web apps in different languages and patterns using only flat HTML as input. Generated Samples: Flask Admin Dashboards, Django Dashboards, Flask Web Apps, Static Sites, JAMstack - for full list please access the platform.

The automated workflow has been presented before in a series of articles published on many platforms and communities:

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

  • The process 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)
  • Phase #1 - UI processing: components extraction, master pages detection, hard-coded texts removal, sometimes assets tuning (CSS compression, JS minification, etc) using an HTML parser coded in Python BS4 (not open-source).
  • Phase #2 - 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. We also offer the services to other companies, mostly web agencies that migrate their UI kits to different technologies manually.


How to build the apps

As mentioned, to build the admin panels we need to have Python3 installed. If you are not sure of it, open a terminal window and type:

$ python --version
Python 3.7.2 <--- The output

If the python command returns the version, we are good.

Flask Dashboard Black

This admin panel offers out of the box a basic set of features that might help anyone with a basic Python / Flask knowledge to code a real product in a few hours.

  • UI-Ready (HTML pages converted to Jinja2)
  • SQLite, PostgreSQL, SQLAlchemy ORM, Alembic (Db migrations)
  • Modular design with Blueprints
  • Session-Based authentication (via flask_login)
  • Deployment scripts: Docker, Gunicorn

How to build the Flask dashboard

$ # Get the code
$ git clone https://github.com/app-generator/flask-black-dashboard.git
$ cd flask-black-dashboard
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv --no-site-packages env
$ source env/bin/activate
$
$ # 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
$
$ # Access the app in browser: http://127.0.0.1:5000/

The application will redirect guests users to the login page. After we create a new user using the registration form (there is no default user defined), and pass the login, our Flask dashboard should unlock the menus and the private pages:

Flask Dashboard Black - Main Screen

Black Dashboard Design - Coded in Flask.

Flask Dashboard Black - Profile Page

Black Dashboard Design - Flask version (User Profile Page).

The profile page will display the information of authenticated used in form fields using the `current_user` object exposed by the Flask Framework globally:

        <form>
          <div class="row">
            <div class="col-md-5 pr-md-1">
              <div class="form-group">
                <label>UserID (disabled)</label>
                  
                  <!-- current_user injection -->
                  <input type="text" value="{{ current_user.id }}"> 
              
              </div>
            </div>
            <div class="col-md-3 px-md-1">
              <div class="form-group">
                <label>Username</label>
                  
                  <!-- current_user injection -->
                  <input type="text" value="{{ current_user.username }}">
                  
              </div>
            </div>
            <div class="col-md-4 pl-md-1">
              <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                  
                  <!-- current_user injection -->
                  <input type="email" value="{{ current_user.email }}">
                  
              </div>
            </div>
          </div>
        </form>

Feel free to play with the code, and let us know (on Facebook or Discord) if something is missing or there is place for improvements.


Django Dashboard Black

The Django version, has a similar code structure and offers the same features set:

  • UI-Ready (no manual work anymore)
  • SQLite, Django native ORM
  • Modular design (structured in three modules: core, authentication and app)
  • Session-Based authentication (login, register)
  • Forms validation

How to build the app

$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-black.git
$ cd django-dashboard-black
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv --no-site-packages env
$ source env/bin/activate
$
$ # Install modules
$ pip3 install -r requirements.txt
$
$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
$
$ # Start the application (development mode)
$ python manage.py runserver # default port 8000
$
$ # Access the web app in browser: http://127.0.0.1:8000/

After passing authentication (using a new user) the app should reveal the private pages: Main Dashboard, Profile Page, UI-Related pages (icons, maps):

Django Dashboard Black - UI Notifications

Black Dashboard Design - Coded in Django.

Django Dashboard Black - RTL Support

Black Dashboard Design - Django version (RTL support Page).

On top of this simple UI-Ready code-base, anyone with a basic Django knowledge should be able to code a new product after a short period of accommodation with the source code.


Thank you for reading such a long post. From this point, the content cover two commercial products, that uses identical code-base but offers a few extra things:

Using these version, the UI Kit contains more elements, pages and 24/7 Live priority support from our team of experts (via eMail, Github and Discord).

Black Dashhboard PRO - Coded in Flask.


Links & Resources

Show Comments

Get the latest posts delivered right to your inbox.