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

Django Dashboard - A Curated list with free projects

sm0ke profile image Sm0ke Updated on ・11 min read

Hello Coders,

This article presents a curated list with Django Dashboards coded with basic modules, database, authentication, and deployment scripts that might help beginners to start fast a new project. All starters are actively supported and versioned by AppSeed, the platform that uses automation tools to build simple projects.


For more Django Dashboards access the AppSeed platform - For LIVE support, join the Discord server.


During my career as a developer, I learned a lot by using / updating projects released in the open-source ecosystem. In case you like or use this learning pattern, the article might be a useful resource to start your next project. Let's go!


Django Dashboards Bundle

Here is the short-list, more dashboards will be added in the future.


Django Dashboards App Screens

To make this article more visual, I will drop here the main screen-shot for all apps listed in this article.


Django Datta Able

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 Free Dashboard 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.



Django Dashboard - DattaAble Design, main screen.


Django Black Dashboard

Black Dashboard design coded in Django Web Framework with SQLite database, native ORM, and session-based authentication.

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.



Django Dashboard - Black Design, main screen.


Django Dashboard Argon

Argon Design, crafted by Creative-Tim coded in Django. The starter uses an identical codebase as the previous projects and support are 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 Dashboard - Argon Design, main screen.


Django Star Admin

Star Admin is a beautiful freebie dashboard released by BootstrapDash.
Beautifully designed and well-coded admin template, that comes with excellent support from experts. One of the most popular free admin templates, Star Admin is a beautifully designed admin template with a lot of the polished Bootstrap components making up its dashboard and other pages.



Django Dashboard - Star Admin, dashboard screen


Django Atlantis Dark

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.



Django Atlantis Dark - Dashbord Page


Django Volt Dashboard

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.



Django Volt Dashboard - Open-Source Bootstrap 5 Dashboard coded in Django.


Common features:

  • Modern UI Kits: Black Design, Argon, Material, NowUi, Light
  • UI-Ready, SQLite Database, Django Native ORM
  • Modular design, clean code-base
  • Session-Based Authentication, Forms validation
  • Deployment scripts: Docker, Gunicorn / Nginx
  • MIT License
  • Free support via Github issues tracker
  • Paid 24/7 Live Support via 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 browser: http://127.0.0.1:8000/

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.


Credits & Links


Thanks for reading and let me know your thoughts in the comments!

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

pic
Editor guide
 

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

 

Yw & Happy coding!

 

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

 

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