SME Advisory & Product-Offer Front End for Corporate Banking
A leading Romanian retail bank
Overview
A single-page Angular application for the corporate-banking (legal entities / SME) segment of a leading Romanian retail bank. It lets bank staff look up an SME client, run a needs assessment, and surface and send the right product offers, deposits, lending, card acceptance, insurance, pensions, investment funds, FX and package upgrades, all built on the bank’s design system. Development is ongoing, with 139 commits between December 2025 and October 2026.
The Challenge
Corporate-banking advisory touches many product lines, each with its own eligibility rules, campaign logic and hand-off into downstream systems. The bank needed one coherent, bank-styled front end that could grow product by product without becoming a tangle: strict visual fidelity to its design system, bilingual (RO/EN) copy, authenticated access through the bank’s enterprise identity provider, and a codebase that several contributors could extend safely under enforced conventions.
What We Built
An Angular 22 workspace with a single app (apps/dat-sme) organised into application/ (root shell and routes), modules/ (lazy-loaded features), shared/ (components, guards, interceptors, pipes, services, a dat-kit component library and testing helpers), store/ (NgRx, one slice per domain) and utils/ (pure functions), with path aliases and an enforced rule that shared/ and store/ never import from modules/.
Feature modules cover the advisory journey end to end: login, dashboard, client, current-account, depozite (deposits), finantare / finantare-investitii (lending and investment financing), acceptare-carduri (POS / card acceptance), asigurari (insurance), pensie-facultativa (voluntary pension), fonduri-investitii and planuri-investitii (investment products), tranzactii-valutare (FX), conventie-salariala (payroll agreements), subventie-apia (agricultural subsidies), upgrade-pachete (package upgrades), campanie-marketing, and a family of oferta-* offer screens (deposits, digital lending, events, medical-sector financing, business credit card). NgRx slices include auth, client-data, current-account, needs-assessment, send-deeplink, send-email, pensie-facultativa and tranzactii-valutare, fronted by a store facade with meta-reducers and a store-reset service.
The login flow is a redirect-and-code-exchange against the bank’s SSO identity provider with bearer-token refresh and user-info retrieval. Offers hand off into the bank’s SME digital-banking product through deep-link and email-notification endpoints; client data comes from a customer-lookup service backed by the bank’s analytics platform. The app also includes PDF generation (jsPDF + autotable), QR generation, product analytics (Countly), device detection, an unsupported-browser page, and an environment.mock.ts configuration that targets a sibling mock-API repo, a zero-dependency Node mock backend that answers every route the app calls, fakes the identity provider, encodes the client-population rules used for eligibility flags, and can pack the whole front end into a single shareable HTML demo.
Technologies & Approach
Angular 22 with standalone components and OnPush change detection; NgRx 22 Store, Effects and store-devtools behind a facade; the bank’s own Angular UI kit and design tokens with SCSS + BEM; ngx-translate with sorted en.json / ro.json dictionaries; Angular Material and CDK for supporting widgets; Jest (jest-preset-angular, jest-marbles for effects) with coverage thresholds and a Sonar-compatible report. Ten architecture decision records (project structure, component architecture, NgRx, API service pattern, routing and guards, i18n, styling, Figma-to-design-system conversion, linting, testing) codify conventions, and Husky enforces them: pre-commit runs i18n sort, lint and format; pre-push runs the CI test suite and a full production build. Production builds ship with hashed output, size budgets and a dev-tools file replacement; an oc start-build script pushes the bundle to the bank’s OpenShift environment.
Outcome / Impact
An actively developed, convention-driven advisory front end that has grown to more than twenty feature modules while keeping a clean layering (features, shared kit, state, utils) and automated quality gates on every commit and push. The mock backend and single-file demo packer let the team develop and demonstrate journeys without access to the bank’s network, and the Jest suite verifies the eligibility rules against the front end’s own functions.
Capabilities Demonstrated
- Large-scale Angular SPAs built on a bank’s proprietary design system
- NgRx state architecture with facade pattern, meta-reducers and effects testing
- Enterprise SSO login flows (redirect, code exchange, token refresh)
- Multi-product advisory and offer journeys for corporate/SME banking
- ADR-documented conventions enforced by Husky, ESLint, Stylelint and Prettier
- Mock-backed local development and self-contained HTML demos for stakeholder review
- Bilingual (RO/EN) i18n with enforced dictionary hygiene