Available nowSenior Front-End Engineer · Remote contracts · India

Suprabhat Kumar

React architecture, SaaS dashboards, and frontend performance

Problems I solve: React modernization, Frontend performance, Data-heavy dashboards, Accessible interfaces, Design systems, Architecture reviews.

I help SaaS teams build accessible React products, data-heavy dashboards, and frontend systems they can maintain.

Role fit
Senior Front-End Engineer
Proof
6 case studies · 6+ years
Best for
SaaS dashboards, React architecture, performance
  • React
  • TypeScript
  • Redux Toolkit
  • FastAPI
  • PostgreSQL
View case studiesDiscuss your frontend workLinkedIn ↗

24–28 hours weekly · Americas and Europe overlap · Available now

Portrait of Suprabhat Kumar, Software Engineer
6+ years · React · Next.js · TypeScript · FastAPI
Selected workPerformance modernizationConfidential case studies show architecture, constraints, decisions, and outcomes without client-sensitive detail.Core Web VitalsFrontend performanceRendering optimizationRead case study Core stackReact + TypeScript systemsFrontend architecture, state management, APIs, accessibility, design systems, and Core Web Vitals tuned for production.Explore expertise AvailabilityRemote freelance and part-time contracts24–28 hours weekly · Available now · 2–4 hours overlapGet in touch
Featured case studies

Anonymized and public work showing constraints, implementation choices, accessibility, and performance practice.

Client names, private data, screenshots, and unverified metrics are intentionally excluded.

Open source · npm package

react-smart-copy

Headless, type-safe clipboard interactions for React

A React library that handles the whole copy interaction, not only the clipboard call: copying, copied, failed, retry, and paste, with honest error states, hover, focus, and touch reveal, and screen-reader announcements built in.

  • Zero runtime dependencies
  • React 18 and 19, SSR and Next.js App Router safe
  • Typed, classified errors instead of silent failures
  • Keyboard-first triggers and screen-reader announcements
  • Framework-agnostic core for plain JavaScript
npm install react-smart-copy
Read the case study: react-smart-copy

MIT license · TypeScript · React 18 and 19

Open source · npm package

react-inp-chunker

Chunk heavy React work and yield to the main thread to protect INP

A headless React and TypeScript library that splits heavy synchronous work into time slices of a few milliseconds and yields to the main thread between them, so clicks and typing stay responsive and Interaction to Next Paint (INP) stays good.

  • Yields with scheduler.yield(), then MessageChannel, then setTimeout
  • 5 ms time slices by default, with pause, resume, and cancel
  • React 18 and 19, safe for server rendering
  • React-free core for plain TypeScript, Web Workers, and Node
  • No dependencies beyond React; ESM and CommonJS builds
npm install react-inp-chunker
Read the case study: react-inp-chunker

MIT license · TypeScript · React 18 and 19

Analytics command center

Designed a role-based dashboard with accessible charts and resilient data states for fast decision-making.

  • Core Web Vitals
  • Performance
  • Accessibility
  • Data UX
Read case study

Design system uplift

Standardized components and tokens to improve UI consistency across multiple teams and products.

  • Design systems
  • Consistency
  • Scalability
Read case study

Performance modernization

Reduced load times by optimizing assets, routing, and rendering strategies across a complex UI.

  • Core Web Vitals
  • Optimization
  • Frontend
Read case study

View all work

Problems I solve

Frontend work for complex product surfaces

Focused help where maintainability, speed, accessibility, and product clarity intersect.

React modernization

Untangle brittle component and state patterns while preserving product continuity.

Typical signals

  • Components that mix data fetching, state, and layout
  • Prop drilling or global state used as a workaround
  • Regressions after routine UI changes

Outcome: An incremental migration plan with clear component and state boundaries, shipped without a feature freeze.

Frontend performance

Find and prioritize rendering, asset, interaction, and Core Web Vitals bottlenecks.

Typical signals

  • Slow LCP or INP in field data or Lighthouse lab tests
  • Large JavaScript bundles on first load
  • Interactions that stutter on mid-range devices

Outcome: A prioritized fix list tied to Core Web Vitals, with before-and-after measurements.

Data-heavy dashboards

Create clear information hierarchy and resilient loading, empty, error, and permission states.

Typical signals

  • Tables and charts that slow down as data grows
  • Unclear loading, empty, or error states
  • Filters and views that differ by user role

Outcome: A scan-first dashboard with typed data contracts and resilient states for every panel.

Accessible interfaces

Improve semantics, keyboard paths, focus behavior, forms, and assistive-technology support.

Typical signals

  • Controls that cannot be reached or operated by keyboard
  • Missing labels, focus order, or screen-reader announcements
  • Customer or procurement requests for WCAG 2.2 AA evidence

Outcome: Severity-ranked findings and fixes mapped to WCAG 2.2 AA success criteria.

Design systems

Build reusable components, tokens, documentation, and adoption patterns teams can maintain.

Typical signals

  • The same component built differently across teams
  • Design tokens that drift between Figma and code
  • Slow reviews over visual inconsistencies

Outcome: A documented component library and token set in Storybook that teams can extend.

Architecture reviews

Assess boundaries, state ownership, rendering strategy, testing, and delivery risks.

Typical signals

  • A codebase inherited after team changes
  • Unclear ownership of state, data fetching, and routing
  • Rising delivery risk before a major release

Outcome: An architecture decision record and a refactor roadmap ranked by risk and effort.

Frontend engineering services

Defined support for a specific frontend problem

Each engagement has a clear fit, concrete deliverables, and a working duration. Final scope is confirmed after discovery.

Engineering approach

Evidence before abstraction

  1. Clarify the decision

    Start with users, constraints, failure states, and the business decision the interface supports.

  2. Design the system

    Choose component, data, state, and rendering boundaries that fit the actual product.

  3. Verify the result

    Use type checks, tests, accessibility review, performance budgets, and documented handover.

Remote collaboration

Delivery stays visible across time zones

Based in Noida Extension on IST (UTC+5:30), with 24–28 hours of weekly capacity and 2–4 hours of agreed real-time overlap for teams in the Americas, United Kingdom, and Western Europe.

Suprabhat KumarNoida Extension, India · IST (UTC+5:30)
  • India
  • Denmark
  • China
  • Germany
  • Australia
  • New Zealand

Async by default

Written context, decisions, and progress updates reduce meeting dependency.

Shared milestones

Scope, review points, risks, and next actions remain visible throughout delivery.

Review and handover

Changes include review context, documentation, knowledge transfer, and full source ownership after final payment.

Writing

Featured articles

Practical guides on performance, accessibility, and modern UI delivery.

All articles

Accessibility in React: What Most Developers Skip

Focus management, keyboard nav, ARIA live regions, and screen reader testing — the React a11y gaps that hurt real users.

Read article

Clean UI Design Principles Every Frontend Engineer Should Know

Clean UI is an engineering property: spacing scales, OKLCH color tokens, motion budgets, and contrast ratios you can measure and enforce in code.

Read article

Cloud Web Interface Design: Best Practices for Scalable, Accessible UIs

Cloud web interface design best practices: component boundaries, explicit state contracts, accessibility at scale, and performance budgets.

Read article
About

About me

Suprabhat Kumar, also known as Shubh, is a Senior Front-End Engineer with 6+ years building SaaS portals, enterprise dashboards, design systems, and accessible websites. Based in Noida Extension, India, with delivery experience across teams in Denmark, China, Germany, Australia, and New Zealand.

ShubhSuprabhat Kumar

Suprabhat Kumar smiling in a navy puffer jacket on a grassy park hill, with bare winter trees and a city skyline behind him.
Away from the keyboard
01

Performance-first

I use performance budgets, Core Web Vitals, and measured browser evidence throughout delivery.

02

Accessibility by default

Semantic HTML, keyboard navigation, visible focus, and manual assistive-technology review guide implementation.

03

Scalable architecture

Reusable component libraries, design tokens, and predictable state management that teams can own long-term.

04

Full-stack capable

FastAPI and PostgreSQL support full-stack delivery when a frontend feature needs a focused API or data layer.

Explore experienceDownload résumé

Expertise

Core expertise

Senior frontend support where architecture, data, accessibility, and performance meet.

Frontend Engineering

Build SaaS portals and data-heavy dashboards with clear state ownership, resilient data states, accessible interactions, and measured rendering performance.

ReactNext.jsTypeScriptRedux ToolkitRTK QueryTanStack QueryTailwind CSSAnt DesignChakra UICore Web Vitals

Back-End & API Integration

Integrate REST and GraphQL data flows, or build focused FastAPI and PostgreSQL features when the product needs end-to-end delivery.

FastAPIPostgreSQLREST APIsAuthentication flowsData pipelinesGraphQLNode.js

Design Systems & Performance

Create component libraries, design tokens, Storybook documentation, accessibility defaults, and adoption patterns teams can extend.

Design systemsStorybookWCAG 2.2 AAPerformance budgetsFigmaAzureGit
Skills

Skills

The technical stack I use to deliver scalable, performant, accessible UI systems.

Languages and frameworks

  • React + Next.js
  • JavaScript + TypeScript
  • HTML5
  • Astro
  • jQuery

State, data and validation

  • Redux Toolkit + RTK Query
  • Zustand
  • React Hooks + Context API
  • TanStack Query
  • GraphQL
  • Zod

Styling and design systems

  • CSS3 + Sass
  • Tailwind CSS
  • shadcn/ui
  • Chakra UI
  • Headless UI
  • Bootstrap 5 + React Bootstrap
  • Ant Design
  • Material UI

Backend and databases

  • FastAPI (Python)
  • PostgreSQL
  • MongoDB
  • Node.js
  • REST APIs

Design and documentation

  • Figma
  • Storybook

Delivery and workflow

  • Git
  • GitHub Actions
  • Azure
  • Claude AI

Discuss a technical challenge

Experience

Experience

  1. Topsoe

    — Present

    Software Engineer III

    • Hybrid
    • Noida, Uttar Pradesh, India
    • Build data-intensive React and TypeScript interfaces with Redux Toolkit and reusable component libraries.
    • Deliver full-stack product features with Python, FastAPI, PostgreSQL, and Azure services.
    • Develop a Next.js 16 and React 19 self-service portal with TanStack Query, openapi-fetch, and Azure DevOps CI/CD.
    • Collaborate in distributed Agile teams across India, Denmark, and China.

  2. Cognizant

    —

    Associate – Projects (Frontend Developer)

    • On-site
    • Noida, Uttar Pradesh, India
    • Developed new features for the BMW Group internal analytics dashboard using React.js, TypeScript, AG Grid, and Ant Design.
    • Built data-dense AG Grid views for large enterprise datasets and integrated GraphQL and REST APIs over MongoDB, handling asynchronous, loading, and error states.
    • Ensured cross-browser and cross-device compatibility; participated in Agile sprints and peer code reviews.
    • Collaborated with teams in Germany on the BMW project at Cognizant.

  3. TrueBlue Inc.

    —

    Implementation Web Developer

    • On-site
    • Gurugram, Haryana, India
    • Improved application delivery with code splitting, lazy loading, and clearer state management.
    • Integrated REST APIs and implemented responsive, cross-browser interfaces.
    • Applied WCAG accessibility practices to production web workflows.
    • Collaborated with offshore colleagues in Australia and New Zealand at TrueBlue.

  4. —

    MobileCoderz

    • Noida, Uttar Pradesh, India
    • 1.8 years
    1. Promoted

      Senior Frontend Developer

      —

      • Led frontend architecture reviews and introduced modern delivery tooling.
      • Mentored junior developers while delivering React and Next.js interfaces.

    2. Frontend Developer

      —

      • Converted wireframes into responsive React and TypeScript interfaces.
      • Built reusable UI components and integrated product APIs.

  5. Swaragh Technologies

    —

    UI Developer

    • Bengaluru, Karnataka, India
    • Built responsive, cross-browser websites and web applications using HTML5, CSS3, JavaScript, jQuery, Bootstrap, and Sass.
    • Contributed across design, development, and testing.
Stack

Tools & technologies

The stack I use to ship fast, accessible, scalable products.

Languages and frameworks

The base of every interface I ship: semantic markup, typed components, and server and client rendering.

  • HTML5
  • TypeScript
  • React
  • Next.js
  • Astro
  • jQuery

State, data and validation

Predictable state, cached server data and typed API boundaries for data-heavy dashboards.

  • Redux
  • Zustand
  • TanStack Query
  • GraphQL
  • Zod

Styling and design systems

From design handoff to documented, reusable components.

  • CSS3
  • Tailwind CSS
  • Bootstrap 5
  • Ant Design
  • Material UI
  • Sass
  • shadcn/ui

Backend and databases

Used for full-stack features alongside the frontend.

  • Node.js
  • FastAPI
  • PostgreSQL
  • MongoDB

Design and documentation

Design handoff and component documentation.

  • Figma
  • Storybook

Delivery and workflow

Version control, CI/CD, cloud delivery and AI-assisted drafting and review.

  • Git
  • GitHub Actions
  • Azure
  • Claude AI
Recommendations

Recommendations

What cross-functional partners say about working together.

  • "Suprabhat turned a complex analytics workflow into a fast, accessible dashboard. The UI felt polished and the performance wins were immediate."
    PoojaSenior Quality Analyst
  • "He brought structure to our front-end architecture and delivered a design-system-ready UI that scaled across teams."
    Sonu Gagan KarnSenior Specialist, Platform
  • "His accessibility-first approach helped us ship inclusive experiences without slowing delivery."
    Supriya SumanAssociate, UX Research

View verified recommendations

FAQ

Frequently asked questions

Quick answers about services, pricing, and how we can collaborate.

Start a project
  • What services do you offer?
    I offer frontend performance audits, React and TypeScript architecture reviews, SaaS dashboard development, design system engineering, WCAG 2.2 AA accessibility audits, and complete website design and development.
  • How do you price projects?
    Pricing depends on scope, access, and timeline. After reviewing a short brief, I define the deliverables, exclusions, schedule, and fixed quote before work begins.
  • Do you take on international or remote work?
    Yes. I am based in Noida Extension, India, on IST (UTC+5:30) and am available now for remote freelance and part-time contracts. I reserve 24–28 hours per week and arrange 2–4 hours of real-time overlap with teams in the Americas, United Kingdom, and Western Europe.
  • What does a typical timeline look like?
    Audits usually take 5–7 business days, architecture reviews 1–2 weeks, dashboards 3–8 weeks, design systems 4–10 weeks, and websites 1–8 weeks. Final timing depends on scope, access, and review cycles.
  • How do we start a collaboration?
    Send the problem, product context, timeline, and budget range through the contact form. I will review the fit and reply with questions or a proposed scope and next step.

Ready to collaborate

Bring the frontend problem. Get a defined path forward.

Share the product context, timeline, and constraints. I will review the fit and propose the next step.

Start a projectRead the blog
Contact

Contact

Need senior frontend support for a dashboard, architecture review, design system, audit, or website? Send the context below.

Defined projects start at USD 5,000; audits and reviews are quoted at a fixed price. Include your goals, technical requirements, timeline, and documented budget.

About you
Project fit
Project brief