Enterprise · Realtime SystemsDemo buildPakistan

IVR Flow Builder + Analytics

Ascend BPO's call routing ran on a rigid legacy system. This project builds a drag-and-drop IVR flow builder and a real-time analytics portal to replace it: visual call-flow editing on a node canvas, plus live KPI monitoring pushed over SignalR.

Role: Team Lead · Full Stack (Intern)
Timeframe: 2025 – 2026

Stack

React 19ViteReactFlowMUIRechartsZustandTanStack QuerySignalRC# ASP.NET CoreSQL Server

Architecture

ReactFlow canvasdrag-and-drop IVR flows

Routing engineconditional / DTMF

ASP.NET Core APIC# on SQL Server

Analytics portalvirtualized 100k-row grid

SignalR pushes live KPIs from the API to every open dashboard over one connection.

ReactFlow node canvas → conditional routing engine → C# ASP.NET Core API on SQL Server, with a SignalR push stream driving a virtualized MUI DataGrid analytics portal.

Key decisions

Chose

SignalR WebSocket push for the analytics portal, with the KPI grid virtualized (MUI DataGrid) to hold 100k rows inside the DOM budget.

Rejected

Interval polling for updates, and rendering the full result set into the DOM.

Why

Call-center KPIs change second to second, so polling either lags behind or hammers the server; a pushed stream keeps every open dashboard live off one connection. At 100k rows, mounting the whole grid would jank the main thread, so virtualization renders only the visible window. Offline resilience was layered on top so a dropped socket degrades to cached data instead of a blank board.

Screens

IVR Flow Builder + Analytics screenshot 3