loading...
Cover image for How I’ve built 300+ open-source projects with automation tools

How I’ve built 300+ open-source projects with automation tools

sm0ke profile image Sm0ke Updated on ・7 min read

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 for reading! All starters mentioned in this article can be downloaded from AppSeed (no account required).


A shortlist with DEMOs, as they appear in the animated presentation:


300+ open-source projects with automation tools - Animated Demo.


Latest Generated Product - 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 Dashboard Datta Able - Open-Source Admin Panel Coded in Django.


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 normalized across 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 on Github - Flask Dashboards


Flask Dashboard - Black, main dashboard screen.


Django Dashboards

The full index published on Github - Django Dashboards


Django iDashboard - Free product, main dashboard screen.


SSG projects

The full index published on Github - Static Sites


Eleventy - Html5Up Ethereal, sample project generated by AppSeed.


Flask Web Apps

The full index published on Github - Flask Apps


Flask Pixel UI Kit - Open-source starter generated by AppSeed.


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 Template - Boomerang UI Kit by


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.

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

pic
Editor guide
 

Really nice article! Thanks for sharing this man ..

 

Glad you like it. :)

 

Wow awesome stuff and nice breakdown.

 

Thank you! :)
Btw, you write some nice articles.

 

Thanks alot :) I love yours as well :)

 

Wow super article! Thanks for sharing!

 

Thank you for reading!

 
 

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!

 

Awesome article. 🙂

 

Thank you!

 
 

Thank you!

 

Whoa reading this gave me some ideas for future Python projects.