How to Clone Canva

Create a full-stack Canva-style design editor called DesignDeck using Next.js (App Router), TypeScript, Tailwind CSS, Konva.js (react-konva), Prisma and SQLite (swappable to Postgres).

## What to build
A drag-and-drop design tool: template gallery, canvas editor with text/shapes/images, autosaved designs, PNG export. Free vs Pro plan flag gates premium templates and watermark-free export.

## Key screens
- Dashboard: size-picker create buttons (1080x1080 post, 1080x1920 story, 1280x720 thumbnail, A4 flyer), template carousel, recent designs grid with thumbnails
- Template gallery: category filter chips, cards with hover 'Use template' overlay, crown badge on premium
- Editor: react-konva Stage centered with zoom controls (fit / 50 / 100 / 200%); left tool panel tabs (Elements, Text, Uploads, Background); right inspector bound to current selection; top bar with name input, undo/redo and Download
- Export modal: PNG via stage.toDataURL at 2x pixel ratio, triggering a browser download
- Auth: NextAuth credentials + Google; pricing page toggling a plan field on the user for demo purposes

## Schema (Prisma)
User (id, name, email, image, plan), Design (id, userId, name, width, height, elements Json, thumbnail String?, updatedAt), Template (id, name, category, width, height, elements Json, thumbnail, isPremium), Upload (id, userId, url, createdAt)

## Editor logic that must work
- Elements array rendered as Konva nodes: Text, Rect, Circle, Line, Image (use-image hook); selection via click, marquee optional
- Transformer attached to selection for resize/rotate; drag moves update x/y; all transforms write back to a Zustand store
- Zustand store holds elements + selectedId + history stack; undo/redo as store snapshots (cap 50)
- Snap guides: dashed magenta lines when an element's center aligns with canvas center (within 5px) while dragging
- Keyboard: Delete removes selection, arrows nudge 1px (Shift = 10px), Cmd+Z / Cmd+Shift+Z undo/redo, Cmd+D duplicates with +12px offset
- Autosave: debounce 2s, PUT the elements JSON via server action; generate a thumbnail with stage.toDataURL({pixelRatio: 0.25}) and store it
- z-order: bring forward / send backward reorder the elements array

## Plan gating
- Premium templates open in the editor for everyone, but free users' exports draw a translucent 'Made with DesignDeck' text watermark onto the exported canvas before download
- Gate is enforced in the export function based on session plan + template.isPremium
- Pricing page 'Upgrade' button flips the user's plan field directly for the demo (leave a TODO comment where Stripe Checkout would go)

## Uploads
- Uploads panel accepts PNG/JPG via dropzone or file picker, resizes client-side to max 2048px, stores in /public/uploads (or Supabase storage if available) and lists thumbnails newest-first; clicking a thumbnail adds it to the canvas at 50% scale, centered

## Style
Canva-like: white chrome, #F2F3F5 canvas surround, violet #8B3DFF primary, teal #00C4CC secondary accents, rounded-xl, Inter font, subtle shadows on panels. Editor fills the viewport (no page scroll); panels are fixed, canvas pans/zooms.

Seed with a demo user ([email protected] / password123), 12 templates across 4 categories (3 premium) with real composed layouts (headline + subtext + shape accents + an unsplash image), and 2 saved designs on the demo account so the dashboard and editor are instantly demoable.

You are building a production-quality Canva clone called DesignDeck. Work iteratively: scaffold, then implement feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript strict, Tailwind CSS, shadcn/ui for chrome (panels, dialogs, dropdowns)
- react-konva for the canvas editor; Zustand for editor state; Zod for all input validation
- PostgreSQL via Prisma; Supabase for auth (email + Google) and storage (uploads, thumbnails, exports)
- Stripe Billing for Free/Pro subscriptions with a webhook updating the user's plan

## Architecture requirements
- The editor is a single client-side route (app/(editor)/design/[id]) - everything else is server components
- lib/scene.ts: Zod-validated scene schema - { version, width, height, elements: Element[] } with Element as a discriminated union (text | rect | ellipse | line | image). This schema is THE contract: validated on every save, used by editor, thumbnailer and seeders. Unit-test migrations between versions
- Editor state in a Zustand store with three slices: document (elements), session (selection, zoom, tool), history (undo/redo as inverse-operation stack - NOT full snapshots, to keep memory flat on large designs)
- All persistence through server actions with Zod parsing and ownership checks (design.userId === session.user.id); never trust client plan claims - read plan server-side for export watermark decisions
- Rendering separation: components/canvas/* contains pure Konva components that take elements as props; no fetch calls below the editor page

## Data model
users (plan enum free/pro, stripeCustomerId), designs (elements jsonb, thumbnail_url, folder_id nullable), templates (elements jsonb, category, is_premium), uploads, folders. Indexes: designs(user_id, updated_at desc), templates(category).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth, protected dashboard listing designs with thumbnails
2. Canvas core: Stage with zoom/pan (scroll = pan, ctrl+scroll = zoom around pointer), element rendering for all 5 types, click selection + Transformer, drag with center snap guides
3. Editing chrome: left panel (add text/shapes/uploads/background), right inspector with two-way binding to selection (font controls, fill, stroke, opacity, corner radius), z-order and align buttons
4. History: command-pattern undo/redo (add, remove, transform, restyle), keyboard map (Delete, arrows, Cmd+Z/Shift+Z/D)
5. Persistence: debounced autosave server action, optimistic 'Saving... / Saved' indicator, client thumbnail generation at 0.25 pixelRatio uploaded to storage
6. Templates: gallery page with category filters; 'Use template' clones template JSON into a new design; admin-only template CRUD behind a role check
7. Export: client PNG at 2x; serverless route with Puppeteer rendering the scene to print-quality PDF; watermark layer composited for free users on premium templates (decided server-side)
8. Billing: Stripe Checkout for Pro, customer portal, webhook handler (checkout.session.completed, customer.subscription.deleted) flipping the plan

## Quality bar
- 60fps drag on a 50-element design: memoize Konva nodes, batch store updates with requestAnimationFrame, disable shadows while dragging
- The scene schema rejects unknown element types with a clear error; corrupt designs must never white-screen the editor (error boundary with 'restore last good save')
- Image uploads: client-side resize to max 2048px before upload, EXIF orientation respected
- Seed script: npx prisma db seed creates 12 templates across 4 categories with composed, realistic layouts and 1 demo user with 2 designs

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

Design the complete UI for a Canva-style design tool called DesignDeck. React + Tailwind, shadcn/ui components, lucide-react icons. Friendly creative-tool aesthetic: white chrome, #F2F3F5 workspace background, violet #8B3DFF primary, teal #00C4CC accents, rounded-xl surfaces, Inter font.

## Screens to generate

### 1. Home dashboard
- Top nav: logo left, center search bar ('Search your designs and templates'), right side: Upgrade button (violet gradient), avatar menu
- Hero strip: 'What will you design today?' headline over a soft violet-to-teal gradient, row of format cards with icons (Instagram Post, Story, Presentation, Flyer, YouTube Thumbnail) each showing dimensions on hover
- 'Recent designs' grid: thumbnail cards with name, edited-time caption, hover overlay with Edit button and '...' menu (Rename, Duplicate, Delete)
- 'Templates for you' carousel with category pills above (Social Media, Marketing, Events, Business)

### 2. Template gallery
- Filter bar: category pills, format dropdown, 'Free / Pro' toggle; masonry grid of template cards at true aspect ratios, crown badge top-right on premium, hover lifts the card and reveals 'Use this template'
- Preview modal: large template image left, right column with name, category tag, premium badge, and a violet 'Use this template' CTA

### 3. Editor (the core screen - full viewport, no page scroll)
- Top bar (56px): back arrow + editable design name left; center: undo/redo icons, zoom dropdown (Fit, 50%, 100%, 200%); right: 'Saved' cloud check indicator, Share button (outline), Download button (violet, filled)
- Left rail (72px) with icon tabs: Templates, Elements, Text, Uploads, Background - active tab opens a 320px panel:
- Elements panel: search field, 'Shapes' section grid (square, rounded square, circle, triangle, line, star), 'Graphics' section with playful illustrations
- Text panel: three big buttons ('Add a heading' in 28px bold, 'Add a subheading' 20px, 'Add body text' 14px) and font-pairing suggestion cards
- Uploads panel: dropzone ('Drag images here or click to upload') above a 2-col grid of uploaded image thumbnails
- Center canvas: white artboard with soft shadow on the gray workspace, one selected text element showing violet selection border, corner resize handles and a rotation handle below; dashed magenta center-snap guide line visible; floating context toolbar above selection: font select, size stepper, color swatch, bold/italic, align, layer and trash icons
- Bottom-right floating controls: zoom +/- and a 'Fit' button

### 4. Export modal
- File type segmented control (PNG / PDF), size row ('1080 x 1080 px - 2x'), a watermark notice card for free users ('Remove watermark with Pro' + small upgrade link), full-width violet Download button with a download icon

### 5. Pricing page
- Monthly/annual toggle with 'Save 20%' badge, two plan cards: Free (gray outline) and Pro (violet border, 'Most popular' ribbon) with feature checklists and CTA buttons; FAQ accordion below

### 6. Uploads manager
- Page header with an 'Upload images' violet button and a drag-anywhere hint; responsive thumbnail grid with hover overlays (filename, file size, trash icon); an in-progress upload card with a violet progress bar at 60%
- Empty state variant: dashed dropzone illustration, 'Upload your first image' headline and a supported-formats caption (PNG, JPG, SVG up to 10MB)

### 7. Share modal
- Design thumbnail preview left; right column: copyable view-only link field with a Copy button, 'Anyone with the link can view' caption, and a collaborators list (avatar, name, Can view / Can edit dropdown) with an email invite input

Make every screen responsive. On mobile: dashboard stacks to a single column, editor shows a centered read-only preview with a notice card ('Editing works best on desktop') and a Download button. Use realistic placeholder content - design names like 'Summer Sale Post', 'Podcast Cover v2', warm gradient thumbnails, believable template art.

Build a drag-and-drop graphic design app (Canva model) called DesignDeck.

## Entities
- Design: owner (user reference), name, width (number), height (number), elements (json array), thumbnailUrl, updatedAt
- Template: name, category (social/marketing/events/business), width, height, elements (json array), thumbnailUrl, isPremium (boolean)
- Upload: owner (user), fileUrl (image), createdAt
- Element json item: { id, type: text|rect|circle|line|image, x, y, width, height, rotation, opacity, z, props } where props holds type-specific fields (text content + fontSize + fontFamily + color + align; fill + stroke + cornerRadius for shapes; src for images)

## Roles & permissions
- Users only see and edit their own designs and uploads
- Plan field on user: free or pro; pro is set after upgrading on the pricing page (use a payment placeholder)
- Premium templates are visible to everyone but exports from them are watermarked for free users
- Admin role: create, edit and delete templates; view a stats page (total users, designs created, pro conversions)

## Pages
1. Dashboard: create buttons for preset sizes (Instagram Post 1080x1080, Story 1080x1920, YouTube Thumbnail 1280x720, A4 Flyer), template suggestions row, grid of my designs (thumbnail, name, last edited) with rename/duplicate/delete
2. Template gallery: category filter, cards with premium crown badges, 'Use template' creates a copy of the template as a new design owned by the user and opens the editor
3. Editor: canvas at the design's aspect ratio, centered on a gray workspace. Toolbar to add: heading text, body text, rectangle, circle, line, image (from uploads). Clicking an element selects it (highlight border) and shows an inspector: position/size fields, rotation slider, opacity slider, and type-specific controls (font size + color + alignment for text; fill color + border + corner radius for shapes). Buttons: bring forward, send back, duplicate, delete. Drag to move, corner handles to resize. Undo/redo buttons. Autosave with a saved indicator
4. Export view: Download as PNG button rendering the design at full size; free users exporting a design made from a premium template get a 'Made with DesignDeck' watermark in the corner
5. Uploads page: image upload dropzone and a grid of past uploads with delete
6. Pricing: Free vs Pro ($12/month) comparison; upgrading flips the user's plan
7. Admin: template manager table (create from JSON, toggle premium, delete) and a simple stats dashboard

## Rules
- Every edit (move, resize, restyle, add, delete) writes to the design's elements json and bumps updatedAt; keep a 20-step undo history in the editor session
- Duplicating a design or using a template deep-copies the elements array with new element ids
- z-order is the array order; bring-forward/send-back swap neighbors
- Deleting an upload that is used in designs keeps those designs working (store the file URL on the element, not a reference)
- Free plan: max 10 saved designs; the 11th shows an upgrade prompt

## Look & feel
Bright creative-tool aesthetic: white interface chrome, light gray (#F2F3F5) canvas workspace, violet (#8B3DFF) primary buttons, teal (#00C4CC) accents, rounded-xl cards, Inter font, soft shadows. Mobile responsive: dashboard and gallery adapt; editor shows a preview with an edit-on-desktop notice.

Seed with 12 templates across the 4 categories (3 marked premium) with composed layouts - bold headline, supporting text, shape accents, a placeholder image - plus a demo user with 2 saved designs and 3 uploads so every page has content.