Black Dashboard

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

Links & Resources

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).

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:

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.

Django Dashboard Black - RTL Support

Django Dashboard Black - UI Notifications

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

$ # 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/
12345678910111213141516171819

How to build the app

  • 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

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

Django Dashboard Black

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.

        <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>
12345678910111213141516171819202122232425262728293031

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

Flask Dashboard Black - Profile Page

Flask Dashboard Black - Main Screen

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:

$ # 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/
123456789101112131415161718

How to build the Flask dashboard

  • 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

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.

Flask Dashboard Black

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

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

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:

How to build the apps

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.

  • 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.

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

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

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 Automation process

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).

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

Admin Dashboards Links

Read more about this product on the official page (Creative-Tim.com)

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.

Black Dashboard Design

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

  • 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

Topics covered:

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.

Reference : https://blog.appseed.us/black-dashboard-open-source-built-with-automation-tools/

PreviousFlask DashboardsNextLight Blue

Last updated