Xelflow Server
The Examples
From idea to a professional website on Azure.
Without backend complexity,
deployment concerns, and
security worries.
Mileage Tracking
Description
A simple PWA website to track trips.
This was an ideal first app to test if Xelflow Server worked. The flows consist only of QueryDatabase and SendMessageToUser steps.
The user must register and log in.
The website has a form to register a trip and an overview of all trips, and a form to manage profile and car data.
Tables
The app has 2 extra tables: Drives and Cars.
Flows
- GetRecentDrivesFlow: Retrieve recent trips.
- GetDriveLocationsFlow: Retrieve trip locations.
- RegisterDriveFlow: Register a trip.
- UpdateDriveFlow: Update a trip.
- SaveCarFlow: Save car data.
- GetCarFlow: Retrieve a car.
Source
The app is built with HTML, CSS, and JavaScript, no framework.
Link
Register a trip
Xelflow
Description
This website is, of course, also built with Xelflow Server.
This website has 3 forms for which a flow has been created:
- Newsletter signup
- Newsletter unsubscribe
- Contact form
The forms save the data in the database and send an email to the administrator. For sending emails, an authentication definition was created. For Xelflow.com, the Xelflow Admin Panel has been further expanded, including a flow to register how long an SSE connection is open.
Tables
The app has 2 extra tables: Messages and NewsSubscriptions.
Flows
- SaveMessageFlow: Save contact form and send an email.
- SaveNewsSubscriptionFlow: Save newsletter registration and send an email.
- UnsubscribeNewsFlow: Remove newsletter registration.
Source
The app is built with HTML, CSS, and JavaScript, no framework.
Link
Xelflow
Wimmen
Description
I also moved my own website to Xelflow Server. The website doesn't really need a server, but I wanted to experiment with an AI Chat client that I added here.
Tables
The app has no extra tables.
Flows
- AIAgentFlow: With 2 steps: AddToContext step for adding the system prompt and the user prompt, and an HttpsAction step for calling the OpenRouter Streaming API.
- AIChunk: For each chunk of the AI response, an AIChunk flow is called, which sends the chunk to the client via SSE.
Source
The app is built with HTML, CSS, and JavaScript, no framework.
Link
Wimmen
Schakendsliedrecht
Description
The first 'real' app, with users.
The website of Schaakvereniging Sliedrecht is a standard Wordpress website.
The Schakendsliedrecht app adds a mobile PWA app that can send a push notification when a new article is posted on the website.
The app shows the latest articles with links to the website for more info. In the future, this app will be expanded with more functionalities.
For Xelflow, this app meant an event api endpoint for external applications with api key protection and an extra flow step type: SendNotification. Furthermore, this is the first app made with a framework.
Tables
The app has 1 extra table: PushSubscriptions.
Flows
- SaveSubscriptionFlow: Save Subscriptions.
- NewArticleFlow: Called by the Wordpress website, sends a notification to subscribers.
Source
The app is built with the Angular framework.
Schakend Sliedrecht