# Director.AI -- Build Walkthrough

## What Was Built

A complete full-stack web application for faceless video creation with **35+ source files** across backend and frontend.

### Backend (18 files)
- Express.js server with HTTP + WebSocket (Socket.IO) on port 5000
- 4 Mongoose models: User, Project, Video, Preset
- JWT authentication with bcrypt password hashing
- 6 route modules: auth, projects, videos, presets, assets, admin
- **CLI Bridge Service**: real `child_process.spawn` to Antigravity CLI with WebSocket streaming
- Multer file upload (100MB limit, type filtering)
- Winston logging, Helmet, rate limiting
- Database seed script with admin and demo users

### Frontend (16 files)
- Vite + React 18 + TypeScript
- Tailwind CSS with luxury dark theme (#1A1A1A, #D4AF37 gold, Playfair Display + Montserrat)
- Framer Motion animations throughout
- Redux Toolkit (auth, projects, videos slices)
- Axios API client with JWT interceptors

### Pages Built
| Page | Description |
|:---|:---|
| Landing | Hero, How It Works, Features (8), Pricing (4 tiers), FAQ accordion, CTA, Footer |
| Login | Glass-panel form, Redux auth, error display |
| Register | Confirm password validation, terms link |
| Dashboard | Project grid, stats bar, create modal, AI Terminal toggle |
| ProjectPage | Breadcrumb, video list with status badges, inline terminal |
| VideoCreate | 5-step wizard (Script/Voice/Music/Style/Assets), animated stepper |
| Preview | HTML5 player, status indicators, export checkboxes, linked terminal |
| Privacy | Static legal page |
| Terms | Static legal page |

### Core Novel Feature: Webapp as MCP Host Workspace
The core architecture has been inverted. Instead of the webapp calling the CLI, **the webapp acts as an MCP-like Host Workspace** (similar to VS Code) and the Antigravity CLI connects to it as a client agent.

The backend [mcpServer.ts](file:///C:/Users/User/Desktop/debugrem/1st-hackaton/server/src/services/mcpServer.ts) creates two WebSocket namespaces:
- `/mcp` for the Google Antigravity CLI agent to connect and call tools (`create_project`, `navigate`, `activity_log`).
- `/browser` for the human React frontend to listen to the agent.

The frontend uses [useAgentOrchestrator.ts](file:///C:/Users/User/Desktop/debugrem/1st-hackaton/client/src/hooks/useAgentOrchestrator.ts) to listen to the agent. When the agent emits a `navigate` or `create_project` command to the backend, the backend relays it to the browser, and the human's screen **automatically navigates** or **updates the UI** to mirror what the agent is doing.

The [AITerminal.tsx](file:///C:/Users/User/Desktop/debugrem/1st-hackaton/client/src/components/AITerminal.tsx) has been repurposed from a CLI input box into a read-only **Agent Activity Log**, showing the human exactly what the AI engine is thinking and doing in real-time.

A comprehensive [INTEGRATION_GUIDE.md](file:///C:/Users/User/Desktop/debugrem/1st-hackaton/client/public/INTEGRATION_GUIDE.md) provides exact Socket.IO usage instructions for the Antigravity CLI to control this workspace.

## How to Run

```bash
# 1. Configure environment
cp .env.example .env    # Edit with your MongoDB/Redis URLs

# 2. Install dependencies
cd server && npm install
cd ../client && npm install

# 3. Seed database (optional)
cd server && npm run seed

# 4. Run both servers
cd server && npm run dev   # :5000
cd client && npm run dev   # :5173
```

Open `http://localhost:5173` to see the application.