Django Dashboards

AppSeed.us
7 min readAug 29, 2020

This article presents a curated list of Django Dashboards coded with basic modules, database, authentication, and deployment scripts on top of modern, open-source UI Kits. Starters can be downloaded directly from GitHub and based on the permissive (MIT) license, can be used for unlimited hobby or commercial end-products.

For newcomers, Django is a Python Web framework built by experienced developers and used in production by tech companies like Instagram and Disqus. Thanks for reading!

Django Dashboard — Volt

Volt Dashboard is a free and open-source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages, and 3 plugins with Vanilla JS. There are more than 100 free Bootstrap 5 components included some of them being buttons, alerts, modals, date pickers, and so on.

Django Volt Dashboard — Bootstrap 5 Design, free starter crafted by AppSeed
Django Volt Dashboard — Bootstrap 5 Design

Django Dashboard — Datta Able

Open-Source Django Dashboard coded with basic modules, database, ORM, and deployment scripts on top of Volt (free version), a modern Bootstrap dashboard design. Datta Able Bootstrap Lite is the most stylized Bootstrap 4 Lite Admin Template, among all other Lite/Free admin templates in the market.

Datta Able — Free Django Admin Starter crafted by AppSeed
Datta Able — Free Django Starter

Django Dashboard — Material Design

Open-source Django project crafted on top of Material Dashboard, an open-source Boostrap 5 design from Creative-Tim The product is designed to deliver the best possible user experience with highly customizable feature-rich pages. Material Material has an easy and intuitive responsive design whether it is viewed on retina screens or laptops.

This starter comes with a codebase that uses a themeable 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 setup allows deploying LIVE the product on Render without effort or low-level configuration.

Django Material Design — Free Admin Template Starter crafted by AppSeed
Django Material Design — Free Starter

Django Dashboard — Soft UI

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

  • Up-to-date Dependencies
  • UI Kit: Bootstrap 5, Persistent Dark-Mode
  • ✅ OAuth via GitHub
  • API Generator Module
  • Dynamic Data Tables
  • ✅ Docker
Django Soft UI Dashboard — Bootstrap 5 Design, free starter crafted by AppSeed.
Django Soft UI Dashboard — Bootstrap 5 Design

What is Django

Django is a high-level Python web framework, built by experienced developers, that enables the 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 — Since its 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.

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 containing a key, and the actual data is stored in the database) or directly storing passwords rather than a password hash.

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.

Newcomers might find it useful to read more about Django by accessing some well-known resources:

Dashboard — Codebase features

All starters presented in this article are generated by the AppSeed platform using an identical codebase that provides a basic set of features plus deployment scripts for Docker, HEROKU (via documentation), and Gunicorn/Nginx stack.

Django reference codebase features

  • UI-Ready, Django native template system
  • SQLite Database, Django Native ORM
  • Session-Based Authentication, Forms validation
  • Deployment scripts: Docker, Gunicorn / Nginx

Django codebase structure

< PROJECT ROOT >
|
|-- core/ #
| |-- static/ #
| | |-- <css, JS, images> # CSS files
| |
| |-- templates/ # Templates
| |
| |-- includes/ # HTML
| | |-- navigation.html # Top menu component
| | |-- sidebar.html # Sidebar component
| | |-- footer.html # App Footer
| | |-- scripts.html # JS Scripts
| |
| |-- layouts/ # Master pages
| | |-- base-fullscreen.html #
| | |-- base.html #
| |
| |-- 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
|
|-- app/ # Serve HTML files
|
|
|-- requirements.txt # App Dependencies
|
|-- .env # Inject Environment
|-- manage.py # Start the app
|
|-- *********************************************************

Django codebase — How to compile the starters

To see these simple Django Admin Templates running in the browser, Python3 should be installed properly in the workstation. If you are not sure if Python is properly installed, please open a terminal and type python --version. The full list with dependencies and tools required to build the app:

  • Python3 — the programming language used to code the app
  • GIT — used to clone the source code from the GitHub repository
  • Basic development tools (g++ compiler, python development libraries ..etc) used by Python to compile the app dependencies in your environment.

Once the Python3 environment is in place, we can choose any starter and compile it. The generic commands used to build all starters can be found below or by accessing the README file shipped with each project.

Get the source code

  • Download the ZIP from GitHub Repository
  • Using the GIT tool in the terminal to clone the source code

Change the current directory to source code directory

$ # Make sure you are running the commands INSIDE source code directory
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$
$ # Install modules
$ # SQLIte version
$ 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
$
$ # 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, we can visit the app in the browser http://127.0.0.1:8000/. By default, the app will redirect guest users to the login page. To access the private pages:

  • Create a new user using the registration page
  • Authenticate using the login page

Apps bootstrap flow

  • Django bootstrapper manage.py uses core/settings.py as the main configuration file
  • core/settings.py loads the app magic from .env file
  • Redirect the guest users to the Login page
  • Unlock the pages served by the app node for authenticated users

For more information please access the official Django Documentation provided by the AppSeed platform or join the Discord server for LIVE assistance (2k+ members).

And now, the Django projects are presented by saying a few words about the design plus some useful links for this select audience.

Django Dashboard — Corporate UI

Open-source Django Dashboard project crafted on top of Corporate UI, an open-source Bootstrap 5 design from Creative-Tim. Designed for those who like bold elements and beautiful websites.

Made of hundreds of elements, designed blocks, and fully coded pages, Corporate Dashboard is ready to help you create stunning websites and web apps.

Corporate UI — Open-Source Django Dashboard
Corporate UI — Open-Source Django Dashboard

Django Dashboard — Argon Design

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

You will save a lot of time going from prototyping to full-functional code because all elements are implemented. This Dashboard comes with pre-built examples, so the development process is seamless, and switching from our pages to the real website is very easy to do.

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

--

--