How to Clone Picsart

Create a Picsart-style editor called Mosaiq as a Next.js (App Router) + Tailwind + Prisma + SQLite project. Scope it to a templates-first social-post maker (don't try to build all of Picsart).

## Product
A layered design editor backed by a searchable asset library. Start from a template, edit layers (photo/text/sticker/shape), remove backgrounds via API, export. Freemium: free is watermarked + ad-supported, Plus unlocks premium assets, background remover and clean export.

## Screens
- Marketing landing: colorful collage hero, feature strip, pricing toggle (monthly/yearly, yearly highlighted), FAQ accordion
- Home: template gallery with category chips and search, 'recent projects' row
- Editor: central canvas, left tool panel (Templates, Photos, Text, Stickers, Background, Filters), right layers list, undo/redo, Export
- Asset browser panel: faceted search over stickers/backgrounds/fonts with premium badges
- My Projects: grid with duplicate/edit/delete/download
- Profile: subscription, account

## Prisma schema
User (id, email, name, isPlus, trialEndsAt), Template (id, title, category, width, height, thumbnailUrl, layersJson, isPremium), Asset (id, type, title, tags, url, isPremium), Project (id, userId, title, canvasJson, thumbnailUrl, updatedAt)

## Logic
- Use a scene-graph canvas (Fabric.js or Konva): layers with position/scale/rotation/z-index, draggable handles, text editing, image filters; persist the whole scene as canvasJson
- Keep a layers panel synced to the scene: visibility toggle, lock, delete, drag-to-reorder z-index
- Asset search: filter by type + tag query; premium assets show a lock for free users
- 'Use template' deep-clones the template's layersJson into a new project so editing never mutates the template
- Background remove: a single async function (removeBackground) that currently mocks a cutout after a timeout - structure it so a matting API drops in; gate behind isPlus
- Autosave the scene on change (debounced); 'Start free trial' sets isPlus with trialEndsAt = now + 7 days
- Export: watermark + lower-res for free, clean high-res for Plus

## Style
Energetic, colorful, confident: purple-to-magenta brand, bold rounded UI, dense asset grids, clean white canvas. Inter/Poppins. Responsive - comfortable on laptop and phone.
On phone the tool panel becomes bottom tabs and the asset browser a slide-up sheet.

Seed: 12 templates across categories, ~40 assets (mix free/premium), a demo Plus user with 3 saved projects.

Build a production-quality Picsart-style editor, scoped to a templates-first social-post maker. Web-first PWA now; keep the scene model portable to a React Native + Skia port.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa
- Canvas: Fabric.js or Konva on web behind a thin SceneModel abstraction (typed layers) so the renderer can be swapped for Skia in RN
- Supabase: Postgres, Auth, Storage; Typesense/Meilisearch for asset + template search
- Stripe Billing: monthly + yearly Plus, trial, customer portal
- AI/matting: a provider-agnostic ImageService (matting + generation) calling a hosted API

## Critical architecture
- SceneModel is the source of truth: an ordered array of typed layers (image/text/sticker/shape) with transforms; the canvas renders from it and edits mutate it immutably so undo/redo and autosave are clean
- The asset library is a first-class system, not an afterthought: tagged assets in Postgres, full-text/faceted search via Typesense, CDN-served thumbnails; premium gating enforced server-side
- Background removal and generative tools are metered: server route calls the provider, writes a job row, decrements credits server-side; free clients can never trigger an expensive call or fetch a premium asset URL
- Be explicit that matting, AI generation and (if added) video render are external/heavy dependencies - design clean seams for them

## Schema
profiles (id, is_plus, trial_ends_at, ai_credits), templates (id, title, category, width, height, thumb_path, layers jsonb, is_premium), assets (id, type, title, tags text[], path, is_premium), projects (id, user_id, title, canvas jsonb, thumb_path, updated_at), ai_jobs (id, user_id, type, status, credits_spent). RLS everywhere; per-user storage paths, signed premium URLs.

## Implementation order
1. Scaffold, Supabase schema + RLS, auth, storage, search index for assets/templates
2. SceneModel + canvas: typed layers, transforms, text, filters, layers panel, undo/redo, autosave to projects
3. Template + asset browsers: search UI, load template into scene, premium gating server-enforced
4. Background remover via ImageService + credit metering; paywall + Stripe Checkout with trial; webhook sets is_plus
5. Export pipeline: watermark/low-res for free, clean high-res for Plus (render server-side for consistency)
6. PWA polish; optional: AI image tools and a simple video timeline as clearly-marked heavier modules

## Quality bar
- Editor stays responsive with 30+ layers; search returns in <150ms
- No premium asset URL or clean export is reachable by a free client (verify server-side)
- Conversion + engagement events to PostHog (template_opened, asset_locked_clicked, paywall_shown, trial_started)

Start with step 1, show me the SceneModel types and RLS policies before building the canvas.

Design the complete UI for a Picsart-style social-post editor called Mosaiq. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: energetic and colorful - a vivid purple-to-magenta brand, bold rounded UI, confident contrast, dense asset-grid thumbnails, with a clean near-white editor canvas so the artwork pops. Inter/Poppins type.

## Screens

### 1. Marketing landing
- Hero with a dynamic collage of sample edits, bold headline 'Every edit, one app', glowing CTA
- Feature strip (Templates, Background Remover, AI tools, Stickers), pricing toggle (monthly $9.99 / yearly $49.99 with badge), FAQ accordion, footer

### 2. Home / template gallery
- Search bar, category chips (Posts, Stories, Thumbnails, Memes, Products), a masonry/grid of template thumbnails with premium crowns, a 'Recent projects' horizontal row up top

### 3. Editor (the centerpiece)
- Three-column layout: left vertical tool panel (Templates, Photos, Text, Stickers, Background, Filters) with a slide-out asset browser; center canvas with selectable layer handles; right layers list with visibility/lock and drag-to-reorder
- Top bar: project name, undo/redo, zoom, a prominent Export button; a small 'AI' sparkle entry

### 4. Asset browser panel
- Search field + type tabs (Stickers, Backgrounds, Fonts), a dense thumbnail grid with premium-lock badges, infinite-scroll feel

### 5. My Projects
- Grid of saved designs with hover menu (Edit, Duplicate, Download, Delete); empty state with 'Start from a template' CTA

### 6. Paywall modal
- Glass card over a blurred editor: benefits (All templates & assets, Background remover, No watermark, AI credits), plan selector (yearly preselected), trial note, primary CTA, restore link

### 7. Empty & loading states
- Projects empty state: 'Start from a template' CTA with a few suggested template thumbnails
- Background-remove loading: a shimmer over the selected layer with a 'removing background…' caption
- Locked-asset tap: a small tooltip-to-paywall transition

Responsive: the three-column editor collapses gracefully to a phone layout with bottom tool tabs and a slide-up asset sheet. Use realistic content - template names, sticker thumbnails, font samples, layer names. Make the asset grids and layer handles feel tactile and fast.
Design for both desktop and mobile; this app is genuinely used on laptops too.
Keep the canvas chrome quiet; let the vivid brand color live in the tool panel accents, primary CTAs and premium crowns.

Build an all-in-one photo editor app (Picsart model) called Mosaiq, scoped to a templates-first social-post maker.

## Entities
- Template: title, category (post/story/thumbnail/meme/product), width, height, thumbnailUrl, layersJson, isPremium
- Asset: type (sticker/background/font), title, tags, url, isPremium
- Project: user, title, canvasJson (the layered scene), thumbnailUrl, updatedAt
- UserProfile: isPlus, trialEndsAt, aiCredits

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: edits with free templates/assets; premium ones show a lock; exports are watermarked
- Plus user: all templates/assets, background remover, clean high-res export, AI credits
- Admin: dashboard (users, Plus count, popular templates), manage templates and assets

## Pages
1. Landing: colorful hero, pricing (monthly $9.99 / yearly $49.99 with trial), FAQ
2. Home: searchable template gallery with category chips and recent projects
3. Editor: layered canvas, tool panel (Templates, Photos, Text, Stickers, Background, Filters), layers list, undo/redo, export
4. Asset browser: searchable stickers/backgrounds/fonts with premium badges
5. My Projects: grid with duplicate/edit/download
6. Profile: subscription status, account
7. Admin: templates and assets tables with create/edit and uploads

## Rules
- Premium templates and assets are locked for free users; free exports carry a watermark
- Background remover requires Plus and calls an external matting API; AI tools spend credits
- Trial sets isPlus true and trialEndsAt = now + 7 days; revert to free after expiry

## Look & feel
Energetic and colorful: purple-to-magenta brand, bold rounded UI, dense asset grids, clean white canvas. Responsive for phone and laptop.

Seed with one admin user, a demo Plus user with 3 projects, 12 templates and ~40 assets.