How to Clone Zapier

Create a full-stack Zapier-style automation tool called Relayo using Next.js (App Router), Tailwind CSS, Prisma and SQLite (easy to swap to Postgres later).

## What to build
Users build 'Flows': a trigger (inbound webhook or schedule) plus one or more actions (send email via console/log stub, POST an outbound webhook, append to an in-app table, send a mock Slack message). Free plan = 100 task runs/month, Pro = 2,000, metered and enforced.

## Key screens
- Dashboard: flows list with on/off switches, last-run status, tasks-used progress bar against plan quota
- Flow editor: vertical builder - trigger card (choose 'Webhook' which generates a unique URL, or 'Schedule' with interval picker), then action cards added via a '+' button; each action has a config form and a field-mapping UI inserting {{trigger.field}} tokens; 'Run test' executes the whole flow with sample data
- Run history: executions table with status badges, expandable per-step input/output JSON viewer, replay button
- Templates page: 6 prebuilt flows, one click copies into the user's account as a draft
- Connections page: manage stub app credentials (label + API key field)
- Billing: plan card and usage; Stripe test-mode checkout for the Pro upgrade
- Auth: email/password with a demo account pre-seeded

## Schema (Prisma)
User (id, name, email, plan, tasksUsed, periodStart), Connection (id, userId, appSlug, label, credentials Json), Flow (id, userId, name, status, triggerType, triggerConfig Json, webhookToken), Step (id, flowId, position, actionType, config Json, fieldMapping Json), Run (id, flowId, status, trigger Json, startedAt, durationMs), RunStep (id, runId, stepId, status, input Json, output Json, error)

## Logic that must work
- POST /api/hooks/[webhookToken] receives JSON, creates a Run, executes steps in order server-side, interpolating {{trigger.x}} and {{steps.1.y}} tokens from prior outputs
- Each executed action increments tasksUsed; when tasksUsed >= plan quota, flows stop firing and runs are recorded as 'skipped (quota)'
- Step failure: record error, retry once, then mark the run failed but keep earlier step outputs visible in history
- Scheduled flows: a /api/cron route that finds due flows and executes them (document how to ping it)
- Flows must belong to the signed-in user; webhook tokens are unguessable (cuid/uuid)
- Turning a flow off immediately stops webhook and schedule execution; requests to an off flow return 200 but record nothing

## Nice to have if time permits
- A 'Test with sample data' button in the editor that runs the flow against an editable JSON payload without counting toward quota
- Per-flow stats on the dashboard row: runs this week and a tiny success-rate sparkline
- Duplicate flow action that copies steps and mappings as a new draft

## Style
Developer-tool crisp: white background, #0F172A ink text, #6D28D9 violet primary, #A3E635 lime success accents, Inter font, 1px slate-200 borders on rounded-lg cards, monospace font for JSON and webhook URLs, copy-to-clipboard buttons. Responsive throughout.

Seed a demo user with 3 flows (one webhook-triggered, one scheduled, one draft), 25 runs in mixed statuses, and 6 templates so every page renders with data on first load.

Print the demo login credentials and the seeded webhook URL in the README so the whole loop (POST to webhook → run appears in history) can be tested with one curl command.

You are building a production-quality workflow automation platform (Zapier model). Work iteratively: scaffold, then implement feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui for the dashboard; NestJS (or a separate Node worker) for the execution engine
- PostgreSQL via Prisma; Redis + BullMQ for the run queue; Zod everywhere
- Stripe Billing for metered subscriptions (free 100 tasks/mo, Pro 2,000, Team 10,000)
- Credentials encrypted at rest with libsodium sealed boxes; key from env, never in the DB

## Architecture requirements
- Connector abstraction is the heart of the product: each integration is a TypeScript module implementing a Connector interface { auth: 'oauth2' | 'apiKey', triggers: TriggerDef[], actions: ActionDef[] } with Zod schemas for config and IO. The engine knows nothing about specific apps - adding connector #11 means adding one module, zero engine changes
- Execution engine: a BullMQ worker consumes run jobs; each step executes sequentially with its own try/catch, per-step timeout (10s), retries with exponential backoff (3 attempts), and persisted input/output snapshots
- Trigger ingestion: (a) inbound webhook endpoint /hooks/:token with HMAC verification where supported, (b) polling scheduler that enqueues poll jobs per active polling trigger every 5 min with cursor-based deduplication (store last-seen ids)
- Template-string interpolation: {{trigger.email}}, {{steps.2.id}} resolved against a run context object; escape correctly when injecting into JSON bodies
- Quota middleware: increment a per-user counter in Redis (mirrored to Postgres hourly); over-quota users get runs recorded as skipped and an email via Resend

## Data model
users, connections (encrypted creds, app_slug), flows, steps, runs, run_steps, connector_registry, usage_periods. Indexes on runs(flow_id, started_at desc), run_steps(run_id), flows(user_id, status). Partition or prune run_steps older than 90 days.

## Implementation order
1. Scaffold both apps + Prisma schema + auth (NextAuth, email + Google)
2. Connector interface + three real connectors: Webhook (in/out), Slack (incoming webhook message), Google Sheets (append row via service account); plus a Formatter utility connector
3. Flow CRUD + editor UI: trigger picker, action steps, field mapping with a token-insert popover fed by sampled trigger data
4. Execution engine: queue, sequential step runner, retries, run + run_step persistence
5. Webhook ingestion + polling scheduler with dedup cursors
6. Run history UI with step-level JSON inspector and replay
7. Stripe metered billing + quota enforcement + usage page
8. Templates gallery (seeded flow definitions, one-click copy)

## Quality bar
- Unit tests for interpolation, dedup cursor logic and quota math; one integration test running a 3-step flow end to end
- All third-party calls wrapped with timeouts and typed errors; never let one user's failing flow block the worker (job-level isolation)
- Audit log of credential create/delete; credentials never serialized to the client - return only label + last-4
- Seed script: 3 connectors registered, demo user, 3 flows, 40 runs with realistic mixed outcomes

Start with step 1. After each step, tell me what to verify before moving on.

Design the complete UI for a workflow automation tool called Relayo (Zapier model). React + Tailwind, shadcn/ui components, lucide-react icons. Crisp developer-tool aesthetic: white background, ink #0F172A text, violet #6D28D9 primary, lime #A3E635 success accents, Inter font, rounded-lg cards with 1px slate-200 borders, monospace for tokens/URLs/JSON.

## Screens to generate

### 1. Dashboard
- Top bar: logo, workspace switcher, search, 'Create Flow' primary button, avatar menu
- Stats row: Active flows, Tasks used (e.g. '1,240 / 2,000' with a violet progress bar that turns amber past 80%), Success rate with tiny sparkline
- Flows table: name, trigger app icon → action app icons chain (small circular icons with arrows), on/off Switch, last run (relative time + status dot green/red/gray), runs this month, kebab menu (edit, duplicate, delete)
- Empty state: friendly illustration, 'Automate your first task' CTA and three suggested templates

### 2. Flow editor
- Header: editable flow name, draft/published Badge, 'Test flow' secondary and 'Publish' primary buttons
- Vertical step canvas on a dotted background: trigger card on top (app icon, 'When this happens...', configured-event summary, green check when tested), connector line with a '+' button between steps, action cards below
- Selected step opens a right side panel (40%): app + event selects, account connect row, dynamic config form, field inputs supporting inline token chips like {{trigger.email}} in violet pills, 'Insert data' popover listing sample trigger fields as clickable tokens, 'Test step' button with a result JSON block (success green / error red)

### 3. Run history
- Filter bar: flow select, status tabs (All / Success / Failed / Skipped), date range
- Runs table: status badge, flow name, trigger summary, duration, timestamp; expandable rows revealing a per-step timeline - each step row with icon, name, status, and collapsible input/output JSON viewers in monospace with copy buttons; 'Replay run' button on failures

### 4. Connections
- Grid of app cards (icon, name, short description, Connect button); connected apps show account label, green dot, and Reconnect/Remove actions
- Connect modal: simulated OAuth screen or API-key form with help link

### 5. Templates gallery
- Filter chips by category (Sales, Marketing, Ops, Finance)
- Template cards: app-icon pair with arrow, title ('Save new Stripe payments to a spreadsheet'), uses count, 'Use this template' button

### 6. Billing
- Current plan card, usage meter, plan comparison table (Free / Pro / Team) with task limits and feature checkmarks, violet upgrade buttons
- Out-of-quota state: amber banner across the dashboard ('Your flows are paused - 2,000/2,000 tasks used') with an upgrade CTA

### 7. Shared components & states
- Status badge set: Success (lime), Failed (red), Skipped (slate), Running (violet with pulse)
- Toasts for save/publish/delete; confirm dialog for destructive actions; loading skeletons for tables

Make every screen fully responsive - on mobile the editor side panel becomes a full-screen sheet and tables collapse into stacked cards. Use realistic placeholder data: believable flow names like 'New lead → Slack + CRM', run timestamps minutes ago, JSON payloads with real-looking fields.

Build a no-code automation app (Zapier model) called Relayo.

## Entities
- Connection: app (select: gmail/slack/sheets/stripe/webhook/notion), label, apiKey (text, treat as secret), status (active/expired), owner (user reference)
- Flow: name, status (draft/on/off), triggerApp (select), triggerEvent (text), triggerConfig (json), webhookToken (unique text), owner (user reference), createdAt
- Step: flow reference, position (number), actionApp (select), actionKey (text), config (json), fieldMapping (json)
- Run: flow reference, status (success/failed/skipped), triggerData (json), startedAt, durationMs
- RunStep: run reference, step reference, status, input (json), output (json), errorMessage

## Roles & permissions
- Users see and edit only their own connections, flows and runs
- Plan field on user (free/pro): free allows 100 runs per month and max 2 steps per flow; pro allows 2,000 runs and unlimited steps
- Admin: view all users with run counts, disable any flow, see a dashboard of total runs per day and revenue by plan

## Pages
1. Dashboard: stats cards (active flows, runs used this month vs quota with progress bar, success rate), flows list with on/off toggle and last-run status dot
2. Flow editor: choose trigger (webhook with generated unique URL, or schedule with interval), add action steps in order (send email, post outbound webhook, add row to an in-app data table, send mock Slack message), per-step config form with field mapping using {{trigger.field}} tokens, test button showing the resulting data, publish toggle
3. Run history: filterable table of runs with expandable step-by-step detail showing input/output JSON and errors, replay button for failed runs
4. Connections: grid of apps with connect/remove, connected accounts with status
5. Templates: 6 prebuilt flows with descriptions, 'Use template' copies one into my flows as a draft
6. Billing: current plan, usage meter, upgrade to Pro
7. Admin dashboard: users table, total runs chart, flows flagged by failure rate

## Rules
- A flow needs a configured trigger and at least one action before it can be turned on
- Every executed action counts one run-task against the monthly quota; at quota, flows stop and new runs are recorded as skipped with an upgrade prompt
- Failed steps retry once; a run with any failed step after retry is marked failed and the owner gets a notification
- Webhook tokens must be unique and unguessable; only the flow owner can see the URL
- Quota counters reset on the first of each month
- Deleting a connection warns if any active flow uses it and turns those flows off
- Step positions are unique per flow; reordering steps renumbers them and runs always execute in position order

## Look & feel
Clean developer-tool style: white background, dark ink text, violet (#6D28D9) primary buttons, lime green success badges, monospace styling for tokens and webhook URLs, cards with thin borders rather than shadows. Status dots and badges throughout. Mobile responsive.

Seed with one demo user on the free plan, 6 connectable apps, 3 example flows (one running via webhook, one scheduled, one draft), 25 runs in mixed statuses, and 6 templates so every page has data.