DEV Community

loading...
Cover image for Django Volt Dashboard - Bootstrap 5, Vanilla JS design (no jQuery)

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

sm0ke profile image Sm0ke Updated on ・3 min read

Hello Coders,

This article presents a simple Django project generated by the AppSeed platform on top of Volt Dashboard, a modern Bootstrap 5/Vanilla JS design. Source code can be downloaded directly from GH and the permissive license allows unlimited copies for hobby & commercial projects.


Thank you! Content provided by AppSeed - App Generator.



Django Volt Dashboard - Simple Django starter generated by AppSeed.


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 - User Page.


Django Volt Dashboard - UI Elements

Django Volt Dashboard - UI Buttons Elements.


Django Volt Dashboard - UI Alerts

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
Enter fullscreen mode Exit fullscreen mode

Set up environment

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

Database creation & project bootstrap

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

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

Django Volt - Free Bootstrap 4 dashboard, the login page.


Main dashboard screen

Django Volt - Free Bootstrap 4 dashboard, the main dashboard page.


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


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

Discussion (0)

pic
Editor guide