Arontel Enterprise Platform
Control system for live telecom operations. IVR routing, conference management, real-time dashboards.
IVR PlatformConference SystemFile ManagerAdmin Console
Production system interface
Context
Operators manage live phone systems through this platform. Every click affects real call routing and production IVR trees. This is not a CRUD app — it's a control surface for telecom infrastructure.
In Production: Used daily by telecom operators to manage IVR systems, route calls, and configure audio prompts.
Reality / Constraints
- →12k+ nodes per IVR tree
- →Actions affect live callers
- →Multi-tenant data isolation
- →Non-technical operators
- →Real-time concurrent edits
- →Zero error tolerance
Core Problems
- —UI freezes at 4k+ nodes
- —State mutations cause re-render cascades
- —Operators lost in deep hierarchies
- —No visibility into what's active
- —Easy to trigger destructive actions
- —Sync conflicts corrupt data
Design Evolution
Before
- ✗Deep nested components
- ✗Coupled state + rendering
- ✗Feature-first architecture
- ✗No normalization
- ✗Slow traversals
After
- ✓Flat normalized store
- ✓Computed hierarchies
- ✓Domain boundaries
- ✓Virtual rendering
- ✓Event-driven updates
Before
After
System Flow
How a call moves through the system.
Incoming Call → Routing → IVR Tree → Node State → Operator Panel → Live Execution
Control system architecture
State-Driven UI
UI controls reflect system state. What you see = what's actually happening.
Audio
- No audio → upload
- Has audio → replace/delete
- TTS → generate
- Recording → locked
Nodes
- Active → green
- Disabled → muted
- Unconfigured → warning
- Error → restricted
Permissions
- ACL → role-gated
- PIN → confirmation
- Admin → hidden
Controls
- Transfer → routing panel
- Menu → tree expand
- Intro/Outro → player
Component Library — Built for reusability across modules
Operator-First UX
Built for speed and safety, not aesthetics.
- →Always visible system state — what's live, what's inactive
- →Gated destructive actions — confirm before delete
- →Clear button meanings — no ambiguous actions
- →State before action — see current config first
- →Error containment — mistakes don't cascade
Scalability Strategy
- →Virtual scrolling — only visible nodes in DOM
- →Normalized state — flat maps, computed trees
- →Batched updates — debounced mutations
- →Optimistic UI — instant feedback, background sync
- →Lazy loading — deep branches load on demand
What I Owned
- ✓Platform architecture end-to-end
- ✓Performance: 600ms → 250ms latency
- ✓State management design
- ✓Virtual tree rendering
- ✓Real-time sync logic
- ✓UX decisions with designers
- ✓Production deployment
Worked with UX designers on complex telecom workflows.
Impact
60%Faster
<300msLatency
12k+Nodes
0Downtime
Patterns Applied
Engineering
VirtualizationState normalizationEvent sourcingOptimistic updatesDomain separation
UX
State-driven UIGated actionsProgressive disclosureRole-based visibilityError prevention
Interested in working together?
Get in Touch