Skip to main content
Samrat Dutta Roy
Back to overview

Systems Architecture / Production Work

Selected Work

In-depth technical case studies documenting real architectural challenges, state machines, browser performance trade-offs, and design system migrations shipped in production.

Featured Case Studies

[01 — 02]
[01]·Enterprise Workflow ArchitectureShipped to Production
Flagship Architecture

Stadium — Corporate Pre-Approval State Machine & Contact Selection Engine

Pure functional state machine managing multi-step corporate gift recipient selection, enterprise pre-approval workflows, and O(changes) mutation payloads across 10,000+ contacts.

  • Structured the ordering wizard with code-split lazy loading so heavy enterprise forms only load when needed, keeping initial page load fast.
  • Built a credit pre-approval system that lets corporate managers approve spending allowances for hundreds of gift recipients.
  • Created a responsive recipient directory featuring live search, sorting, and mobile-friendly drawer views.
ReactTypeScriptApollo GraphQLDynamic ImportsContext APIState Machines
Explore Case Study
[02]·Shared Catalog Filtering InfrastructureShipped to Production
Flagship Architecture

SwagMagic — Multi-Storefront Catalog Filter Engine & History Sync

Debounced multi-storefront catalog filter system with activeInitCallbacks dual-popstate race mitigation, SSR hydration reconciliation, and URL sync across four brand storefronts.

  • Combined multiple browser history listeners into one global handler, preventing navigation loops when users hit the Back button.
  • Added route-guarded debounced URL updates so rapid filter clicks don't freeze the page or overwrite the URL when navigating away.
  • Kept parent and child category checkboxes synchronized, ensuring valid search queries are sent to backend catalog APIs.
Next.jsReactTypeScriptRedux ToolkitBrowser History APIDebouncing
Explore Case Study

More Engineering Work

[03 — 09]
[03]·Core Checkout InfrastructureShipped to Production
Enterprise System

Stadium — Dynamic Rush Shipping Tier Engine & Viewport-Adaptive Placement

Checkout shipping date calculation engine with production holiday calendars, weekend-skipping business day math, dynamic cutoff timestamps, and zero-flicker viewport collision detection.

  • Built a step-by-step checkout state machine that makes sure mandatory details are completed before allowing optional steps or final submission.
  • Created dynamic validation for enterprise accounting fields like purchase orders, cost codes, and department IDs based on company rules.
  • Fixed race conditions between loading order details, wallet balances, and asynchronous payment methods so the cart always displays accurate amounts.
ReactTypeScriptNext.jsSCSS ModulesState MachinesContext API
Explore Case Study
[04]·Telemetry & Performance InfrastructureShipped to Production
Enterprise System

Stadium — Pre-Bootstrap Analytics Event Queuing Buffer & Flush Coordination

Pre-bootstrap event buffering queue with self-terminating mutual recursion, TTL pruning against funnel skew, and synchronous beforeunload flush guarantees.

  • Engineered an in-memory queue that catches early user clicks and interactions before external analytics scripts finish loading.
  • Preserved exact millisecond interaction timestamps so delayed event sending never skews conversion funnels or session timelines.
  • Automatically flushed queued events once tracking tools were ready, using navigator.sendBeacon as a safety net if a user navigates away.
TypeScriptEvent LoopWeb PerformanceBeacon APICore Web VitalsJest
Explore Case Study
[05]·Design System Infrastructure & MetaprogrammingIn Active Migration
Enterprise System

Stadium — Monorepo SVG Sprite Toolchain & Safe Codemod Migration

End-to-end 5-phase icon toolchain converting 418 SVGs into 417 typed React components, per-app static usage scanning, deterministic sprite generation, and dry-run codemod tooling.

  • Built an automated build pipeline that optimizes and bundles over 400 icons into clean SVG sprites, removing external font downloads.
  • Wrote an AST codemod with jscodeshift to automatically and safely convert legacy <i> icon font tags into typed <Icon> components across the codebase.
  • Enforced proportional 1em dimensions so icons never cause layout shifts (CLS 0.000) or flicker while the page is rendering.
TypeScriptSVG SpritesAST CodemodsjscodeshiftSVGONext.js
Explore Case Study
[06]·Performance & Service Worker InfrastructureShipped to Production
Enterprise System

SnackMagic — Enterprise Service Worker Caching & Offline Resilience Pipeline

Production Workbox service worker caching architecture with selective CDN asset caching, runtime config caching, and third-party domain blacklisting (Sentry, LaunchDarkly, Stripe).

  • Cut repeat session catalog load times by ~30% through a progressive Service Worker caching layer.
  • Implemented dual caching strategies: Stale-While-Revalidate for category trees and Cache-First for static bundles.
  • Engineered atomic cache versioning that purges outdated assets upon new deployments, preventing stale script bugs.
JavaScriptService WorkersCache Storage APIStale-While-RevalidateNext.jsWeb Performance
Explore Case Study
[07]·Merchant Menu & Query InfrastructureShipped to Production
Enterprise System

Tooffi — High-Performance E-Commerce & Marketplace Frontend Architecture

Comprehensive frontend architecture for India's premier artisanal gifting marketplace: infinite scroll normalizers, multi-vendor cart conflict resolution, network-adaptive video, 404 middleware, and AggregateOffer SEO.

  • Added infinite-scroll pagination for merchant menus using TanStack Query, smoothly fetching the next page of items as the user scrolls down.
  • Used an Intersection Observer sentinel element to trigger data fetches only when visible, avoiding unnecessary network calls and scroll jank.
  • Built defensive API response normalization that seamlessly handles both modern paginated payloads and older flat product arrays without UI crashes.
Next.js 16React 19TypeScriptTanStack Query (v5)Intersection ObserverAxios
Explore Case Study
[08]·Financial Auditing InfrastructureIn Active Development
Enterprise System

Stadium — Enterprise Wallet Ledger & Bulk Financial Document Export

Corporate financial ledger revamping 5,000+ lines of legacy billing views into normalized transactions, expandable details drawer, CSV exports, and bulk ZIP document packaging.

  • Built an expandable transaction table that lets accountants click any charge to see itemized breakdowns of merchandise, shipping fees, and taxes.
  • Created an accessible 6-filter modal with keyboard focus trapping, Esc key dismissal, and active filter counter chips.
  • Normalized complex multi-currency backend transactions into clear positive credits and negative debits (+/-) for straightforward auditing.
ReactTypeScriptSCSS ModulesLaunchDarklyJestReact Testing Library
Explore Case Study

Personal Projects & AI Tooling

[Vibecoded · Human Architectural Steering]
[P-01]·Personal Project·Vibecoded + Human Steering
Agentic Review

Jev Code Reviewer — Staged AI Code Review Engine & Surgical Agent Handoff

Multi-stage automated code review engine with specialized 25-question React/Next.js review presets, line-level issue attribution, and Model Context Protocol (MCP) server for surgical agent fixes.

  • Vibecoded Foundation with Human Architectural Steering: Developed using rapid AI generation (vibecoding) while retaining strict human governance over prompt architecture and review schemas.
  • Line-Level Issue Attribution: Explicitly directed the reviewer to map code issues directly to source line numbers rather than high-level generalities ('is there possibility that jev identifies the line where the code has issues?').
  • Aggressive Token & Cost Optimization: Guided multi-stage diff chunking and AST filtering to minimize LLM token consumption and eliminate redundant API calls ('can we optimise the jev api calls more to consume even more less tokens?').
  • Scoring Integrity & Anti-Hallucination: Scrutinized the 4-column judgment matrix (Correctness, Security, Reliability, Compatibility) and banned simulated reports ('na no need to fake, also can you check the reports').
TypeScriptTypeSafe JevNode.jsGit Diff APILLM Token OptimizationInteractive Web Review UI
Explore Architecture Case StudyDeveloper Tooling · Local Review Dashboard