Django Dashboards - Open-Source and Free Starters
Hello Coders,
This article presents a curated list with free Django Dashboards enhanced with basic features like authentication, database, simple codebase, and deployment scripts for Docker and Gunicorn/Nginx stack. For newcomers, Django is a Python Web framework built by experienced developers that encourages rapid development of modern web applications.
Dashboards features
- Source Code (all projects) can be downloaded from Github
- UI-Ready app, SQLite Database, Django Native ORM
- Modular design, clean codebase
- Session-Based Authentication, Forms validation
- Deployment scripts: Docker, Gunicorn/Nginx
✨ Soft UI Dashboard Django
Open-source Django Dashboard built on top of a modern design. Designed for those who like bold elements and beautiful websites, Soft UI Dashboard is ready to help you create stunning websites and webapps. 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.
- 👉 Soft UI Dashboard Django - LIVE Demo
- 👉 Soft UI Dashboard Django - Product page
✨ Datta Able Django
Datta Able Bootstrap Lite is the most stylised Bootstrap 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. Before developing Datta Able our key points were performance and design.
- 👉 Datta Able Django - product page
- 👉 Datta Able Django - LIVE Deployment
✨ Django Material Kit
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 - product page
- 👉 Django Material Kit - LIVE App
✨ Django Dashboard Material
Designed for those who like bold elements and beautiful websites, Material Dashboard is ready to help you create stunning websites and webapps. Material 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.
- 👉 Django Dashboard Material - product page
- 👉 Django Dashboard Material - LIVE App
✨ Volt Dashboard Django
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, datepickers and so on.
- 👉 Volt Dashboard Django - Product page
- 👉 Volt Dashboard Django - LIVE Demo
What is Django
Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It's free and open source.
Django Links
- Django - the official website
- Django Documentation
Django Environment
To use the staters, 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 are listed below:
- 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.
Check Python version (using the terminal)
$ # Check Python version
$ python --version
Python 3.7.2 # <--- All good
Check GIT command tool (using the terminal)
$ # Check git
$ git --version
$ git version 2.10.1.windows.1 # <--- All good
Starters Codebase
All projects presented in this article are using an identical codebase with three apps:
- Core - Implements app logic and serve the static assets
- Authentication - Handles auth routes (login and register)
- App - this module serve the HTML pages for authenticated users
< PROJECTS ROOT >
|
|-- core/ # Implements app logic
| |-- settings.py # Django app bootstrapper
| |-- wsgi.py # Start the app in production
| |-- urls.py # Define URLs served by all apps/nodes
| |-- static/
| | |-- <css, JS, images> # CSS files, Javascripts files
| |
| |-- templates/ # Templates used to render pages
| |-- includes/ # HTML chunks and components
| |-- layouts/ # Master pages
| |-- accounts/ # Authentication pages
| |
| index.html # The default page
| page-404.html # Error 404 page
| page-500.html # Error 500 page
| *.html # All other HTML pages
|
|-- authentication/ # Handles auth routes
|-- app/ # A simple app that serve HTML files
|
|-- requirements.txt # Development modules - SQLite storage
|
|-- .env # Inject Configuration via Environment
|-- manage.py # Django bootstraper
|
|-- ************************************
How to compile the starters
To built and start the apps locally, follow the steps:
- Get the source code - I'll drop here the links for all apps
- Django Datta Able - Source Code
- Django Black - Source Code
- Django Material - Source Code
- Django Argon - Source Code
- Django Star Admin - Source Code
Afther we have the source code for a starter, we need to change the working directory inside and type a few commands in the terminal.
$ # Make sure you are running the commands INSIDE source code directory
$
$ # Virtualenv set up (Unix based systems)
$ 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 our Django dashboard running in the browser. To unlock the private pages, we need to create a new user and authenticate.
The bootstrap flow
- Django bootstrapper
manage.pyusescore/settings.pyas the main configuration file core/settings.pyloads the app magic from.envfile- Redirect the guest users to Login page
- Unlock the pages served by app node for authenticated users
How to configure the apps
The environment configuration file .env specify a short-list with variables:
- SECRET_KEY - Used by Django for cryptographic signing
SERVER- The public domain/address used in production
# File: core/settings.py
...
# SECRET_KEY value is read from `.env` file
SECRET_KEY = config('SECRET_KEY', default='S#perS3crEt_1122')
...
# Load the production server address from `.env` file
ALLOWED_HOSTS = ['localhost', '127.0.0.1', config('SERVER', default='127.0.0.1')]
...
# The SQLite database, located in the root of the project
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
The default database is SQLite and the name and physical location can be changed by updating core/settings.py The database and associated tables are created during the migration commands, listed in the README file:
$ # README file, shipped with every Django project
...
$ python manage.py makemigrations
$ python manage.py migrate
...
Hint: to visualize the SQLite database content an external tool should be installed: DB Browser for SQLite it might be a good choice.
Thanks for reading! Feel free to ask me anything in the comments - other resources:
- Django - the official website
- More Django Templates - a curated index
