Skip to main content
Samrat Dutta Roy
Open to Senior Frontend roles
Silchar, Assam, India

Samrat Dutta Roy

Senior Frontend Developer

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.

View ExperienceDownload RésuméGet In Touch
Email:

Experience

+ Years

Focus

React · Next.js

Current

Senior Dev

Education

NIT Silchar

02 / Professional History

Experience

Production engineering at scale

Senior Frontend Developer

Vinsol | Stadium

2022PresentRemote / India

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

  • Improved site performance by 30% by implementing a service worker in SnackMagic.
  • Enhanced global user experience by adding a multi-language translator to bystadium.com, opening the platform to non-English-speaking users and expanding accessibility across regions.
  • Integrated June.so and Microsoft Clarity for user interaction analytics, giving the product team direct visibility into real user behavior and enabling data-driven prioritization of UX fixes.
  • Optimized SEO with canonical URLs, metadata, hrefLangs, and schema markup in collaboration with the SEO team.
  • Built a CMS-powered page using Next.js Incremental Static Regeneration (ISR) with on-demand revalidation, and integrated Prismic.io as the CMS — enabling non-technical teams to publish and update content independently without redeployment.
  • Built a config-based product listing filter for SwagMagic using Context API, syncing state from the URL on initial load and debouncing filter-to-URL updates — achieving an 85-90% reduction in filter response time.
  • Implemented an event queuing system that buffered critical analytics and tracking events fired before third-party SDKs were fully initialized, eliminating 5-6 lost tracking events per page during the bootstrap phase.
  • Currently leading the migration of the icon font family to an SVG sprite sheet, reducing render-blocking font requests and improving icon load performance.
  • Built the priceless order creation flow, handling order entry outside standard pricing rules.
  • Mentored junior developers, reviewed peers' PRs, participated in candidate interviews, and contributed to high-level architectural design discussions.
Next.jsReactJavaScriptTypeScriptRedux ToolkitReact QueryApollo GraphQLMixpanelMicrosoft ClarityGoogle AnalyticsJune.soGoogle Tag ManagerHubSpotChili PiperPrismic.ioService Workers

Freelance Frontend Developer

Tooffi

20252026Remote

Delivered end-to-end frontend architecture, checkout solutions, and performance engineering for e-commerce.

  • Took part in business discussions and translated requirements into technical solutions, from checkout and cart architecture to SEO and performance initiatives.
  • Built the checkout flow end-to-end, including validation, order summary, and payment handoff.
  • Resolved cart merge conflicts across multiple vendors, reconciling line items and quantities into a single consistent cart state.
  • Implemented local cart management for non-authenticated users, persisting cart state client-side and syncing it once the user logged in.
  • Implemented image optimization strategies to reduce payload size and improve page load speed.
  • Configured caching for the RSC payload and static assets (excluding images) to speed up subsequent page loads.
  • Added a Next.js top loader for instant navigation feedback and Suspense-based loading states to improve perceived performance.
  • Handled SEO — canonical tags, meta titles/descriptions, JSON-LD structured data — and analytics.
  • Implemented custom 404 handling via middleware for cleaner routing and error handling.
  • Set up on-demand cache invalidation for static pages, keeping content fresh without full redeployments.
  • Added pre-commit hooks for ESLint and Prettier to enforce code quality and consistency across the codebase.
Next.jsReactTypeScriptMiddlewareSuspenseESLintPrettierHusky

Senior Analyst

Capgemini

20212022India

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

  • Built frontend components and user interfaces using HTML, CSS, JavaScript, and React.
  • Collaborated with agile engineering teams to ensure clean, maintainable, and responsive web experiences.
ReactJavaScriptHTMLCSS

03 / Technical Competencies

Skills & Focus Areas

Strictly verified production capabilities

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

04 / Engineering Notes

Technical Writing

View All Articles
·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
·8 min read

Why Did My Already-Loaded Component Show a Skeleton Again? React Suspense Bubbling Explained

I assumed once a React component loads, it stays loaded and you never see its skeleton again. A bug involving a modal and a misplaced Suspense boundary proved me wrong — and taught me how dynamic imports actually work under the hood.

reactsuspensedynamic importnext.jssuspense bubblinglazy loadingskeleton loaderreact internalsfrontend debuggingjavascriptreact performance
·10 min read

Functions vs Classes in JavaScript: When to Use Which and Why It Actually Matters

Should you use functions or classes in JavaScript? Modern frameworks lean heavily on functions — React moved to hooks, Django started function-first. So why do classes still exist? The answer lies in memory, the prototype chain, and what your code actually needs to do.

javascripttypescriptfunctions vs classesclosuresprototype chainOOPfunctional programmingReact hooksclass componentsDjango viewsmemory efficiencysoftware architecturejavascript interview

04 / Background & Approach

About

Engineering philosophy & background

I am a Senior Frontend Engineer with over 5 years of experience building reliable web applications. My work focuses on the intersection of user experience and runtime efficiency—optimizing render cycles, asset pipelines, and state synchronization across large-scale single-page apps.

I take a pragmatic, restrained approach to frontend engineering: avoiding unnecessary abstraction, prioritizing native web standards and semantic HTML, and measuring before optimizing. Whether refactoring a core catalog filtering pipeline or eliminating render-blocking fonts, I care deeply about the perceptible speed and stability of the final product.

Education

B.Tech in Mechanical Engineering

NIT Silchar

Location

Silchar, Assam, India

Available for Remote Roles (Worldwide / India)

Experience

5+ Years in Frontend

React · Next.js · TypeScript

06 / Get In Touch

Contact

Let's build thoughtful software together.

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

Send Email