PIXIS — Network Management System

PIXIS is an enterprise network management system built for IT and network administrators overseeing complex, multi-site infrastructure. The platform provided a centralized interface for device discovery and inventory, network topology visualization, DHCP configuration, IP conflict detection, audit logging, and compliance rule enforcement across multiple organizational sites. Administrators could monitor switches, track host devices, and investigate security events from a customizable dashboard with draggable panels. The project was delivered as a fully functional frontend with mock API integration, dark/light theme support, and bilingual (English/Traditional Chinese) internationalization.

The previous version of PIXIS was built on a jQuery foundation with multiple ad-hoc UI libraries that frequently conflicted in CSS namespacing, event handling, and component lifecycle, making new feature development increasingly unpredictable and costly. The refactor adopted Vue 3 as the core framework and consolidated the UI layer around a single enterprise component library, Kendo UI, eliminating inter-library conflicts at the root. The Composition API enabled the extraction of over 37 reusable composables (e.g., useGrid, useFilter, useToggle), replacing scattered jQuery DOM manipulation with declarative, testable logic units organized by domain. TypeScript was introduced to enforce type contracts across API boundaries and component props, surfacing integration errors earlier in the development cycle. Theming was standardized through SCSS variables shared across light and dark variants, replacing the patchwork of per-library style overrides from the legacy codebase. The refactor covered over 40+ product pages across 9 functional areas, and as a result, new feature pages could be scaffolded by composing existing hooks and components rather than duplicating imperative jQuery logic, significantly reducing the cost of iteration.