Can I vibe code Funnelytics?

Build a visual funnel mapping and analytics web application using React, React Flow, Node.js, and ClickHouse (or PostgreSQL for development).

1. DATA MODEL:
- Workspaces: id, name, created_at.
- FunnelCanvases: id, workspace_id, name, nodes (JSON), edges (JSON).
- CanvasNode structure: id, type ('page', 'action', 'traffic_source'), label, matching_rules (URL pattern or event name).
- TrackedEvents: id, session_id, user_id, event_type, url, utm_source, utm_medium, utm_campaign, timestamp.

2. TRACKING SCRIPT:
- Create a lightweight embeddable JavaScript tracking script (<5KB).
- Auto-capture pageviews, referrer, UTM parameters, persistent anonymous session ID via localStorage/first-party cookie.
- Send payload to POST /api/v1/track via beacon API or POST request.

3. CANVAS EDITOR (UI):
- Use React Flow to create a drag-and-drop canvas.
- Allow adding nodes: Traffic Source, Landing Page, Sales Page, Checkout Page, Thank You Page.
- Allow drawing directed arrows (edges) connecting nodes to define expected customer paths.
- Each node must configure a URL pattern match (e.g., '/products/*') or event trigger.

4. ANALYTICS & OVERLAY ENGINE:
- Build an API endpoint GET /api/v1/canvases/:id/metrics accepting date ranges.
- For each node on the canvas, count total unique visitors matching the node's URL criteria.
- For each edge (connection), compute transition conversion rate: (Unique users who hit Target Node after Source Node within X hours) / (Total unique users on Source Node).
- Display live conversion percentage and volume badges directly on the canvas nodes and connecting arrows.

5. OUT OF SCOPE:
- Third-party ad spend API synchronization.
- Complex session recordings or heatmaps.
- Automated AI optimization recommendations.

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