DEV Community

Zoltán Szőgyényi for Themesberg

Posted on • Originally published at themesberg.com

Show dev: free Django dashboard admin template

Django Volt is an open-source seed project crafted with a database, session-based authentication, basic helpers, and deployment scripts on top of Volt Bootstrap 5 design.

Django Dashboard Template

The codebase has a simple, modular structure that follows the industry best practices and patterns used in modern Python-based applications. For newcomers, Django is the most popular Python-based web framework mostly for the "batteries-included" concept and the built-in security pattern provided by experts.

Django Codebase

The product can be used to start a new project by coding only the specific features on top or integrate the design into a legacy Python-based product.

The design is already production-ready with pages and components compatible with the Django template engine. Being a simple starter, any developer with basic Python knowledge should be able to compile and use the app by typing only a few lines in the terminal.

You can learn more about getting started with the Django codebase by reading our documentation.

Powered by Bootstrap 5

Volt is built using the latest version of Bootstrap 5 and because jQuery is no longer required as a dependency, Volt has been built using only Vanilla JS.

There are over 100 unique Bootstrap 5 UI elements that are included in the template, such as buttons, alerts, modals, and many more. Not only that, but there are also 10 unique dashboard pages that will make setting up a quick administration or web app UI easier.

You can explore all of the examples of UI elements by browsing the documentation.

Compile the product

To compile the product and use it locally, Python3 should be installed and accessible via the terminal. The source code can be downloaded from the official repository or downloaded in ZIP format from the product page.

Download the sources and unzip the archive

cd django-dashboard-volt
Enter fullscreen mode Exit fullscreen mode

Create a virtual environment

virtualenv env
$ source env/bin/activate
Enter fullscreen mode Exit fullscreen mode

Install modules

pip3 install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

Create the tables by running a Django migration

python manage.py makemigrations
$ python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

Start the application

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

If all goes well, we can access Django Volt 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.

Django Volt - Open-source seed project provided by Themesberg and AppSeed.

Codebase structure

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

< PROJECT ROOT >
   |
   |-- core/                        # Implements app logic and serve the static assets
   |    |-- settings.py         # Django app bootstrapper
   |    |-- static/
   |    |-- templates/          # Templates used to render pages
   |         |-- includes/        # HTML chunks and components
   |         |-- layouts/         # Master pages
   |         |-- accounts/      # Authentication pages
   |         |
   |      index.html             # The default page
   |       *.html                    # All other HTML pages
   |
   |-- authentication/       # Handles auth routes (login and register)
   |-- app/                         # A simple app that serve HTML files
   |
   |-- requirements.txt     # Development modules - SQLite storage
   |-- .env                          # Inject Configuration via Environment
   |-- manage.py              # Start the app - Django default start script
   |
   |-- ************************************************************************
Enter fullscreen mode Exit fullscreen mode

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

Deployment

The app is provided with a basic configuration to be executed in Docker, a popular virtualization software.
To start the project inside a Docker container, please type following commands:

1# - UNZIP the archive and change the curent directory

cd django-dashboard-volt
Enter fullscreen mode Exit fullscreen mode

2# - Download the required packages

sudo docker-compose pull
Enter fullscreen mode Exit fullscreen mode

3# - Build the Docker packages

sudo docker-compose build
Enter fullscreen mode Exit fullscreen mode

4# - Start the dokerized application

sudo docker-compose up
Enter fullscreen mode Exit fullscreen mode

By visiting http://localhost:5005 in the browser we should see the app running.

This template was created in partnership with the AppSeed App Generator.

Top comments (4)

Collapse
 
sm0ke profile image
Sm0ke

The design is super nice and distinct.
Thanks for sharing!

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Thank you 🙏🏻

Collapse
 
crearesite profile image
WebsiteMarket

Docker scripts make the deployment much easier.
Thanks for sharing this project.

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Thank you 🙏🏻