HRIS Platform
Problem
An HR information system that companies run their daily operations on — payroll, org structure, time off, employee records. It had grown to roughly 19,000 modules, and every server interaction went through Redux-Saga. Each new screen meant hand-writing fetch, cache, invalidation, and pagination logic by hand, and the dev server had slowed to the point where the feedback loop itself was the bottleneck.
Constraints
No feature freeze — the product shipped throughout. That ruled out a rewrite and meant both data layers had to coexist in the same app, sometimes on the same screen. Two areas resisted a naive port: tables fed by WebSocket pushes, where the socket rather than a refetch is the source of truth, and long-running sagas coordinating multi-step flows that a request-scoped query hook has no way to model.
What I chose · Outcome
A strangler pattern instead of a big-bang migration: everything new or touched went onto TanStack Query, sagas stayed in place until their flow was ready to move, and a thin adapter kept socket pushes writing into the query cache so the two layers never disagreed. The long-running orchestration sagas were left alone deliberately — they are the one thing sagas are genuinely better at. Separately, moving the build to Vite fixed the feedback loop.
- Moved the build to Vite, cutting cold dev-server start on a ~19,000-module app
- Migrated off Redux-Saga incrementally — no feature freeze, no dedicated migration sprint
- WebSocket-fed tables write straight into the TanStack cache — one source of truth instead of a socket store racing a query store
- Advanced tables on TanStack Table, holding sorting, filtering, and column state across large datasets
- Dynamic, schema-validated forms with conditional UI via React Hook Form, against an accessible component set shared across enterprise modules