DEV Community

loading...
Cover image for Bootstrap 5 Template - Volt Dashboard coded in Flask

Bootstrap 5 Template - Volt Dashboard coded in Flask

sm0ke profile image Sm0ke Updated on ・3 min read

Hello Coders,

This article presents a simple seed project coded in Flask on top of a modern Bootstrap 5 Template - Volt Dashboard by Themesberg. The project has some nice features that might help developers to start fast a new project at no costs:

  • Open-source, MIT license (unlimited copies are allowed)
  • Coded in Bootstrap 5 (latest version)
  • Pure Vanilla JS - no jQuery dependency
  • Flask codebase comes with authentication, database, modular design
  • 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 Volt Dashboard - User Page

Flask Volt Dashboard - User Page.


Flask Volt Dashboard - UI Alerts

Flask Volt Dashboard - UI Alerts Page.


Flask Volt Dashboard - 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.


Well, that was all folks! Let me know your thoughts in the comments, even a simple hello.
Btw, my (nick)name is Sm0ke and I've built AppSeed, a platform used by 2k+ developers.

Thank you!

Discussion (1)

pic
Editor guide
Collapse
zolidev profile image
Zoltán Szőgyényi

Awesome ❤️