Django Dashboard
Tags: django, python, opensource, appseed
Published: 2020-01-07 16:08:03

---
title: Django Dashboard
published: true
description: A short-list with open-source admin panels coded in Django Web Framework that might help students and beginners to start fast
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pglde2qhefv13cggbc5v.jpg
tags: django, python, opensource, appseed
canonical_url: https://medium.com/@appseed.us/django-dashboards-open-source-and-free-projects-1d8e64919e6d
---
Hello Coders,

This article presents a curated list with **[Django Dashboards](https://medium.com/@appseed.us/django-dashboards-open-source-and-free-projects-1d8e64919e6d)** and Templates coded with basic modules, database, authentication, and deployment scripts that might help beginners to start fast a new project. 

For newcomers, **[Django](https://www.djangoproject.com/)** 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](https://github.com/app-generator/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](https://github.com/app-generator/rocket-django) - `Source Code`
- 👉 [Rocket Django](https://rocket-django.onrender.com/) - `LIVE Demo`

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

![Free Django Dashboard and Admin Template - Rocket Django.](https://github-production-user-asset-6210df.s3.amazonaws.com/51070104/272299949-6f4a8fd7-7cce-472a-9566-9519db338c7d.gif)

---

## [Datta Able Django](https://appseed.us/admin-dashboards/django-datta-able)

A lightweight [Django Admmin Dashboard](https://appseed.us/admin-dashboards/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 Django](https://appseed.us/product/datta-able/django/) - `Product page`
- 👉 [Datta Able Django](https://django-datta-able.appseed-srv1.com/) - `LIVE demo`

![Datta Able (enhanced with dark mode) - Open-Source Seed project generated by AppSeed.](https://user-images.githubusercontent.com/51070104/176118649-7233ffbc-6118-4f56-8cda-baa81d256877.png)

--- 

## [Django Argon Dashboard](https://appseed.us/product/argon-dashboard/django/)

Open-source **Django** project crafted on top of **[Argon Dashboard](https://appseed.us/product/argon-dashboard/django/)**, an open-source `Boostrap 5` design from [Creative-Tim](https://bit.ly/3fKQZaL).

- 👉 [Django Argon Dashboard](https://appseed.us/product/argon-dashboard/django/) - `Product page`
- 👉 [Django Argon Dashboard](https://django-argon-dash2.onrender.com) - `LIVE Demo`

This starter comes with a codebase that uses a [theme-able UI](https://github.com/app-generator/django-admin-argon-dashboard) (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.](https://user-images.githubusercontent.com/51070104/211161884-56ef77d2-1e5a-4269-a148-7ac4a5482e0c.png)

--- 

## [Soft UI Dashboard Django](https://appseed.us/product/soft-ui-dashboard/django/)

**[Admin dashboard coded in Django](https://appseed.us/admin-dashboards/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](https://www.youtube.com/watch?v=U5nbGHVthOU) - `video presentation`
- ✅ [Dynamic Data Tables](https://youtu.be/9RwzSEWMHj8) - `video presentation`

![Soft UI Dashboard - Full-Stack Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/175773323-3345d618-0e78-4c85-83fc-f495dc3f0bb0.png)

--- 

## [Django Material Kit](https://appseed.us/product/material-kit/django/)

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](https://appseed.us/product/material-kit/django/) - product page
- 👉 [Django Material Kit](https://django-material-kit.appseed-srv1.com/) - LIVE App

![Material Kit - Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/167396765-c88b7a95-155f-4236-8691-7b80fa2d9cd9.png)

--- 

## [Volt Dashboard Django](https://appseed.us/product/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](https://appseed.us/product/volt-dashboard/django/) - Product page
- 👉 [Volt Dashboard Django](https://django-volt-dashboard.appseed-srv1.com/) - LIVE Demo

![Volt Dashboard - Full-Stack Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/168843604-b026fd94-5969-4be7-81ac-5887cf0958e5.png)
 
---

## [Django Dashboard Material](https://appseed.us/product/material-dashboard/django/)

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](https://appseed.us/product/material-dashboard/django/) - product page
- 👉 [Django Dashboard Material](https://django-material-dashboard.appseed-srv1.com/) - LIVE App

![Material Dashboard - Full-Stack Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/169301658-6cf27993-c451-4cd4-9ffa-2968b8981167.png) 

---

## [Atlantis Dark Django](https://appseed.us/product/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](https://appseed.us/product/atlantis-dark/django/) - Product page
- 👉 [Atlantis Dark Django](https://django-atlantis-dark.appseed-srv1.com/) - LIVE Demo

![Atlantis Dark - Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/172799909-4cbc8eed-fdde-4408-ab61-123f235212d0.png)

---

## [Django Argon Dashboard](https://appseed.us/product/argon-dashboard/django/)

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](https://appseed.us/product/argon-dashboard/django/) - product page
- 👉 [Django Argon Dashboard](https://django-argon-dashboard.appseed-srv1.com/) - LIVE App

![Argon Dashboard - Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/172859049-25ef7546-44e5-4234-95cb-5925b7ebd9be.png)

---

## [Django Black Dashboard](https://appseed.us/admin-dashboards/django-dashboard-black)

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](https://appseed.us/product/black-dashboard/django/) - Product page
- 👉 [Black Dashboard Django](https://django-black-dashboard.appseed-srv1.com/) - LIVE Demo

![Black Dashboard - Full-Stack Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/169471556-144ea706-0965-4f7d-8493-da9570085367.png)

---

### 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](https://discord.gg/fZC6hup).

---

## [What is Django](https://docs.appseed.us/content/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](https://www.djangoproject.com/)

**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](https://docs.djangoproject.com/en/stable/).

---

**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](https://www.djangoproject.com/) - official website and [docs](https://docs.djangoproject.com/)
- [Reddit/r/Django](https://www.reddit.com/r/django/) - a super active Reddit community 
- [Django](https://www.fullstackpython.com/django.html) - 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](https://github.com/app-generator/django-dashboard-black). The relevant files are listed in this simple chart 


```bash

$ # 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:

```bash
$ # 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](https://docs.python.org/3/tutorial/venv.html). The necessary commands to install the modules required by our web app are:

```bash
$ # 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](https://github.com/app-generator/django-dashboard-black/blob/master/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:

```bash
$
$ # 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](https://github.com/app-generator/django-dashboard-black/blob/master/manage.py) file has a magic line that injects into the app the desired configuration:

```python

$ # 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](https://github.com/app-generator/django-dashboard-black) / [core](https://github.com/app-generator/django-dashboard-black/tree/master/core) / [settings.py](https://github.com/app-generator/django-dashboard-black/blob/master/core/settings.py) 
The most relevant lines in the configuration files are:

```bash
# 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](https://github.com/app-generator/django-dashboard-black/blob/master/core/urls.py) : 

```bash

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 ] (https://github.com/app-generator/django-dashboard-black/blob/master/authentication/urls.py): 

```bash

...
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 ](https://github.com/app-generator/django-dashboard-black/blob/master/app/urls.py) 

```bash

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](https://github.com/app-generator/django-dashboard-black/blob/master/core/settings.py) file:

```bash 
...

# 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](https://github.com/app-generator/django-dashboard-black/blob/master/core/templates/index.html) file:

```html

{% 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 ](https://github.com/app-generator/django-dashboard-black/blob/master/core/templates/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](https://github.com/app-generator/django-dashboard-black/blob/master/README.md) file

```bash
$ # 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](https://github.com/app-generator/django-dashboard-black) should be visible in the browser:

![Django Dashboard Black - Open-Source Admin Panel.](https://raw.githubusercontent.com/app-generator/static/master/products/django-dashboard-black-intro.gif)

### App Screens

![Django Dashboard Black - User Profile Page.](https://raw.githubusercontent.com/app-generator/static/master/products/django-dashboard-black-screen-3.png)

---

![Django Dashboard Black - Notification page.](https://raw.githubusercontent.com/app-generator/static/master/products/django-dashboard-black-screen-2.png)

---

![Django Dashboard Black - RTL page.](https://raw.githubusercontent.com/app-generator/static/master/products/django-dashboard-black-screen-5.png)

---

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

- ✨ More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and [React](https://appseed.us/apps/react)
- ✨ More [Admin Dashboards](https://www.admin-dashboards.com/) - a huge index with products