DEV Community

Cover image for Django Dashboard
Sm0ke
Sm0ke

Posted on • Edited on • Originally published at Medium

Django Dashboard

#django #python #opensource #appseed

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.

👉 Build your starter with Django App Generator and customize: DB Tables, Auth, Async Tasks, Docker, CI/Cd Scripts

Django App Generator - Select Design
Django App Generator - Design Database

Django Datta Able

Datta Able Bootstrap Lite is the most stylized Bootstrap 4 Lite Admin Template, around all other Lite/Free admin templates in the market. It comes with high feature-rich pages and components with fully developer-centric code.

Datta Able (enhaced with dark mode) - Open-Source Seed project generated by AppSeed.

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

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

Django Rocket - Open-Source Django Starter styled with Tailwind

Django Argon Dashboard

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

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.

Argon Dashboard 2 - Open-source Django Starter.

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 web apps - Features:

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

Soft UI Dashboard - Full-Stack Starter generated by AppSeed.

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.

Material Kit - Starter generated by AppSeed.

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 - Full-Stack Starter generated by AppSeed.

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.

Material Dashboard - Full-Stack Starter generated by AppSeed.

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 - Starter generated by AppSeed.

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.

Argon Dashboard - Starter generated by AppSeed.

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 - Full-Stack Starter generated by AppSeed.

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
   |
   |-- *************************************
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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'),
    }
}
Enter fullscreen mode Exit fullscreen mode

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
]
Enter fullscreen mode Exit fullscreen mode

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")
]
...
Enter fullscreen mode Exit fullscreen mode

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'),
]
Enter fullscreen mode Exit fullscreen mode

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',
            ],
        },
    },
]

...
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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

Django Dashboard Black - Open-Source Admin Panel.

App Screens

Django Dashboard Black - User Profile Page.

Django Dashboard Black - Notification page.

Django Dashboard Black - RTL page.

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

Top comments (4)

Collapse
 
jansoriano profile image
jansoriano •

This is really good man, specially for returning python devs like me. Thank you.

Collapse
 
sm0ke profile image
Sm0ke •

Yw & Happy coding!

Collapse
 
brolettolinux profile image
Broletto •

thanks Sm0ke, but how implement this new django/admin dashboard in a new django project? thanks

Collapse
 
sm0ke profile image
Sm0ke •

Hello!
I see two ways:

  • add your code on top in case you like the code-base structure - the starters are super minimal
  • use only the page templates/components on your own code-base.

In both ways, I think some assets can be re-used and let you win time.
Currently, I'm working to provide Jinja2 super minimal starters where the UI is already processed. Jinja is 99% compatible with Django native render engine.
Cheers! :)

Read next

lakshmi_prithanadesan_32 profile image

Day 4 - None Datatype & input() function in Python

Lakshmi Pritha Nadesan -

danielcristho profile image

Automating Flask & PostgreSQL Deployment on KVM with Terraform & Ansible

Daniel Pepuho -

aishwarya_raj_978520e6399 profile image

Python Asynchronous Programming: Simplifying Concurrency Like a Pro

Aishwarya Raj -

matijasos profile image

Should You Use an Open-source SaaS Boilerplate Starter or a $300+ Paid One?

Matija Sosic -