loading...
Cover image for JAMstack Apps - Open-Source and built with Automation Tools

JAMstack Apps - Open-Source and built with Automation Tools

sm0ke profile image Sm0ke Updated on ・4 min read

Hello Coders,

In this article, I will present a curated list with open-source JAMStack apps built using automation tools on top of some well-known designs provided by HTML5Up and Creative-Tim agencies.

The automation process executes in a loop a few steps, listed below:

  • The flat HTML design is parsed and normalized to be compatible with an existing JAMstack boilerplate (this phase is detailed in a separate article - HTML Parser )
  • inject the processed design into the JAMstack boilerplate, already equipped with scrips and builders (gulp, sass processing .. etc)
  • start the app and repeat the previous steps in a loop if something is wrong (wrong paths, missing images)

Using this simple workflow, I'm able to skip over the manual work when I start a new project using a new design requested by the customer.


Why JAMstack

After using for years Php and Python frameworks, I decided to switch on JAMstack pattern for simple apps and one-page websites based on facts:

  • most of the times, I don't need a database
  • speed matters
  • any design can be easily integrated into a JAMstack boilerplate code
  • the deployment is automatized
  • the apps are 100% secure because is generated in plain HTML

JAMStack Paper Kit

This application is built on top of a beautiful UI kit provided by Creative-Tim. The boilerplate comes with sample pages (landing, login, and register) and the license is MIT.

App Links

JAMstack Paper Kit - Gif animated intro.

Build from Sources

$ git clone https://github.com/app-generator/jamstack-paper-kit.git
$ cd jamstack-paper-kit
$ yarn
$ yarn start
$ yarn build

JAMStack Argon Design

Argon Design design is another free UI Kit released under the MIT license by Creative-Tim.

App Links

JAMstack Argon Design - Gif animated intro.

Build from Sources

$ git clone https://github.com/app-generator/jamstack-argon-design-system.git
$ cd jamstack-argon-design-system
$ yarn
$ yarn start
$ yarn build

JAMStack Fractal

Open-Source app with HTML5Up Fractal design - CCA 3.0 License (inherited from Html5up)

App Links

JAMstack Fractal - Gif animated intro.

Build from Sources

$ git clone https://github.com/app-generator/jamstack-fractal.git
$ cd jamstack-fractal
$ yarn
$ yarn start
$ yarn build

JAMStack Big Picture

Open-Source app with HTML5Up BigPicture design - CCA 3.0 License (inherited from Html5up).

App Links

JAMstack BigPicture - Gif animated intro.

Build from Sources

$ git clone https://github.com/app-generator/jamstack-big-picture.git
$ cd jamstack-big-picture
$ yarn
$ yarn start
$ yarn build

JAMStack Landed

Open-Source app with HTML5Up Landed design - CCA 3.0 License.

App Links

JAMstack Landed - Gif animated intro

Build from Sources

$ git clone https://github.com/app-generator/jamstack-landed.git
$ cd jamstack-landed
$ yarn
$ yarn start
$ yarn build

JAMStack Now UI Kit

Blazing fast application coded in JAMstack pattern on top of Now UI design - MIT License.

App Links

JAMstack Now UI - Gif animated intro.

Build from Sources

$ git clone https://github.com/app-generator/jamstack-now-ui-kit.git
$ cd jamstack-now-ui-kit
$ yarn
$ yarn start
$ yarn build

JAMStack Material Kit

Blazing fast application coded in JAMstack pattern on top of Material Kit design - MIT License.

App Links

JAMstack Material Kit - Gif animated intro.

Build from Sources

$ git clone git clone https://github.com/app-generator/jamstack-material-kit.git
$ cd jamstack-material-kit
$ yarn
$ yarn start
$ yarn build

More JAMstack Apps


Other JAMstack resources


Thank You!

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

markdown guide