# 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

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

Visit [http://localhost:3000](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:

       ```sql
       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

```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.

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](https://nuxt.com/) + Vite
- [Fabric.js 6](http://fabricjs.com/) for canvas editing
- Tailwind CSS (via `@tailwindcss/vite`) for styling utilities
- [Auth0 Vue SDK](https://auth0.com/docs/libraries/auth0-vue) for authentication
- [Supabase](https://supabase.com/) (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! 🎛️