Django Dashboard

Hello Coders,

This article presents a curated list with Django Dashboards and Templates coded with basic modules, database, authentication, and deployment scripts that might help beginners to start fast a new project.

For newcomers, Django is the most popular Python-based web framework initially released in 2003. The "batteries-included" concept and the built-in security pattern provided by experts make Django a reference framework in modern web development. Thanks for reading!

Rocket Django TailwindCSS

This Django Boilerplate has all you need to build your SaaS, Analytics tool, or any other type of Web App. From idea to production in 5 minutes.

• 👉 Rocket Django - Source Code
• 👉 Rocket Django - LIVE Demo

Features and Tech Stack: TailwindCSS • Flowbite • API (DRF) • Celery Beat • DataTables • Charts • Docker • CI/CD.

Datta Able Django

A lightweight Django Admmin Dashboard using a simple codebase and basic features: session-based authentication, ORM, bundled with deploy scripts for Docker and Heroku. Datta Able comes with high feature-rich pages and components with fully developer-centric code.

• 👉 Datta Able Django - Product page
• 👉 Datta Able Django - LIVE demo

Django Argon Dashboard

Open-source Django project crafted on top of Argon Dashboard, an open-source Boostrap 5 design from Creative-Tim.

• 👉 Django Argon Dashboard - Product page
• 👉 Django Argon Dashboard - LIVE Demo

This starter comes with a codebase that uses a theme-able UI (installed via PIP) that covers the admin section, and all other pages managed by Django Auth flow. On top of this, the CI/CD set up allows deploying LIVE the product on Render without effort or low-level configuration.

Soft UI Dashboard Django

Admin dashboard coded in Django Framework. Designed for those who like bold elements and beautiful websites, Soft UI Dashboard is ready to help you create stunning websites and webapps - Features:

• ✅ Up-to-date Dependencies
• ✅ UI Kit: Bootstrap 5, Persistent Dark-Mode
• ✅ Basic Authentication, OAuth via Github
• ✅ API Generator Module - video presentation
• ✅ Dynamic Data Tables - video presentation

Django Material Kit

A pixel-perfect Bootstrap 5 UI kit that comes with prebuilt design blocks, 4 sample pages and 50+ UI components. If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages.

• 👉 Django Material Kit - product page
• 👉 Django Material Kit - LIVE App

Volt Dashboard Django

Volt is a free and open-source Bootstrap 5 powered admin dashboard with components, pages, and plugins that you can use to create an awesome admin interface. It also comes with a pro version with more pages, plugins, and components.

• 👉 Volt Dashboard Django - Product page
• 👉 Volt Dashboard Django - LIVE Demo

Django Dashboard Material

Designed for those who like bold elements and beautiful websites, Material Dashboard 2 is ready to help you create stunning websites and web apps. Material Dashboard 2 is built with over 60 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

• 👉 Django Dashboard Material - product page
• 👉 Django Dashboard Material - LIVE App

Atlantis Dark Django

A modern dark-themed dashboard coded in Django. The code is available on Github - for more information please access the product page.
Atlantis Lite Dark is a free bootstrap 4 admin dashboard that is beautifully and elegantly designed to display various metrics, numbers, or data visualization.

• 👉 Atlantis Dark Django - Product page
• 👉 Atlantis Dark Django - LIVE Demo

Django Argon Dashboard

Argon Design, crafted by Creative-Tim coded in Django. The starter uses an identical codebase as the previous projects and support is provided via Github and Discord.

Argon Dashboard is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in color, that you can easily modify using SASS files and it is open source, and free.

• 👉 Django Argon Dashboard - product page
• 👉 Django Argon Dashboard - LIVE App

Django Black Dashboard

Black Dashboard is a beautiful Bootstrap 4 Admin Dashboard with a huge number of components built to fit together and look amazing. It combines colors that are easy on the eye, spacious cards, beautiful typography, and graphics.

• 👉 Black Dashboard Django - Product page
• 👉 Black Dashboard Django - LIVE Demo

Common features:

• Modern UI Kits actively supported by well-known vendors
• UI-Ready, SQLite Database, Django Native ORM
• Modular design, clean code-base
• Session-Based Authentication, Forms validation
• Deployment scripts: Docker, Gunicorn / Nginx
• Free Support via Github and Discord.

What is Django (web framework)

Django is a high-level Python web framework, built by experienced developers, that enables rapid development of secure and maintainable websites. The project is actively supported and versioned by an impressive open-source community.

Why using Django

Mature Framework

With the first release in September 2008, Django was improved constantly since then. Django follows the "Batteries included" philosophy and provides almost everything developers might want to do "out of the box". Because everything you need is part of the one "product", it all works seamlessly together, follows consistent design principles, and has extensive and up-to-date documentation.

Versatile

Django provides choices for almost any functionality you might need in your project (e.g. several popular databases, templating engines, etc.), it can also be extended to use other components if needed.

Security

A super-important aspect of any project is covered nicely by Django by providing built-in protections for many security threats. Django provides a secure way to manage user accounts and passwords, avoiding common mistakes like putting session information in cookies where it is vulnerable (instead of cookies just contain a key, and the actual data is stored in the database) or directly storing passwords rather than a password hash.

Useful Django Resources:

• Django - official website and docs
• Reddit/r/Django - a super active Reddit community
• Django - related content provided by the (popular) Full-Stack-Python platform

The boilerplate code

As mentioned before, the web apps are generated using automation tools and the underline code-base is identical. In case you find a bug somewhere in the code, there are big chances to find a similar one in another project, from the same bundle. Well, any automation process has some drawbacks and this fault inheritance between projects is one of them.

The Structure

Django projects, by default, are modular and quite easy to understand and update. Our code-base is split into three modules:

• core - used to handle the static assets and global configuration
• authentication - manage the login & users registration
• app - manage all other actions: serve app pages when users are authenticated and redirect to login page otherwise.

From this point, I will refer to a real project, to make easier the whole presentation: Django Dashboard Black. The relevant files are listed in this simple chart

$ # Source code:
$ # https://github.com/app-generator/django-dashboard-black
$
< PROJECT ROOT >
   |
   |-- core/
   |    |-- settings.py                    
   |    |-- wsgi.py                        
   |    |-- urls.py                        
   |    |
   |    |-- static/
   |    |    |-- <css, JS, images>         
   |    |
   |    |-- templates/                     
   |         |
   |         |-- includes/                 # HTML chunks and
   |         |    |-- navigation.html      # Top menu component
   |         |    |-- sidebar.html         # Sidebar component
   |         |    |-- footer.html          # App Footer
   |         |    |-- scripts.html         # Common JS Scripts
   |         |
   |         |-- layouts/                  # Master pages
   |         |    |-- base-fullscreen.html # Used by Auth pages
   |         |    |-- base.html            # Used by common pages
   |         |
   |         |-- accounts/                 # Authentication pages
   |         |    |-- login.html           # Login page
   |         |    |-- register.html        # Register page
   |         |
   |      index.html                       # The default page
   |     page-404.html                     # Error 404 page
   |     page-500.html                     # Error 404 page
   |       *.html                          # All other HTML pages
   |
   |-- authentication/                     # Handles auth routes
   |    |
   |    |-- urls.py                        # Define auth routes
   |    |-- forms.py                       # Define auth forms  
   |    |-- views.py                       
   |
   |-- app/                                
   |    |
   |    |-- views.py                       # Serve HTML pages
   |    |-- urls.py                        
   |
   |-- requirements.txt                    # Required Modules 
   |
   |-- .env                                # Environment Config
   |-- manage.py                           # Start the app
   |
   |-- *************************************

To grab the sources from Github, we need to open a terminal and type:

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

How it works

Before using a Django app, we need to install the project dependencies, usually listed in a file called requirements.txt. We can install the dependencies in the global Python environment (not recommended) or using a sandboxed environment, called VirtualEnv. The necessary commands to install the modules required by our web app are:

$ # make sure you are in the project directory: 
$ # 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

Django apps are bootstrapped by the manage.py file, usually saved in the root of the project, that check if the Django module is available, and afterload a helper called execute_from_command_line to expose a basic set of sub-commands useful to manage the app:

$
$ # Makemigrations sub-command generates the SQL code to mutate 
$ # the database schema
$ python manage.py makemigrations
$
$ # Migrate sub-command apply the database changes (if any)
$ python manage.py migrate
$
$ # Runserver sub-command start the app on default port <8000> 
$ python manage.py runserver
$
$ # 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/

At this point, if the app is properly configured and coded, should be visible in the browser.

App Configuration

The manage.py file has a magic line that injects into the app the desired configuration:

$ # The magic line
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')

This line informs the Django framework to load the configuration from this path: PROJECT_ROOT / core / settings.py
The most relevant lines in the configuration files are:

# Contents of core / settings.py
....

# The section that enables the APP module
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    ... 
    'app'  # Enable the inner app 
]

...

# Defines global app routing
ROOT_URLCONF = 'core.urls'

# Specifiy the ROOT dir HTML templates
TEMPLATE_DIR = os.path.join(BASE_DIR, "core/templates")

# Specify the ROOT for static assets 
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "core/static"),
)

# Specify the database driver
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

App Routing

Django handles the routing by using a cascade rule over regular expressions defined in the urls.py file. When a request hits the server, Django tries to match the request by analyzing the defined rules starting from the top. In our case, the settings file point the framework to load the routing rules from core / urls.py :

urlpatterns = [
    path('admin/', admin.site.urls),
    path("", include("authentication.urls")),  # add this
    path("", include("app.urls"))  # add this
] 

The matching order will start with admin modules (defined by Django framework), later, the authentication rules, and app module routing rules at the end.

Authentication Rules are defined in the authentication / urls.py :

...
urlpatterns = [
    path('login/', login_view, name="login"),
    path('register/', register_user, name="register"),
    path("logout/", LogoutView.as_view(), name="logout")
]
... 

App Module Routing rules are defined in app / urls.py

urlpatterns = [
    # Matches any html file 
    re_path(r'^.*\.html', views.pages, name='pages'),

    # The home page
    path('', views.index, name='home'),
]

The routing in Django might be confusing for beginners (for me it was at first use) but later on, adding a new route in the app was an easy task.

Templating

The pages are rendered in a classic way, used by many templating systems (Jinja, Blade, Mustache) by using a composition of a master layout combined with HTML partials injected with dynamic data (name/email of an authenticated user, etc).

As mentioned in the configuration section, Django knows where to look for HTML partials and pages by reading the TEMPLATES section from the settings file:

...

# ROOT dir for templates
TEMPLATE_DIR = os.path.join(BASE_DIR, "core/templates")  

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',

        'DIRS': [TEMPLATE_DIR], <----- The magic line

        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

...

Sample page structure

Let's take a look at the main dashboard page, defined in the index.html file:

{% extends "layouts/base.html" %}

{% block title %} Dashboard {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <div class="row">
    ...
    </div>
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

  <script>
    $(document).ready(function() {
      // Javascript method's body can be found in assets/js/demos.js
      demo.initDashboardPageCharts();
    });
  </script>

{% endblock javascripts %}

The file extends the master layout defined in the layouts / base.html , the common structure is inherited and the page defines only the specific partials:

• Page title
• The main page content
• A specific javascript code used to animate the dashboard charts.

The final product

Let's start the app, and see something nice on the screen. bellow instructions are extracted from the README file

$ # 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 the browser: http://127.0.0.1:8000/

If all goes well, the Black Dashboard should be visible in the browser:

App Screens

Thanks for reading! For more resources, feel free to access:

• ✨ More Free Dashboards crafted in Django, Flask, and React
• ✨ More Admin Dashboards - a huge index with products