Hello Coders,
One year ago I wrote a short article about my workflow used for simple projects: How I’ve built 100+ open-source apps with automation tools. The article got some attention here on Dev (20k+ views) and also was translated and published on HABR, a popular Russian platform.
In this article, the PART-II of the whole story, I would like to say just a few more words about my R&D work on this amazing (automation) field that helped me to build in the last 12 months 200+ open-source starters plus 100 commercial products used by many developers across the globe.
Thank you! Content provided by App Generator.
A shortlist with DEMOs, as they appear in the animated presentation:
- Django Datta Able - A simple Flask Dashboard
- Eleventy Ethereal - Free 11ty starter
- Flask Pixel Lite - Multipurpose app with accessibility-first UI
- Django Dashboard Argon - a minimal Django dashboard
- Flask Webpixels - Free app with nice illustrations
- Django Corona Admin - Dark-soul, COVID-19 free dashboard
Latest Dashboard - Django Datta Able
Admin Dashboard generated by the AppSeed platform in Django Framework on top of Datta Able, a modern Bootstrap 4 dashboard template. The Django codebase is provided with authentication, database, ORM, and deployment scripts.
- Django Datta Able - product page
- Django Datta Able Demo - LIVE Deployment
Latest Web App - Soft UI Flask
Soft UI Design System is a modern Bootstrap 5 UI Kit designed by Creative-Tim designed for those who like bold elements and beautiful websites. Soft UI Design System Flask is a simple Flask starter provided by AppSeed with a modular codebase, database, authentication, and deployment scripts.
- Soft UI Flask - product page
- Soft UI Flask - Demo - LIVE Deployment
The basic idea
After coding ~50 simple projects in different frameworks like CodeIgniter, Laravel, Flaks, Django, Express I saw a few common patterns across all technologies and realize that I can use tools instead of manual work to speed up a little bit my work and the repetitive tasks across projects. Some time-consuming tasks for me at that moment:
Prepare the design to be development-ready
Usually, the design chosen by the client is delivered in flat HTML form with a few pre-built pages, quite far away to be used in any framework.
Project configuration and structure
Database access, codebase structure.
Common modules
Authentication and basic helpers to manipulate time, working with files, a simple REST maybe (not so often).
Deployment Configuration
Most of the clients were not aware of this part but 25% ask for specific platforms.
To optimize the workflow and spend less time on each phase I decided to split my work in two:
1# - HTML files processing
To prepare the design for production and transform the flat HTML to usable components I wrote an HTML parser using Python that looks like a console able to perform tasks like:
- Load an entire directory (HTML theme)
- Compare pages (DOM Tree) and detect the common parts like footer, sidebar, top menu, and common content area
- Extract master pages (common layouts) for later use
- Extract components to be used in Php, Jinja, Blade, or Nunjunks.
- Assets management - paths for images, JS, and CSS are
normalizedacross all files to be loaded from standard paths/static/assets/{js, CSS, images}.
Once this phase is complete, usually takes max 2h or less per design, I can move forward and inject the development ready files into simple starters already pre-build with the database, ORM, basic helpers, and deployment scripts for well-known technologies: Docker, Gunicorn, HEROKU.
2# - Codebase Injection
The starters coded in Flask, Django, Nodejs/Express, and 11ty are fairly simple, just to help me to add new features with ease. Not all clients require Stripe in their projects and sometimes SQLite might be enough for a low budget project with low monthly traffic.
Of course, the required modules/features depends on the project, but I prefer to keep things super simple and adding new & tech trendy stuff only when is the case. What I put in all starters despite the technology:
- Modular codebase for a super easy maintenance
- Dual DB configuration: SQLite/PostgreSQL (for heavy projects)
- DB Tools: a decent ORM and tools for DB Migration
- Session-based authentication (login, register)
- Deploy scripts for Docker, Gunicorn, HEROKU.
This phase consists of copy the files produced in phase #1 and
add basic functionalities in forms mostly:
- CSRF tokens (syntax is different in Flask, Django, etc ..)
- Generate authentication forms using CSS classes used in the UI kit
- Generate common pages required by the codebase: blank page starter, Error pages (404, 500, 403).
- Inject brand footprint (links & name) in page titles, footer and sometimes in sidemenu
Final products
All 300+ open-source projects are released under permissive licenses (MIT, LGPL) and cand be used for unlimited hobby & commercial projects directly from Github.
I will present bellow only a few from each category, for full index feel free to access the Github repository or visit the AppSeed platform.
As a rule, I will start with the most popular ones.
Flask Dashboards
The full index published here: Flask Dashboards
- Flask Dashboard - Datta Able - product page
- Flask Dashboard - Black - product page
- Flask Dashboard - Volt - product page
- Flask - Star Admin - product page
Django Dashboards
The full index published here: Django Dashboards
- Django Dashboard - Volt - product page
- Django Material - product page
- Django Light Design - product page
- Django Atlantis Dark - product page
- Django Star Admin - product page
Static Sites
The full index published here: Static Sites
- Eleventy - Html5Up Ethereal - product page
- Eleventy - Html5Up Paradigm - product page
- Eleventy - Html5Up Highlights - product page
Flask Apps
The full index published here: Flask Apps
- Flask Pixel UI Kit - product page
- Flask IraDesign - product page
- Flask Paper Kit - product page
- Flask Webpixels - product page
Jinja Templates
The products from this category are not so production-ready being coded in a super lightweight Flask codebase (no database or hard dependencies) but .. might be useful based on the huge similarities between Jinja and other template engines like Ejs, Liquid, Django template engine, Blade (Laravel) or Nunjunks.
This transition can be done with minor modifications and the design can be used in Nodejs (any Framework), Laravel, CodeIgniter, 11ty.
- Jinja Quick UI (sources) - LIVE Demo
- Jinja Paper Dashboard (sources) - LIVE Demo
- Jinja Sb Admin (sources) - LIVE Demo
- Jinja Boomerang UI (sources) - LIVE Demo
- Jinja AdminT (sources) - LIVE Demo
Thank you for reading such a long article.
The automated workflow helped me to deliver much faster small projects, sometimes two in a single day, just by reusing boilerplate code and parsing/converting the HTML files into development-ready components for different frameworks.
My (nick)name is Sm0ke and I'm pretty active also on Twitter and Discord. Let me know your thoughts in the comments.
Top comments (22)
Wow awesome stuff and nice breakdown.
Thank you! :)
Btw, you write some nice articles.
Thanks alot :) I love yours as well :)
Really nice article! Thanks for sharing this man ..
Glad you like it. :)
Wow super article! Thanks for sharing!
Thank you for reading!
Nice one!
Thank you!
What is the situation with Copyright? I would like to use some of the dashboards for presentation of some of my projects like fire drone detection that I might choose to monetise later
oh ok I see that most of them are MIT licensed.
Yep .. 75% at least are MIT Licensed.
MIT means you can use for unlimited hobby & commercial products.
Full information here: AppSeed MIT License
You can use the starters for commercial projects.
We have an R&D worrior here.
Keep us inform regarding your work. Sounds like something useful for many devs.
Thank you!
Whoa reading this gave me some ideas for future Python projects.
Awesome article. 🙂
Thank you!
Cool stuff.
Thank you!
Wow! That's amazing. Thanks for sharing!
Thank you!