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 and turntable mockup
• One-click export that produces both preview and print PNGs and offers direct downloads
• Auth0-protected workspace with Supabase-backed “Save to Library” persistence

🚀 Quick Start

cp .env.example .env   # set Auth0 + Supabase credentials
npm install
npm run dev

Visit http://localhost:3000 to start designing. Authentication is required for every route except the Auth0 callback.

Auth0 & Supabase configuration

1. Auth0 application

   • Create a SPA application and note the domain, client ID, and client secret.
   • Add http://localhost:3000 to the allowed callback, logout, and web origins.
   • If you plan to call custom APIs, configure an audience and scope (defaults to openid profile email).

2. Supabase project

   • Create a storage bucket named designs (or change SUPABASE_STORAGE_BUCKET).

   • Create a Postgres table for persisted projects:

     create table public.designs (
        id uuid primary key default gen_random_uuid(),
        user_id text not null,
        name text not null,
        template_id text not null,
        preview_path text not null,
        preview_url text,
        design_json jsonb not null,
        notes text,
        created_at timestamptz not null default now(),
        updated_at timestamptz not null default now()
     );
     
     create index designs_user_id_updated_at_idx
        on public.designs (user_id, updated_at desc);
     

   • Grant read/write access to the AUTH0 users via Row Level Security (example policy: user_id = auth.jwt()->>'sub').

   • Generate an anon key and service role key; place them in .env along with the project URL.

3. Environment

   • Populate .env using .env.example as a guide.
   • Restart the dev server after changes.

🛠️ 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.

Saving a project now serializes the Fabric.js canvas, uploads the preview PNG to Supabase Storage, and stores metadata within the designs table for quick retrieval.

📦 Tech Stack

• Nuxt 4 + Vite
• Fabric.js 6 for canvas editing
• Tailwind CSS (via @tailwindcss/vite) for styling utilities
• Auth0 Vue SDK for authentication
• Supabase (Postgres + Storage) for persistence

🧭 Next Ideas

• Project version history and “duplicate design” shortcuts
• 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! 🎛️