Skip to main content

​
Phase 1: Frontend Ecosystem Upgrade

Completed: March 29, 2026 | PRs: #465, #493, #495, #496, #501, #504, #506, #507, #508, #509, #510 Scope: equa-web repository | Branch: staging

​
Overview

Phase 1 modernized the equa-web frontend from a 2019-era toolchain to current ecosystem standards, unblocking the Turborepo monorepo consolidation and React 18 concurrent features. The upgrade was executed as 11 focused PRs over two sessions, each independently tested and merged.

​
Core Upgrades

​
React 16 to 18 (PR #506)

The single largest prerequisite for monorepo consolidation. Entry point migrated from ReactDOM.render() to createRoot() from react-dom/client.
PackageBeforeAfter
react^16.11.0^18.2.0
react-dom^16.11.0^18.2.0
@types/react^16.x^18.2.0
@types/react-dom^16.x^18.2.0

​
TypeScript 3.7 to 5.3 (PR #465)

Enabled modern type features including template literal types, satisfies operator, and improved type narrowing.

​
Ecosystem Libraries (PR #508)

PackageBeforeAfterWhy
styled-components^4.2.0^6.1.0React 18 compat, new SSR architecture
babel-plugin-styled-components^1.10.6^2.1.4Required by styled-components 6
@types/styled-components4.1.8^5.1.26Type alignment
react-redux7.2.6^8.1.0React 18 useSyncExternalStore
react-select^3.0.4^5.8.0React 18 compat
react-datepicker^2.10.1^4.25.0React 18 compat
@testing-library/react^12.1.5^14.0.0React 18 createRoot testing

​
Build Toolchain (PR #465)

PackageBeforeAfter
TypeScript3.7.5^5.3.3
Jest2629
Babel (all packages)pinned to pre-7.12.0 (110-line resolutions block)^7.24.0 (resolutions removed)
connected-react-router6.3.2Replaced with redux-first-history
react-recaptcha-googlelegacyReplaced with react-google-recaptcha
Enzyme3.10Removed (migrated to React Testing Library)
Not upgraded (intentionally):
  • react-router stays at v5 (v6 is a separate initiative)
  • react-pdf stays at v5 (v7 requires ESM, deferred to Phase 2 Vite migration)

​
Security Fixes

​
reCAPTCHA Test Key Removal (PR #493)

Removed Google’s hardcoded reCAPTCHA test site key (6LeIxAcT...) from webpack DefinePlugin fallback. CAPTCHA_SITE_KEY now requires explicit env var configuration.

​
Registration Crash Fix (PR #496)

Added early return guard in registration onSubmit when required fields are missing (Enter key could bypass the disabled button). Removed raw JS error stack trace rendering from AppErrorBoundary.

​
Logout Navigation Fix (PR #495)

Replaced withRouter (which doesn’t inject navigate) with withNavigation wrapper, fixing the blank page on logout.

​
Infrastructure

​
Docker Build Fix (PR #501)

Fixed Railway builds failing with node_modules/.bin/webpack: not found. Root cause: yarn install silently fails to fetch equa-patternlib without GH_PATTERNLIB_TOKEN, leaving a corrupt node_modules. Fix: switched to npx webpack, added post-install binary verification, documented GH_PATTERNLIB_TOKEN as required.

​
Azure Pipelines Removal (PR #507)

Removed azure-pipelines.yml — a legacy config from the Node 10 / Windows VM era targeting branches (mvp, mvp-staging, mvp-prod) that no longer exist.

​
CI Pipeline Rebuild (PR #507, #509)

Replaced the 2-job CI (E2E + regression) with a 5-stage tiered pipeline: 
1. Lint & Build (ESLint + webpack production build)
2. Unit Tests (Jest 29 + React Testing Library — 52 tests)
3. E2E Smoke (Playwright)
4. Regression Tests
5. Visual Regression Tests (screenshot comparison)

​
Bundle Optimization (PR #510)

Added granular async vendor chunk splitting and compressed the login background image:
OptimizationSavings
pixi.js moved to async chunk-629 KB from initial load
Crypto libs moved to async chunk-18 KB from initial load
Login background image compressed-1.84 MB (1.93 MB to 93 KB, 95% reduction)
Total initial load reduction~2.5 MB

​
Bug Fixes

​
Organization Create/Edit (PR #504)

Wrapped createOrganization + address creation in try-catch. Replaced forEach with async callback (fire-and-forget) with for...of (properly awaited sequential execution). Addresses were silently failing to save.

​
Verification

All PRs passed the same gate before merge:
CheckResult
Webpack production buildPass
ESLint0 errors
Jest unit tests52/52 pass
Playwright E2EPass

​
What’s Next

​
Phase 1 PR 3 (Pending)

Deprecated pattern cleanup — 19 remaining issues from the Phase 1 QA audit including legacy lifecycle methods, class component migrations, and deprecated API usage.

​
Phase 2 (Planned)

  • Webpack to Vite migration
  • react-pdf v5 to v7 (ESM)
  • react-router v5 to v6
  • Turborepo monorepo consolidation with equa-patternlib-nextjs