JAMstack - 40+ Open-Source apps generated with tools

#jamstack #automation #appseed

Hello coders,

In this article, I will present an automatized workflow used to release 40+ JAMstack open-source apps generated on top of existing designs crafted by well-known web design agencies (Creative-Tim, HTML5Up and Pixelarity ).
I decided to build an automation workflow, based on my freelancing experience from the last two years, mostly based on the feedback and clients requirements:

The clients constantly require a variety of designs to choose from
Apps should be delivered in modern technologies
Legacy apps migration to newer technologies using low budgets

Thank you! Content provided by App Generator.

To solve all those problems and challenges I've built a semi-automated workflow:

Parse the flat HTML design with component extraction and translation to various template engines (Jinja2, PUG, Blade, Php native .. etc)
Inject the processed design into existing boilerplates (Php, Python, Javascript, JAMstack, NodeJS)
Execute automatically a minimum set of tests

Using this workflow, only for Php apps at the beginning, I discovered a huge similarity when I decided to build JAMstack apps or Python apps. The initial phase was identical for the generation process for all technologies, only the injection phase was slightly different, but not much.

Note: The HTML parser tool is explained in a previous article.

All JAMstack apps generated using this process are open-source, published on Github, 7 apps are free and 35 are commercial. The numbers, based on the design providers are:

Creative-Tim - 4 apps released under the MIT license
HTML5 Up - 3 apps with CCA 3.0 License
Pixelarity apps - 35 - commercial license

What is JAMstack

A short note for newcomers, JAMstack stands for JavaScript, APIs, and Markup. The term was coined by Mathias Biilmann to describe a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

Eleventy Soft UI

Eleventy Soft UI is an Eleventy adaptation of Soft UI Design System (a user-friendly and beautiful design system based on Bootstrap 5), including a Blog system that uses Prismic CMS for content management. Soft UI Design System is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. All components can take variations in color, which you can easily modify using SASS files and classes.