⬡ RNB.js

A high-performance, real-time observability and development framework built on Next.js 16, React 19, Express 5, and Tailwind CSS v4.

RNB.js is a production-hardened web application template and compiler chain. It combines the rapid developer experience of Next.js Turbopack with a decoupled Express server, live APM telemetry tracking, a visual route/code designer, and a post-build asset protection pipeline.

Table of Contents

• Technical Stack
• Core Architecture
• Observability
• Compiler & Protection Pipeline
• Script Reference
• Directory Layout
• White-Label Configuration

Technical Stack

| Layer | Technology | Version | Notes | |---|---|---|---| | Frontend | Next.js + React | 16.2.7 · 19.2.4 | Turbopack, SSR, App Router | | Styling | Tailwind CSS | v4 | Fluid layouts, micro-physics animations | | Animations | Framer Motion + GSAP | latest | Micro-interactions, transitions | | State | Zustand | latest | Client-side state synchronization | | Backend | Express | 5.2 | Root orchestrator, SSE telemetry feeds | | APM | Ring-Buffer Event-Bus | custom | Metrics, visitor tracking, live endpoints |

Core Architecture

Express acts as the root orchestrator — intercepting all traffic and delegating to three internal subsystems:

                       ┌──────────────────────────────┐
                       │      Express HTTP Server      │
                       └──────────────┬────────────────┘
                                      │
              ┌───────────────────────┼───────────────────────┐
              ▼                       ▼                       ▼
    ┌───────────────────┐   ┌───────────────────┐   ┌───────────────────┐
    │  Next.js Handler  │   │  APM Telemetry    │   │  Route Designer   │
    │  Turbopack · SSR  │   │  SSE · HTTP Trace │   │  Folder CRUD      │
    │  Page Hydration   │   │  Log Ring-Buffer  │   │  Code Editor      │
    └───────────────────┘   └───────────────────┘   └───────────────────┘

Observability

All API and page hits pass through a middleware pipeline that provides:

• Request tracing — records latency, response statuses, and payloads for every API and page hit
• Telemetry stream — feeds real-time system metrics (RAM, CPU, log event bursts, active connections) via Server-Sent Events (SSE) directly to the admin panel
• Visitor tracking — tracks concurrent visitors using an encrypted rolling-window client hashing technique

Compiler & Protection Pipeline

RNB.js ships an automated three-phase pipeline to clean, compile, and protect production assets.

Phase 1 — Comment Cleaning npm run clean

Strips all developer notes and annotations from src/, monitor/, and templates/ using a custom lexical state machine — not regex.

The scanner tracks string quote contexts (', ", `), regex literals (/.../), and template literals, safely removing:

• Single-line comments // ...
• Multi-line comments /* ... */
• HTML comments <!-- ... -->

...without touching division operators (/) or string contents (e.g. http:// URLs).

Phase 2 — Next.js Compile next build

Uses Next.js's SWC compiler and Turbopack bundler to produce:

• .next/server/ — optimized server-side chunks
• .next/static/ — client-side distribution bundles

Phase 3 — Post-Build Obfuscation node monitor/core/obfuscate-build.js

Post-processes all JavaScript assets in the production build to block reverse-engineering:

• Binary identifier generator — replaces variable and function names with binary-like identifiers (e.g. _00101, _110101, _0110)
• Base64 string extraction — moves all string constants, CSS class names, translation keys, and endpoints into an encrypted array
• Inline decoders — injects self-defending Base64 runtime decoder blocks into each chunk, mapping variables to the binary dictionary

Script Reference

| Command | Action | Description | |---|---|---| | npm run clean | Wipe comments | Lexical state machine strips all comments and dev notes from source files | | npm run build | Production bundle | Builds static pages, compiles via Turbopack, runs binary obfuscation pass | | npm run dev | Development mode | Launches Express server and boots the Next.js hot-reloader | | npm run start | Production mode | Starts the production Express server hosting compiled, obfuscated pages |

Directory Layout

├── .next/                  # Compiled Next.js production build outputs
├── monitor/                # Observability & administration module
│   ├── auth/               # Secure session management & token verification
│   ├── core/               # Telemetry, route managers, metrics, obfuscator
│   └── ui/                 # APM admin interface (Tailwind CSS v4)
├── src/                    # Primary application workspace
│   ├── app/                # Next.js App Router directories & pages
│   └── components/         # Reusable application components
├── templates/              # Boilerplate structures for new routes
├── rnb.js                  # CLI route creation utility
├── server.js               # Application entrypoint & Express handler
├── package.json            # Dependencies & script definitions
└── RNB_JS.md               # Framework manual & documentation

White-Label Configuration

RNB.js masks its Next.js fingerprint to prevent framework detection:

| Config | Value | Effect | |---|---|---| | Asset prefix | /rnbjs | Replaces the standard /_next path in all asset URLs | | Proxy routing | /rnbjs/* | Express middleware intercepts, rewrites, and transparently forwards requests to Next.js internal endpoints |

Network traffic inspection reveals only /rnbjs references — Next.js usage is fully masked.

Built with Next.js · Express · Tailwind CSS · Turbopack