3 comments

[ 3.3 ms ] story [ 17.5 ms ] thread
I'm the creator of this silly visualizer (created the pixelart myself!). It's an example of how to create a realtime dashboard to visualize the progress of a serverless workflow.

Tech stack:

- Azure Static Web Apps that hosts a VueJS web app.

- Azure Function App that uses Durable Functions for the workflow.

- Ably (WebSockets as a Service) for pubsub messaging from the back-end to the front-end.

More info in this blog post: https://ably.com/blog/visualize-azure-serverless-workflow-pr...

Nice - does each visitor see just their own order or do visitors see all in-progress orders?
Thanks! Each visitor sees their own order. The channel is based on the orderId so each visitor has a dedicated channel for their order.

I do plan to extend this demo and create a dashboard for the kitchen that shows all orders coming in.