DEV Community

Cover image for JAMstack - 40+ Open-Source apps generated with tools

Posted on • Updated on


JAMstack - 40+ Open-Source apps generated with tools

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:

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.

Eleventy Soft UI Design - Open-source SSG starter provided by AppSeed in 11ty on top of Soft UI Design.

JAMstack Paper Kit

MIT License, design by Creative-Tim : demo, sources

JAMstack Paper Kit - Gif animated intro.

JAMstack Argon Design

MIT License - Open Source app built in JAMstack pattern: demo, sources

JAMstack Argon Design - Gif animated intro.

JAMstack BigPicture

CCA 3.0 License, design by HTML5 Up: demo, sources

JAMstack BigPicture - Gif animated intro.

JAMstack Fractal

CCA 3.0 License, design by HTML5 Up: demo, sources

JAMstack Fractal - Gif animated intro.

JAMstack Lens

Commercial License, design by Pixelarity: demo

JAMstack Lens - Gif animated intro.

JAMstack Drift

Commercial License, design by Pixelarity: demo

JAMstack Drift - Gif animated intro.

JAMstack Parallelism

Commercial License, design by Pixelarity: demo

JAMstack Parallelism - Gif animated intro.

JAMstack Reflex

Commercial License, design by Pixelarity: demo

JAMstack Reflex - Gif animated intro.

JAMstack Apps

The full list can be found here along with the links to DEMO & Sources and license type for each app

JAMstack resources

Thank you for reading & Happy coding!

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git