CSC DBS – DomainSec
Domain Security is a dashboard provided to customers who have registered domains with CSC. It offers a visual representation of CSC's security features. Using AmCharts 5, the data is displayed in pictorial charts, allowing users to check statistics such as new registrations, dropped registrations, re-registrations, domain security, brand protection, anti-fraud measures, and more.
Key Highlights
- CRA → Vite migration with zero regressions
- All dependencies upgraded to latest stable versions
- react-bootstrap-table-next → KendoReact Grid migration
- Reusable common table component with sorting, pagination, selection, and styling
Problem
Legacy application required modernization with improved performance, better data visualization, and enhanced accessibility. The existing table component (react-bootstrap-table-next) was no longer maintained and caused compatibility issues.
Approach
Developed dynamic dashboards with interactive data visualizations using AmCharts 5. Successfully migrated the application from Create React App (react-scripts) to Vite, significantly improving build speed and developer experience. Led the migration from react-bootstrap-table-next to KendoReact Grid, creating a reusable common table component.
Architecture & Key Decisions
Redux-Saga for state management, AmCharts 5 for data visualization, KendoReact Grid for table operations, Azure DevOps for CI/CD pipeline, and Azure Application Insights for monitoring.
Challenges
- Successfully migrated from CRA to Vite with zero regressions
- Upgraded all project dependencies to latest stable versions with zero regressions
- Removed deprecated react-bootstrap-table-next and migrated to licensed KendoReact Grid
- Performance optimization using memoization and lazy loading
Results
- Received strong appreciation and positive feedback from the client for delivering smooth, error-free migration ahead of expectations
- Improved consistency, scalability, accessibility, and performance by standardizing table behavior
- Enhanced application performance through component memoization and lazy loading
- Full CI/CD pipeline with Azure DevOps and monitoring via Application Insights
Learnings
- Deep understanding of build tooling differences between CRA and Vite
- Advanced state management patterns with Redux-Saga
- Accessibility-first component design principles
- Performance optimization techniques for data-heavy applications