UI Specialist - React Job

Job Description:

Experience required: 7-10 years.

Senior Frontend Developer (React / TypeScript / Web Components)
Job Title: Senior Frontend Developer — React 19, TypeScript, Design-System & Web-Component Engineering
Experience: 6+ years building production web applications with React and TypeScript, including 3+ years owning architecture-level decisions (state design, module boundaries, build tooling, testing strategy).

Job Summary
We are seeking an experienced Senior Frontend Developer to build and scale the user experiences of our Dynamic Service Options (DSO) platform. You will work across two React 19 + TypeScript codebases:

• an authoring application — a large, feature-module SPA (Vite, Jotai, React Router 7, react-hook-form, Storybook + MSW) where dealers and Client teams author and manage machine parts and service data
• a delivery application — a React app that ships both as an SPA and as an embeddable Web Component published to Artifactory and consumed by other Client host applications.
• Both apps are built entirely on the Client design system, consume OpenAPI-generated, fully typed API clients, authenticate through Azure Entra (MSAL) with Centralized entitlement-based authorization, and are validated by Storybook interaction tests running in real browsers with MSW-mocked APIs.
• The ideal candidate is opinionated about type safety, component composition, accessible design-system usage and testable UI, is comfortable working inside strict lint/format/type gates, and can own a feature end-to-end: API contract → generated client → state atoms/store → design-system UI → stories/tests → CI/CD → CDN or npm release.
  
  

Key Responsibilities

• Build and maintain feature modules in a convention-driven structure (`atoms/`, `components/`, `hooks/`, `fakers/`, `\\\*.stories.tsx`, co-located styles), keeping cross-feature code in shared layers and respecting module boundaries.
• Develop React 19 components under strict TypeScript — no `any`, no type assertions, explicit `import type`.
• Implement lazy-loaded, code-split routes with route-level authorization guards driven by user entitlements.
• Build complex, data-dense UI: paginated and filterable tables with per-row action state, bulk selection, destructive-action queues with confirmation, toast feedback, unsaved-changes guards, and virtualization where list size demands it.
• Design state with Jotai atoms (authoring) and Zustand (delivery), including reusable factories for remote lists, bulk selection and destructive queues — and never fetch data from `useEffect`.
• Consume OpenAPI-generated API clients from versioned specs — never hand-writing request code, duplicating server models as local types, or editing generated output.
• Implement robust request handling: bearer-token injection, cancellation with `AbortSignal`, retry/backoff policies, and a single normalized API-error parser feeding user-facing messages.
• Build exclusively on the Client design system and its tokens and utility classes — no raw `<button>`, `<input>`, `<select>` or ad-hoc SVG icons — adding SCSS/CSS Modules only where utilities are genuinely insufficient, and supporting light/dark theming.
• Package and evolve the delivery app as an embeddable web component, maintaining a documented, backward-compatible integration contract published to Artifactory for consuming teams.
• Write Storybook stories as the primary component contract, with `play` functions as browser-run interaction tests, MSW-mocked APIs and realistic data factories covering loading, empty, error and hanging-request states.
• Write unit and component tests, maintain coverage, and keep the SonarQube quality gate green.
• Ensure every user-facing string is internationalized and locale-safe, namespaced per module.
• Keep build and DX tooling healthy — Vite configuration, path aliases, vendor chunking, scaffolding generators — and maintain the lint, format, typecheck and pre-commit gates.
• Contribute to CI/CD: build and test workflows, quality scans, CDN-hosted deployments with cache invalidation, and npm package publishing.
• Review pull requests against documented team standards, and mentor mid-level engineers on state design, design-system usage and test strategy.
  

Required Skills & Qualifications
Core

• Expert React (hooks, composition, suspense, error boundaries, memoization, render-performance debugging); experience with React 19 is a strong plus.
• Expert TypeScript — generics, discriminated unions, utility types and strict-mode discipline; types that make invalid states unrepresentable.
• Strong modern JavaScript/ESM and browser fundamentals — event model, Shadow DOM, custom elements, performance.
  State & Data
• A modern atomic/lightweight state library — Jotai or Zustand — and clear reasoning about local vs. shared vs. server state.
• TanStack Query or an equivalent server-state library.
• Consuming OpenAPI-generated REST clients; Axios interceptors, cancellation, retries and error normalization.
  UI & Design Systems
• Building on a component/design system, including web components interop with React and Shadow-DOM style encapsulation.
• SCSS, CSS Modules, design tokens and responsive layout.
• react-hook-form or equivalent with controlled inputs, shared validation rules and localized errors.
  

Tooling & Testing

• Vite — dev server, plugins, library mode, aliasing, chunking and env handling.
• ESLint (flat config), Prettier, Stylelint and Husky/lint-staged; pnpm/npm with private registries.
• Storybook (CSF3, decorators, `play` functions) and MSW for deterministic API mocking.
• Vitest or Jest, Testing Library, browser-mode/Playwright component testing and test-data factories.
  Auth, i18n & Delivery
• OAuth2/OIDC in SPAs — MSAL / Azure Entra, token refresh, protected routes and entitlement-based feature gating.
• react-i18next or equivalent i18n at scale.
• Git and PR workflow; GitHub Actions or comparable CI/CD; CDN-hosted SPAs with routing and cache concerns.
  

Engineering Judgment

• Works independently, owns delivery end-to-end, and makes pragmatic architecture calls in a convention-heavy codebase.
• Strong analytical, debugging and communication skills; clear documentation for consuming teams.
  
  

Preferred Skills

• Shipping React as web components / micro-frontends (`@r2wc`, Lit, module federation) with a published integration contract.
• React Compiler, bundle-size budgeting, code-splitting and Core Web Vitals.
• SonarQube quality gates and frontend coverage reporting.
• Enterprise design systems — Material UI, Bootstrap or equivalent.
• AWS static hosting (S3, CloudFront, WAF, ACM) and CloudFormation.
• Agile/Scrum delivery and close collaboration with backend engineers on API contracts.
  
  

What You'll Work On

• Template authoring & management — searchable, filterable template lists with detail views, versioning, bulk actions and archive/restore workflows.
• SMCS & parts mapping — dense mapping grids and multi-step flows connecting service codes, components and parts.
• SBOM experiences — long-running report generation with async job status, progress feedback and file download.
• Rebuild dashboard — nested, entitlement-gated routes composing several sub-features into one workspace.
• Dynamic Service Options web component — the embeddable delivery experience (search, service-option browsing, cart interactions, fully reactive CRUD with drag and reorder support) consumed by other Client applications.
• Admin, roles & entitlements UI — user and permission management backed by the Enterprise entitlements service.
• The shared frontend platform — reusable table/layout primitives, atom factories, test fixtures, generators and Storybook infrastructure that every feature builds on.