Dispursa

Engineering Challenges & Solutions

Financial Accuracy and Transaction Integrity

One of the most critical challenges I handled while building the bulk payout system was ensuring financial accuracy across the entire transaction lifecycle.

To eliminate rounding inconsistencies and floating-point errors, I designed the frontend to transmit payout amounts to the backend in minor currency units. This ensured deterministic financial calculations across services and reduced reconciliation risks.

Because payout fees could only be calculated after batch submission, I designed transaction detail views that dynamically adapted once a payout entered the “created” state. The UI clearly communicated backend-calculated fee breakdowns while treating the backend as the single source of truth for financial data.

To reduce the risk of duplicate submissions which can be catastrophic in financial systems , I implemented several frontend safeguards. Submission actions were disabled during processing states, approval controls were conditionally rendered based on transaction status, and session-level unique identifiers were introduced to prevent rapid repeated submissions.

I also improved usability for finance teams handling bulk CSV uploads. Since batch files could not be mutated client-side, I mapped backend validation responses directly to specific table rows and surfaced contextual tooltips explaining errors. This significantly reduced operational friction during payout preparation.

Performance and Large Data Handling

Bulk payout workflows inherently involve large datasets and high-frequency state changes.

To maintain performance and scalability, I implemented server-side pagination with query-parameter driven data fetching. I used TanStack Query to manage server state, cache transaction lists, and invalidate stale data after payout mutations such as creation or approval.

Due to the financial sensitivity of payout states, I deliberately avoided optimistic updates. Instead, I relied on backend-confirmed updates combined with real-time socket events to ensure users always viewed accurate and consistent transaction information.

For less interactive views such as receipts and summaries, I leveraged server-rendered pages to reduce client complexity and improve load performance.

Managing Complex Multi-Step Financial Workflows

Bulk payout processing involved multiple stages — drafting payouts, reviewing batch details, submitting for approval, and monitoring processing outcomes.

To manage user input across these steps, I implemented persistent draft state using Zustand, allowing finance teams to build payout batches without losing progress even after page refreshes. This approach simplified flow orchestration across modal-driven interfaces and avoided excessive prop drilling.

I also implemented UI logic guards to enforce valid transaction state transitions. For example, approval actions were dynamically hidden or disabled depending on payout status, reducing the likelihood of operational errors.

Security Architecture in a Fintech Context

Security was treated as a foundational requirement throughout development.

I implemented a Backend-for-Frontend (BFF) architecture using Next.js API routes and server actions to prevent exposure of sensitive payment endpoints, authentication headers, and tokens in client-side network requests.

To mitigate replay risks during transaction approvals, I introduced idempotency strategies at the interaction layer. I also supported role-based access control across routes, components, and user actions to ensure users only accessed capabilities relevant to their operational roles.

During development, I identified an opportunity to further strengthen maintainability by introducing a reusable access-control wrapper component that could centralize tier-based authorization logic across the application.

Improving User Trust Through Real-Time Updates

Before real-time updates were introduced, operational users had to manually refresh transaction pages to confirm whether payouts had been processed. This created uncertainty and slowed monitoring workflows.

I integrated socket-driven real-time transaction events across dashboards and detail views, enabling instant status updates after approvals or processing changes.

This significantly improved user confidence, reduced operational delays, and allowed monitoring teams to respond faster to payout issues.

Architecture and Scalability Thinking

To support long-term scalability and maintainability, I introduced a modular frontend architecture where features were structured into isolated domains. Reusable UI patterns such as card layouts, table components, and customizable buttons were implemented to ensure consistency across the dashboard while allowing style overrides using Tailwind utilities and twMerge.

I created centralized route configuration objects to make navigation paths easier to maintain and update from a single entry point. API abstraction patterns were also introduced through reusable TanStack Query hooks for data fetching and mutations, improving developer experience and reducing duplication.

State management decisions were intentional — global state with Zustand was used for complex multi-step payout workflows, while local component state was used for simpler UI interactions. Form validation was standardized across the app using React Hook Form and Zod, improving reliability and reducing inconsistent validation behavior.

Theming strategies were introduced using Tailwind configuration tokens to avoid scattered color values and maintain visual consistency as the product evolved.

Product Thinking and UX Contributions

I actively contributed to improving user experience around bulk payout validation. Since uploaded CSV batch files could not be modified client-side, I proposed and helped design a row-level error feedback system that highlighted problematic payout entries with contextual tooltips.

This reduced confusion for finance teams and enabled faster correction of transaction errors. While many product decisions were collaborative team efforts, this validation UX improvement significantly enhanced operational efficiency for users performing large batch payouts.

Reliability and Edge Case Handling

Reliability was critical given the financial nature of the platform. The system was designed to clearly communicate partial payout failures using status badges and backend-driven notifications, ensuring users remained informed about transaction outcomes.

Network failure states were also handled carefully, providing users with feedback while avoiding accidental duplicate financial operations.

For real-time updates, socket connection lifecycle management was improved by tracking connection identifiers. On page reload, connection identity checks ensured the UI either reused valid connections or triggered controlled data refetching to maintain accurate transaction visibility.

Key Learnings

Working on Dispursa deepened my understanding of fintech system design, particularly the importance of using minor currency units to maintain calculation accuracy. I strengthened my decision-making around when to use global versus local state and learned the importance of treating the backend as the ultimate source of truth in financial applications.

The project reinforced the need to isolate sensitive API interactions from the client through secure architecture patterns and to build reusable UI components that can scale across complex dashboards.

Collaboration played an important role ,documentation, feature proposals, and occasional pair programming helped ensure continuity when I transitioned to another project, allowing the system to continue evolving smoothly under other engineers.