B3. soreto-melissa
← Current State Index · ← Audit README
Summary
soreto-melissa is the new platform UI — the actively developed replacement for reverb-react. It is built on Next.js 13 (App Router), React 18, and TypeScript 5. It is the most modern codebase in the ecosystem and will eventually be the sole frontend. Its primary gap is the absence of CI/CD and some incomplete feature parity with reverb-react. Note: Next.js 16.2.6 is the current stable release (3 major versions ahead); React 19.2.6 and TypeScript 6.0 are also available.
Key Facts
| Property | Value |
|---|---|
| Language | TypeScript 5.0.4 |
| Node version | 22.0.0 — Active LTS ✓ |
| Framework | Next.js 13.4.9 (App Router) |
| React | 18.2.0 + react-dom@18.2.0 (matched ✓) |
| State management | React Context API (no Redux/Flux) |
| UI library | PrimeReact 10.2.1, PrimeFlex 3.3.0 |
| Testing | Jest 30 + @testing-library/react@16 |
| Build | Next.js internal (SWC) |
| CI/CD | None ⚠️ |
| Deployment | Unknown (no Procfile, Dockerfile, or CI config found) |
| Lockfile | package-lock.json (npm) |
| TypeScript config | strict: true, App Router paths, moduleResolution: bundler |
Application Structure
Next.js 13 App Router with route group layouts:
app/
├── (client)/ ← Client user routes with role-guard
│ ├── client/
│ └── layout.tsx ← Redirects non-CLIENT/SAAS roles to admin or login
├── (full-page)/ ← Auth, subscription, public pages
│ ├── auth/
│ ├── get/
│ ├── pages/
│ ├── saas/
│ └── subscribe/
├── (landing)/ ← Marketing landing page
│ └── landing/
├── (main)/ ← Admin routes
│ ├── admin/
│ ├── asset/
│ ├── campaign-wizard/
│ ├── client-dashboard/
│ ├── client-explorer/
│ ├── client-overview/
│ ├── fraud/
│ ├── segmentation/
│ ├── settings/
│ ├── top-user-networks/
│ └── zendesk/
├── layout.tsx
└── not-found.tsx
The route group pattern is correctly used to share layouts without affecting URL segments. The (client) layout contains a role-based redirect guard.
API Connection
Connects to reverb-backend via NEXT_PUBLIC_APP_API_URL:
# .env
NEXT_PUBLIC_APP_API_URL = http://127.0.0.1:5000/api/v1
All API calls go through service/BaseService.tsx which wraps axios with withCredentials: true (cookie-based auth). The cookie name reverbToken is managed by reverb-backend.
Observation: BaseService.tsx is a .tsx file but contains no JSX — it is a pure TypeScript class. The extension should be .ts. Minor issue but a sign of inconsistent file extension conventions.
Service Layer
A service class per domain (mirrors reverb-backend's service directory):
service/
├── AffiliateService.tsx
├── AssetService.ts
├── BaseService.tsx ← HTTP wrapper (axios + withCredentials)
├── CampaignService.ts
├── CampaignVersionService.ts
├── CampaignWizardService.ts
├── ClientService.ts
├── CodeBlockService.ts
├── DisplayBlockService.ts
├── EmailTemplateService.ts
├── GlobalVarsService.ts
├── LambdaService.ts ← AWS Lambda calls?
├── LayoutService.ts
├── LoginService.tsx
├── ReportService.tsx
├── RewardPoolService.ts
├── RewardService.ts
├── SaasService.ts
├── SharedUrlService.ts
├── UploadService.ts
├── UserManagementService.tsx
├── UserSegmentationService.ts
└── ZendeskService.ts
Opportunity: These services have no shared type contracts with reverb-backend. The response shapes are inferred or typed manually per-service. A shared @soreto/types package would make these type-safe against the actual API. See I — Shared Platform.
State Management
Uses React Context API:
store/
├── Context.ts ← createContext<StoreContextType>
└── Provider.tsx ← Provides: isAuthenticated, user, login, logout, ...
StoreContextType exposes: isAuthenticated, user: User | null, isAuthLoading, selectedCurrency, login(), logout(), passwordlessLogin(), changeSelectedCurrency().
This is an appropriate, minimal approach for an admin dashboard. Not over-engineered.
Shared Utilities
shared/
├── constants.ts ← ROLES enum, COUNTRIES, MENU items
├── cookieUtils.ts
├── dateUtils.ts
├── formattingUtils.ts
├── keysUtils.ts
├── localStorageUtils.ts
├── primeReactDataTableQueryBuilder.ts
├── reportUtils.ts
├── statsReportUtils.ts
├── utils.ts
└── xlsxUtils.ts
constants.ts defines:
- ROLES enum (admin, user, client, clientUser, financial, guest, system, sales, mpUser, tech, saas)
- COUNTRIES list with 35+ entries
- MENU_ADMIN_ITEMS — including a link to the legacy portal: process.env.NEXT_PUBLIC_LEGACY_PORTAL_URL
The ROLES enum and country list are candidates for @soreto/constants shared package.
Notable Issues
| Finding | Detail |
|---|---|
| No CI/CD | No GitHub Actions, Travis CI, or any CI config found |
| Unknown deploy target | No Procfile, Dockerfile, or deploy script |
@rjsf/core@6.0.0-beta.10 |
A beta dependency in production use — risky, API may change |
next@13.4.9 |
Current stable is Next.js 16.2.6 — 3 major versions behind. Security patches limited on v13 |
babel.config.js with styled-jsx/babel |
styled-jsx is a Next.js internal — this config may be leftover from a scaffold and could conflict |
jest.setup.ts referenced but not verified |
jest.config.js references jest.setup.ts; if absent, tests fail immediately |
@neo4j-nvl/react@0.3.9 |
Heavy Neo4j graph visualization dependency — adds bundle weight |
quill@1.3.7 |
Quill 1.x is EOL; Quill 2.0 released 2024 with breaking changes |
react-force-graph |
Two force-graph libraries present (react-force-graph + react-force-graph-2d) — likely one is unused |
Risks Summary
| Risk | Severity |
|---|---|
| No CI/CD pipeline | 🔴 HIGH |
| Unknown deployment target | 🔴 HIGH |
@rjsf beta dependency |
🟡 MEDIUM |
| Next.js 13 (3 majors behind — latest is 16.2.6) | 🟡 MEDIUM |
| No API type contracts with reverb-backend | 🟡 MEDIUM |
babel.config.js potentially incorrect |
🟡 LOW |