Can I vibe code Hotjar?

Build a self-hosted web session recording and heatmap platform using Next.js (App Router), FastAPI, ClickHouse, and rrweb.

1. SYSTEM ARCHITECTURE
- Frontend Dashboard: Next.js app to view list of sessions, playback viewer, and heatmap overlays.
- Ingestion API: FastAPI app with low-latency endpoint (`POST /api/v1/events`) accepting batched JSON payloads.
- Data Store: ClickHouse for aggregated telemetry (clicks, scrolls, meta) and S3/MinIO for raw compressed session payload blobs.

2. CLIENT-SIDE TRACKER (JS SNIPPET)
- Use `rrweb` to capture DOM mutations, initial snapshot, and input interactions.
- Implement strict PII masking: automatically obscure all `<input type="password">`, `<input type="email">`, elements with `.mask-pii` class, and credit card numbers using regex patterns before dispatching.
- Implement a buffer queue that flushes events every 5 seconds or whenever the payload hits 50 items.
- Log click events with target XPath, normalized page relative (X, Y) coordinates, and window dimensions.
- Keep snippet lightweight (<25KB gzipped) and execute non-blocking on main thread using `requestIdleCallback`.

3. PLAYBACK & HEATMAP ENGINE
- Integrate `rrweb-player` in the Next.js UI to render session replays with playback controls (play, pause, 1x-8x speed, skip inactivity).
- Create a heatmap view that fetches aggregated click coordinates for a specific route and viewport range, rendering density gradient maps using canvas over an iframe view of the target site.
- Detect 'rage clicks' (3+ clicks within 500ms on the same element) and flag them in the session index table.

4. OUT OF SCOPE
- Live screen streaming / real-time co-browsing.
- Video recruitment/interview features.
- Complex multi-variant A/B testing suite.

$ each button prefixes agent-specific run instructions · build your own product, never copy proprietary code, trademarks or designs