| # 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. | |