Django Bootstrap Dashboard - Material Design

Published Jul 24, 2020Last updated Jun 09, 2021

Hello Coder,

If you're already familiar with Django, or plan to learn more about this amazing framework, this article migth help a little bit. The content will presents an open-source Bootstrap Dashboard coded in Django with basic modules like authentication, database, simple codebase and deployment scripts for Docker, and Nginx/Gunicorn. For newcomers, Material Dashboard is a free Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design.

Django Bootstrap Dashboard - product page
Django Bootstrap Dashboard - LIVE Deployment
More projects styled with Material Design - curated index

Django Bootstrap Dashboard Material - Maps Screen

Django Short-Introduction

Django is an open-source python web framework used for rapid development, pragmatic, maintainable, clean design, and secure websites.
A web application framework is a bundle of components and features that many web apps need. The goal here is to allow developers to instead of implementing the same solutions over and over again, focus on the parts of their application that are new and unique to their project, without reinventing the wheel.

Personally, I've used Django from super simple projects (one-page websites) to API servers with medium complexity, consumed by modern JS Frameworks like Vue and React. In case your next project is a complex eCommerce or a stand-alone microservice, Django might be a good choice.

Django Frameworks Characteristics

Mature Framework

Being released, the first time in 2008, Django was improving the codebase constantly by a consistent open-source community that worked together to assure active support and constant evolution.
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.
Using Django, you can migrate from MySql to PostgreSQL or SQLite with ease, or switch from the classic session-based authentication to social login, just by reading a short tutorial and code a few lines in your codebase.

Security

A super-important aspect of any project, is covered nicely by Django by providing built-in protections for many security threats, including:

Clickjacking,
Cross-site scripting
SQL injection.

Django promptly releases new security patches, based on his super active community. For more information related to this amazing framework, feel free to access the official Django links:

Django - Official Website
Django Documentation

Material Dashboard

This simple material design can be found under the MIT license on Gihtub, the UI kits is actively supported by the Creative-Tim agency.

UI Vendor Notes - Material Dashboard is a free Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard was built over the popular Bootstrap 4 framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements.

With a release date in 2017 (three years ago) and more than 200k downloads, this UI might be a good candidate for your next project. For more information, feel free to access the product page - Material Dashboard Design

Django Bootstrap Dashboard Material - Dashboard Screen.

Django Dashboard Material

This Django starter is coded on top of a simple codebase enhanced with authentication, SQLite database and deployment scripts for Docker and Gunicorn/Nginx stack - Full list of features:

UI Kit: Material Dashboard (Free version) provided by Creative-Tim
UI-Ready app, SQLite Database, Django Native ORM
Modular design, clean code-base
Session-Based Authentication, Forms validation
Deployment scripts: Docker, Gunicorn / Nginx

How to use the code

To compile and start the app in our workstation, 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.

For more information on how to set up your environment please access the resources listed below:

A simplified version of build instructions is listed below. Full-information is provided in the README file, published on Github or via the reference documentation - Django Dashboard Boilerplate.

$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-material.git
$ cd django-dashboard-material
$
$ # 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 Storage
$ 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/

By typing above commands, we should see the app running in the browser. Please note that the app is not provided with default users and you should create a new one using the registration page. After a successful authentication, the starter will unlocks the private pages, styled in simple Material Design: