Slipmatz Designer

Nuxt 4 single-page experience for creating custom slipmat artwork. Users pick a vinyl template, layer text/images/shapes on a circular Fabric.js canvas, generate a polished preview, and export both a web-friendly and production-ready PNG (e.g. 12" @ 300 DPI ⇒ 3600×3600 px).

✨ Features

• Template presets for popular vinyl diameters with bleed & safe-zone guides
• Fabric.js-powered editor: drag, scale, rotate, and stack elements inside a clipped circular canvas
• Tools for adding text, circles, rectangles, and uploading artwork
• Live preview card with instant web-resolution snapshot
• One-click export that produces both preview and print PNGs and offers direct downloads

🚀 Quick Start

npm install
npm run dev

Visit http://localhost:3000 to start designing.

🛠️ Production Builds

npm run build    # compile client + server bundles
npm run preview  # optional: preview the built output

Nuxt outputs the server bundle into .output/. You can serve it with node .output/server/index.mjs or deploy through your preferred Node hosting provider.

🧩 Export Workflow

1. Choose a slipmat template to match the order (bleed/safe-zone update automatically).
2. Compose the design with the toolbar tools—the canvas enforces a circular clip.
3. Click Generate Files to render both preview and print PNGs.
4. Use the download buttons to retrieve the assets:
   • Web preview: 1024×1024 PNG suitable for the storefront and checkout review.
   • Print-ready PNG: Exact template resolution (e.g. 3600×3600 for a 12" slipmat at 300 DPI) for production.

High-res exports remain client-side (no upload yet). Wire the exportDesign / productionBlob values into your backend to submit orders.

📦 Tech Stack

• Nuxt 4 + Vite
• Fabric.js 6 for canvas editing
• Tailwind CSS (via @tailwindcss/vite) for styling utilities

🧭 Next Ideas

• Persist projects (auth + cloud storage)
• CMYK color profile previews & bleed handling
• 3D platter preview using Three.js
• Admin dashboard for incoming print jobs

Contributions & ideas are welcome—have fun crafting vinyl eye candy! 🎛️