Django Dashboard - Volt Bootstrap 5 PRO

Django Dashboard coded with basic modules, database, ORM and deployment scripts on top of Volt Dashboard PRO (premium version), a modern Bootstrap dashboard design. Volt Pro is a premium Bootstrap 5 Admin Dashboard featuring over 800 components, 20 example pages and 10 fully customized plugin written in Vanilla Javascript.

Features

• Up-to-date dependencies: Django 3.2.6 LTS
• UI Kit: Volt Dashboard PRO by Themesberg
• UI-Ready app, SQLite Database, Django Native ORM
• Modular design, best practices codebase
• Session-Based Authentication, Forms validation
• Deployment scripts: Docker, Gunicorn/Nginx
• Support via Github (issues tracker) and Discord - 24/7 LIVE Service.

Links

• Django Volt PRO - product page
• Django Volt PRO - LIVE deployment
• Django Volt PRO - product documentation

Volt Dashboard PRO

Volt Pro is a premium Bootstrap 5 Admin Dashboard featuring over 800 components, 20 example pages and 10 fully customized plugin written in Vanilla Javascript.

800+ Components, 20 Example Pages - There are more than 800 premium Bootstrap 5 components included with the admin dashboard, some of which are buttons, forms, alerts, datepickers, range sliders and many more. Volt Pro comes with 20 example pages including the overview page, messages, user settings, transactions, calendar, sign in, sign up, and many more pages.

10 Lightweight Plugins - There are at least 10 lightweight Vanilla JS plugin libraries that we have customized and expanded in terms of features that you can use for your application. Some of these are a calendar, SVG maps, datepickers, notifications, drag and drop file uploads and many more.

• Product Page - hosted by Themesberg
• Product Docs - Quick Start - official product documentation

How to use it

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

Note: To use the app, please access the registration page and create a new user. After authentication, the app will unlock the private pages.

Code-base structure

The project is coded using a simple and intuitive structure presented below:

< PROJECT ROOT >
   |
   |-- core/                               # Implements app configuration
   |    |-- settings.py                    # Defines Global Settings
   |    |-- wsgi.py                        # Start the app in production
   |    |-- urls.py                        # Define URLs served by all apps/nodes
   |
   |-- apps/
   |    |
   |    |-- home/                          # A simple app that serve HTML files
   |    |    |-- views.py                  # Serve HTML pages for authenticated users
   |    |    |-- urls.py                   # Define some super simple routes  
   |    |
   |    |-- authentication/                # Handles auth routes (login and register)
   |    |    |-- urls.py                   # Define authentication routes  
   |    |    |-- views.py                  # Handles login and registration  
   |    |    |-- forms.py                  # Define auth forms (login and register) 
   |    |
   |    |-- static/
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
   |    |
   |    |-- templates/                     # Templates used to render pages
   |         |-- includes/                 # HTML chunks and components
   |         |    |-- navigation.html      # Top menu component
   |         |    |-- sidebar.html         # Sidebar component
   |         |    |-- footer.html          # App Footer
   |         |    |-- scripts.html         # Scripts common to all pages
   |         |
   |         |-- layouts/                   # Master pages
   |         |    |-- base-fullscreen.html  # Used by Authentication pages
   |         |    |-- base.html             # Used by common pages
   |         |
   |         |-- accounts/                  # Authentication pages
   |         |    |-- login.html            # Login page
   |         |    |-- register.html         # Register page
   |         |
   |         |-- home/                      # UI Kit Pages
   |              |-- index.html            # Index page
   |              |-- 404-page.html         # 404 page
   |              |-- *.html                # All other pages
   |
   |-- requirements.txt                     # Development modules - SQLite storage
   |
   |-- .env                                 # Inject Configuration via Environment
   |-- manage.py                            # Start the app - Django default start script
   |
   |-- ************************************************************************

The 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 Login page
• Unlock the pages served by app node for authenticated users

Recompile CSS

To recompile SCSS files, follow this setup:

Step #1 - Install tools

• NodeJS 12.x or higher
• Gulp - globally
  • npm install -g gulp-cli
• Yarn (optional)

Step #2 - Change the working directory to assets folder

$ cd apps/static/assets

Step #3 - Install modules (this will create a classic node_modules directory)

$ npm install
// OR
$ yarn

Step #4 - Edit & Recompile SCSS files

$ gulp

The generated files (css, min.css) are saved in static/assets/css directory.

Deployment

The app is provided with a basic configuration to be executed in Docker, Gunicorn, and Waitress.

Docker execution

---

The application can be easily executed in a docker container. The steps:

Get the code

$ git clone https://github.com/app-generator/priv-django-dashboard-volt-pro.git
$ cd priv-django-dashboard-volt-pro

Start the app in Docker

$ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d

Visit http://localhost:85 in your browser. The app should be up & running.

Gunicorn

---

Gunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX.

Install using pip

$ pip install gunicorn

Start the app using gunicorn binary

$ gunicorn --bind=0.0.0.0:8001 core.wsgi:application
Serving on http://localhost:8001

Visit http://localhost:8001 in your browser. The app should be up & running.

Waitress

---

Waitress (Gunicorn equivalent for Windows) is meant to be a production-quality pure-Python WSGI server with very acceptable performance. It has no dependencies except ones that live in the Python standard library.

Install using pip

$ pip install waitress

Start the app using waitress-serve

$ waitress-serve --port=8001 core.wsgi:application
Serving on http://localhost:8001

Visit http://localhost:8001 in your browser. The app should be up & running.

Credits & Links

• Django - The official website
• Boilerplate Code - Index provided by AppSeed
• Boilerplate Code - Index published on Github

---

Django Dashboard Volt PRO - Provided by AppSeed App Generator.