DEV Community 👩‍💻👨‍💻

Cover image for Django Dashboard - A Curated list with free projects

Posted on • Updated on • Originally published at

Django Dashboard - A Curated list with free projects

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!

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

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.

Datta Able Django

A lightweight UI coded in Django 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 (enhanced with dark mode) - Open-Source Seed project 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.


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.


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:
$ #
   |-- core/
   |    |--                    
   |    |--                        
   |    |--                        
   |    |
   |    |-- 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
   |    |
   |    |--                        # Define auth routes
   |    |--                       # Define auth forms  
   |    |--                       
   |-- app/                                
   |    |
   |    |--                       # Serve HTML pages
   |    |--                        
   |-- requirements.txt                    # Required Modules 
   |-- .env                                # Environment Config
   |--                           # 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
$ 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 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 makemigrations
$ # Migrate sub-command apply the database changes (if any)
$ python migrate
$ # Runserver sub-command start the app on default port <8000> 
$ python runserver
$ # Start the app - custom port 
$ # python runserver<your_port>
$ # Access the web app in browser:
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 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 /
The most relevant lines in the configuration files are:

# Contents of core /

# The section that enables the APP module
    '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 
    os.path.join(BASE_DIR, "core/static"),

# Specify the database driver
    '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 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 / :

urlpatterns = [
    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 / :

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 /

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.


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

        'BACKEND': 'django.template.backends.django.DjangoTemplates',

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

        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [

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">
{% endblock content %}

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

    $(document).ready(function() {
      // Javascript method's body can be found in assets/js/demos.js

{% 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
$ 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 makemigrations
$ python migrate
$ # Start the application (development mode)
$ python runserver # default port 8000
$ # Access the web app in the browser:
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)

jansoriano profile image

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

sm0ke profile image
Sm0ke Author

Yw & Happy coding!

brolettolinux profile image

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

sm0ke profile image
Sm0ke Author

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! :)

Update Your DEV Experience Level:


Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠