Boilerplate Code - JAMstack, Flask, Full-Stack Apps

Hello Coder,

Thank you for landing on this page. This article presents a short list with starters and boilerplate code written in various technologies and languages, that might help you to start fast a new project. All projects, listed on this page, shared a common set of features:

  • Open-source, and released under permissive licenses (MIT, LGPL ..)
  • Actively supported by the publishers
  • Follows the recommended coding practices
  • A minimum and usable documentation

What is a Boilerplate

In programming, boilerplate code is a piece of software that can be reused over and over without changing a single line of code. The whole idea behind a starter (sometimes boilerplate code) is to skip coding that piece of code common to many projects. If the code-base is well written, using it can help you to save some valuable time. On the other hand, using boilerplate code to start a new project is not the best choice for all cases.


JAMstack boilerplates

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.

Boilerplate JAMstack Paper Kit

This JAMstack boilerplate is generated on top of Paper Kit design crafted by Creative-Tim agency. To make the app really useful, we preserve the permissive license (MIT) after we coded the app in JAMstack pattern.

JAMstack Paper Kit - Gif animated intro.

Starter Links: demo, sources

To build the app, without leaving this page, just type a few commands in your preferred terminal:

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

$ yarn # install modules
$ yarn start # start the app in development mode (live edit)

$ yarn build # build for production
$ yarn deploy # LIVE deploy via FTP

Boilerplate Jamstack Argon Design

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

JAMstack Argon Design - Gif animated intro.

The design is provided by the same amazing web agency, Creative-Tim. In case you like it, feel free to build the app with a few lines of code:

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

$ yarn # install modules
$ yarn start # start the app in development mode (live edit)

$ yarn build # build for production
$ yarn deploy # LIVE deploy via FTP

If all goes well, you should see the app running in your browser on port 5000. Pretty cool, right?


Flask Boilerplate code

The Flask apps, presented in this section are codded with a common set of features like: SQLite database, SqlAlchemy ORM, static export via Flask-Frozen and basic tooling (Gulp, Webpack).

Flask Boilerplate Now UI Kit

Open-Source Flask starter enhanced with SQLite database, authentication, SQLAlchemy ORM and a beautiful UI - Now UI Kit Design by Creative-Tim.

Flask Now UI Kit - Gif animated intro.

How to build the app from sources:

$ # clone the repo

$ git clone https://github.com/app-generator/flask-now-ui-kit.git
$ cd flask-now-ui-kit

$ # install the dependencies
$ pip install -r requirements.txt

$ # create the database (using Flask shell)

$ flask shell
$ >>> from app import db
$ >>> db.create_all()

$ flask run

$ # App is running on http://localhost:5000 

Based on the permissive license (MIT), this boilerplate can be used for any kind of project: hobby, personal or commercial.


Flask Starter Dashboard Black

Open-Source admin dashboard boilerplate with Black design coded in Flask, the famous web framework written in Python. To build the app, just type a few lines of code:

$ # clone the repo

$ git clone https://github.com/app-generator/flask-black-dashboard.git
$ cd flask-black-dashboard

$ # install the dependencies
$ pip install -r requirements.txt

$ # create the database (using Flask shell)

$ flask shell
$ >>> from app import db
$ >>> db.create_all()

$ flask run

$ # App is running on http://localhost:5000 

If all goes well, this beautiful stater should be visible in your browser:

Flask Boilerplate Black Dashboard - Gif animated intro.


Full-Stack Boilerplates

This section will list a few full-stack apps, coded in two-tier architecture, where the React or Vue fron end is decoupled from the back end. The communication happens via secure Ajax calls.


React / Express - Material Design Boilerplate

This full-stack app is built using a decoupled architecture, where the React Material Design frontend communicates with the Nodejs / Express backend through secure ajax call.

  • Nodejs / Express backend
  • SQLite database, managed by Sequelize ORM. A simple Users tabel is provided.
  • JWT token authentication
  • React Material Design crafted by the famous Creative-Tim agency.
  • Login and Registration features

Boilerplate links: demo, sources, README (full build instructions)

React Express Material Design - Gif animated presentation.


Flask Vuejs - Argon Design Boilerplate

This full-stack app is built using a decoupled architecture, where the Vue Argon Design frontend communicates with the Flask backend through secure ajax call.

  • Flask backend
  • SQLite database, managed by Sequelize ORM. A simple Users tabel is provided.
  • JWT token authentication
  • Vue Argon Design crafted by the famous Creative-Tim agency.
  • Login and Registration features

Starter links: demo, sources, README (full build instructions)

Flask Vuejs Argon Design - Gif animated presentation.


Where to go from here?

Thank you!

Show Comments

Get the latest posts delivered right to your inbox.