Arontel · Telecom Operations Platform
A control surface for live call routing — every node I rendered was a real telecom decision.
The system, not the screen
AronTel is a VoIP SaaS platform — IVR automation, PBX, conferencing, and analytics for enterprise clients. When an operator changes a node, they change what a live caller hears right now.
I joined as the sole frontend engineer. Two founders, one designer who later left — and full ownership of every frontend decision from architecture to production delivery.
Where the UI was failing the operators
IVR trees contained 4,000–12,000 nodes in production. Naive rendering caused freezes. State mutations cascaded re-renders across the entire tree. Operators had no visibility into what was live versus inactive. Destructive actions had no confirmation layer.
Three decisions that changed the system
Pagination would force operators to click through pages to find nodes, destroying the hierarchical sense of an IVR call tree. Operators need to see the structure. Virtual scrolling kept the full tree visible while only rendering nodes in the viewport. Combined with a flat Pinia store, latency dropped from 600ms to under 300ms.
The original state stored nodes as deeply nested Vue reactive objects. Any mutation triggered a re-render cascade across the entire tree. Switching to a flat ID-keyed Pinia store with computed hierarchies meant one node update caused one re-render — not 12,000.
Operators had no signal for which nodes were live, which had audio, which were broken. I built a full state-mapping system: active green, disabled muted, unconfigured amber, error red. Audio had four visual states. The UI became a real-time mirror of system state. Destructive actions required confirmation. Mistakes became structurally hard to make.
"After the designer left, I owned UX decisions and frontend delivery simultaneously. Requirements came in as business logic — I turned them into component architecture the same day."
Designed for operators, not designers
Node summary visible first, deep config on expand. Operators scan hundreds of rows — cognitive load matters.
Delete and override required PIN confirmation. A wrong delete changes live call routing for real callers.
Admin controls hidden from operator role. Multi-tenant isolation built into the component layer, not just route guards.
Instant visual feedback, background sync. Errors rolled back cleanly without jarring the operator mid-workflow.
No audio → upload CTA. No nodes → create prompt. Operators always knew their next action. Never a blank screen.
Errors in one node scoped to that node. They did not cascade to siblings or collapse the tree.
What I owned end to end
Full ownership of architecture, UX decisions, and production delivery. No handoff layer — requirements came in, shipped components went out.
12k+ node trees with virtual rendering, flat Pinia state, and full state-driven UI. The system everything else depended on.
Audio file management, TTS generation, upload and playback for node audio. Four visual states per file.
Real-time participant management, raised hands, mute controls, and session recordings.
Live analytics and system health for telecom operators. Real-time metrics across the platform.
Multi-tenant admin panel and role-based access control. Tenant isolation built into the component layer.
Let's talk systems, decisions, and what it took to ship this.
Partial work shown — this is a live production system used by enterprise telecom clients. UI details are intentionally limited.
"I don't just build interfaces.
I build systems that stay fast, usable, and reliable at scale."