Admin Dashboards - Built with automation developer tools

Hello Coders,

In this article, I will present two simple admin dashboards, coded in Python in two different frameworks (Flask and Django) using automation developer tools. The goal is to present a real-life production use-case of using tools as an alternative to the manual coding. Thanks for reading and let me know your thoughts in the comments!

Thank you! Content provided by AppSeed - App Generator.

The motivation

In my freelancing work, usually, the delivered projects are simple web apps coded with a common set of features in different technologies on top of some modern UI Kits (free and commercial). After noticing the repetitive tasks, I decided to build a basic set of tools and a short-list with boilerplate code to speed up my work.

UI Processing

When I start a new project, I usually buy a brand new HTML theme or UI kit suggested by the customer. From this point, I must perform a few steps to prepare the HTML files to become usable in my final project.

• Isolate the assets (images, CSS, javascript) to be used later in builder tools like Webpack, Parcel, Gulp
• Detect the master layouts used to build the pages.
• Extract components, replace the hardcoded texts with real variables. The syntax varies based on the template engine used in the future app. Blade, for instance, has a different syntax than Jinja2 or Django templating.

To solve all the above steps I wrote an HTML parser using BS4 Python library that runs as an interactive console. The tool provides a simple text-based UI that offers a simple set of features:

• load, edit end later save the processed HTML files
• edit elements (p, span, img, anchors) and attributes (class, src for images)
• replace hardcoded texts with real variables used by the template engines
• traverse the DOM, extract nodes/sections as components
• export HTML for various template engines: Jinja, Django native, Blade and Mustache

To explain the parsing process, I've published a few articles here on Dev, related to various HTML parsing topics. Curious minds might learn more about this apparently useless topic, by accessing the below links:

• HTML Parser - Developer Tools
• HTML Parser - Extract HTML information with ease
• HTML Parser - Extract information from a LIVE website

Now back to our story, after processing the UI, the next step is to use the components in a real web application.

The Boilerplate code

To speed up this phase, I'm using simple applications coded with a basic set of features using different frameworks. Because I'm a huge fan of Python language, I've built identical apps, from the features perspective in two frameworks: Flask and Django. The common set of features:

• Session-based authentication flow (login, register)
• Dual database profile: SQLite for local dev and PostgreSQL for production
• ORM, and basic helpers to manipulate the files and time
• Deployment scripts (Gunicorn, Docker)

Automation flow

The HTML parsing phase ends in tho ways: save the translated HTML or inject the components into the boilerplate code and build a real usable web app. The process is not 100% reliable and sometimes I must update the code manually.

The products

The open-source apps built using this workflow uses the Black Dashboard design, a popular and free UI Kit. Both apps share the same feature and are published on Github under the MIT license. If the code-base and the design look appealing to you, don't hesitate to grab the code and use it in a real product.

Flask Dashboard Black

Open-Source Admin Dashboard coded in Flask Framework on top of Black Design dashboard. Features:

• SQLite, PostgreSQL, SQLAlchemy ORM
• Alembic (DB schema migrations)
• Modular design with Blueprints
• Session-Based authentication (via flask_login)
• Forms validation
• Deployment scripts: Docker, Gunicorn
• UI Kit: Black Admin Dashboard provided by Creative-Tim

Build from sources

$ # Get the code
$ git clone https://github.com/app-generator/flask-black-dashboard.git
$ cd flask-black-dashboard
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv --no-site-packages env
$ source env/bin/activate
$ 
$ # Install modules - SQLIte version
$ pip3 install -r requirements-sqlite.txt
$ 
$ # Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=run.py
$ (Windows) set FLASK_APP=run.py
$ (Powershell) $env:FLASK_APP = ".\run.py"
$
$ # Start the application (development mode)
$ flask run 
$
$ # Access the dashboard in browser: http://127.0.0.1:5000/

Django Dashboard Black

Open-Source Admin Panel coded in Django Framework on top of Black Design dashboard. Features:

• SQLite, Django native ORM
• Modular design
• Session-Based Authentication (login, register)
• Forms validation
• UI Kit: Black Admin Dashboard provided by Creative-Tim

Build from sources

$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-black.git
$ cd django-dashboard-black
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv --no-site-packages env
$ source env/bin/activate
$
$ # Install modules - SQLIte version
$ pip3 install -r requirements.txt
$
$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
$
$ # Start the application (development mode)
$ python manage.py runserver # default port 8000
$
$ # Access the web app in browser: http://127.0.0.1:8000/

Using tools, my workflow is somehow simple and less repetitive. Of course, this was possible after coding a stable version of the HTML parser and get the first stable translation of Jinja, Blade, and Mustache components.

The full list with generated web apps using this workflow can be found in this article, published here on Dev: How I’ve built 100+ open-source apps with automation tools

Similar pair apps

• Material Design dashboard, coded in Flask and Django
• NowUI Design - codes in Flask and Django
• Argon Design coded in Flask and Django
• Light Design coded in Flask and Django

Thank you!