loading...
Cover image for Admin Dashboards - Built with automation developer tools

Admin Dashboards - Built with automation developer tools

sm0ke profile image Sm0ke Updated on ・5 min read

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!


In case you want to start faster your next admin dashboard project check out this index with Open Source Admin Dashboards already coded with authentication, database, and deploy scripts - Provided by AppSeed.


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:

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

Flask Dashboard Black - Open-Source Admin Dashboard


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

Django Dashboard Black - Open-Source Admin Dashboard


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


Thank you!

Discussion

pic
Editor guide
Collapse
ngtan95 profile image
Lê Ngọc Tấn

Sorry! How to view database in this application, and what the user name and password default after run app?

Collapse
sm0ke profile image
Sm0ke Author

Hello and thank you for noticing the article.
Just create a new user using the registration form. There is no default user, and the database is SQLite.
Let me know if you have any issues.

Collapse
ngtan95 profile image
Lê Ngọc Tấn

OK, thanks!
It is awesome!

Thread Thread
sm0ke profile image