Initial commit
This commit is contained in:
twotalesanimation
@@ -0,0 +1,171 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user