Phase 1 of frontend_tasks.md - stop showing fabricated/broken UI:
- Dashboard now fetches real stats (projects, tasks, users, pending
approvals, API keys, developer stats, pending reviews, admin
activity) instead of hardcoded numbers. Added services/developer.ts
and services/review.ts wrappers for previously-unused backend
endpoints.
- Wired ActivityFeed into every project's Overview page in place of
the "coming soon" placeholder.
- Registered the missing /projects/:id/technical-specs route (view
and service already existed, just unreachable).
- Fixed AssetDeleteConfirmDialog's raw styled divs to use the shared
Alert component and wired it into AssetBrowser, matching
ShotBrowser's impact-summary + type-to-confirm safety pattern
(asset deletion was previously less safe than shot deletion).
- Fixed a shared bug in both delete dialogs where the impact-summary
section never rendered (watch on the open prop needed
{ immediate: true }).
- Replaced native confirm()/alert() with styled AlertDialog/Dialog in
NoteItem, TaskAttachments, and UserMenu's keyboard-shortcuts item.
- Removed dead-end UI: Google OAuth stub buttons, UserMenu items
pointing at non-existent routes, the /developer/docs dead link, and
the no-op action button on the API Keys placeholder page.
- Removed leftover debug console logging across 8 files.
Added frontend_report.md (full audit) and frontend_tasks.md (phased
checklist) as the reference for this and future phases.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
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
-
Navigate to the backend directory:
cd backend -
Create a virtual environment:
python -m venv venv -
Activate the virtual environment:
- Windows:
venv\Scripts\activate - macOS/Linux:
source venv/bin/activate
- Windows:
-
Install dependencies:
pip install -r requirements.txt -
Copy environment file:
cp .env.example .env -
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
-
Navigate to the frontend directory:
cd frontend -
Install dependencies:
npm install -
Copy environment file:
cp .env.example .env -
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:
- Swagger UI: http://localhost:8000/docs
- ReDoc: http://localhost:8000/redoc
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
- Start the backend server:
cd backend && uvicorn main:app --reload - Start the frontend server:
cd frontend && npm run dev - Access the application at http://localhost:5173
- 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.