KYC Flow Diagram
Jumio + Sumsub
Skip to main content
PassPassPassPassPassPassPassPass
Case Study
M7‑Finance: Digital Banking Platform — Design, Frontend & Backend (end‑to‑end)
Full-cycle product development for a digital banking platform: UX research, information architecture, high-fidelity design, React frontend with real-time data, and a Node.js/PostgreSQL backend with transactional ledger, multi-provider payment processing, PDF invoice generation, scheduled transfers engine, and OAuth 2.0 + JWT authentication — from user pain points to a production-grade fintech system handling wallets, transactions, invoices, and analytics.
6Core modules
45+API endpoints
20+UI screens delivered
87%Test coverage
6
Core modules
45+
API endpoints
20+
UI screens delivered
Year: 2024Industry: Fintech / Digital BankingTimeline: 12 weeks
Problem
The client needed a full-stack digital banking platform built from scratch — not just screens, but a working fintech system. Users of existing banking apps encounter frustration from complex, confusing interfaces, making it hard to find features, track spending, manage invoices, and handle multi-wallet operations. M7‑Finance required both an intuitive, neobank-grade UI and a robust backend: transactional ledger with double-entry accounting, multi-provider payment integration (Payoneer, Remitly, Wise, PayPal), real-time balance aggregation across multiple cards and wallets, a complete invoicing engine with PDF generation and email delivery, scheduled/recurring transfers, and an authentication system meeting banking-grade security standards (OAuth 2.0, JWT rotation, bcrypt, rate limiting). The product had to handle financial data with ACID guarantees while delivering sub-200ms API response times.
Constraints
- •ACID-compliant transactional ledger — every financial operation must be atomic and auditable
- •Sub-200ms P95 API response time for dashboard aggregation queries
- •Banking-grade auth: OAuth 2.0 + JWT with refresh token rotation, bcrypt password hashing, IP-based rate limiting
- •Multi-provider payment abstraction (Payoneer, Remitly, Wise, PayPal) behind unified interface
- •Server-side PDF invoice generation without browser dependency (@react-pdf/renderer)
- •Scheduled transfers engine with cron-based execution and failure retry with exponential backoff
- •Information architecture validated via mind map before any visual design
- •Usability testing with real users before frontend handoff
- •Mobile-first responsive approach for all 6 modules
Solution
Designed, engineered, and deployed a full-stack digital banking platform across three parallel workstreams.
DESIGN
4-stage UX process — competitive research of 12 neobanks, mind map of the complete user journey, wireframes, interactive prototypes tested with 15 users, and a 200+ component high-fidelity UI kit.
FRONTEND (Next.js 14 + TypeScript)
server-side rendering for SEO and initial load performance, React Query for cache-first data fetching with optimistic mutations, Zustand for client state, Chart.js with custom financial chart plugins (candlestick overlays, income/expense comparison), responsive layouts tested on 8 viewport breakpoints, and skeleton loading states for every data-driven view.
BACKEND (Node.js + Express + PostgreSQL)
transactional ledger using double-entry bookkeeping pattern (every debit has a matching credit, enforced at the database level via CHECK constraints and triggers), Prisma ORM with raw SQL for complex financial aggregations (working capital over time, spending by category, balance reconciliation), multi-provider payment integration abstracted behind a Strategy pattern (Payoneer/Remitly/Wise/PayPal adapters with unified webhook handling), PDF invoice generation via @react-pdf/renderer (server-side React components compiled directly to PDF without a browser — lightweight, fast, and production-stable; company header, line items, automatic subtotal/discount/tax/total, client billing details), scheduled transfers engine using Bull queue with Redis-backed job persistence (cron scheduling, retry with exponential backoff, dead-letter queue for failed transfers), and a complete auth system: bcrypt password hashing (cost factor 12), JWT access tokens (15min TTL) with HttpOnly refresh tokens (7-day rotation), Google OAuth 2.0 via Passport.js, Helmet.js for HTTP security headers (CSP, HSTS, X-Frame-Options), IP-based rate limiting (express-rate-limit + Redis sliding window), and CSRF protection. Structured logging via Pino (JSON logs with request correlation IDs, latency tracking, and log levels for audit trail compliance).
API layer
45+ RESTful endpoints organized by domain (auth, users, wallets, transactions, invoices, transfers, analytics), input validation via Zod schemas, standardized error responses, request correlation IDs for distributed tracing, and Swagger/OpenAPI documentation auto-generated from route decorators.
Deliverables
- UX research report (12-app competitive analysis, 15-user interviews, pain point matrix)
- Information architecture mind map (full user journey with sub-flows)
- 200+ component high-fidelity UI kit (Figma → code handoff with tokens)
- Next.js 14 frontend with SSR, React Query, Zustand, Chart.js financial visualizations
- Node.js + Express REST API (45+ endpoints, Zod validation, Swagger docs)
- PostgreSQL transactional ledger (double-entry bookkeeping, CHECK constraints, triggers)
- Multi-provider payment integration (Payoneer, Remitly, Wise, PayPal — Strategy pattern)
- PDF invoice engine (@react-pdf/renderer, automatic calculations, S3 storage, email delivery)
- Scheduled transfers engine (Bull queue + Redis, cron, retry with backoff, DLQ)
- Auth system (JWT rotation, Google OAuth 2.0, bcrypt, Helmet.js, rate limiting, CSRF)
- Structured logging (Pino JSON logs, correlation IDs, latency tracking, audit compliance)
- Wallet management (multi-card CRUD, balance aggregation, payment categorization)
- CI/CD pipeline (GitHub Actions, Docker, automated test suite — 87% coverage)
Screenshots / UX Flow
Step-by-step walkthrough of the product interface
01
Project Overview — problem statement, solution approach, M7-finance brand, and 4-stage UX design process
02
Mind map — information architecture: Registration → Login → Activity/Statistics/Loan/Profile with sub-flows
03
Sign In — email/password authentication with Google OAuth, 'Remember for 30 Days', and 'Forgot password'
04
Sign Up — account creation with full name, email, password fields and Google OAuth option
05
Dashboard — total balance/spending/savings cards, working capital chart (Income vs Expenses), recent transactions, wallet cards, scheduled transfers
06
Transactions — searchable transaction list with Name/Business, Type, Amount, Date, Invoice ID, and View action
07
Invoices — list view with search, 'Create Invoice' button, filters, and status badges (Paid/Pending/Unpaid)
08
New Invoice — company header, invoice/billing details, line items (iPhone 13 Pro Max, Netflix), subtotal/discount/tax/total, client details, Preview/Download/Send
09
My Wallets — bank card management (Universal Bank + Commercial Bank), balance with performance metrics, payments list (Payoneer, Remitly, Wise, PayPal), upcoming payments
10
Settings — account information with personal details (name, DOB, phone, email) and password management
11
Settings (edit mode) — updated personal information with 'Update' button and editable fields
Artifacts
Documents and deliverables from the project
Audit trail schema
SOC 2
Role matrix
RBAC
Verification / Quality gates
8-phase checklist before release
01Build
02Ledger reconciliation tests
03Payment provider integration E2E
04Invoice PDF generation accuracy
05Auth security audit (OWASP)
06Load testing (P95 < 200ms)
07Usability testing passed
0887% test coverage gate
All gates passed
8/8
Tech stack
Next.js 14TypeScriptReact QueryZustandTailwind CSSChart.jsNode.jsExpressPostgreSQLPrismaRedisBull Queue@react-pdf/rendererJWTOAuth 2.0Passport.jsHelmet.jsPinoZodDockerGitHub ActionsSwagger
Outcome
Delivered a production-grade full-stack banking platform: 6 modules (Dashboard, Transactions, Invoices, Wallets, Settings, Auth), 20+ screens, 45+ API endpoints, PostgreSQL ledger with double-entry integrity, multi-provider payment processing, PDF invoice generation, scheduled transfers with queue-based reliability, and banking-grade auth. API response time P95 < 180ms. Test coverage 87%. Dashboard aggregates real-time data from wallets, transactions, and scheduled transfers into a single view without cognitive overload. The invoicing system handles the complete lifecycle: create → line items → calculate → preview → send → track status (Paid/Pending/Unpaid). Zero financial data inconsistencies in production.
Hard parts we solved
Double-Entry Ledger with ACID Guarantees
Every financial operation (deposit, withdrawal, transfer, invoice payment) is recorded as a pair of ledger entries: debit and credit. PostgreSQL CHECK constraints enforce that every transaction batch sums to zero. Database triggers auto-update wallet balances after each committed transaction. This eliminates phantom balances and ensures the system is always reconcilable — the same approach used by production banking cores.
Multi-Provider Payment Abstraction (Strategy Pattern)
Payoneer, Remitly, Wise, and PayPal each have different APIs, webhook formats, and settlement timelines. We built a PaymentProvider interface with adapter classes per provider: initiate(), confirm(), webhook(), refund(). Adding a new provider means implementing one adapter — zero changes to business logic. Webhook signatures are verified cryptographically per provider. Failed webhooks are retried via dead-letter queue with exponential backoff.
Server-Side PDF Generation Without Browser Dependency
Invoice PDFs are built using @react-pdf/renderer — React components that compile directly to PDF on the server without spawning a headless browser. This eliminates Chrome/Chromium dependency, reduces memory footprint from ~300MB to ~40MB per generation, and cuts render time from ~3s to ~200ms. The same component tree defines both the in-app preview and the PDF output, ensuring visual consistency. The engine handles: company header with branding, invoice/billing details, dynamic line items with per-line rates and quantities, automatic subtotal/discount/tax/total calculation, client details block, and unique invoice number generation (sequential with check digit). Generated PDFs are stored in S3 with pre-signed URLs (15-min expiry) for secure download and emailed to clients via SES.
Scheduled Transfers with Queue-Based Reliability
Recurring and scheduled transfers run on Bull queue backed by Redis. Each transfer job carries idempotency key to prevent double-execution. Failed transfers retry with exponential backoff (1s → 2s → 4s → 8s, max 5 retries). After max retries, jobs move to dead-letter queue and trigger admin notification. The scheduler supports cron expressions for flexible recurrence patterns (weekly, monthly, custom). Transfer status is reflected in real-time on the dashboard via WebSocket push.
Have a similar project? Get an estimate or book a call.
Related Cases
Product
TRM Oferta: online registration and public offer acceptance (end‑to‑end)
Full product flow: registration, public offer acceptance with audit trail, PDF proof with seal/signature, admin panel. Legally compliant, mobile‑first.
Product
Restaurant Order & Inventory Management System (end‑to‑end)
Full-cycle restaurant management system: role-based access (Chef, Employee, Accountant, Owner), ingredient inventory with cost tracking, roll recipes with auto-calculated cost/margin, set composition with pricing, order management, supply/write-off logging, accounting with Excel export, analytics dashboards, and a full audit trail for every change.
Product
KutWallet: Multi‑Asset Crypto Wallet with Integrated Exchange (iOS, end‑to‑end)
Full‑cycle mobile crypto wallet for iOS: non‑custodial key management with AES‑256‑GCM encryption, 4‑digit PIN + Face ID biometric auth, 3‑step onboarding with value‑driven storytelling, multi‑asset portfolio dashboard with real‑time price feeds (BTC, ETH, LTC, XRP), built‑in exchange with interactive candlestick charts and Buy/Sell flow, spending analytics with category‑segmented donut chart, QR‑code scanner for instant P2P transfers, multi‑currency fiat settings with 6+ currencies, OAuth social login (Google, Apple ID), 4‑digit OTP email verification, and a Node.js/PostgreSQL backend with WebSocket price streaming and CoinGecko aggregation.