PULSETRACK

🤖⚡ Vibe coded entirely by Stakpak Agent — zero human keystrokes.

Real-Time Analytics Dashboard — with intentional memory leaks for stress testing demos.

A visually polished React + Vite dashboard backed by an Express.js server that contains intentional memory leaks. Paired with a stress test script (hammer.js) that sends configurable HTTP traffic to trigger the leaks and bring the server down.

Quick Start

# Install dependencies
npm install

# Build the frontend
npm run build

# Start the server (serves the built frontend + API)
npm start

# In another terminal — run the stress test
npm run stress-test -- -n 5000 -c 50

Development mode (Vite HMR + Express API):

npm run dev

Then open http://localhost:5173

Architecture

┌─────────────────────────────────────────────┐
│  Browser (React Dashboard)                  │
│  - Polls /api/metrics every 2s              │
│  - Polls /api/activity every 3s             │
│  - Polls /api/status every 4s               │
│  - Client-side memory leaks (educational)   │
└──────────────────┬──────────────────────────┘
                   │ HTTP
┌──────────────────▼──────────────────────────┐
│  Express.js Server (:3001)                  │
│  - /api/metrics   → unbounded cache leak    │
│  - /api/activity  → event listener leak     │
│  - /api/status    → timer + closure leak    │
│  - /api/health    → health check            │
│  - /api/debug/memory → heap stats + leak    │
│  - Serves static React build                │
└─────────────────────────────────────────────┘
                   ▲
┌──────────────────┴──────────────────────────┐
│  hammer.js (Stress Test)                    │
│  - Sends N requests at C concurrency        │
│  - Cycles through all leaky endpoints       │
│  - Tracks latency, errors, timeouts         │
│  - Detects server crash                     │
│  - Prints degradation summary               │
└─────────────────────────────────────────────┘

Memory Leaks

Server-Side (what makes it crash)

Leak	Endpoint	Mechanism	Growth Rate
Unbounded cache	/api/metrics	Pushes ~10KB per request to a global array, never pruned	~10KB/req
Event listeners	/api/activity	Adds a listener per request, never removed	O(n) listeners
Timer leak	/api/status	Spawns setInterval per request, never cleared	4KB buffer/req
Closure leak	/api/status	Closures capture large buffers, preventing GC	4KB/req

Client-Side (educational)

• useEffect with setInterval — no cleanup function returned
• window.addEventListener — no removeEventListener on unmount
• Growing state arrays — metrics/activity data appended, never trimmed
• Event listeners on every render — missing dependency array

Stress Test

node stress-test/hammer.js [options]

Option	Default	Description
-n, --requests	10000	Total requests to send
-c, --concurrency	50	Concurrent requests per batch
-u, --url	http://localhost:3001	Target server URL
--delay	0	Delay between batches (ms)
--endpoint	(cycles all)	Hit a specific endpoint only

Demo: Taking the Server Down

# 1. Build and start the server with limited memory (256MB heap)
npm run build
node --max-old-space-size=256 server/index.js

# 2. Open the dashboard in your browser
open http://localhost:3001

# 3. In another terminal, unleash the hammer
node stress-test/hammer.js -n 20000 -c 100

# 4. Watch the memory badge in the dashboard turn red
#    Watch the stress test detect server going down

What to Expect

1. 0-2000 requests: Server responds normally, latency ~2-5ms
2. 2000-8000 requests: Memory climbs, latency increases to ~10-50ms
3. 8000-15000 requests: GC pauses cause latency spikes (100ms+)
4. 15000+ requests: Server becomes unresponsive, OOM crash

Project Structure

├── src/                    # React frontend
│   ├── components/
│   │   ├── Logo.tsx        # PULSETRACK logo
│   │   ├── MetricCard.tsx  # Animated metric cards
│   │   ├── ActivityFeed.tsx# Live activity feed
│   │   ├── StatusGrid.tsx  # Service status grid
│   │   ├── Chart.tsx       # CSS bar chart
│   │   └── MemoryBadge.tsx # Server memory indicator
│   ├── App.tsx             # Main dashboard (with client leaks)
│   ├── App.css             # Dashboard styles
│   ├── index.css           # Global reset + typography
│   └── main.tsx            # Entry point
├── server/
│   └── index.js            # Express server (with server leaks)
├── stress-test/
│   └── hammer.js           # Stress test script
├── index.html              # HTML entry
├── vite.config.ts          # Vite config with API proxy
└── package.json

Scripts

Script	Description
npm run dev	Start Vite dev server + Express API concurrently
npm run build	TypeScript check + Vite production build
npm start	Start Express server (serves built frontend)
npm run stress-test	Run hammer.js with default settings

Tech Stack

• Frontend: React 19, TypeScript, Vite 7
• Backend: Express 5, Node.js
• Stress Test: Native fetch (zero dependencies)
• Styling: Pure CSS (no framework)