Case Study
Angel One Support
Customer Support Ticket Management Portal
Project Overview
Angel One required a customer-facing support ticket portal that would allow its users — B2C retail customers, SmartBroker partners, and DRA associates — to create, track, and manage support tickets without calling the support center. The portal needed to handle file uploads, conversation threading, ticket escalation, and analytics tracking, all within Angel One's existing authentication and web ecosystem.
Built with Nuxt 3 and Vue 3, the portal integrated with backend REST APIs for ticket management, cookie-based authentication with WebView bridge support, and a feature configuration system that controlled capabilities per user type. The application was deployed on Cloudflare Pages across dev, UAT, and production environments.
My Role
Engineering Challenges & Solutions
Multi-User Type Support
Building a single portal that served three distinct user types — B2C retail customers, SmartBroker partners, and DRA associates — each with different feature sets, ticket limits, and authentication flows.
Built a single Nuxt 3 application with a centralized feature configuration module that controlled behaviors per user type — ticket limits (3 for B2C, 1000 for SB/DRA), form variants, and feature visibility.
File Upload with Constraints
Implementing a file upload system that supported multiple formats (JPEG, PNG, PDF, DOC, ZIP), enforced size limits (2MB per file, max 3 files), compressed images client-side before upload, and detected malware.
Integrated browser-image-compression library that compressed images client-side (max 1.5MB, 1920px) before upload, reducing server load and improving upload speeds for mobile users.
Authentication Across Environments
Managing cookie-based authentication across three environments (dev, UAT, production) with automatic token refresh via WebView bridge, B2C login redirect on 401, and rate-limited refresh to prevent infinite loops.
Implemented an automatic token refresh flow via window.AvailOfferCallBack.refreshToken() with 1800-second rate limiting, cookie-based session detection, and graceful redirect to B2C login on failure.
Performance in Nuxt 3
Optimizing Core Web Vitals in a Nuxt 3 application — eliminating unnecessary prefetching of dynamic imports, disabling CSS code splitting, and configuring proper cache headers for static assets.
Customized the Nuxt build manifest to strip dynamic import references from the preload/prefetch list, reducing initial page load size and improving LCP and FCP scores.
Feature Flags Per User Type
Designing a feature configuration system that controlled ticket limits, FAQ-based forms, rate conversation visibility, and escalation availability per user type and environment.
Created separate .env files for dev, UAT, and production with environment-specific API endpoints, analytics configuration, login URLs, and output directories.
Feature Highlights
Performance Engineering
Manifest Optimization
Stripped dynamic import references from the build manifest to eliminate unnecessary prefetching, reducing initial load size.
Cache Strategy
Configured Cache-Control: public, max-age=1800 for static assets via Cloudflare Pages _headers file.
CSS Optimization
Disabled CSS code splitting to reduce render-blocking CSS requests on initial page load.
Image Compression
Client-side image compression (max 1.5MB, 1920px) via browser-image-compression before upload, reducing upload time and server processing.
Lazy Loading
Iframe attachments lazy-loaded to defer offscreen content loading until needed.
Responsive Design
Mobile-first responsive layout with sticky CTA on mobile and two-column grid on desktop for optimal viewing on all devices.
Technology Stack
Engineering Contributions
Built the complete support ticket portal from scratch using Nuxt 3 and Vue 3, serving Angel One customers across B2C, SmartBroker, and DRA channels.
Designed and implemented the Pinia state management architecture with centralized actions for ticket CRUD, category management, and analytics tracking.
Developed the ticket creation flow with dynamic category/subcategory dropdowns, client-side file upload with image compression, and multi-step form validation.
Implemented the conversation view with chronological message threading, attachment previews, reply composition, and read/unread status indicators.
Built the ticket reopening and escalation system with reason selection, confirmation steps, and environment-aware feature flags.
Integrated with backend REST APIs for all ticket operations, category lookup, rate resolution, and ABMA analytics tracking.
Configured environment-specific deployments across dev, UAT, and production with Cloudflare Pages hosting and cache optimization.
Implemented cookie-based authentication with automatic token refresh, WebView bridge integration, and B2C login redirect flow.
Created a feature configuration system that controlled ticket limits, form variants, and feature visibility per user type and environment.
Business Impact
Customer-facing support portal serving Angel One's B2C, SmartBroker, and DRA users with ticket management capabilities.
Multi-environment deployment pipeline (dev/UAT/production) with Cloudflare Pages hosting and environment-specific configuration.
File upload infrastructure supporting 7+ file formats with client-side compression and malware detection.
Analytics tracking integration providing visibility into user behavior across support flows.
Authentication system integrated with Angel One's existing B2C login and WebView mobile app bridge.
Performance-optimized Nuxt 3 application with targeted manifest and CSS optimizations.
Lessons Learned
Nuxt 3 Requires Careful Performance Tuning
Nuxt 3's default build configuration generates extensive prefetch links for dynamic imports. For a support portal, these were unnecessary and hurt LCP. Customizing the build manifest was essential for performance.
Multi-User Type Architecture Needs Planning
Supporting three distinct user types with different feature sets in a single application required early investment in the feature configuration system. Adding this later would have been costly.
Client-Side File Processing Improves UX
Compressing images client-side before upload significantly improved the upload experience for users on slow mobile connections, reduced server processing load, and enabled immediate feedback on file validity.
Authentication in WebView Is Different
Integrating with a mobile app WebView bridge for token refresh required a different authentication pattern than standard web applications. The window.AvailOfferCallBack pattern was specific to Angel One's mobile architecture.