# FeedBack — VFX Review & Approval Platform

Frame-accurate video review, annotation drawing, and approval tracking for boutique VFX and animation studios.

---

## Features

- **Dead-simple video upload** — drag & drop MP4/MOV, up to 2 GB, version-tracked
- **Frame-accurate scrubbing** — canvas-based timeline ruler with click-and-drag seek
- **Timestamp comments** — comments anchored to exact frame numbers, threaded replies, resolve/unresolve
- **Annotation drawing** — freehand, arrow, rectangle, circle tools with color + stroke width picker
- **Approval workflow** — Approve / Reject / Needs Changes with notes, full history
- **Client review links** — shareable token-based review URLs for external clients (no login required)
- **Role-based access** — Admin / Producer / Supervisor / Artist / Client roles
- **Slack notifications** — webhook alerts for uploads and approvals
- **Self-hostable** — Docker Compose with PostgreSQL + MinIO (S3-compatible) included

---

## Tech Stack

| Layer | Technology |
|-------|-----------|
| Framework | Next.js 15 App Router (Turbopack) |
| Language | TypeScript 5 strict |
| Styling | TailwindCSS 3 + shadcn/ui (zinc, dark-only) |
| Auth | NextAuth.js v5 (Credentials + JWT) |
| Database | PostgreSQL 16 via Prisma 6 |
| File Storage | UploadThing / S3 / R2 / B2 / MinIO / local |
| State | Zustand 5 (player) + TanStack Query 5 (server) |
| Annotations | HTML5 Canvas API (normalized coordinates) |
| Video Playback | HTML5 `<video>` with custom controls |
| Container | Docker multi-stage build |

---

## Quick Start (Docker)

```bash
# 1. Clone and configure
cp .env.example .env
# Edit .env — set AUTH_SECRET, DATABASE_URL, storage provider

# 2. Start services (PostgreSQL + MinIO + App)
docker compose up -d

# 3. Run migrations and seed
docker compose exec app npx prisma migrate deploy
docker compose exec app npx tsx prisma/seed.ts

# 4. Open http://localhost:3000
```

**Demo accounts (after seed):**

| Email | Password | Role |
|-------|----------|------|
| admin@vfxreview.local | admin123 | Admin |
| producer@vfxreview.local | producer123 | Producer |
| supervisor@vfxreview.local | supervisor123 | Supervisor |
| artist@vfxreview.local | artist123 | Artist |
| client@studio.com | client123 | Client |

---

## Local Development

```bash
# Install dependencies
npm install

# Set up database (Postgres must be running)
npx prisma migrate dev
npx tsx prisma/seed.ts

# Start dev server
npm run dev
```

Open [http://localhost:3000](http://localhost:3000).

---

## Environment Variables

See `.env.example` for full reference. Key variables:

```env
# Required
DATABASE_URL="postgresql://..."
AUTH_SECRET="your-32-char-secret"
NEXTAUTH_URL="http://localhost:3000"

# Storage (choose one)
STORAGE_PROVIDER="local"          # local | uploadthing | s3 | r2 | b2 | minio

# UploadThing (if STORAGE_PROVIDER=uploadthing)
UPLOADTHING_SECRET="sk_live_..."
UPLOADTHING_APP_ID="..."

# AWS S3 / R2 / B2 compatible
S3_ACCESS_KEY_ID=""
S3_SECRET_ACCESS_KEY=""
S3_BUCKET_NAME=""
S3_REGION=""
S3_ENDPOINT=""            # for R2/B2/MinIO

# Slack (optional)
SLACK_BOT_TOKEN=""

# Email (optional, nodemailer)
SMTP_HOST=""
SMTP_PORT="587"
SMTP_USER=""
SMTP_PASS=""
```

---

## Project Structure

```
app/
  (auth)/login/          — Sign-in page
  (dashboard)/           — Protected dashboard layout
    dashboard/           — Home stats + shot queue
    projects/            — Project list + detail pages
    settings/            — User profile
  review/[versionId]/    — Full-screen review player
  client/[token]/        — Unauthenticated client review link
  api/
    auth/[...nextauth]/  — NextAuth route handler
    uploadthing/         — UploadThing route handler
    notifications/       — Notification CRUD
    projects/            — Projects REST endpoint

components/
  player/                — ReviewPlayer, FrameTimeline, PlaybackControls
  annotations/           — AnnotationCanvas, AnnotationTools
  comments/              — CommentPanel (threads + replies)
  versions/              — VersionUpload, VersionList
  shots/                 — ShotCard, NewShotDialog
  projects/              — ProjectCard, NewProjectDialog
  dashboard/             — StatsCards, ShotQueue, RecentActivity
  layout/                — Sidebar, Header, NotificationBell, Providers
  ui/                    — shadcn/ui base components

actions/                 — Server Actions (projects, shots, versions, comments, annotations, approvals)
lib/                     — db, auth, utils, frame-utils, storage, slack, notifications, uploadthing
hooks/                   — use-review-player (Zustand), use-annotations, use-frame-comments
prisma/                  — schema.prisma, seed.ts
```

---

## Review Player Keyboard Shortcuts

| Key | Action |
|-----|--------|
| `Space` / `K` | Play / Pause |
| `J` | Reverse playback |
| `L` | Forward playback |
| `←` / `→` | Step one frame |
| `F` | Toggle fullscreen |

---

## License

MIT