Can I vibe code Lucky Orange?

Build a self-hosted session recording and heatmap MVP using Next.js (App Router), Tailwind CSS, ClickHouse, and the 'rrweb' npm library.

1. DATA MODEL & INGESTION:
- Create a ClickHouse database schema with two tables: 'session_events' (session_id String, visitor_id String, path String, timestamp DateTime, event_type Enum, payload String) and 'click_events' (session_id String, path String, x Float32, y Float32, viewport_w UInt16, viewport_h UInt16, timestamp DateTime).
- Build a lightweight client-side browser script bundle using 'rrweb-record'. The script must batch events every 5 seconds or upon 50 recorded events, sending them via navigator.sendBeacon or fetch POST to '/api/ingest'.
- Implement client-side privacy masking: automatically mask input fields, text with '.rr-mask' class, and any password or credit card fields before transmission.

2. CORE DASHBOARD FUNCTIONALITY:
- Session Replay Page: Fetch serialized events for a given session_id and render them using 'rrweb-player'. Include playback controls (play, pause, speed toggles: 1x, 2x, 4x).
- Heatmap Generator: Query 'click_events' filtered by URL path. Scale x/y coordinates dynamically to standard screen breakpoints (e.g., 1440px desktop). Render an HTML5 Canvas overlay generating a color-coded density map (blue-to-red gradient) over an iframe displaying the target site path.
- Funnel Report: Simple step-by-step funnel builder where user selects Path A -> Path B. Calculate unique visitor conversion rate based on 'session_events' pageview events.

3. TECHNICAL & FAILURE HANDLING:
- Ingestion Rate-Limiting: Reject payloads over 2MB. Gzip compress payloads on the client before upload.
- Asset Storage: Handle CORS issues gracefully in the rrweb player by serving an isolated sandbox iframe.

4. OUT OF SCOPE:
- Live chat widgets, popups, surveys, and complex automated user identification logic.

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