• Stars
    star
    183
  • Rank 210,154 (Top 5 %)
  • Language
    CSS
  • License
    Other
  • Created about 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Flask Bootstrap 5 - Volt Dashboard | AppSeed

Volt Dashboard Flask

Open-Source Flask Dashboard generated by the AppSeed platform with basic modules, database, authentication and deployment scripts on top of Volt Dashboard (free version). Volt Dashboard is a free and open source Bootstrap 5 dashboard template featuring over 100 components, 11 example pages and 3 plugins with Vanilla JS. There are more than 100 free Bootstrap 5 components included some of them being buttons, alerts, modals, datepickers and so on.


๐Ÿš€ Built with App Generator, timestamp 2022-06-23 18:20

  • โœ… Up-to-date dependencies
  • โœ… Database: SQLite, MySql
    • Silent fallback to SQLite
  • โœ… DB Tools: SQLAlchemy ORM, Flask-Migrate
  • โœ… Authentication, Session Based, OAuth via Github
  • โœ… Docker, Flask-Minify (page compression)
  • ๐Ÿš€ Deployment
    • CI/CD flow via Render

Volt Dashboard - Full-Stack Starter generated by AppSeed.


โœจ Quick start in Docker

๐Ÿ‘‰ Step 1 - Download the code from the GH repository (using GIT)

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

๐Ÿ‘‰ Step 2 - Start the APP in Docker

$ docker-compose up --build 

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


โœจ Video Presentation

flask-volt-dashboard-intro.mp4

โœจ Create a new .env file using sample env.sample

The meaning of each variable can be found below:

  • DEBUG: if True the app runs in develoment mode
    • For production value False should be used
  • ASSETS_ROOT: used in assets management
    • default value: /static/assets
  • OAuth via Github
    • GITHUB_ID=<GITHUB_ID_HERE>
    • GITHUB_SECRET=<GITHUB_SECRET_HERE>

โœจ Manual Build

Download the code

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

๐Ÿ‘‰ Set Up for Unix, MacOS

Install modules via VENV

$ virtualenv env
$ source env/bin/activate
$ pip3 install -r requirements.txt

Set Up Flask Environment

$ export FLASK_APP=run.py
$ export FLASK_ENV=development

Start the app

$ flask run
// OR
$ flask run --cert=adhoc # For HTTPS server

At this point, the app runs at http://127.0.0.1:5000/.


๐Ÿ‘‰ Set Up for Windows

Install modules via VENV (windows)

$ virtualenv env
$ .\env\Scripts\activate
$ pip3 install -r requirements.txt

Set Up Flask Environment

$ # CMD 
$ set FLASK_APP=run.py
$ set FLASK_ENV=development
$
$ # Powershell
$ $env:FLASK_APP = ".\run.py"
$ $env:FLASK_ENV = "development"

Start the app

$ flask run
// OR
$ flask run --cert=adhoc # For HTTPS server

At this point, the app runs at http://127.0.0.1:5000/.


๐Ÿ‘‰ Create Users

By default, the app redirects guest users to authenticate. In order to access the private pages, follow this set up:

  • Start the app via flask run
  • Access the registration page and create a new user:
    • http://127.0.0.1:5000/register
  • Access the sign in page and authenticate
    • http://127.0.0.1:5000/login

โœจ Code-base structure

The project is coded using blueprints, app factory pattern, dual configuration profile (development and production) and an intuitive structure presented bellow:

< PROJECT ROOT >
   |
   |-- apps/
   |    |
   |    |-- home/                           # A simple app that serve HTML files
   |    |    |-- routes.py                  # Define app routes
   |    |
   |    |-- authentication/                 # Handles auth routes (login and register)
   |    |    |-- routes.py                  # Define authentication routes  
   |    |    |-- models.py                  # Defines models  
   |    |    |-- 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
   |    |    
   |  config.py                             # Set up the app
   |    __init__.py                         # Initialize the app
   |
   |-- requirements.txt                     # App Dependencies
   |
   |-- .env                                 # Inject Configuration via Environment
   |-- run.py                               # Start the app - WSGI gateway
   |
   |-- ************************************************************************

PRO Version

For more components, pages and priority on support, feel free to take a look at this amazing starter:

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.

  • ๐Ÿ‘‰ Flask Volt PRO - product page
    • โœ… Enhanced UI - more pages and components
    • โœ… Priority on support

Volt Dashboard PRO - Starter generated by AppSeed.



Volt Dashboard Flask - Open-source starter generated by App Generator.

More Repositories

1

django-datta-able

Datta Able - Open-Source Django Dashboard | AppSeed
CSS
539
star
2

admin-dashboards

Admin Dashboards - Open-Source and Free | AppSeed
358
star
3

flask-black-dashboard

Flask Black Dashboard - Open-source seed project | AppSeed
CSS
313
star
4

free-site-builder

Free Site Builder - Open-Source Tool | Simpllo
HTML
300
star
5

django-black-dashboard

Django Dashboard Black - Open-source Seed Project | AppSeed
CSS
266
star
6

django-admin-dashboards

Django Dashboards - Admin Panels coded in Django | AppSeed
257
star
7

flask-adminlte

AdminLTE Flask - Open-source Seed Project | AppSeed
JavaScript
241
star
8

api-server-nodejs

Nodejs API Server - Express / SQLite / TypeORM | AppSeed
TypeScript
227
star
9

django-volt-dashboard

Django Bootstrap 5 - Volt Dashboard | AppSeed
Python
216
star
10

react-soft-ui-dashboard

React Dashboard - Soft UI Dashboard | AppSeed
JavaScript
206
star
11

django-material-dashboard

Django Dashboard - Material Design | AppSeed
CSS
198
star
12

flask-material-dashboard

Flask Dashboard - Material Design | AppSeed
SCSS
178
star
13

flask-datta-able

Datta Able - Open-Source Flask Dashboard | AppSeed
CSS
178
star
14

flask-soft-ui-dashboard

Soft UI Dashboard - Open-source Flask Dashboard | AppSeed
SCSS
175
star
15

django-adminlte

AdminLTE Django - Open-source seed project | AppSeed
Python
171
star
16

django-soft-ui-dashboard

Soft UI Dashboard - Open-source Django Dashboard | AppSeed
SCSS
171
star
17

django-admin-volt

Django Admin Volt - Free template for Django Admin Interface | AppSeed
CSS
144
star
18

django-react-soft-dashboard

Django React - Soft UI Dashboard (Free Product) | AppSeed
Python
134
star
19

flask-argon-dashboard

Flask Dashboard - Argon Design | AppSeed
SCSS
133
star
20

rocket-django

Rocket Django - Free Starter styled with Tailwind/Flowbite | AppSeed
HTML
132
star
21

flask-atlantis-dark

Atlantis Lite - Flask (Dark Version) | AppSeed
HTML
128
star
22

django-argon-dashboard

Argon Dashboard - Open-Source Django Seed Project | AppSeed
Python
122
star
23

flask-apps

Flask Apps - Open-Source And Paid | AppSeed
120
star
24

django-atlantis-dark

Django Dashboard - Atlantis Lite (Dark Version) | AppSeed
Python
117
star
25

api-server-flask

Flask API Server - Open-Source API Server | AppSeed
Python
102
star
26

flask-pixel

Flask Pixel UI Kit - Open-Source web app coded in Flask | AppSeed
CSS
100
star
27

jinja-template

Jinja Template - Free & commercial projects | AppSeed
97
star
28

ecommerce-fastapi-stripe

FastAPI Stripe Sample - Soft UI Design (Free Sample) | AppSeed
HTML
87
star
29

sample-django-extended-user-profile

Django User Profile - Open-source Django Sample | AppSeed
CSS
87
star
30

flask-paper-kit

Flask Boilerplate - Paper Kit Design | AppSeed
SCSS
86
star
31

django-coreui

CoreUI - Django Dashboard (Free Product) | AppSeed
HTML
84
star
32

sample-django-datatables

Django - Datatables Sample | AppSeed
CSS
83
star
33

django-pixel

Django Pixel UI Kit - Open-Source Django Starter | AppSeed
HTML
78
star
34

bulmaplay

Flask/Jinja Starter - BulmaPlay (Styled with Bulma CSS) | AppSeed
JavaScript
74
star
35

gatsbyjs-starter-tailwindplay

GatsbyJS Tailwind Starter - TailwindPlay
JavaScript
70
star
36

django-soft-ui-design

Soft UI Design System - Django Starter | AppSeed
HTML
69
star
37

django-admin-black

Django Admin Black - Free template for Django Admin Interface | AppSeed
CSS
66
star
38

react-purity-dashboard

React Dashboard - Purity UI Dashboard | AppSeed
JavaScript
65
star
39

tailwind-css-components

Tailwind CSS Components - Free and Open-Source Tailwind Components | AppSeed
Pug
61
star
40

flask-gradient-able

Gradient Able - Open-Source Flask Dashboard | AppSeed
CSS
60
star
41

react-datta-able

React Node JS - Datta Able (Free Product) | AppSeed
SCSS
58
star
42

flask-light-bootstrap

Flask Dashboard - Light Bootstrap | AppSeed
HTML
58
star
43

ecommerce-django-stripe

Django Stripe Sample - Soft UI Design (Free Sample) | AppSeed
HTML
58
star
44

flask-dashboard-modular-admin

Flask Dashboard - Modular Admin Design | AppSeed
CSS
57
star
45

react-horizon-ui-chakra

React Horizon UI - Full-Stack Open-Source Starter | AppSeed.us
JavaScript
57
star
46

django-material-kit

Django Boilerplate - Material Kit Design | AppSeed
HTML
56
star
47

tutorial-flask

Flask Tutorial - Learn to code in Flask | AppSeed
55
star
48

flask-dashboard-gradientable

Gradient Able - Open-Source Flask Dashboard | AppSeed
CSS
55
star
49

django-star-admin

Star Admin - Open-Source Django Dashboard | AppSeed
Python
52
star
50

ecommerce-flask-stripe

Flask Stripe Sample - Soft UI Design (Free Sample) | AppSeed
HTML
52
star
51

flask-bulma-css

Flask App - Styled with Bulma | AppSeed
CSS
50
star
52

react-flask-authentication

React Flask Authentication - Open-Source Full-stack Project | AppSeed
Python
50
star
53

flask-material-kit

Flask Boilerplate - Material Kit Design | AppSeed
SCSS
50
star
54

flask-corona-dark

Flask Dashboard - Corona Dark Design | AppSeed
CSS
48
star
55

jamstack

JAMstack - Paid and Open-Source Boilerplate code | AppSeed
45
star
56

flask-now-ui-dashboard

Flask Dashboard - Now UI Design | AppSeed
SCSS
45
star
57

django-dynamic-datatb

Django Dynamic Datatables - Open-Source Library | AppSeed
JavaScript
43
star
58

django-soft-dashboard-tailwind-old

Django Soft UI Dashboard - Tailwind CSS (Open-Source) | AppSeed
HTML
43
star
59

app-generator

App Generator - Deliver your projects faster | AppSeed
42
star
60

django-admin-argon-dashboard

Django Admin Argon Dashboard - Open-Source PyPi Library | AppSeed
CSS
42
star
61

html-parser

Html Parser - Html to Pug, Jinja2, Blade Converter | AppSeed
CSS
42
star
62

api-server-django

Django API Server - Open-Source API Server | AppSeed
Python
41
star
63

django-tabler

Django Dashboard - Tabler Design | AppSeed
Python
41
star
64

flask-soft-ui-design

Soft UI Design System - Flask Starter | AppSeed
HTML
39
star
65

fastapi-soft-ui-dashboard

FastAPI Soft Dashboard - Open-Source Starter | AppSeed
SCSS
39
star
66

django-admin-soft-dashboard

Django Admin Soft - Free template for Django Admin UI | AppSeed
SCSS
37
star
67

django-api-generator

API Generator for Django - Open-Source Library | AppSeed
Python
37
star
68

vuejs-argon-design-system

Vuejs Argon Design - Built with Automation Tools | AppSeed App Generator
Vue
37
star
69

flask-admin-dashboards

Flask Dashboards - Admin Panels coded in Flask | AppSeed
36
star
70

flask-adminator

Flask Dashboard - Adminator Design | AppSeed
JavaScript
36
star
71

laravel-react-purity-dashboard

React Laravel - Purity Dashboard (Open-Source) | AppSeed
PHP
36
star
72

django-adminator

Django Dashboard - Adminator Design | AppSeed
JavaScript
34
star
73

flask-coreui

CoreUI - Flask Dashboard (Free Product) | AppSeed
HTML
33
star
74

flask-star-admin

Star Admin - Open-Source Flask Dashboard | AppSeed
CSS
33
star
75

bulma-css

Bulma CSS - Open-source components | AppSeed
TypeScript
32
star
76

django-gradient-able

Gradient Able - Open-Source Django Dashboard | AppSeed
HTML
31
star
77

jinja-soft-ui-dashboard-old

Jinja Template - Soft UI Dashboard | AppSeed
SCSS
30
star
78

django-dashboard-shards

Django Dashboard - Shards Design | AppSeed
CSS
30
star
79

gatsbyjs

GatsbyJS - Paid and Open-Source Starters | AppSeed
30
star
80

django-admin-material-dashboard

Django Admin Material Dashboard - Open-Source PyPi Library | AppSeed
CSS
29
star
81

eleventy-soft-ui-design

Eleventy (11ty) - Soft UI Design | AppSeed
Nunjucks
27
star
82

django-react-purity-dashboard

Django React - Purity Dashboard (Open-Source) | AppSeed
Python
27
star
83

flask-sb-admin

Flask Dashboard - SB Admin | AppSeed
SCSS
26
star
84

jinja-paper-dashboard

Jinja Template - Paper Dashboard | AppSeed
CSS
26
star
85

fullstack-flask-react-material-design

Flask React - Built with Automation Tools | AppSeed App Generator
26
star
86

flask-illustrations-iradesign

Flask App - Illustrations by IraDesign | AppSeed
JavaScript
25
star
87

flask-dashboard-sleek

Flask Dashboard - Sleek Design | AppSeed
JavaScript
25
star
88

django-sb-admin

Django Dashboard - SB Admin | AppSeed
SCSS
24
star
89

sample-django-charts-argon

Django Argon Charts - Open-source Django Sample | AppSeed
CSS
24
star
90

jinja-adminlte

Jinja Template - AdminLTE Design | AppSeed
JavaScript
24
star
91

flask-react-soft-dashboard

Flask React - Soft Dashboard (Open-source) | AppSeed.us
Python
24
star
92

sample-flask-best-practices

Flask Best Practices for Deployment | AppSeed
Python
24
star
93

django-corona-dark

Django Dashboard - Corona Dark | AppSeed
CSS
23
star
94

flask-tabler

Flask Dashboard - Tabler Design | AppSeed
CSS
23
star
95

sample-django-celery

Django & Celery Integration - Open-Source Sample | AppSeed.us
SCSS
23
star
96

flask-soft-dashboard-tailwind

Flask Soft UI Dashboard - Tailwind CSS (Open-Source) | AppSeed
HTML
23
star
97

sample-django-file-manager

Django File Manager - UI Over the MEDIA Directory | AppSeed
SCSS
22
star
98

flask-neumorphism-uikit

Flask Web App - Neumorphism UI Kit | AppSeed
CSS
22
star
99

fullstack-express-vuejs-argon-design

Express Vuejs - Built with Automation Tools | AppSeed App Generator
22
star
100

jinja-swipe-bootstrap-5

Jinja Template - Swipe One Page Bootstrap 5 | AppSeed
CSS
21
star