top of page

Rewriting a 3rd Party Vendor Solution with Angular in Banking

  • Sam Martindale
  • Apr 3
  • 2 min read

Overview

 

A financial institution was operating a 3rd party web application used internally by employees and externally by partners to access a variety of core banking APIs. This application supported several mission-critical domains—including Instant Transfers, Wires, ACH, Real-Time Payments (RTP), and General Ledger Accounts—as well as administrative tools for managing users, permissions, and third-party partner access.

As the business matured and onboarded new partners and fintech clientele, the client experienced growing pains with the inability to add new features and address new business cases, because their software was written and operated by a 3rd party software vendor.

The primary objective was to rewrite the platform from scratch, providing the client with a custom application which they could grow and modify to fit their evolving business requirements, without disturbing their established internal and external users.


Challenges

 

The primary technical challenges revolved around integrating a complex, distributed backend architecture. The system was built on separate back-end APIs for accounts, users, transfers, wires, instant transfers, and lending. This required a consistent approach to state management and secure data access.

Security and permission management were paramount, requiring granular permissions for accounts and rails.

 

Solution

 

To address these challenges, the team designed and implemented a new application from the ground up, focusing on modularity, security, and maintainability. This project was a complete rewrite, aiming to replace the legacy system with a modern, robust, and scalable solution.


Component Standardization


Recognizing the diverse needs of both internal and external users, the team created

reusable Angular components for common patterns.  These components were designed to be highly configurable, allowing flexibility without compromising on consistency. The team followed the "utility-first CSS" approach.  This approach minimized duplication and facilitated faster development across the entire platform.  


State Management


The team optimized application performance by leveraging NgRx Store to minimize unnecessary API calls. By allowing data to be shared seamlessly across components, the store architecture reduced redundant requests and stitched together related data efficiently. Additionally, the application utilized Web PubSub to ensure that the front-end state remained synchronized with real-time changes on the server. This approach not only enhanced responsiveness but also provided a smoother user experience by reducing latency during complex operations and keeping data up to date.


Quality Assurance and Testing


The team implemented unit testing with Karma and Jasmine, alongside code reviews to ensure code quality and maintainability. Moving towards micro-frontends is part of the ongoing strategy to further enhance modularity and scalability.


Outcome

 

The complete rewrite using modern Angular technology was a resounding success. By building a modular and maintainable architecture from the ground up, the client was able to:

  • Replace a legacy system with a robust, scalable solution

  • Deliver a consistent, modern UI for both internal and external users

  • Enhance security and manageability through fine-grained permission controls

  • Improve performance and responsiveness by optimizing data handling and using real-time synchronization

  • Simplify ongoing development with reusable components and modular design

This approach not only modernized the technology stack but also aligned development practices with future scalability and maintainability goals.


Technologies Used


  • Angular 16.1.4

  • NgRx Store 16.3.0

  • Kendo 13.4.0

  • Bootstrap 5.3.0

  • MSAL for Azure AD authentication

  • SCSS for styling

  • Karma and Jasmine for unit testing

bottom of page