indigo 4f9deeb57a Phase 4: Architecture & tooling investment
Fixes a real N+1 API-call bug (per-cell project-member fetches in shot/asset
task-status cells, now a shared cached store), replaces a polling-based
in-flight request de-dup with promise memoization, adds markRaw() around
icon components in reactive state, and fixes a deep watcher that re-scanned
the whole projects array just to trigger thumbnail loading.

Introduces useAsyncAction and usePermission composables to cut duplicated
store boilerplate and duplicated role/admin checks, applied only where the
existing code was a clean match rather than forced onto everything. Extracts
assets.ts's shared per-asset optimistic-update/rollback helper without
merging the single and bulk API paths, which hit genuinely different
endpoints. Adds toast-on-error for previously-silent secondary loads and
fixes a dead try/catch in the router's auth-init guard along the way.

Also fixes a thumbnail-loading regression introduced earlier in this same
pass: the new ID-keyed watcher never fired on a repeat visit to the Projects
page when the store already held the same project list, so thumbnails
(local component state, reset per mount) silently stopped loading after the
first visit. Replaced the watcher with a direct call after each fetch.

Table virtualization, splitting the two largest view files, broad store
caching, and moving domain types into types/ were scoped out as separate,
higher-risk follow-ups (documented in frontend_tasks.md).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-18 04:03:58 +08:00
2026-02-28 03:22:04 +08:00
2026-02-28 03:22:04 +08:00
2026-02-28 03:22:04 +08:00
2026-02-28 03:22:04 +08:00
2026-02-28 03:22:04 +08:00
2026-02-28 03:22:04 +08:00
2026-02-28 03:22:04 +08:00
2026-02-28 03:22:04 +08:00
2026-02-28 03:22:04 +08:00

VFX Project Management System

A comprehensive project management system designed specifically for the animation and VFX industry, similar to ftrack or ShotGrid.

Features

  • Role-based access control (Admin, Director, Coordinator, Artist)
  • Project, episode, and shot management
  • Asset management with categories
  • Task assignment and tracking
  • Review and approval workflows
  • File upload and version control
  • Real-time notifications

Technology Stack

Backend

  • FastAPI (Python web framework)
  • SQLAlchemy (ORM)
  • SQLite (Database)
  • JWT authentication
  • Pydantic (Data validation)

Frontend

  • Vue.js 3 with Composition API
  • TypeScript
  • Vite (Build tool)
  • Tailwind CSS
  • shadcn-vue components
  • Pinia (State management)

Development Setup

Prerequisites

  • Python 3.9+
  • Node.js 18+
  • npm or yarn

Backend Setup

  1. Navigate to the backend directory:

    cd backend
    
  2. Create a virtual environment:

    python -m venv venv
    
  3. Activate the virtual environment:

    • Windows: venv\Scripts\activate
    • macOS/Linux: source venv/bin/activate
  4. Install dependencies:

    pip install -r requirements.txt
    
  5. Copy environment file:

    cp .env.example .env
    
  6. Run the development server:

    uvicorn main:app --reload --host 0.0.0.0 --port 8000
    

The API will be available at http://localhost:8000

Frontend Setup

  1. Navigate to the frontend directory:

    cd frontend
    
  2. Install dependencies:

    npm install
    
  3. Copy environment file:

    cp .env.example .env
    
  4. Run the development server:

    npm run dev
    

The frontend will be available at http://localhost:5173

API Documentation

Once the backend is running, you can access the interactive API documentation at:

Project Structure

├── backend/                 # FastAPI backend
│   ├── models/             # SQLAlchemy models
│   ├── routers/            # API route handlers
│   ├── schemas/            # Pydantic schemas
│   ├── services/           # Business logic
│   ├── main.py             # FastAPI application
│   ├── database.py         # Database configuration
│   └── requirements.txt    # Python dependencies
├── frontend/               # Vue.js frontend
│   ├── src/
│   │   ├── components/     # Vue components
│   │   ├── views/          # Page components
│   │   ├── stores/         # Pinia stores
│   │   ├── services/       # API services
│   │   ├── types/          # TypeScript types
│   │   └── router/         # Vue Router configuration
│   ├── package.json        # Node.js dependencies
│   └── vite.config.ts      # Vite configuration
└── README.md               # This file

Development Workflow

  1. Start the backend server: cd backend && uvicorn main:app --reload
  2. Start the frontend server: cd frontend && npm run dev
  3. Access the application at http://localhost:5173
  4. API documentation at http://localhost:8000/docs

Contributing

This project follows the spec-driven development methodology. See the .kiro/specs/vfx-project-management/ directory for detailed requirements, design, and implementation tasks.

S
Description
Project Management System for CG Animation Industries
Readme 2.9 MiB
Languages
Python 51.5%
Vue 40.6%
TypeScript 7.7%
CSS 0.1%