This article presents a simple Flask Dashboard starter coded on top of a beautiful Material Dashboard design released under the MIT license by Creative-Tim.
The project is actively versioned and supported via Github and Discord and being a tested starter it might help you to start fast a new dashboard project.
Thanks for reading!
- Flask Dashboard - Material Design - Product page
- Flask Dashboard Material Demo - Something to click on
- Flask Material PRO - Premium version with LIVE support
Material Dashboard - UI Kit
Vendor Notes (Creative-Tim) - Material Dashboard is a free Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard was built over the popular Bootstrap 4 framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements.
Material Dashboard makes use of light, surface, and movement. The general layout resembles sheets of paper following multiple different layers so that the depth and order are obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.
What is Flask
Intro for newcomers - Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. Classified as a microframework, Flask is written in Python and it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.
Flask can be used for a wide range of apps, from super simple one-page websites to complex eCommerce solutions or API servers. Here are some nice Flask freebies
- Flask App - IraDesign - MIT License, simple app
- Flask Pixel UI Kit - just another Flask freebie (MIT license)
- Flask Dashboard - Black Design - A simple dashboard, also free
The starter uses a simple, standardized codebase that aims to be simple and easy to extend by many developers, despite their skills level - Features:
- UI-ready, Jinja2 templating
- Modular design with Blueprints
- SQLite/PostgreSQL databases, ORM, Alembic for migrations
- Session-based authentication via Flask-Login
- Deployment scripts: Docker, Gunicorn / Nginx, Heroku
Being a super simple starter, anyone with basic programming and Flask knowledge can add more features with ease. Let's say a few words about the codebase:
Starter uses a simple codebase with two Blueprints, with a structure presented below:
< PROJECT ROOT > | |-- app/ # Implements app logic | |-- base/ # Base Blueprint - handles Login | |-- home/ # Home Blueprint - serve UI pages | | | __init__.py # Initialize the app | |-- requirements.txt # Development modules | |-- .env # Inject Configuration |-- config.py # Set up the app |-- run.py # Start the app - WSGI gateway |
The first step is to download the code locally. We can use the GIT command tool (recommended way) or just download the ZIP archive from Github. After we get the code, the next step is to install the modules using PIP, the package installer.
$ # Get the code $ git clone https://github.com/app-generator/flask-material-dashboard.git $ cd flask-material-dashboard $ $ # Virtualenv modules installation $ virtualenv --no-site-packages env $ source env/bin/activate $ $ # Install modules - SQLite Database $ pip3 install -r requirements.txt $ $ # Set the FLASK_APP environment variable $ export FLASK_APP=run.py $ $ # Start the application (development mode) $ flask run $ $ # Access the dashboard in browser: http://127.0.0.1:5000/
By default, the app is not provided with default users, and to unlock the private pages we need to register a new user first.
Flask Dashboard Material - User profile
As mentioned, the starter is actively supported and versioned by the AppSeed core team. The app will be updated if the UI kit provider (Creative-Tim) pushes a release or the reference codebase is updated (bug-fixes or improvements).
- Support via Github - in case someone finds a bug
- Support via Discord - 24/7 LIVE service
Thanks for reading! Let me know your thoughts in the comments.