Building a Centralised App Switcher Library for Shiprocket Applications

Table of Contentshide

The Challenge
Shiprocket’s Solution: The Switcher Library
Benefits of using NPM library
1. Implementation Example
Conclusion

In modern enterprise applications, managing multiple products and services under a single ecosystem can be challenging. This is why at Shiprocket we developed a reusable NPM library called “Switcher” that provides a centralised solution for navigating between different products while maintaining consistency and reducing code dependencies.

How does Shiprocket make app navigation easier?

The Challenge

Before implementing the Switcher library, we faced several challenges:

Each team maintained their navigation code
Inconsistent user experience across products
Duplicate code and maintenance overhead
Difficulty in updating navigation across all products

Shiprocket’s Solution: The Switcher Library

Our Switcher library provides an elegant solution with these key features:

1. Centralised Navigation

@Component({
selector: ‘lib-switcher’,
templateUrl: ‘./switcher.component.html’
})
export class SwitcherComponent {
// Centralized configuration of all available apps
appSwitcherApps = {
   shipping_fulfilment_india: […],
   cross_border_commerce: […],
   growth_marketing_solutions: […],
   financial_services: […],
   other_services: […]
};
}

2. Consistent UI/UX

The library implements a standardised modal interface that:

Uses smooth animations for opening/closing
Provides organised categorisation of products
Maintains consistent styling across all implementations
Adapts responsively to different screen sizes

.modal {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
}

3. Easy Integration

<!– Simply add the component –>
<lib-switcher [data]=”excludedApps”></lib-switcher>

4. Configurable Features

The library supports:

Filtering products based on user permissions
Customisable appearance
Analytics integration
Environment-based routing

export class AppSwitcherService {
appSwitch(app: string): void {
   // Handle routing based on environment and permissions
   if (this.userData.allow_engage && app === ‘engage’) {
     window.open(`${this.SR_CONSTANTS.EngageWebBaseUrl}…`);
   }
   // Track analytics
   this.sendGaEvent(app);
}
}

Benefits of using NPM library

Reduced Dependencies: Teams no longer need to individually maintain a navigation code.
Centralised Updates: Changes to navigation logic or UI can be rolled out universally by updating the library version.
Consistent Experience: Users get the same navigation experience across all products.
Improved Maintenance: Single source of truth for app switching logic.
Better Analytics: Centralised tracking of user navigation patterns.

Implementation Example

To use the Switcher in your application:

Install the package: npm install @shiprocket/switcher

Import the module:

import { SwitcherModule } from ‘@shiprocket/switcher’;
@NgModule({
imports: [SwitcherModule]
})

Add the component: <lib-switcher></lib-switcher>

Conclusion

The Switcher library has significantly improved the development workflow and user experience at Shiprocket. By centralising our navigation solution, we’ve reduced code duplication, improved maintainability, and ensured consistency across our product ecosystem.

This approach can be adapted for any enterprise application that needs to manage navigation between multiple products or services. The library’s modular design and configuration options make it a versatile solution for various use cases.