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

JAMstack - 40+ Open-Source apps generated with tools

sm0ke profile image Sm0ke Updated on ・3 min read

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

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.


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!

Discussion

pic
Editor guide