Skip to content

B2. reverb-react

← Current State Index · ← Audit README


Summary

reverb-react is the legacy admin and client portal for the Soreto platform. It is a single-page application (SPA) built with React, served by a small Express static server. It is actively being replaced by soreto-melissa — both codebases explicitly cross-reference each other. This repo has the highest technical debt of the four and should not receive new feature investment.


Key Facts

Property Value
Language JavaScript / JSX (no TypeScript)
Node version ~10.15.3 — EOL December 2020
React 17.0.1 — but react-dom@16.5.0 (mismatched ⛔)
State management Flux 3.1.3 + Redux 3.7.2 (both present — architectural drift)
Build Webpack 4.7.0 + Babel 6 (EOL)
UI Library PrimeReact 1.5.1
Testing Jest 23.5.0 + Enzyme — no tests executed in CI
CI/CD Travis CI — runs build only, no test execution
Deployment Heroku (Procfile: web: node index.js)
Config strategy @@PLACEHOLDER@@ token replacement via string-replace-loader webpack plugin
Lockfile package-lock.json (npm)

Critical Issues

React / react-dom Version Mismatch ⛔

"react":     "17.0.1",
"react-dom": "16.5.0"

React requires that react and react-dom be on identical versions. Having react@17 with react-dom@16 is an unsupported configuration that causes runtime warnings and potentially undefined behavior. This is a packaging error that was never caught by CI because CI does not run tests.

Node 10 — End of Life ⛔

Node 10.x reached End-of-Life on December 31, 2020 — over 5 years before this audit. It receives no security patches. Running production code on an EOL runtime is a compliance and security risk.

Babel 6 — Deprecated ⛔

babel@6.23.0, babel-core@6.26.3, babel-preset-env@1.7.0, babel-preset-react@6.24.1 — all Babel 6. Babel 6 is EOL. Last release: 2018. Babel 7 was released in 2018; the current stable is Babel 7.x. Upgrading this requires updating all presets and plugins simultaneously.

ESLint React Version Misconfiguration

The .eslintrc.json declares:

"settings": {
  "react": {
    "version": "15.0"
  }
}

But the installed React version is 17.0.1. ESLint React rules are calibrated to the wrong React version, meaning version-specific rules are silently incorrect.

CI Provides No Quality Gate

The .travis.yml runs:

script: npm run test

However, inspection of the test runner shows no meaningful tests are executed on CI. The CI passes as long as the build compiles — which means broken code can be merged undetected.


Configuration: @@PLACEHOLDER@@ Pattern

reverb-react uses a non-standard approach to environment configuration. Rather than process.env.* variables resolved at runtime, configuration values are embedded as @@PLACEHOLDER@@ tokens in source code and replaced at webpack build time using string-replace-loader.

// src/config/config.js
const melissaPortalUrl = '@@MELISSA_PORTAL_URL@@';
export default {
  URL: {
    BASEBACK: '@@URL_BASEBACK@@',
    BASEFRONT: '@@URL_BASEFRONT@@',
  }
}

Implications: 1. The webpack build is environment-specific, not the deployment. You cannot take a build artifact and deploy it to a different environment without rebuilding. 2. If a placeholder is not replaced (missing env var), the literal @@PLACEHOLDER@@ string appears in the running application. 3. This approach is incompatible with modern CI/CD artifact patterns (build once, deploy anywhere).


State Management: Mixed Flux + Redux

Both Flux and Redux are present and in use:

src/
├── actions/         ← Redux action creators
├── dispatchers/     ← Flux app-dispatcher (Flux pattern)
├── reducers/        ← Redux reducers
├── stores/          ← Flux stores

This indicates Redux was being introduced while Flux was not removed — a pattern of architectural drift where two patterns coexist without a defined migration strategy.


The config explicitly links to soreto-melissa:

const melissaPortalUrl = '@@MELISSA_PORTAL_URL@@';
// ...
{ route: `${melissaPortalUrl}/client/dashboard`, name: 'New Portal' }

This confirms that reverb-react is aware of melissa as its replacement and is actively routing users there.


Second Version Mismatch: react-router / react-router-dom ⛔

"react-router":     "3.2.1",
"react-router-dom": "4.2.2"

react-router v3 and react-router-dom v4 are incompatible packages. v4 introduced a completely different API (declarative composition vs imperative configuration). Having both in the same project at different major versions means some routing code targets v3 patterns and other code targets v4 — an unsupported configuration similar to the react/react-dom mismatch above.


Other Notable Findings

Finding Installed Latest (May 2026) Detail
Google+ sharing GOOGLE.URL_SUPPORT: true — Google+ shut down April 2019
Font Awesome 4.7.0 7.2.0 FA4 is EOL; current stable is FA 7 (not FA6 as previously noted)
PrimeReact 1.5.1 10.9.8 melissa is on 10.2.1; latest is 10.9.8; v11 alpha in progress — APIs completely incompatible with v1
react-router + react-router-dom 3.2.1 + 4.2.2 7.15.1 Four major versions behind; packages are mismatched with each other (v3 + v4) — double mismatch
redux 3.7.2 5.0.1 Two major versions behind
react-redux 5.0.7 9.3.0 Four major versions behind — not noted in original audit
chart.js 2.7.2 4.5.1 Two major versions behind; significant API changes
webpack 4.7.0 5.106.2 One major version behind; v4 → v5 requires config rewrite
axios 0.18.0 1.16.1 Pre-v1 axios; major API differences (interceptor behaviour, error format)
Jest 23.5.0 30.4.2 Seven major versions behind; Jest 30 requires Node 18+
uglifyjs-webpack-plugin Deprecated in favor of terser-webpack-plugin
moment@2.22.1 2.22.1 maintenance mode moment is in maintenance-only mode; recommended replacement: dayjs or date-fns
GitHub repository URL Points to fabacus/reverb-react — the old company name (Fabacus → Soreto)

Recommendation (Observation Only)

Modernize reverb-react via a controlled Next.js 16 rewrite. The current stack (Babel 6, Webpack 4, Node 10, React 17/dom 16.5 mismatch, react-router@3 + react-router-dom@4 mismatch) cannot be incrementally upgraded — the gaps are too large and compound. An in-place upgrade carries the same effort as a rewrite but with far higher risk. The correct approach is a clean Next.js 16 scaffold inside apps/legacy-portal/, porting business logic while replacing the tooling layer.

The recommended path is: 1. Deploy WAF in front of existing Heroku reverb-react app (Node 10 compensating control during transition) 2. Stand up Next.js 16 scaffold in apps/legacy-portal/ with Node 24, React 19, TypeScript 6 3. Port admin + client routes to Next.js App Router route groups 4. Migrate Redux 3 + Flux → Zustand (business logic preserved) 5. Rewrite components to PrimeReact 10.9.8 (API incompatible — rewrite, not migrate) 6. Cut over production traffic to the modernized portal; decommission old Heroku app

See G — Frontend Architecture and L — Migration Plan for the full assessment.


Risks Summary

Risk Severity
Node 10 EOL ⛔ CRITICAL
React/react-dom version mismatch 🔴 HIGH
Babel 6 EOL 🔴 HIGH
CI provides no quality gate 🔴 HIGH
@@PLACEHOLDER@@ config pattern 🟡 MEDIUM
Mixed Flux + Redux 🟡 MEDIUM
Google+ dead integration 🟡 MEDIUM
PrimeReact 9 versions behind melissa 🟡 MEDIUM