Django Volt Dashboard - Bootstrap 5, Vanilla JS design (no jQuery)

Hello Coders,

This article presents an open-source Django Bootstrap 5 starter crafted on op of Volt Dashboard template, a modern Bootstrap 5/Vanilla JS design. The product can be downloaded from Github and the permissive license allows the usage for unlimited hobby and commercial products. For newcomers, Django is a Python Web framework built by experienced developers that encourages rapid development of modern web applications.

Thanks for reading! - Content provided by App Generator.

• Django Bootstrap 5 Volt - product page
• Django Bootstrap 5 Volt - LIVE deployment

What is Django

For newcomers, this section explains what is Django and the basic features offered by this popular Python-based web framework. To code a simple web app on top of Django, Python must be installed and accessible via the terminal. Just to be sure we have Python on our workstation, we can type python --version in a terminal window and check the output. Anything that's not an error, is a good thing.

$  python --version
Python 3.8.4 <--- All Good

If this command is not recognized by the operating system, Python should be downloaded and installed from the official website. To complete this phase, feel free to access below resources or just Google for more tutorials regarding Python installation and get back here once the setup is complete.

• Getting Started with Python - a super simple tutorial
• Setup Windows for development - a minimum toolkit
• Setup CentOS for development - a minimum toolkit

Install Django

To install Django, we can use PIP, the official Python package manager:

$ pip install Django

Django - A minimal application

Django comes with a powerful CLI (command line interface) to assist developers to prototype a project skeleton with a single line:

$ django-admin startproject site1

This will create a site1 directory in your current directory.

The files created by startproject command:

site1/                  # The root directory (we can change the name)
    manage.py           # Django utility file
    site1/              # This is the actual Django project
        __init__.py     # 
        settings.py     # Store app settings
        urls.py         # Define app routes
        asgi.py         # Used in deployment 
        wsgi.py         # Used in deployment  

Once the project has been generated successfully, we can start with ease using the command:

$ python ./manage.py runserver
$ # App runs on http://localhost:8000

As we can see, getting started and coding a super simple app using Django is quite easy and fun.

Volt Dashboard - Free BS5 Template

Volt is a free and open-source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages, and 3 customized plugins.

• 100+ Components - the usage is documented here
• 11 Example pages - Dashboard, Settings, Components (modals, buttons, forms), Sign IN, Sign UP

Django Volt Dashboard - User Page

Django Volt Dashboard - UI Elements

Django Volt Dashboard - UI Alerts

How to compile the project

In case anyone finds this project useful, to compile it locally only a few commands typed in the terminal are required.

Clone the sources via GIT command tool

$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-volt.git
$ cd django-dashboard-volt

Set up environment

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules - SQLite Storage
$ pip3 install -r requirements.txt

Database creation & project bootstrap

$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
$
$ # Start the application (development mode)
$ python manage.py runserver

If all goes well, we should be able to visit the app in the browser at address http://localhost:8000 (8000 - the default port used by Django)

By default the used redirect guests to the login page. In order to pass the login, please register a new user and authenticate.

Login page

Main dashboard screen

The project comes deployment-ready for Docker, Nginx/Gunicorn stack. The full information can be accessed via the product page and Github repository.

• Django Volt - the product page
• Django Volt - Sources, published on Github (MIT License)

Thank you! Let me know your thoughts in the comments or follow my activity on Twitter - Sm0ke