first commit

README.md

@@ -0,0 +1,55 @@
+# 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
+
+```bash
+npm install
+npm run dev
+```
+
+Visit [http://localhost:3000](http://localhost:3000) to start designing.
+
+## 🛠️ Production Builds
+
+```bash
+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](https://nuxt.com/) + Vite
+- [Fabric.js 6](http://fabricjs.com/) 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! 🎛️