Skip to main content

ADR-002: Frontend Technology — React + TypeScript

Status: Accepted Date: 2026-03-16

Context​

PSSaaS needs a frontend framework capable of rendering dense tabular data views and supporting power-user workflows. Secondary marketing desks work with large grids of loan data, pricing comparisons, and trade management screens that require high data density and keyboard-driven interaction.

Options considered:

  • React + TypeScript — Largest ecosystem, AG Grid integration, aligns with PSX frontend
  • Angular — Strong enterprise features but steeper learning curve
  • Vue — Good DX but smaller ecosystem for enterprise data grids
  • Blazor — .NET-native but immature data grid ecosystem and limited community

Decision​

Use React + TypeScript with AG Grid (or similar enterprise data grid) for data-heavy views.

Key factors:

  • Data grid ecosystem: AG Grid is the industry standard for financial/enterprise data grids, with first-class React support
  • Alignment with PowerSeller X: PSX frontend uses Next.js/React — component patterns and knowledge transfer across products
  • TypeScript: Type safety catches errors at compile time, essential for complex financial UI state
  • Ecosystem depth: Thousands of React libraries for charting, forms, state management, and accessibility

Consequences​

Positive:

  • Component reuse possible across PSSaaS and PSX frontends
  • Aligns with Docusaurus (also React-based) — component prototyping in docs can migrate to the app
  • Large talent pool for future hiring
  • AG Grid handles virtualization, sorting, filtering, grouping out of the box

Negative:

  • Separate technology stack from backend (.NET) — no full-stack type sharing without OpenAPI code generation
  • React ecosystem churn requires deliberate dependency management
  • AG Grid Enterprise license cost for advanced features (pivoting, server-side row model)