EventLay

Product Definition

One-Sentence Definition

EventLay is a visual drag-and-drop event layout tool that lets event professionals place production elements on a venue photo and see real-time pricing — no CAD skills required.

Core Problem

Event planners and production teams currently use one of three broken workflows to plan event layouts:

• CAD / Vectorworks — powerful but requires training, expensive licenses, and hours of setup. Overkill for 90% of events.
• PowerPoint / Google Slides — hacky, no pricing, no scale accuracy, unprofessional output.
• Pen and napkin — fast but impossible to share, price, or iterate on live.

None of these work in a live client conversation where you need to show a layout, adjust it in real time, and produce a budget — all in the same screen.

Value Proposition

EventLay collapses layout design, visualization, and pricing into a single fast interface. Upload a photo of the venue, drag in your stage, LED walls, seating, and production gear — and watch the budget calculate itself. Close deals faster. Look professional instantly.

Why This Should Exist

• The $800B+ global events industry has no lightweight visual planning tool with integrated pricing.
• Event production companies lose hours per proposal building layouts in tools not designed for events.
• Clients can't visualize setups from a spreadsheet — they need to see it to say yes.
• Existing CAD tools are designed for architects, not event salespeople sitting across from a client.

User Personas

MVP Scope

Ruthlessly scoped. If it doesn't help close a deal or build a layout in under 10 minutes, it's cut.

Must Have — MVP

• Upload venue photo (JPG/PNG) as canvas background
• Template venue library (6–8 preloaded spaces: ballroom, conference room, outdoor, warehouse, theater, rooftop)
• Drag-and-drop asset library: stage, LED wall, screen/projector, speakers, lighting truss, chairs (rows/rounds), tables, podium, DJ booth, barricade
• Move, resize, rotate placed elements on canvas
• Real-time pricing sidebar — auto-calculates total as items are added/removed
• Quantity controls per item
• Save / load projects
• Export layout as PNG image
• Share project via link (view-only)
• User accounts (email + password)
• Responsive desktop-first UI (functional on tablet)

Nice to Have

• PDF export with layout + itemized pricing
• Duplicate / copy project
• Custom branding on exports (logo, company name)
• Layer ordering (bring to front / send to back)
• Undo / redo
• Grid / snap-to-grid
• Notes / annotations on canvas

V2 / Later

• Real-time multiplayer collaboration
• Built-in video calling
• Video upload as venue background
• Auto-pull venue images / floor plans from URLs
• 3D perspective view
• Custom asset uploads (user's own equipment)
• Inventory management (available stock)
• Client approval workflow
• CRM integrations
• Mobile-native app
• Scale / measurement tools
• Multi-page layouts (ceremony + reception)

Core User Flows

Flow A: Create New Project

Flow B: Upload Venue Image

Flow C: Use Template Venue

Flow D: Build Layout (Core Loop)

Flow E: Share with Client

UX / UI System Design

Layout Structure

┌──────────────────────────────────────────────────────────────┐
│  TOP BAR: Logo | Project Name | Save | Undo/Redo | Share    │
├──────────┬────────────────────────────────┬─────────────────┤
│          │                                │                 │
│  ASSET   │                                │   PRICING       │
│  LIBRARY │         CANVAS                 │   PANEL         │
│          │    (venue photo +              │                 │
│  Stage   │     placed elements)           │  Line items     │
│  AV      │                                │  Quantities     │
│  Seating │                                │  Unit prices    │
│  Prod    │                                │  Subtotals      │
│          │                                │                 │
│          │                                │  ───────────    │
│          │                                │  TOTAL: $XX,XXX │
│          │                                │                 │
├──────────┴────────────────────────────────┴─────────────────┤
│  STATUS BAR: Zoom % | Grid toggle | Canvas dimensions      │
└──────────────────────────────────────────────────────────────┘

Panel Details

Drag & Drop Interactions

• Drag start: Ghost preview follows cursor, left panel item stays in place (infinite supply)
• Drag over canvas: Drop zone highlighted, cursor shows placement indicator
• Drop: Element placed at drop position, auto-selected, pricing updates instantly
• Move: Click-drag placed element to reposition
• Resize: Corner handles maintain aspect ratio; edge handles for freeform
• Rotate: Handle 20px above top-center of selection box

Responsiveness

Breakpoint	Behavior
Desktop (≥1024px)	Three-panel layout. Full experience.
Tablet (768–1023px)	Left panel collapses to icon-only. Pricing panel becomes bottom drawer.
Mobile (<768px)	View-only share links work. Editing disabled with prompt: "Open on desktop to edit."

Functional Requirements

Object Manipulation

Feature	MVP	Details
Move	✅	Free-position on canvas via drag
Resize	✅	8-point handles, shift for aspect lock
Rotate	✅	Free rotation via handle, snap at 0°/90°/180°/270°
Delete	✅	Keyboard (Del/Backspace) + context menu
Layer order	⏳	Nice-to-have. Default: newest on top.
Group	❌	V2
Undo / Redo	⏳	Nice-to-have. Command stack with Ctrl+Z/Y

Saving & Loading

• Auto-save to cloud every 5s of idle (debounced)
• Manual save button with visual confirmation
• Project list dashboard — open any saved project
• Delete project with confirmation modal

Asset Catalog

• Admin-managed catalog (seeded at launch with ~25–30 common event items)
• Each item: name, category, icon/thumbnail, default dimensions, base unit price
• Users cannot add custom items in MVP (V2 feature)

Pricing Engine

• Real-time calculation as items are added/removed/quantity-changed
• Line item breakdown visible at all times
• Optional tax rate toggle (user-set percentage)
• Total displayed prominently

Export & Share

• PNG Export: Canvas rendered as image (html-to-canvas or server-side)
• Share Link: Unique URL, no auth needed for viewer
• Share view shows: rendered layout + pricing table + project name
• PDF Export: Nice-to-have (layout + itemized quote on one page)

Authentication & Permissions

• Email + password registration (via Supabase Auth)
• Google OAuth as secondary option
• All projects private to creator
• Share links are view-only, no editing
• No team/org model in MVP — single user accounts

Technical Architecture

Optimized for: ship fast, stay cheap, scale later. No premature infrastructure.

Layer	Choice	Rationale
Frontend	Next.js 14 (App Router) + TypeScript	SSR for share pages, file-based routing, massive ecosystem, Vercel-native
Canvas / Rendering	Konva.js (via react-konva)	Purpose-built for 2D canvas apps. Handles drag/drop, resize, rotate, layering, hit detection out of the box. Used by Canva, Crello. Far simpler than raw Canvas/WebGL.
State Management	Zustand	Lightweight, no boilerplate. Perfect for canvas state + pricing state sync.
Styling	Tailwind CSS	Rapid UI development. Consistent design tokens. No CSS overhead.
Backend / API	Supabase (Postgres + Auth + Storage + Edge Functions)	Eliminates need for custom backend. Auth, DB, file storage, and serverless functions in one platform. Generous free tier.
Database	Supabase Postgres	Relational. Projects → LayoutItems. Clean joins for pricing. Row-level security for permissions.
File Storage	Supabase Storage	Venue photo uploads. Signed URLs for access control. CDN-backed.
Image Export	Konva .toDataURL() (client-side)	No server needed. Canvas rendered to PNG in-browser.
Hosting	Vercel	Zero-config Next.js hosting. Edge network. Free tier sufficient for MVP. Auto-deploys from Git.
Domain	eventlay.automatedworx.com (subdomain)	Lives under AutomatedWorx brand. Easy DNS setup.

Architecture Diagram

  Browser (Next.js SPA)
    │
    ├── react-konva → 2D Canvas rendering
    ├── Zustand → Local state (layout + pricing)
    │
    ├── Supabase Client SDK
    │     ├── Auth (email/Google)
    │     ├── Postgres (projects, items, catalog)
    │     ├── Storage (venue photos)
    │     └── Edge Functions (share link generation)
    │
    └── Vercel (hosting + SSR for share pages)
    

Why NOT These Alternatives

• Fabric.js — Heavier API surface, less React-native than react-konva. More legacy baggage.
• Three.js / WebGL — Overkill for 2D. Massive complexity increase. No ROI at MVP.
• Firebase — Firestore's NoSQL model is awkward for relational pricing queries. Supabase's Postgres is cleaner.
• Custom Express/NestJS backend — Unnecessary at MVP. Supabase covers all needs. Add custom backend only if you outgrow Supabase.

Data Model

Entity: User

{
  id: uuid (PK, from Supabase Auth)
  email: string
  full_name: string
  company_name: string | null
  avatar_url: string | null
  tax_rate: decimal (default: 0)  // user's default tax %
  created_at: timestamp
}

Entity: Project

{
  id: uuid (PK)
  user_id: uuid (FK → User)
  name: string
  venue_image_url: string | null  // uploaded photo
  venue_template_id: string | null  // or template key
  canvas_width: int
  canvas_height: int
  share_token: string (unique, for view-only link)
  is_shared: boolean (default: false)
  created_at: timestamp
  updated_at: timestamp
}

Entity: LayoutItem

{
  id: uuid (PK)
  project_id: uuid (FK → Project)
  catalog_item_id: uuid (FK → CatalogItem)
  x: float  // position on canvas
  y: float
  width: float
  height: float
  rotation: float (degrees)
  quantity: int (default: 1)
  z_index: int
  created_at: timestamp
  updated_at: timestamp
}

Entity: CatalogItem

{
  id: uuid (PK)
  name: string  // "LED Wall 10x8"
  category: enum [stage, av, seating, production, decor]
  icon_url: string  // SVG or PNG thumbnail
  default_width: float
  default_height: float
  base_price: decimal  // e.g., 1500.00
  price_unit: string  // "per unit", "per linear ft", "per day"
  description: string | null
  sort_order: int
  is_active: boolean
}

Entity: VenueTemplate

{
  id: uuid (PK)
  name: string  // "Grand Ballroom"
  image_url: string
  category: string  // "indoor", "outdoor"
  canvas_width: int
  canvas_height: int
  sort_order: int
}

Relationships

User 1──∞ Project
Project 1──∞ LayoutItem
LayoutItem ∞──1 CatalogItem
Project ∞──0..1 VenueTemplate

Pricing Engine Logic

Core Formula

For each LayoutItem in project:
  line_total = catalog_item.base_price × layout_item.quantity

subtotal = SUM(all line_totals)
tax = subtotal × (user.tax_rate / 100)
grand_total = subtotal + tax

Example Calculation

Item	Qty	Unit Price	Line Total
Stage 16×24	1	$3,500	$3,500
LED Wall 10×8	2	$2,200	$4,400
Line Array Speaker	4	$800	$3,200
Round Table (60")	20	$45	$900
Chiavari Chair	200	$8	$1,600
Lighting Truss 10ft	6	$350	$2,100
Podium	1	$250	$250

Subtotal:    $15,950.00
Tax (8.25%): $1,315.88
─────────────────────────
Grand Total: $17,265.88

Pricing Rules

• Quantity source: The quantity field on LayoutItem controls pricing. If a user drags 3 separate chair elements, each has its own quantity. Pricing panel aggregates by catalog item.
• Aggregation: The pricing sidebar groups by CatalogItem.id and sums quantities across all layout items of the same type.
• Price editing: MVP uses fixed catalog prices. Users cannot override per-project. (V2: custom pricing per project.)
• Currency: USD only in MVP. Stored as cents internally, displayed as dollars.
• Tax: Single tax rate per user, toggled on/off. Not per-item tax.

Computation Location

Client-side only. All pricing is computed in the Zustand store from layout items + catalog data. No server round-trip needed. This keeps the UI instant and eliminates latency, which is critical for the live-meeting use case.

Collaboration Strategy

MVP: Async Share (Included)

Real-World "Live Collaboration" without Engineering Complexity

Deferred: Real-Time Sync (V2)

• Supabase Realtime (WebSocket-based) for cursor presence + live element sync
• Operational Transform or CRDT for conflict resolution
• Only justified after validating demand with MVP users
• Estimate: 4–6 weeks of additional engineering

Deferred: Built-In Video (V3+)

• WebRTC integration (Daily.co, Livekit, or Twilio)
• Significant complexity. Not justified until real-time sync is proven.
• Users already have Zoom. Don't rebuild Zoom.

Product Decisions

Risks & Complexity

Build Plan

Lean MVP Definition

The Smallest Version Worth Building

What Makes It Still Feel High-Quality

• The venue photo as canvas background — this is the visual magic. It transforms a generic tool into something that feels real and specific to the client's event.
• Polished drag-and-drop — if the drag interaction feels janky, the product feels broken. Invest in smooth, responsive canvas interactions.
• Instant pricing updates — the "wow" moment. Drop an LED wall, watch the total change. This is the demo moment.
• Clean, dark-mode UI — professional aesthetic that says "this is a real product" not "this is a prototype."
• Fast load times — under 2 seconds to open a project. Client-side rendering keeps interactions instant.

What Must Be Excluded (Even If It Hurts)

• ❌ Real-time multiplayer — Screen share covers this. Don't over-engineer.
• ❌ 3D rendering — Beautiful but months of work. 2D with great icons is enough.
• ❌ Custom asset uploads — Admin controls the catalog. Simplifies UI and data model.
• ❌ Scale / measurement tools — "Not to scale" is fine for MVP. Users need visualization, not blueprints.
• ❌ PDF export — PNG + share link is sufficient. PDF is a polished addition for V1.1.
• ❌ Undo/redo — Nice but not blocking. Users can delete and re-drag items.
• ❌ Mobile editing — View-only on mobile. Don't compromise the desktop editor for mobile support.

Final Output Pack

Product Summary

Founder Pitch

Investor-Style Pitch

Landing Page Copy

Feature Bullets for Homepage

• 📸 Upload any venue photo — or pick from our template library
• 🎯 Drag & drop production elements — stages, LED walls, seating, AV, lighting
• 💰 Real-time pricing — budget updates as you build the layout
• 🔗 Share with one link — send visual quotes to clients in seconds
• ⚡ Built for speed — create proposals in minutes, not hours
• 🚫 No CAD skills needed — if you can drag a file, you can use EventLay

Engineer Build Brief

Designer Brief