bf701f8342
- Storage Integration: * Remove Firebase Storage dependency and useFirebaseStorage composable * Implement direct MinIO uploads via POST /storage/upload with multipart/form-data * Upload canvas JSON, preview PNG, and production PNG as separate objects * Store public URLs and metadata in design records - Authentication & Registration: * Add email/password registration page with validation * Integrate backend user session via /auth/login endpoint * Store backendUser.id as ownerId in design records * Auto-sync backend session on Firebase auth state changes - User Account Pages: * Create profile page showing user details and backend session info * Create orders page with transaction history filtered by customerEmail * Add server proxy /api/orders to forward GET /transactions queries - Navigation Improvements: * Replace inline auth buttons with avatar dropdown menu * Add Profile, Orders, and Logout options to dropdown * Implement outside-click and route-change handlers for dropdown * Display user initials in avatar badge - API Updates: * Update transactions endpoint to accept amount as string * Format amount with .toFixed(2) in checkout success flow * Query orders by customerEmail instead of ownerId for consistency
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
- Choose a slipmat template to match the order (bleed/safe-zone update automatically).
- Compose the design with the toolbar tools—the canvas enforces a circular clip.
- Click Generate Files to render both preview and print PNGs.
- 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! 🎛️