Sm0ke

Posted on Aug 24, 2020 • Updated on Oct 5, 2023 • Originally published at appseed.us

Material Dashboard - Free Django Dashboard Example

#webdev #django #material #dashboards

Hello Coders,

This article presents a simple Django Dashboard coded with basic modules and deployment scripts on top of a modern Material Dashboard design crafted for free by Creative-Tim agency.

Material Dashboard (free version) is an open-source Material design inspired by Google's Material Design that comes with 5 color filter choices for both the sidebar and the card headers (blue, green, orange, red and purple) and an option to have a background image on the sidebar.

👉 Material Dashboard Django - product page
👉 Material Dashboard Django - LIVE Demo

This simple Django starter can be used for hobby and commercial end-products but also as a playground project by inexperienced programmers. The codebase has a simple structure, quite easy to maintain and extend. In case any of you have issues using it, feel free to ask for help in the comments section.

✨ Material Dashboard - The UI

This popular design is provided for free by Creative-Tim, a well-known agency that plays an active role in the open-source ecosystem.

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.

Material Dashboard makes use of light, surface, and movement. The general layout resembles sheets of paper following multiple different layers so that the depth and order are obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.

What is Django

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.

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
More Django Dashboards - an index provided by AppSeed

✨ Django Codebase

The codebase used in this Django starter has a simple and modular structure that provides authentication, an SQLite database, Session-based authentication, and deployment scripts for Docker and Gunicorn/Nginx.

All app features

UI Kit: Free Material Dashboard 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

Material Dashboard - Compile the code

To build locally the starter, 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.

✨ Compile from sources

The README file and the product docs provide the basic information to successfully compile this simple app locally.

$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-material.git
$ cd django-dashboard-material
$
$ # Virtualenv set up
$ virtualenv env
$ source env/bin/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/

If all goes well, we should see the app running in the browser. To unlock the private pages we need to register a new user and authenticate. After this, we can see all app pages provided by the UI kit.