E-Fraud Detection Console
Dense real-time transaction analysis for fraud operations teams.
Role
Senior React Developer — analyst console frontend
Engagement
Full-time at Latitude Technolabs
Client
Latitude Technolabs — fintech client
Period
2022
The problem
Fraud analysts work in volume: thousands of transactions, tight decision windows and a need to see signal immediately. The frontend had to render large datasets without dropping frames, keep complex filter state shareable, and never lose an analyst's place in a queue.
My responsibility
Built the analyst console — data tables, risk visualisations, filter and queue state, and case detail views.
Surfaces shipped
Analyst console
Transaction feed, risk scoring, case queues, rule configuration and audit history.
Reporting views
Trend analysis, model performance and exportable case summaries.
Architecture
How it was structured, and the reasoning behind each boundary.
- 01
Virtualised data grids
Rows render on demand so a 5,000-transaction result set scrolls at frame rate; sorting and column resizing operate over the data model, not the DOM.
- 02
Filters in the URL
Every filter, sort and time range is serialised into the query string, so an analyst can hand a colleague an exact view and refresh never loses context.
- 03
Polling with backoff
Near-real-time updates via React Query refetch intervals that back off when the tab is hidden or a case is open for editing.
Key challenges
- 01
Rendering density without jank
Risk sparklines, status pills and inline actions per row multiply cost fast. Rendering was kept cheap with memoised cells and transform-only animations.
- 02
State that survives interruption
Analysts get interrupted constantly. Draft case notes persist locally and reconcile on return, so a decision in progress is never silently discarded.
Implementation
- 01
Keyboard-first case triage
Analysts can move through a queue, open a case, apply a decision and return without reaching for the mouse — a measurable throughput change.
- 02
Legible risk encoding
Colour is never the only channel; score numerals, patterns and labels accompany every visual encoding for colour-blind analysts and low-quality displays.
Results
- 01Large result sets scroll smoothly on standard analyst hardware.
- 02Shareable filtered views became the team's normal way of escalating a case.
- 03Triage flow completed entirely from the keyboard.
Technologies
- Next.js
- React
- TypeScript
- React Query
- D3
- Tailwind CSS
- Jest
Technical highlights
- Virtualised grids with memoised cell rendering
- Full filter/sort/time state serialised to the URL
- Keyboard-first triage workflow
Building something similar? I’d like to hear about it.
Start a conversation