Skip to main content
Samrat Dutta Roy
Open to Senior Frontend roles
Silchar, Assam, India·UTC+5:30

Samrat Dutta Roy

Senior Frontend Developer

“I build frontend systems that are fast, maintainable, and difficult to break.”

Frontend engineer with 5 years of experience building scalable, high-performance web applications. Strong expertise in React and Next.js with a focus on performance optimization, modular architecture, and developer productivity.

Explore Systems
Download Resume
Get In Touch
Email:

01 / Experience

5+ Years

Production Scale

02 / Core Stack

React · Next.js

TypeScript · App Router

03 / Specialization

Perf & Architecture

Web Vitals · State Sync

04 / Education

NIT Silchar

B.Tech Mechanical

Selected Work

Production systems engineered for speed, reliability, and precision.

01·STADIUMShipped to Production

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.
Explore case study
02·SWAGMAGICShipped to Production

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.
Explore case study
Complete Systems Archive

Explore 6 production architectures including checkout state machines, corporate pre-approval flows, and audit ledgers.

View All Engineering Work →
Independent Experiments & AI Tooling

Personal Projects

Explorations in agentic AI tooling, developer workflows, and prompt-driven engineering.

[AI-Assisted · Human Architecture]
P-01·Architectural Prompt Engineer & Creator·Vibecoded with Human Architectural Steering

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.

Architectural Directives & Human Steering:

  • 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').
  • Secret & Privacy Boundaries: Imposed strict zero-exposure rules preventing any ingestion or leakage of .env files or secret keys during automated scans.
TypeScriptTypeSafe JevNode.jsGit Diff APILLM Token OptimizationInteractive Web Review UIVitest
Explore case studyDeveloper Tooling · Offline CLI & Web UI

Experience

A chronological record of production engineering, system optimizations, and measurable outcomes.

Senior Frontend Developer

Vinsol | Stadium

2022 — PresentRemote / India
Live Platforms:
bystadium.comsnackmagic.comswagmagic.com

Engineering core client-side features, asset pipelines, and performance optimizations across high-volume corporate gifting and eCommerce platforms.

Selected Major Work

SwagMagic Config-Based Filter Engine (URL-as-State)

Built a modular catalog filter engine that reads filter settings from the URL on page load and updates the URL with debouncing, keeping the UI smooth without freezing the browser thread.

Enterprise Icon Font to SVG Sprite Sheet Migration

Led a design system upgrade across 4 apps and 8 shared packages, converting 400+ legacy icon fonts into optimized SVG sprite sheets using automated code transforms to eliminate icon flicker and layout shifts.

Pre-Bootstrap Analytics Event Queuing Buffer

Engineered an in-memory event buffer that captures user clicks and telemetry events fired before third-party tracking scripts finish loading, ensuring zero analytics data is lost during startup.

CMS-Powered ISR Architecture (Prismic.io)

Built dynamic marketing pages using Next.js Incremental Static Regeneration (ISR) with on-demand cache updates, letting marketing teams publish content instantly with static page performance.

Multi-Language Global Localization (bystadium.com)

Engineered internationalization and translation support across bystadium.com, expanding accessibility and localized shopping for international customers.

Service Worker Caching & Offline Catalog Pipeline

Engineered a progressive Service Worker caching layer using Stale-While-Revalidate and the Cache Storage API, delivering a ~30% speedup on repeat visits and enabling offline browsing.

Supporting Engineering & Integrations
  • ↳Built the enterprise corporate pre-approval order flow for handling large, high-volume orders outside normal catalog pricing.
  • ↳Integrated June.so and Microsoft Clarity to track user interactions and identify friction points in real user journeys.
  • ↳Co-developed technical SEO across the platforms, including canonical links, Open Graph tags, hreflang attributes, and structured JSON-LD schemas.
  • ↳Mentored junior engineers, conducted peer code reviews, participated in hiring interviews, and contributed to frontend technical RFCs.
Technologies
ReactNext.jsTypeScriptRedux ToolkitApollo GraphQLTailwind CSSLaunchDarklyWeb Vitals

Freelance Frontend Engineer

Tooffi

2025 — 2026Remote / India
Live Platforms:
tooffi.com

Delivered the end-to-end frontend architecture, checkout pipeline, and performance engineering for a multi-vendor commerce platform.

Selected Major Work

End-to-End Multi-Vendor Checkout Pipeline

Engineered the complete checkout experience from scratch, including address validation, recipient details, and secure payment processing.

Distributed Multi-Vendor Cart Reconciliation

Designed a reconciliation state machine that cleanly combines items, quantities, and delivery locations from multiple vendors into one consistent checkout order.

Non-Authenticated Local Cart Persistence

Implemented guest cart storage in the browser, seamlessly merging a guest shopper's items into their account when they sign in without losing any data.

Next.js App Router RSC & Static Asset Caching

Configured caching for React Server Component payloads and static assets, paired with Suspense streaming boundaries to make page navigation feel instant.

Merchant Dashboard & Dynamic Product Customization

Built merchant portal tools with infinite-scroll pagination, reusable data fetching hooks, and custom product configuration screens.

Supporting Engineering & Integrations
  • ↳Configured edge middleware for custom 404 routing, regional rewrites, and unified error handling.
  • ↳Implemented on-demand cache revalidation for static pages so content updates go live instantly without full redeployments.
  • ↳Integrated Next.js top loader for instant route change feedback and smooth skeleton loading states.
  • ↳Set up JSON-LD schema markup, canonical links, and Open Graph metadata for search engine indexing.
  • ↳Configured ESLint, Prettier, and Husky pre-commit hooks to keep code quality consistent across the team.
Technologies
React 19Next.js 16TypeScriptTanStack QueryTailwind CSS

Senior Analyst

Capgemini

2021 — 2022Remote / India

Engineered frontend components and user interface modules within cross-functional enterprise engineering teams.

Selected Major Work

Enterprise Component Engineering

Built responsive UI components and interactive web interfaces using HTML5, modern CSS, JavaScript, and React.

Agile Development & Code Quality

Collaborated closely in agile engineering teams to deliver clean, maintainable, and responsive web experiences.

Supporting Engineering & Integrations
  • ↳Maintained cross-browser compatibility across enterprise desktop and mobile environments.
Technologies
JavaScript (ES6+)ReactHTML5CSS3 / SCSSGit

Skills & Focus Areas

Production technologies, frameworks, and tooling applied across enterprise systems.

Frontend

  • Next.js
  • React.js
  • JavaScript
  • TypeScript
  • Tailwind CSS
  • ShadCN
  • Context API
  • Modular Architecture

State & Data

  • Redux Toolkit
  • React Query
  • Apollo GraphQL
  • Axios

CMS / Platforms

  • Sanity CMS
  • Prismic.io
  • HubSpot
  • Chili Piper

Analytics & Telemetry

  • Mixpanel
  • Microsoft Clarity
  • Google Analytics
  • Google Tag Manager
  • June.so

Build & Tooling

  • Git
  • ESLint
  • Prettier
  • Husky pre-commit hooks
  • Asset Optimization

AI Tools

  • Cursor
  • Antigravity

Technical Writing

In-depth notes on browser runtime internals, React rendering lifecycles, and state synchronization.

View All Notes
Featured Note·
10 min read

From 3 Seconds to Instant: How URL-as-State Was Silently Killing Our Filter UX

Our product filter was taking 2-3 seconds to respond on every selection. The culprit wasn't a slow API or missing cache — it was using the URL as the sole source of truth. Here's how a hybrid Redux approach fixed it, what broke afterward, and what I'd do differently if rebuilding it today.

reactnext.jsURL statereduxfilter UXperformanceuseSearchParamsdebouncereplaceStateSPAcompound componentsfrontend architectureweb performance
Read Full Note
Selected Technical Notes
·9 min read

Why Your Next.js Images Are Slow: The Props You're Probably Missing

Our images were loading too slowly. CDN caching wasn't enabled, but the slowness felt like something more. Diving deeper revealed that missing width, height, and sizes props on next/image components were forcing the browser to download the largest available image every time.

Engineering
Read

About

Engineering philosophy, background, and approach to software development.

With over 5 years of experience architecting and shipping production frontend applications, I specialize in building fast, scalable, and thoughtful web interfaces. My focus centers on deep browser performance, modular component architectures, reducing runtime overhead, and crafting accessible digital products that delight users and scale seamlessly.

Education

B.Tech in Mechanical Engineering

NIT Silchar (2017 – 2021)

Location

Silchar, Assam, India

Available for Remote Roles (Worldwide / India)

Experience

5+ Years in Frontend Architecture

React · Next.js · TypeScript

Download Resume (PDF)

Contact

Inquiries, opportunities, and discussions around web architecture.

Let's build thoughtful software together.

I am currently open to senior frontend engineering roles and technical discussions around web performance, React architecture, URL state synchronization, and design systems.

Send Email
GitHubLinkedIn