App Generator — The Modern Way | AppSeed
Hello Coders,
Thank you for landing here. My (nick)name is Sm0ke and I’ve built AppSeed, a platform that uses automation tools to speed up specific parts involved in the web development process.
Problems we are solving
- The manual integration of a flat design into a real project, no matter the underlined programming language or framework
- The repetitive work involved when a new project is started
- The slow transition to newer technologies
Personally, I’ve identified all these problems in my freelancing activities for small and medium web projects, developed in different technologies and frameworks. Based on the repetitive nature of the mentioned problems, I decided to optimize my workflow by writing automation tools.
The results — after 1y of R&D work
Writing the tools and prototyping the boilerplate code took 1year and the first bundle with 100+ open-source apps, coded in different technologies and patterns was released on Github, on a public repository.
- Admin Dashboards — simple starters coded in Flask, using old-school MVC pattern, generated on top of a few well-known designs: Argon Dashboard, Black Dashboard, Material Kit, Light Dashboard and Now UI. The boilerplate code, used by all dashboards includes an SQLite database, ORM and basic tooling
- JAMstack apps — more than 40 apps built on top of UI Kits crafted by Pixelarity and Creative-Tim
- Flask apps, enhanced with authentication flow (login, register), database, ORM and design provided by Pixelarity and Creative-Tim
- Full-Stack apps, generated in a two-tier architecture where the Vue, React front ends are decoupled from Nodejs, Flask, and Laravel backends.
The technical approach
After a few iterations, we split the automation process into two steps:
- The flat HTML processing
- App generation process — injecting processed HTML components into pre-built boilerplates coded in different technologies
The Flat HTML processing
During this phase, we were forced to solve a number of problems that occur when a new design is integrated and prepared for a real project:
- Pages assets (js, images, CSS) detection and control
- Master layout detection through multiple pages
- Components detection and extraction
- Hard-coded texts and links removal
- Translation to different template engines: PUG, Jinja, Blade (Laravel)
A lot of people ask us, “why to bother?”. Well, the benefits are quite big in the long run. A tool that “knows” how to control and process the HTML DOM, can help anyone to execute in minutes some tasks that usually take hours:
- Components extraction and translation to production-ready components for various engines and technologies: PUG, Jinja, Blade. Bootstrap components to Vue and React is a WIP.
The component translation and extraction is finished for PUG, Jinja, and Blade. A light open-source version is published on the HTML Parser repository ( Github )
- HTML themes migration from one CSS framework (e.g. Bootstrap) to many others like Bulma, Tailwind .. etc. If you control the DOM, you control the class attributes and the transition from Bootstrap to any other CSS framework (e.g. Bulma, Tailwind) is doable.
This is a WIP, and we are actively experimenting the automatic translation for simple Bootstrap themes to Bulma and Tailwind. The results, for each translation, are published on Github: Bootstrap to Bulma, Bootstrap to Tailwind
Using the stable features of our HTML parser, we succeed to parse and translate flat HTML to PUG and Jinja more than 50 themes, styled with Bootstrap:
- Creative-Tim themes: Material Kit (Dashboard and UI), Argon (Dashboard and UI Kit), Now UI (Dashboard and UI Kit), Dark Design (UI Kit)
- Pixelarity design — around 35 designs are integrated into JAMstack and Flask apps.
- HTML5Up — around 10 designs
Boilerplate code — coding and provisioning
The HTML parser helps us to control the HTML and automate the design integration. In this phase, we need to use the design and produce apps, ready to be delivered.
We decided to prototype boilerplates in different languages and patterns and ask the clients what they prefer. After collecting the information and scanning the market, we decided to prototype the following boilerplates:
- Javascript: Express and Fastify
- Python: Flask
- Php: Laravel
- For Frontend: we are using React, Vue, and jQuery UI kits.
All boilerplates are equipped with a simple set of common features:
- database, ORM
- authentication flow (login, register)
- helpers
- basic tooling — build, manage and deploy the apps
App Generator — The process
The service produces apps in two ways:
- The visual app generator — anyone, even without an account can combine the frontend (Vue, React) with the backend (Flask, Laravel, and Nodejs) and generate the code of a production-ready app, with a two-tier architecture
- (WIP) Inject the processed HTML into Nodejs, Flask and Laravel boilerplates and generate admin dashboards, simple one-page apps, and landing pages published as pre-built apps and bundles.
Where to go from here
- Ask anything in the comments.
- Follow us on Twitter, Dev, and Facebook
- Read more about AppSeed on the official blog
- Check out the official Github repository for the complete list with generated apps
Thank you!
