Xelflow Server Demo

What is the Demo Application?

The demo.xelflow.com website is an Angular application specifically built to demonstrate how to use Xelflow Server in practice. It shows the seamless integration between a modern frontend framework and our server solution. Of course, the application is not finished yet. A real management application is behind a login and only accessible by a few people. If you want a demo with authentication, please contact us.

Open Source on GitHub

Transparency is important to us. That is why the full source code of this application is available on GitHub. This allows you to see exactly how the application is put together, which patterns we have used, and how an application built with Xelflow Server works. It serves as a perfect starting and reference point for your own projects.

Structure

The demo application is composed of the following parts:

.junie: AI guidelines for the JetBrains IDE's AI agent Junie.
api: The API that communicates with the Xelflow Server.
authentications: List of authenticationIds that can be used in the flows.
flows: The flows that can be used in the application. (47)
public: The public folder containing the static files of the Angular application.
src: The source code of the Angular application.
tables: The table definitions used in the flows and migration scripts for the database. (12)

The Most Important Component: connection.service.ts

When reviewing the code, the connection.service.ts file is the most important one to study. This Angular service contains all the necessary code to communicate efficiently and securely with the Xelflow Server. Here you will find the methods for setting up the connection and exchanging data, which is the foundation of the application. In the components, the connection service is used to retrieve and send data to the Xelflow Server.

AI-Driven Development

An interesting detail of the demo application is that it was created with the help of AI. The most important aspect of successfully generating code with AI is the presence of rock-solid documentation. To provide the AI (and of course the developers) with the right context, all necessary documentation is woven into the codebase itself. For a new request, the Junie AI agent in Brave mode will go through the following steps:

Modify the table definitions.
Create the migration scripts.
Create and modify the flows in the application.
Send the modified flows and table definitions to the Xelflow Server.
Modify the Angular application.

The start of your own application

The demo application is an excellent starting point for building your own application. You can use the demo application as a basis and adapt it to your own needs. The demo application is open source and available on GitHub, so you can view the code and adjust it to your own needs.
An AI agent building for you is of course great, but you get the best results when different disciplines collaborate with the AI agent: a domain expert for functional requirements, a developer for technical requirements, and a designer for UX/UI requirements.