Creative-Tim - Open-Source Apps built with automation tools (MIT License)

Hello Coder,

Thank you for landing on this page. This article present a short list with open-source apps, coded using automation tools on top of some well-known designs provided by Creative-Tim web agency.

Automation Process

Based on my freelance experience, I've noticed that the customers signals a common set of problems:

  • A variety of designs to choose from
  • The apps should be delivered in modern technologies and frameworks
  • Sometimes they want to migrate legacy apps to newer technologies

In order to solve all those issues, I've built a semi-automated workflow:

  • Find themes providers that released nice products under permissive licenses and affordable prices. My short list, regarding this point: Creative-Tim, Html5Up, Pixelarity
  • Build an HTML parser to automate the conversion of flat HTML files to production-ready templates for Jinja, PUG, and Blade.
  • Develop boilerplate code for various programming languages and frameworks: Nodejs, Flask and Laravel.
  • Inject processed templates into the boilerplate code
  • Execute a minimum set of tests
Using this process, I've built more that 100 open-source apps in different technologies. The full index with apps can be found on Github

Creative-Tim

This company, is an authentic contributor to the open-source ecosystem by providing some really nice designs crafted in many frameworks and technologies: Bootstrap, Angular, Vue and React. Because the free products are released under the MIT license, anyone, even without an account, can use the UI Kits to build (almost) any kind of project: hobby, commercial or SaaS.


A few words about the apps and starters referred in this article:

  • Apps are fully-coded in two patterns: JAMstack and Flask
  • JAMstack apps use Panini Static Generator to translate the pages from markdown to HTML
  • The Flask boilerplates are coded with SQLite database, ORM, helpers and basic tooling (static export and FTP deploy)

JAMStack starters

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

A beautiful design, released under the MIT license: demo, sources

Let's build this JAMstack starter with a few lines of code:

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

$ # instal modules
$ yarn 
$ yarn start # start the app for LIVE edit

$ # the app runs on port 5000

If all goes well, the Paper Kit design (JAMstack version) should be visible in the browser:

JAMstack Paper Kit - Gif animated intro.


JAMstack Material Kit

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

Links: demo, sources

JAMstack Material Kit - Gif animated intro.

In case you want to use the app, please follow the build instructions from the README committed on Github. This should be an easy job.


JAMstack Now UI

Another beautiful design coded in JAMstack. Links: demo, sources

JAMstack Now UI - Gif animated intro.


Flask Starters

What is Flask (a short note for newcomers): Flask (source code) is a Python web framework built with a small core and modularity in mind. With a small footprint, well documented and supported by a growing community, Flask can be a good choice to implement on top a nice production-ready simple apps and landing pages or complex eCommerce portals.

Boilerplate Code Features

The code-base is organized using a modular structure:

Flask Boilerplate - Code Structure.

The most relevant files:

  • app.py - starts the app by putting together assets, database, and app logic
  • requirements.txt - contains the app dependencies
  • app\models.py - define a single class (User) used by the authentication flow
  • app\views.py - handles the app routing
  • app\data.py - file where app strings (URL's, titles, etc) are isolated

The boilerplate modules:

  • SQLite database
  • SQLAlchemy ORM
  • Authentication Flow (Login and Registration)
  • Static export via Flask-Frozen

Build from Sources

All Flask starters share the same code-base and the build instructions are identical for all projects. For instance, if we want to build Flask Paper Kit boilerplate, we need to write a few simple commands in our preferred terminal:

$ # clone the repo

$ git clone https://github.com/app-generator/flask-paper-kit.git
$ cd flask-paper-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 

If all goes well, the app should be visible in the browser

Flask Boilerplate Paper Kit - Gif animated intro.


Flask Argon Design

App released under the MIT license, Design credit goes to Creative-Tim.

Links: demo, sources

Flask Argon Design - Gif animated intro.


Flask Now UI Kit

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

Links: demo, sources

Flask Now UI Kit - Gif animated intro.


All apps, presented on this page are released under the MIT license and used a design provided by the Creative-Tim agency. For more UI kits please access their service

Resources:


Where to go from here

Thank you!

Show Comments

Get the latest posts delivered right to your inbox.