Boosts the development of full-stack web applications through the automation of repetitive development workflows for developers and business people (analysts, product owners).

Watch tutorial and try demo to generate and customize React web app from GraphQL API and Material-UI templates.

Use Case​

Create fullstack apps, portals or SaaS by reusing well integrated opensource software components. Suitable for CRUD (forms), master-detail/lists, Embedded Analytics/dashboards and other views like calendars, maps and 3D models. Starters supports also out of the box: authentication and authorization, GraphQL, translations/internalizations and from existing dev ecosystem: React, Typescript, Vite, GraphQL Code Generator, Urql, Hasura etc.

Key differentiators​

Comparing to different vendors of low-code/no-code/CMS approaches - key differentiators of Iteria App Builder/Devtools:

• Everything is code and therefore everything is customizable. (but No-code / CMS have limitations).
• App can be developed by using the classic approach and you can also automate your repetitive work by using WYSIWYG and codegen.
• No vendor lock in: ejectable any time because it is a devtool. Your application will continue to work.
• No proprietary piece in the app architecture. Integrated technologies are open source and well maintained.

How it works​

Business perpective​

Team can easily generate new pages or customize existing React web pages, modify underlying API, business logic and DB schema. Business people use WYSIWYG that integrated devtools behind the scenes. You can use and edit your app at the same time in the browser. That means instant changes - no need to switch between the design and preview mode of your app. Iteria is the devtool injected in a React web app. This enables developers and business people (analysts, owners) to collaborate on the same codebase at the same time.

Business people can:

• make many changes on their own
• can work together with technical people on same code base
• can use WYSIWYG for visual editing (it still modifies the code)
• analysts can test domain models and UX and get early feedback from the customers

Developer perspective​

Iteria is injected in the development build of the web app starter using a Vite Plugin vite-plugin-lowcode therefore the WYSIWYG is accessible for the app users. The development build has references to the original source code file (line and column number of a UI component start) which enables navigation to the code and automated code modification. For more see archtitecture. Iteria understands the React/Typescript/GraphQL source code on AST (Abstract Syntax Tree) level therefore allows combine generated and manualy written code in the same file.

Developers can:

• use existing development tools (developers are not forced to change IDE, CLI or any other existing tool)
• use starter as boilerplate for the new project (authentication & authorization, translations/internalization, CRUD, lists and different views)
• customize codegen templates to achieve custom design and UX (according to Figma) of generated pages/components
• use codegen to avoid repetitive work and rather focus on development of more complex business logic or UX

Benefits​

Benefits of Iteria Low-code App Builder / Devtools:

1. All team members get early feedback since they can demonstrate key changes really quickly
2. the team can avoid repetitive work by manually programming the same code again and again
3. making fewer mistakes thanks to the documentation and best practices included in the tooling
4. results are more predictable (one can create a simillar app just for different API / model)

All of that enables delivery on time because the development cycle and time to market are shortened.

Get Started​

Try demo and use tutorials and videos.

Iteria Low-code is a React/GraphQL devtool or Internal App Builder currently supporting specific SPA, Jamstack, technology stack (see below). Thanks to Hasura the Low-code modifies not only the frontend but also the backend.

Rapid Application Development​

This devtool enables Rapid Application Development:

• Bootstrap new project from a template
• Scaffolding: generate page for CRUD (codegen)
• Customization: add/remove fields (fullstack: both frontend and backend), permissions, translations, themes
• WYIWYG ans navigatio to code in VSCode

New project

Iteria Low-code

Project Template​

Iteria maintains an open-source project template (inspired by refine.dev abd React Admin) with following features:

• routing
• menu
• navbar
• login using multiple AuthProviders (Auth0, Firebase Auth, extensible just by implementibg a Typescript interface)
• switch use role typicsly between user/admin (optional if JWT claims available)
• field/page permissions / access control (Casl, Hasura Permissions)
• admin page
• upload files (multipart, signed urls to S3)
• dashboard with graphs

No need to reinvent the wheel.

Technology stack​

Project template is implemented via following technologies/libraries: React, Material-UI, Typescript, Formik, react-intl, Uppy, Urql GraphQL client connected to Hasura.

Extras​

• ERD (Entity Relationship Diagrams)
• codegen/codemod for graphql and React
• translations (inline, import/export)

Deliver on time

Patterns​

Iteria Low-code supports certain patterns and if they are applied than predictible otcomes (with predictible estimate) can be expected. UI/UX patterns for CRUD: master/list-detail, forms for entity with relations to other entities and differen cardinalities:

• 1:0 cardinality (Hasura object relationship)
• 1:n cardinality (Hasura array relationship)

Developers​

Developer can focus on things with added value (like biznis logic, complicated requirements). No need to:

• integrate libraries and technologies again: project template (see above) with tons of functionality from Hasura (CRUD API, permissions, actions for business logic, events for webhooks, GraphQL joins)
• write repetitive code / boilerplate (see scaffolding above)

Analysts​

Analysts can minimise the risk by:

• getting early feedback;
• and validate domain models;
• make smaller changes during meetings and customization.

Future plans

Hackable / extensible tool: low-code plugins on the roadmap (inspired by builder.io)

More Docs / tutorials will come.

Iteria rethinked Low-code as devtools for both developers and analysts to satisfy the need for speed on IT projects and quality expectations (code quality, project outcomes). Source code is still the main ingredient in the development. Main ingredient needs high quality and therefore we compare codegen and codemod outcomes with code produced by IT professionals. The devtools enables to modify the source codes of a React web/app while web browsing (integrated WYSIWYG) or using the app. WYSIWYG is integrated in various development environments / branches but not in web/app production environments (intention: not to affect a project's existing architecture by the low-code and to avoid vendor lock-in).

Developers can use Iteria low-code integrated in their existing dev servers (localhost or Gitpod) but the analysts will use the low-code in deployed environment of the web/app (integrated in modern CDNs, platforms and/or CI/CD pipelines).

We in iteria keep focus on the key ingredient of each solution - source code. This is a key differentiator compared to other no-code/low-code solutions.

Try existing demo or 30 min tutorial.

Use Cases

Iteria low-code can be used to quick prototype and create MVP of a new project and then maintain it in long term with an heterogenous team consisting of PM, analyst, developers and testers. Iteria low-code can be used for brownfield projects that have compatible tech. stack to customize them (new pages, new fields, translations, permissions, etc.)

Greenfield Project​

Create an app by using bottom-up approach from a domain model using ERD (Entity Relational Diagram): quick prototype, MVP's that are fully customizable as any other Typescript source code.

Use existing project template or bring own/custom project template (useful in case of custom Figma design).

Brownfield Projects​

Customize/maintain existing web/apps with hundreds of files. By using low-code it is easier to navigate in the code base with integrated WYSIWYG, VSCode and codegen/codemod to:

• add new field or delete existing fields
• modify translation (inline edit labels of menus, forms and import/export language mutations);
• access control: change permissions for roles on field level;
• change colors (themes)

Summary

Low-code Benefits​

Iteria Low-code benefits for business:

• development speedup achieved by the automation and integration (codegen, codemod, WYSIWYG and 3rd party libraries and tools like GraphQL code generator and VSCode)
• predictable project outcomes by using existing patterns (UI/UX, tech stack frontend, backend & integration)
• one codebase for both developers and analysts (or other business people) thanks to WYSIWYG for an React application

Technical Requirements​

Iteria Low-code technical requirements:

• code quality and conventions not compromised by the low-code (quality of the code depends on project templates and development itself)
• extensibility project-templates (use Iteria project template or bring own/custom project template) and plugins
• ejectable devtools (low-code is just and development dependency in project package.json that can be removed any time and the source code stays as is and can be maintained with existing IDEs)
• no/minimal impact on an architecture for a compatible tech stack (React, Material-UI, GraphQL/Hasura).