DEV Community

Cover image for Flask Bootstrap 5 - Volt Dashboard (free)
Sm0ke
Sm0ke

Posted on • Edited on

Flask Bootstrap 5 - Volt Dashboard (free)

Hello Coders,

This article presents an open-source Flask Bootstrap 5 seed project crafted with basic modules on top of Volt Dashboard, a modern jQuery-free design. For newcomers, Flask is a lightweight web application framework written in Python. Sometimes classified as a microframework, Flask provides a lightweight codebase that can be easily extended to become an API, a simple web app, or a complex eCommerce platform.


Project Features

  • Open-source, MIT license (unlimited copies are allowed)
  • Coded in Bootstrap 5
  • Pure Vanilla JS - no jQuery dependency
  • Flask codebase: authentication, database, ORM
  • Deployment-ready for Docker, HEROKU, Gunicorn/Nginx
  • Active support via Discord provided by AppSeed


Bootstrap 5 Template Volt - coded in Flask with basic modules by AppSeed.


Bootstrap 5 - Latest changes

Bootstrap is one of the most popular front-end frameworks that provided in the latest version some interesting updates:

  • Dependency updates - jQuery and Popper.js replaced with pure Vanilla JS. One of the major reasons for dropping jQuery was to redefine the framework completely on modern JavaScript standards.
  • Legacy Internet Explorer versions (10,11) are no longer supported.
  • Responsive Fonts - The viewport will dictate the size of the font.

Volt Dashboard includes already all these enhancements and provides on top some really nice features. For more information about Bootstrap 5 new features please access:

Bootstrap 5 release date and what's new about it provided by Themesberg team


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

Flask Bootstrap 5 - User Page

Flask Volt Dashboard - User Page.


Flask Bootstrap 5 - UI Alerts

Flask Volt Dashboard - UI Alerts Page.


Flask Bootstrap 5 - 404 Page

Flask Volt Dashboard - 404 Error Page.


Volt Dashboard - Flask Codebase

The codebase that animates and makes usable this nice design is provided by AppSeed. Basic features like authentication, database setup, forms validation, deployment scripts are tested and production-ready.

App Features - list extracted from the README file

  • DBMS: SQLite, PostgreSQL (production)
  • DB Tools: SQLAlchemy ORM, Alembic (schema migrations)
  • Modular design with Blueprints
  • Session-Based authentication (via flask_login), Forms validation
  • Deployment scripts: Docker, Gunicorn / Nginx, Heroku

In case any of you decide to use this seed project, the app can be compiled with just a few commands typed in a terminal window.

Clone the sources

$ git clone https://github.com/app-generator/flask-dashboard-volt.git
$ cd flask-dashboard-volt
Enter fullscreen mode Exit fullscreen mode

Install modules

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

Start the app

$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ # Start the application (development mode)
$ flask run
Enter fullscreen mode Exit fullscreen mode

Once the app starts, we need to create a new user and authenticate it.


Thanks for reading! For more resources, feel free to access:

Top comments (1)

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

Awesome ❤️