Flask Black Dashboard - A nice playground for beginners

Hello Coders!

This article presents a simple seed project crafted in Flask on top of a nice dark-themed Bootstrap 4 design: Black Dashboard. The project might be useful for beginners for eLearning purposes or simply to start a new hobby or commercial project on top. The source code can be downloaded from Github and used in unlimited end-products.

Thanks for reading! For support or new features suggestion, feel free to leave a message in the comments section.

• ✨ Flask Black Dashboard - LIVE Demo
• ✨ Flask Black Dashboard - source code

App Features

In order to be useful, this simple starter comes with a few basic features, a clean codebase and deployment scripts in case anyone decides to go LIVE.

• 👉 Up-to-date dependencies: Flask 2.0.1
• 👉 SCSS compilation via Gulp
• 👉 DBMS: SQLite, PostgreSQL (production)
• 👉 DB Tools: SQLAlchemy ORM, Flask-Migrate (schema migrations)
• 👉 Modular design with Blueprints, simple codebase
• 👉 Session-Based authentication, Forms validation
• 👉 Deployment scripts: Docker, Gunicorn / Nginx, Heroku

The product can be compiled and started in a local workstation in two ways:

• 1#) Download the sources, install modules manually and start the app
• 2#) Via Docker - whole set up is automatized

In the next sections, I will execute both builds

Manual Build

In order to have a successfull build, a minimal programming kit is required: Python3, GIT and a decent code editor like VsCode or Atom to edit the sources. Let's go!

Step #1 - Download sources from the public repository

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

Step #2 - Install modules using a virtual environment

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

Step #3 - Set up the environment

$ (Unix/Mac) export FLASK_APP=run.py
$ (Windows) set FLASK_APP=run.py
$ (Powershell) $env:FLASK_APP = ".\run.py"

Step #4 - Start the app

$ flask run

At this point, we should see the app runnign in the browser http://127.0.0.1:5000/

Docker Set Up

The 2nd option to start the app is via Docker, a popular virtualization software that isolate the build and the execution inside our workstation.

Step #1 - Download sources from the public repository

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

Step #2 - Start in Docker

$ docker-compose pull   # download modules
$ docker-compose build  # local set up
$ docker-compose up     # start the app 

Once all the above commands are executed, we should see Flask Dashboard Black running in the browser http://localhost:85.

Flask Black Dashboard - Light Mode

From this point, the product can be extended to support more features like an API or LIVE charts with the information served from the database.

Thanks for reading! For more resources, please access:

• More Free Dashboards - crafted in Flask, Django and React
• Flask Material Dashboard - open-source starter