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

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.

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, with delivery experience across teams in Denmark, China, and Australia.

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.

Frontend Core

  • React + Next.js
  • TypeScript + JavaScript
  • HTML5 + CSS3 + Sass
  • Tailwind CSS

State & Data

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

UI Libraries

  • Ant Design
  • Chakra UI
  • Headless UI
  • Bootstrap 5

Back-End & APIs

  • FastAPI (Python)
  • PostgreSQL
  • MongoDB
  • Node.js
  • REST API design

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

    On-site · Noida, Uttar Pradesh, India

    • Built scalable SaaS portal features with React and TypeScript.
    • Coordinated delivery with an Australian research and development team across time zones.
    • Delivered responsive product interfaces within defined service-level requirements.

  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.

  4. MobileCoderz

    —

    Senior Frontend Developer → Frontend Developer

    Noida, Uttar Pradesh, India · 1.8 years

    —

    Senior Frontend DeveloperPromoted

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

    —

    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 product interfaces and reusable UI components with HTML, CSS, JavaScript, and React.
    • Integrated backend APIs and maintained stable behavior across supported browsers and platforms.
Stack

Tools & technologies

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

  • LANGUAGEHTML5
  • LANGUAGETypeScript
  • FRONTENDReact
  • FRONTENDNext.js
  • STATERedux
  • STATETanStack Query
  • BACKENDGraphQL
  • RUNTIMENode.js
  • DESIGNFigma
  • STYLINGTailwind CSS
  • STYLINGBootstrap 5
  • DEVOPSGit
  • STYLINGSass
  • FRONTENDjQuery
  • AIClaude AI
  • TESTINGStorybook
  • CLOUDAzure
  • BACKENDFastAPI
  • DATABASEPostgreSQL
  • DATABASEMongoDB
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.

Project enquiries start at USD 5,000. Include your goals, technical requirements, timeline, and documented budget.

About you
Project fit
Project brief