Django Dashboard Black - Open-Source Admin Panel

Hello Coders,

This article presents a simple open-source admin dashboard, generated by the AppSeed platform on top of a beautiful UI Kit: Black Dashboard Design. The code-base comes with a basic set of modules and features, quite common to all web apps provided by AppSeed:

  • Session-Based Authentication (login, register - custom pages)
  • SQLite, ORM (Django native)
  • Forms validation (password, email fields)

The goal of this boilerplate code is to help students, freelancers and web agencies to start fast by using a clean, tested and simple code-base on top of a usable UI-Kit.


Already familiar with Django Framework and curious how the app looks like? Access the product page, and build the project with a few commands: Django Dashboard Black - Thank you!

Django Dashboard Black - Open-Source Admin Panel.


About the automation process

I decided to build an automation workflow, based on my freelancing experience from the last two years, mostly based on the feedback and clients requirements:

  • The clients constantly require a variety of designs to choose from
  • Apps should be delivered in modern technologies (this makes my life easier, but is not true in all cases)
  • Legacy apps migration to newer technologies using low budgets.

To solve all those problems and challenges I've built a semi-automated workflow:

  • Extract components for various template engines (Jinja2, PUG, Blade) from flat HTML files using an HTML parser written in Python / BS4
  • Inject the processed design into existing boilerplate code: Django / Flask admin dashboards, Static Sites, JAMstack, simple Flask Web Apps
  • Execute automatically a minimum set of tests

Later, in 2019 this workflow becomes a real business called AppSeed - a platform built for developers.

Now, back to our admin panel, the code structure has three main modules:

  • core module is the application workhorse, used to handle the static assets and global configuration
  • authentication module - manage the login and users registration
  • app module - load the app pages if the user is authenticated or redirect the request to the login page, otherwise.

The relevant files, for all modules, are listed in this simple ASCII chart:


$ # Source code:
$ # https://github.com/app-generator/django-dashboard-black
$
$ <django-dashboard-black>
$     |
$     |-- requirements.txt # project dependencies 
$     |-- manage.py        # app bootstrapper 
$     |
$     |-- <core>
$     |      | 
$     |      |---- settings.py # global settings 
$     |      |---- urls.py     # define the routing rules  
$     |      |
$     |      |---- <static>    # used for assets (js, css, images)  
$     |      |---- <templates> # HTML templates 
$     |                |       
$     |                |-- layouts, includes, pages
$     |
$     | 
$     |-- <authentication> 
$     |      | 
$     |      |---- views.py # manage Login, registration pages
$     |      |---- urls.py  # Auth routing rules (login, register)
$     |      |---- forms.py # Define auth forms  
$     |
$     | 
$     |-- <app> 
$     |      | 
$     |      |---- views.py  # load dashboard pages
$     |      |---- urls.py   # Define the routing rules 
$     |      |---- models.py # Define the User model, used by authentication
$     |
$     |-- ******************************************************************
$

Build the app

As mentioned before, the app is published on Github platform and the source code  comes with a comprehensive README file with all the necessary instructions to build the app:

Clone the app sources (via GIT)
$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-black.git
$ cd django-dashboard-black

Install the dependencies

The modules can be installed as global dependencies (not recommended) or using a Virtualenv that executes the code in an isolated environment.

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

Once the modules are installed, the next step is to set up the database. The app comes with an SQLite database, the default option for Django simple apps.

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

The makemigrations subcommand will generate the necessary SQL code and  migrate will create the database and tables. The app uses a single table for users registration and login. If all goes well, now we should be able to start the application.

Start the web app
$ # Start the application (development mode)
$ python manage.py runserver # default port 8000
$
$ # Start the app - custom port 
$ # python manage.py runserver 0.0.0.0:<your_port>
$
$ # Access the web app in browser: http://127.0.0.1:8000/

By visiting the app in the browser, we should see the login screen:

Django Dashboard Black - Open-Source Admin Panel the Login Screen.

Currently, we don't have any user in our database but we can easily create one using the registration page:

Django Dashboard Black - Open-Source Admin Panel the Register Screen.

During the registration process, some basic checks are performed in the backend server (user already exists, weak password) and if all goes well, the user is created and the request is redirected to login page.

After authentication, the web app will display all the menus and the user information (id, email, and username) is injected in the user profile page:

Django Dashboard Black - Open-Source Admin Panel the Register Screen.


The template pages

In this section we will provide more information regarding the process that transforms the flat HTML design into usable Django templates. When a new UI Kit is processed for the first time by the platform, the pages are loaded and HTML is processed in a few simple steps:

  • Isolate the assets (images, CSS, javascript) to be used later in builder tools like Webpack, Parcel, Gulp
  • Detect the master layouts used to build the pages.
  • Extract components, replace the hard coded texts with real variables. The syntax varies based on the template engine used in the future app. Blade, for instance, has a different syntax than Jinja2 or Django templating.

Once this phase is completed, the UI become usable in many web apps coded in different languages and patters: JAMstack, Static Sites, Flask or Django web apps.

To explain the HTML parsing process, a few articles are published on Dev.to platform, related  to various HTML parsing topics. Curious minds might learn more about this apparently useless topic, by accessing the below links:


For more information and free web apps, access AppSeed, a platform built for developers. Thank you!

Show Comments

Get the latest posts delivered right to your inbox.