Vibecode Draftroom
track this build5 steps, step by step0%A competent coding agent can rebuild Draftroom's core agency workflow in a weekend: clients, projects, tasks, file versions, contextual feedback, review queues, approvals, client review links, delivery tracking, and workspace permissions. The gap is not the CRUD screens; it is production-grade collaboration, notification reliability, permission edge cases, file handling, mobile review polish, and the accumulated project history that makes a shared agency system dependable every day.
You are building a lean indie version of Draftroom. Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt. ===== README.md ===== # Draftroom indie build ## Goal Build the smallest trustworthy replacement for the core Draftroom workflow for one developer or a tiny team. ## Scope Create a client and project, assign content work, upload versioned files, collect internal and client feedback, approve the right version, and mark the work delivered without splitting the workflow across separate tools. ## Quick start 1. Install the documented dependencies. 2. Copy `.env.example` to `.env`. 3. Run the development command chosen during implementation. 4. Complete the acceptance checks in `BUILD_PLAN.md`. ## Honest limits This build deliberately does not replace: - Production-hardened real-time and notification behavior across many simultaneous users - Years of edge-case handling around client permissions, review links, files, revisions, and approvals - Polished mobile review and collaboration behavior that non-technical clients can use without training - Operational history, project context, and team habits already accumulated inside an existing Draftroom workspace - Enterprise features such as SSO, advanced reporting, white-labeling, onboarding, and support If those capabilities are essential, use Draftroom instead of pretending the gap is solved. ===== AGENTS.md ===== # Agent instructions - Optimize for a working, understandable weekend build. - Prefer the fewest moving parts that satisfy the brief. - Do not invent cryptography, security guarantees, APIs, or compliance claims. - Keep secrets out of source control and logs. - Add focused tests for destructive, security-sensitive, and data-loss paths. - Run the project checks before declaring the build complete. - Record any deliberate shortcut in the README under "Tradeoffs". ===== BUILD_PLAN.md ===== # Build plan ## Original build brief Build a working web app called Draftroom, an opinionated creative project-management system for marketing agencies and high-volume content teams. Use Remix + TypeScript + Tailwind CSS + Prisma + PostgreSQL; use Supabase Auth for login and Supabase Storage for uploaded files, with every secret in .env. Make it multi-tenant: users belong to a workspace through Membership records and must never be able to read or mutate another workspace's data. Use this core data model: User, Workspace, Membership, Client, Project, Task, TaskAssignee, TaskReviewer, FileAsset, FileVersion, Comment, Approval, ReviewLink, Notification, and ActivityEvent. Workspace roles are OWNER and MEMBER; external clients normally use scoped review links instead of full workspace accounts. Users can create clients, create projects under clients, invite teammates, archive clients/projects, and see only work inside their workspace. Tasks need title, description, status, priority, assignees, reviewers, startDate, dueDate, deliveryDate, createdAt, updatedAt, attachments, comments, and activity. Use the workflow BACKLOG → TODO → IN_PROGRESS → IN_REVIEW → APPROVED → DELIVERED and allow drag-and-drop Kanban movement plus a compact list view. Add a content calendar that plots tasks by due/delivery date and lets users open the same task detail drawer from calendar, list, or Kanban. Build My Work for the signed-in user; show assigned tasks grouped by status and sort by due date, then delivery date, start date, updatedAt, then title. Task detail should open as a fast drawer and support editing fields, assignees/reviewers, comments, attachments, version history, approvals, and activity without losing board context. Files belong to tasks/projects; every replacement upload creates FileVersion v0, v1, v2... while preserving old versions and clearly marking the current version. Comments can be attached to a task or a specific file/version and have INTERNAL or CLIENT_VISIBLE visibility so team discussion can remain private. Reviewers need a Review queue for IN_REVIEW work and can Approve or Request Changes with a required/optional comment; approval state and decision history must be visible. Generate secure expiring /review/:token links for selected files; the mobile-first review page needs no client account and allows only the permissions encoded in the link: view, comment, approve/request changes. Review links must reveal no unrelated workspace/project data, use random non-guessable tokens, support revocation/expiry, and rate-limit write actions. Record task creation/edits, assignments, status moves, uploads, new versions, comments, review decisions, link creation/revocation, and delivery in an ActivityEvent timeline. Add in-app notifications for assignments, mentions, review requests, comments, approvals, requested changes, and approaching due dates; mark read/unread. Dashboard should show active projects, overdue work, due soon, waiting for review, approved/ready to deliver, recent activity, and quick links into the filtered work. Use optimistic UI for common mutations, skeleton/loading states, helpful empty/error states, responsive layouts, keyboard-accessible controls, and a dense calm interface closer to Linear/WhatsApp Web than enterprise PM software. Create routes for /login, /app, /app/my-work, /app/calendar, /app/clients, /app/clients/:clientId, /app/projects/:projectId, /app/review, /app/settings/members, and public /review/:token. There must be no platform super-admin system: do not create /admin, /super-admin, impersonation, global user/workspace management, super-admin DB roles, middleware, APIs, or related code. Deliberately exclude billing/subscriptions, attendance/payroll, time tracking, resource planning, Gantt charts, AI agents, email/calendar integrations, SSO, advanced analytics, white-labeling, and Frame.io-style frame-accurate media annotation. Seed one demo agency with 5 members, 3 clients, multiple projects, realistic marketing tasks, several file versions, comments, review decisions, notifications, and activity so every flow is testable immediately. Add Prisma migrations, indexes/constraints for tenant safety and common filters, secure server-side authorization helpers, file validation, and tests for cross-workspace access plus review-link permissions. Add a README with setup, env vars, Supabase configuration, migration/seed commands and run/deploy instructions; then run lint/typecheck/tests/build and fix failures. Before finishing, verify the complete loop works: create workspace → client → project → task → assign → upload versions → internal feedback → review → client link → approval/changes → delivered. ## Required capabilities - Node.js - Supabase project with PostgreSQL, Auth, and Storage - Environment variables for Supabase and database credentials ## Delivery order 1. Scaffold the smallest runnable application and document its commands. 2. Implement the primary data model and core workflow. 3. Add validation, safe failure states, and persistence. 4. Cover the critical path with automated tests. 5. Exercise a clean install from the README and fix every missing step. ## Done when - A new user can go from clone to first successful workflow using only the README. - The core workflow works without paid infrastructure unless the brief requires it. - Tests cover the highest-risk behavior. - Known limitations are explicit rather than hidden. ===== .env.example ===== # Copy to .env and document every variable when it is introduced. # Never put real credentials in this file. APP_ENV=development # Add only values required by the selected implementation.
You are building a lean indie version of Draftroom. Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt. ===== README.md ===== # Draftroom indie build ## Goal Build the smallest trustworthy replacement for the core Draftroom workflow for one developer or a tiny team. ## Scope Create a client and project, assign content work, upload versioned files, collect internal and client feedback, approve the right version, and mark the work delivered without splitting the workflow across separate tools. ## Quick start 1. Install the documented dependencies. 2. Copy `.env.example` to `.env`. 3. Run the development command chosen during implementation. 4. Complete the acceptance checks in `BUILD_PLAN.md`. ## Honest limits This build deliberately does not replace: - Production-hardened real-time and notification behavior across many simultaneous users - Years of edge-case handling around client permissions, review links, files, revisions, and approvals - Polished mobile review and collaboration behavior that non-technical clients can use without training - Operational history, project context, and team habits already accumulated inside an existing Draftroom workspace - Enterprise features such as SSO, advanced reporting, white-labeling, onboarding, and support If those capabilities are essential, use Draftroom instead of pretending the gap is solved. ===== AGENTS.md ===== # Agent instructions - Optimize for a working, understandable weekend build. - Prefer the fewest moving parts that satisfy the brief. - Do not invent cryptography, security guarantees, APIs, or compliance claims. - Keep secrets out of source control and logs. - Add focused tests for destructive, security-sensitive, and data-loss paths. - Run the project checks before declaring the build complete. - Record any deliberate shortcut in the README under "Tradeoffs". ===== BUILD_PLAN.md ===== # Build plan ## Original build brief Build a working web app called Draftroom, an opinionated creative project-management system for marketing agencies and high-volume content teams. Use Remix + TypeScript + Tailwind CSS + Prisma + PostgreSQL; use Supabase Auth for login and Supabase Storage for uploaded files, with every secret in .env. Make it multi-tenant: users belong to a workspace through Membership records and must never be able to read or mutate another workspace's data. Use this core data model: User, Workspace, Membership, Client, Project, Task, TaskAssignee, TaskReviewer, FileAsset, FileVersion, Comment, Approval, ReviewLink, Notification, and ActivityEvent. Workspace roles are OWNER and MEMBER; external clients normally use scoped review links instead of full workspace accounts. Users can create clients, create projects under clients, invite teammates, archive clients/projects, and see only work inside their workspace. Tasks need title, description, status, priority, assignees, reviewers, startDate, dueDate, deliveryDate, createdAt, updatedAt, attachments, comments, and activity. Use the workflow BACKLOG → TODO → IN_PROGRESS → IN_REVIEW → APPROVED → DELIVERED and allow drag-and-drop Kanban movement plus a compact list view. Add a content calendar that plots tasks by due/delivery date and lets users open the same task detail drawer from calendar, list, or Kanban. Build My Work for the signed-in user; show assigned tasks grouped by status and sort by due date, then delivery date, start date, updatedAt, then title. Task detail should open as a fast drawer and support editing fields, assignees/reviewers, comments, attachments, version history, approvals, and activity without losing board context. Files belong to tasks/projects; every replacement upload creates FileVersion v0, v1, v2... while preserving old versions and clearly marking the current version. Comments can be attached to a task or a specific file/version and have INTERNAL or CLIENT_VISIBLE visibility so team discussion can remain private. Reviewers need a Review queue for IN_REVIEW work and can Approve or Request Changes with a required/optional comment; approval state and decision history must be visible. Generate secure expiring /review/:token links for selected files; the mobile-first review page needs no client account and allows only the permissions encoded in the link: view, comment, approve/request changes. Review links must reveal no unrelated workspace/project data, use random non-guessable tokens, support revocation/expiry, and rate-limit write actions. Record task creation/edits, assignments, status moves, uploads, new versions, comments, review decisions, link creation/revocation, and delivery in an ActivityEvent timeline. Add in-app notifications for assignments, mentions, review requests, comments, approvals, requested changes, and approaching due dates; mark read/unread. Dashboard should show active projects, overdue work, due soon, waiting for review, approved/ready to deliver, recent activity, and quick links into the filtered work. Use optimistic UI for common mutations, skeleton/loading states, helpful empty/error states, responsive layouts, keyboard-accessible controls, and a dense calm interface closer to Linear/WhatsApp Web than enterprise PM software. Create routes for /login, /app, /app/my-work, /app/calendar, /app/clients, /app/clients/:clientId, /app/projects/:projectId, /app/review, /app/settings/members, and public /review/:token. There must be no platform super-admin system: do not create /admin, /super-admin, impersonation, global user/workspace management, super-admin DB roles, middleware, APIs, or related code. Deliberately exclude billing/subscriptions, attendance/payroll, time tracking, resource planning, Gantt charts, AI agents, email/calendar integrations, SSO, advanced analytics, white-labeling, and Frame.io-style frame-accurate media annotation. Seed one demo agency with 5 members, 3 clients, multiple projects, realistic marketing tasks, several file versions, comments, review decisions, notifications, and activity so every flow is testable immediately. Add Prisma migrations, indexes/constraints for tenant safety and common filters, secure server-side authorization helpers, file validation, and tests for cross-workspace access plus review-link permissions. Add a README with setup, env vars, Supabase configuration, migration/seed commands and run/deploy instructions; then run lint/typecheck/tests/build and fix failures. Before finishing, verify the complete loop works: create workspace → client → project → task → assign → upload versions → internal feedback → review → client link → approval/changes → delivered. ## Required capabilities - Node.js - Supabase project with PostgreSQL, Auth, and Storage - Environment variables for Supabase and database credentials ## Delivery order 1. Scaffold the smallest runnable application and document its commands. 2. Implement the primary data model and core workflow. 3. Add validation, safe failure states, and persistence. 4. Cover the critical path with automated tests. 5. Exercise a clean install from the README and fix every missing step. ## Done when - A new user can go from clone to first successful workflow using only the README. - The core workflow works without paid infrastructure unless the brief requires it. - Tests cover the highest-risk behavior. - Known limitations are explicit rather than hidden. ===== .env.example ===== # Copy to .env and document every variable when it is introduced. # Never put real credentials in this file. APP_ENV=development # Add only values required by the selected implementation.
You are building a production product version of Draftroom. Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt. ===== PRODUCT.md ===== # Draftroom product brief ## Problem A competent coding agent can rebuild Draftroom's core agency workflow in a weekend: clients, projects, tasks, file versions, contextual feedback, review queues, approvals, client review links, delivery tracking, and workspace permissions. The gap is not the CRUD screens; it is production-grade collaboration, notification reliability, permission edge cases, file handling, mobile review polish, and the accumulated project history that makes a shared agency system dependable every day. ## Product outcome Create a client and project, assign content work, upload versioned files, collect internal and client feedback, approve the right version, and mark the work delivered without splitting the workflow across separate tools. ## Target user A serious builder who needs a maintainable product foundation rather than a one-off demo. ## Required capabilities - Node.js - Supabase project with PostgreSQL, Auth, and Storage - Environment variables for Supabase and database credentials ## Explicit non-goals for v1 - Production-hardened real-time and notification behavior across many simultaneous users - Years of edge-case handling around client permissions, review links, files, revisions, and approvals - Polished mobile review and collaboration behavior that non-technical clients can use without training - Operational history, project context, and team habits already accumulated inside an existing Draftroom workspace - Enterprise features such as SSO, advanced reporting, white-labeling, onboarding, and support ## Success criteria - The primary workflow is measurable end to end. - Setup is reproducible in a clean environment. - Failure, recovery, and support paths are documented. - Product claims match what the implementation actually guarantees. ===== ARCHITECTURE.md ===== # Architecture ## Starting brief Build a working web app called Draftroom, an opinionated creative project-management system for marketing agencies and high-volume content teams. Use Remix + TypeScript + Tailwind CSS + Prisma + PostgreSQL; use Supabase Auth for login and Supabase Storage for uploaded files, with every secret in .env. Make it multi-tenant: users belong to a workspace through Membership records and must never be able to read or mutate another workspace's data. Use this core data model: User, Workspace, Membership, Client, Project, Task, TaskAssignee, TaskReviewer, FileAsset, FileVersion, Comment, Approval, ReviewLink, Notification, and ActivityEvent. Workspace roles are OWNER and MEMBER; external clients normally use scoped review links instead of full workspace accounts. Users can create clients, create projects under clients, invite teammates, archive clients/projects, and see only work inside their workspace. Tasks need title, description, status, priority, assignees, reviewers, startDate, dueDate, deliveryDate, createdAt, updatedAt, attachments, comments, and activity. Use the workflow BACKLOG → TODO → IN_PROGRESS → IN_REVIEW → APPROVED → DELIVERED and allow drag-and-drop Kanban movement plus a compact list view. Add a content calendar that plots tasks by due/delivery date and lets users open the same task detail drawer from calendar, list, or Kanban. Build My Work for the signed-in user; show assigned tasks grouped by status and sort by due date, then delivery date, start date, updatedAt, then title. Task detail should open as a fast drawer and support editing fields, assignees/reviewers, comments, attachments, version history, approvals, and activity without losing board context. Files belong to tasks/projects; every replacement upload creates FileVersion v0, v1, v2... while preserving old versions and clearly marking the current version. Comments can be attached to a task or a specific file/version and have INTERNAL or CLIENT_VISIBLE visibility so team discussion can remain private. Reviewers need a Review queue for IN_REVIEW work and can Approve or Request Changes with a required/optional comment; approval state and decision history must be visible. Generate secure expiring /review/:token links for selected files; the mobile-first review page needs no client account and allows only the permissions encoded in the link: view, comment, approve/request changes. Review links must reveal no unrelated workspace/project data, use random non-guessable tokens, support revocation/expiry, and rate-limit write actions. Record task creation/edits, assignments, status moves, uploads, new versions, comments, review decisions, link creation/revocation, and delivery in an ActivityEvent timeline. Add in-app notifications for assignments, mentions, review requests, comments, approvals, requested changes, and approaching due dates; mark read/unread. Dashboard should show active projects, overdue work, due soon, waiting for review, approved/ready to deliver, recent activity, and quick links into the filtered work. Use optimistic UI for common mutations, skeleton/loading states, helpful empty/error states, responsive layouts, keyboard-accessible controls, and a dense calm interface closer to Linear/WhatsApp Web than enterprise PM software. Create routes for /login, /app, /app/my-work, /app/calendar, /app/clients, /app/clients/:clientId, /app/projects/:projectId, /app/review, /app/settings/members, and public /review/:token. There must be no platform super-admin system: do not create /admin, /super-admin, impersonation, global user/workspace management, super-admin DB roles, middleware, APIs, or related code. Deliberately exclude billing/subscriptions, attendance/payroll, time tracking, resource planning, Gantt charts, AI agents, email/calendar integrations, SSO, advanced analytics, white-labeling, and Frame.io-style frame-accurate media annotation. Seed one demo agency with 5 members, 3 clients, multiple projects, realistic marketing tasks, several file versions, comments, review decisions, notifications, and activity so every flow is testable immediately. Add Prisma migrations, indexes/constraints for tenant safety and common filters, secure server-side authorization helpers, file validation, and tests for cross-workspace access plus review-link permissions. Add a README with setup, env vars, Supabase configuration, migration/seed commands and run/deploy instructions; then run lint/typecheck/tests/build and fix failures. Before finishing, verify the complete loop works: create workspace → client → project → task → assign → upload versions → internal feedback → review → client link → approval/changes → delivered. ## Boundaries Separate the product into replaceable modules for interface, application logic, persistence, external integrations, and operational concerns. Keep domain logic independent from delivery frameworks and vendors. ## Production baseline - Configuration: validated at startup with safe local defaults where possible. - Security: least privilege, input validation, secret redaction, rate limits on abuse-prone paths, and no invented security primitives. - Data: explicit schema and migrations, transactional writes where integrity matters, backup and restore instructions. - Integrations: adapters around third-party providers, idempotent webhook or job processing, bounded retries, and timeouts. - Observability: structured logs with request or operation IDs, an error-tracking hook, and health/readiness checks where a server exists. - Quality: unit tests for domain rules, integration tests at module boundaries, and one end-to-end critical-path test. ## Decision records For each major dependency, document why it was chosen, its failure mode, and how it can be replaced. Do not introduce infrastructure until a requirement justifies it. ===== AGENTS.md ===== # Agent instructions - Read `PRODUCT.md` and `ARCHITECTURE.md` before changing code. - Implement milestone by milestone; keep each change reviewable and leave the application runnable. - Treat authentication, payments, encryption, imports, webhooks, and destructive actions as high-risk boundaries when present. - Never invent cryptography or silently weaken a requirement to make a test pass. - Use provider interfaces for external services and deterministic fakes in tests. - Add migrations and rollback or recovery notes for persistent data changes. - Log useful operational context without credentials, tokens, passwords, or personal data. - Update documentation and run all checks before completing a milestone. ===== MILESTONES.md ===== # Delivery milestones ## M0 — Decisions and scaffold - Confirm the runtime, persistence model, threat boundaries, and deployment target. - Create a reproducible local environment and continuous checks. ## M1 — Core workflow - Implement the smallest end-to-end product path with validation and tests. - Keep integrations behind interfaces. ## M2 — Trust layer - Add secure failure behavior, recovery paths, audit-relevant events, and data safeguards. - Test abuse cases and destructive operations. ## M3 — Operability - Add structured logs, error reporting hooks, health signals, backup/restore documentation, and deployment configuration. ## M4 — Release gate - Run a clean-install test, critical-path end-to-end test, dependency review, and documented rollback exercise. - Compare the shipped behavior with `PRODUCT.md` and publish remaining limitations. ===== OPERATIONS.md ===== # Operations ## Before release - Validate configuration and secrets at startup. - Define backup, restore, and rollback procedures and test them. - Document logs, error tracking, health signals, and alert ownership. - Set dependency update and vulnerability review expectations. ## Incident checklist 1. Contain the issue without destroying evidence or user data. 2. Record the timeline and affected scope. 3. Rotate exposed secrets and revoke compromised sessions or credentials. 4. Restore from a verified source when needed. 5. Document the root cause, remediation, and regression test. ## Launch constraint Do not market omitted Draftroom capabilities as implemented. The v1 non-goals in `PRODUCT.md` remain user-visible limitations until they are deliberately delivered.
# Draftroom indie build ## Goal Build the smallest trustworthy replacement for the core Draftroom workflow for one developer or a tiny team. ## Scope Create a client and project, assign content work, upload versioned files, collect internal and client feedback, approve the right version, and mark the work delivered without splitting the workflow across separate tools. ## Quick start 1. Install the documented dependencies. 2. Copy `.env.example` to `.env`. 3. Run the development command chosen during implementation. 4. Complete the acceptance checks in `BUILD_PLAN.md`. ## Honest limits This build deliberately does not replace: - Production-hardened real-time and notification behavior across many simultaneous users - Years of edge-case handling around client permissions, review links, files, revisions, and approvals - Polished mobile review and collaboration behavior that non-technical clients can use without training - Operational history, project context, and team habits already accumulated inside an existing Draftroom workspace - Enterprise features such as SSO, advanced reporting, white-labeling, onboarding, and support If those capabilities are essential, use Draftroom instead of pretending the gap is solved.
# Agent instructions - Optimize for a working, understandable weekend build. - Prefer the fewest moving parts that satisfy the brief. - Do not invent cryptography, security guarantees, APIs, or compliance claims. - Keep secrets out of source control and logs. - Add focused tests for destructive, security-sensitive, and data-loss paths. - Run the project checks before declaring the build complete. - Record any deliberate shortcut in the README under "Tradeoffs".
# Build plan ## Original build brief Build a working web app called Draftroom, an opinionated creative project-management system for marketing agencies and high-volume content teams. Use Remix + TypeScript + Tailwind CSS + Prisma + PostgreSQL; use Supabase Auth for login and Supabase Storage for uploaded files, with every secret in .env. Make it multi-tenant: users belong to a workspace through Membership records and must never be able to read or mutate another workspace's data. Use this core data model: User, Workspace, Membership, Client, Project, Task, TaskAssignee, TaskReviewer, FileAsset, FileVersion, Comment, Approval, ReviewLink, Notification, and ActivityEvent. Workspace roles are OWNER and MEMBER; external clients normally use scoped review links instead of full workspace accounts. Users can create clients, create projects under clients, invite teammates, archive clients/projects, and see only work inside their workspace. Tasks need title, description, status, priority, assignees, reviewers, startDate, dueDate, deliveryDate, createdAt, updatedAt, attachments, comments, and activity. Use the workflow BACKLOG → TODO → IN_PROGRESS → IN_REVIEW → APPROVED → DELIVERED and allow drag-and-drop Kanban movement plus a compact list view. Add a content calendar that plots tasks by due/delivery date and lets users open the same task detail drawer from calendar, list, or Kanban. Build My Work for the signed-in user; show assigned tasks grouped by status and sort by due date, then delivery date, start date, updatedAt, then title. Task detail should open as a fast drawer and support editing fields, assignees/reviewers, comments, attachments, version history, approvals, and activity without losing board context. Files belong to tasks/projects; every replacement upload creates FileVersion v0, v1, v2... while preserving old versions and clearly marking the current version. Comments can be attached to a task or a specific file/version and have INTERNAL or CLIENT_VISIBLE visibility so team discussion can remain private. Reviewers need a Review queue for IN_REVIEW work and can Approve or Request Changes with a required/optional comment; approval state and decision history must be visible. Generate secure expiring /review/:token links for selected files; the mobile-first review page needs no client account and allows only the permissions encoded in the link: view, comment, approve/request changes. Review links must reveal no unrelated workspace/project data, use random non-guessable tokens, support revocation/expiry, and rate-limit write actions. Record task creation/edits, assignments, status moves, uploads, new versions, comments, review decisions, link creation/revocation, and delivery in an ActivityEvent timeline. Add in-app notifications for assignments, mentions, review requests, comments, approvals, requested changes, and approaching due dates; mark read/unread. Dashboard should show active projects, overdue work, due soon, waiting for review, approved/ready to deliver, recent activity, and quick links into the filtered work. Use optimistic UI for common mutations, skeleton/loading states, helpful empty/error states, responsive layouts, keyboard-accessible controls, and a dense calm interface closer to Linear/WhatsApp Web than enterprise PM software. Create routes for /login, /app, /app/my-work, /app/calendar, /app/clients, /app/clients/:clientId, /app/projects/:projectId, /app/review, /app/settings/members, and public /review/:token. There must be no platform super-admin system: do not create /admin, /super-admin, impersonation, global user/workspace management, super-admin DB roles, middleware, APIs, or related code. Deliberately exclude billing/subscriptions, attendance/payroll, time tracking, resource planning, Gantt charts, AI agents, email/calendar integrations, SSO, advanced analytics, white-labeling, and Frame.io-style frame-accurate media annotation. Seed one demo agency with 5 members, 3 clients, multiple projects, realistic marketing tasks, several file versions, comments, review decisions, notifications, and activity so every flow is testable immediately. Add Prisma migrations, indexes/constraints for tenant safety and common filters, secure server-side authorization helpers, file validation, and tests for cross-workspace access plus review-link permissions. Add a README with setup, env vars, Supabase configuration, migration/seed commands and run/deploy instructions; then run lint/typecheck/tests/build and fix failures. Before finishing, verify the complete loop works: create workspace → client → project → task → assign → upload versions → internal feedback → review → client link → approval/changes → delivered. ## Required capabilities - Node.js - Supabase project with PostgreSQL, Auth, and Storage - Environment variables for Supabase and database credentials ## Delivery order 1. Scaffold the smallest runnable application and document its commands. 2. Implement the primary data model and core workflow. 3. Add validation, safe failure states, and persistence. 4. Cover the critical path with automated tests. 5. Exercise a clean install from the README and fix every missing step. ## Done when - A new user can go from clone to first successful workflow using only the README. - The core workflow works without paid infrastructure unless the brief requires it. - Tests cover the highest-risk behavior. - Known limitations are explicit rather than hidden.
# Copy to .env and document every variable when it is introduced. # Never put real credentials in this file. APP_ENV=development # Add only values required by the selected implementation.
# Draftroom product brief ## Problem A competent coding agent can rebuild Draftroom's core agency workflow in a weekend: clients, projects, tasks, file versions, contextual feedback, review queues, approvals, client review links, delivery tracking, and workspace permissions. The gap is not the CRUD screens; it is production-grade collaboration, notification reliability, permission edge cases, file handling, mobile review polish, and the accumulated project history that makes a shared agency system dependable every day. ## Product outcome Create a client and project, assign content work, upload versioned files, collect internal and client feedback, approve the right version, and mark the work delivered without splitting the workflow across separate tools. ## Target user A serious builder who needs a maintainable product foundation rather than a one-off demo. ## Required capabilities - Node.js - Supabase project with PostgreSQL, Auth, and Storage - Environment variables for Supabase and database credentials ## Explicit non-goals for v1 - Production-hardened real-time and notification behavior across many simultaneous users - Years of edge-case handling around client permissions, review links, files, revisions, and approvals - Polished mobile review and collaboration behavior that non-technical clients can use without training - Operational history, project context, and team habits already accumulated inside an existing Draftroom workspace - Enterprise features such as SSO, advanced reporting, white-labeling, onboarding, and support ## Success criteria - The primary workflow is measurable end to end. - Setup is reproducible in a clean environment. - Failure, recovery, and support paths are documented. - Product claims match what the implementation actually guarantees.
# Architecture ## Starting brief Build a working web app called Draftroom, an opinionated creative project-management system for marketing agencies and high-volume content teams. Use Remix + TypeScript + Tailwind CSS + Prisma + PostgreSQL; use Supabase Auth for login and Supabase Storage for uploaded files, with every secret in .env. Make it multi-tenant: users belong to a workspace through Membership records and must never be able to read or mutate another workspace's data. Use this core data model: User, Workspace, Membership, Client, Project, Task, TaskAssignee, TaskReviewer, FileAsset, FileVersion, Comment, Approval, ReviewLink, Notification, and ActivityEvent. Workspace roles are OWNER and MEMBER; external clients normally use scoped review links instead of full workspace accounts. Users can create clients, create projects under clients, invite teammates, archive clients/projects, and see only work inside their workspace. Tasks need title, description, status, priority, assignees, reviewers, startDate, dueDate, deliveryDate, createdAt, updatedAt, attachments, comments, and activity. Use the workflow BACKLOG → TODO → IN_PROGRESS → IN_REVIEW → APPROVED → DELIVERED and allow drag-and-drop Kanban movement plus a compact list view. Add a content calendar that plots tasks by due/delivery date and lets users open the same task detail drawer from calendar, list, or Kanban. Build My Work for the signed-in user; show assigned tasks grouped by status and sort by due date, then delivery date, start date, updatedAt, then title. Task detail should open as a fast drawer and support editing fields, assignees/reviewers, comments, attachments, version history, approvals, and activity without losing board context. Files belong to tasks/projects; every replacement upload creates FileVersion v0, v1, v2... while preserving old versions and clearly marking the current version. Comments can be attached to a task or a specific file/version and have INTERNAL or CLIENT_VISIBLE visibility so team discussion can remain private. Reviewers need a Review queue for IN_REVIEW work and can Approve or Request Changes with a required/optional comment; approval state and decision history must be visible. Generate secure expiring /review/:token links for selected files; the mobile-first review page needs no client account and allows only the permissions encoded in the link: view, comment, approve/request changes. Review links must reveal no unrelated workspace/project data, use random non-guessable tokens, support revocation/expiry, and rate-limit write actions. Record task creation/edits, assignments, status moves, uploads, new versions, comments, review decisions, link creation/revocation, and delivery in an ActivityEvent timeline. Add in-app notifications for assignments, mentions, review requests, comments, approvals, requested changes, and approaching due dates; mark read/unread. Dashboard should show active projects, overdue work, due soon, waiting for review, approved/ready to deliver, recent activity, and quick links into the filtered work. Use optimistic UI for common mutations, skeleton/loading states, helpful empty/error states, responsive layouts, keyboard-accessible controls, and a dense calm interface closer to Linear/WhatsApp Web than enterprise PM software. Create routes for /login, /app, /app/my-work, /app/calendar, /app/clients, /app/clients/:clientId, /app/projects/:projectId, /app/review, /app/settings/members, and public /review/:token. There must be no platform super-admin system: do not create /admin, /super-admin, impersonation, global user/workspace management, super-admin DB roles, middleware, APIs, or related code. Deliberately exclude billing/subscriptions, attendance/payroll, time tracking, resource planning, Gantt charts, AI agents, email/calendar integrations, SSO, advanced analytics, white-labeling, and Frame.io-style frame-accurate media annotation. Seed one demo agency with 5 members, 3 clients, multiple projects, realistic marketing tasks, several file versions, comments, review decisions, notifications, and activity so every flow is testable immediately. Add Prisma migrations, indexes/constraints for tenant safety and common filters, secure server-side authorization helpers, file validation, and tests for cross-workspace access plus review-link permissions. Add a README with setup, env vars, Supabase configuration, migration/seed commands and run/deploy instructions; then run lint/typecheck/tests/build and fix failures. Before finishing, verify the complete loop works: create workspace → client → project → task → assign → upload versions → internal feedback → review → client link → approval/changes → delivered. ## Boundaries Separate the product into replaceable modules for interface, application logic, persistence, external integrations, and operational concerns. Keep domain logic independent from delivery frameworks and vendors. ## Production baseline - Configuration: validated at startup with safe local defaults where possible. - Security: least privilege, input validation, secret redaction, rate limits on abuse-prone paths, and no invented security primitives. - Data: explicit schema and migrations, transactional writes where integrity matters, backup and restore instructions. - Integrations: adapters around third-party providers, idempotent webhook or job processing, bounded retries, and timeouts. - Observability: structured logs with request or operation IDs, an error-tracking hook, and health/readiness checks where a server exists. - Quality: unit tests for domain rules, integration tests at module boundaries, and one end-to-end critical-path test. ## Decision records For each major dependency, document why it was chosen, its failure mode, and how it can be replaced. Do not introduce infrastructure until a requirement justifies it.
# Agent instructions - Read `PRODUCT.md` and `ARCHITECTURE.md` before changing code. - Implement milestone by milestone; keep each change reviewable and leave the application runnable. - Treat authentication, payments, encryption, imports, webhooks, and destructive actions as high-risk boundaries when present. - Never invent cryptography or silently weaken a requirement to make a test pass. - Use provider interfaces for external services and deterministic fakes in tests. - Add migrations and rollback or recovery notes for persistent data changes. - Log useful operational context without credentials, tokens, passwords, or personal data. - Update documentation and run all checks before completing a milestone.
# Delivery milestones ## M0 — Decisions and scaffold - Confirm the runtime, persistence model, threat boundaries, and deployment target. - Create a reproducible local environment and continuous checks. ## M1 — Core workflow - Implement the smallest end-to-end product path with validation and tests. - Keep integrations behind interfaces. ## M2 — Trust layer - Add secure failure behavior, recovery paths, audit-relevant events, and data safeguards. - Test abuse cases and destructive operations. ## M3 — Operability - Add structured logs, error reporting hooks, health signals, backup/restore documentation, and deployment configuration. ## M4 — Release gate - Run a clean-install test, critical-path end-to-end test, dependency review, and documented rollback exercise. - Compare the shipped behavior with `PRODUCT.md` and publish remaining limitations.
# Operations ## Before release - Validate configuration and secrets at startup. - Define backup, restore, and rollback procedures and test them. - Document logs, error tracking, health signals, and alert ownership. - Set dependency update and vulnerability review expectations. ## Incident checklist 1. Contain the issue without destroying evidence or user data. 2. Record the timeline and affected scope. 3. Rotate exposed secrets and revoke compromised sessions or credentials. 4. Restore from a verified source when needed. 5. Document the root cause, remediation, and regression test. ## Launch constraint Do not market omitted Draftroom capabilities as implemented. The v1 non-goals in `PRODUCT.md` remain user-visible limitations until they are deliberately delivered.
$ choose a build depth, inspect the files, then open the complete pack in your agent
The basic mechanics are straightforward to recreate, but an agency does not pay for a Kanban board in isolation. It pays for a shared workflow that designers, account managers, founders, freelancers, and clients can trust every day. Reliable permissions, version history, review links, approval state, notifications, mobile behavior, file handling, and the cost of moving active client work make the hosted product more valuable than a weekend clone once the whole team depends on it.
xProduction-hardened real-time and notification behavior across many simultaneous users
xYears of edge-case handling around client permissions, review links, files, revisions, and approvals
xPolished mobile review and collaboration behavior that non-technical clients can use without training
xOperational history, project context, and team habits already accumulated inside an existing Draftroom workspace
xEnterprise features such as SSO, advanced reporting, white-labeling, onboarding, and support
Nothing worth pointing at. That's why the prompt exists.
Draftroom pricing
| plan | monthly | annual (per mo) | what you get |
|---|---|---|---|
| starter | $99/workspace | — | Up to 20 active clients or brand projects; unlimited internal team members; 100GB storage |
| growth | $149/workspace | — | Up to 50 active clients or brand projects; unlimited team members; 1TB storage |
| scale | $299/workspace | — | Unlimited active clients or brand projects; unlimited team members; 2TB storage |
| enterprise | custom | — | Custom limits. |
free tierno public free tier
billingMonthly prices are published; annual pricing is not publicly specified.
verified 2026-08-15 · source ↗
Is Draftroom free?
No public free tier is currently advertised; Draftroom is presented as an early-access product. Paid is Starter at $99/mo (checked 2026-08-15).
Vibecode Draftroom
Kinda. The core of Draftroom is buildable in a weekend with the prompt on this page, but there are real gaps: Production-hardened real-time and notification behavior across many simultaneous users, Years of edge-case handling around client permissions, review links, files, revisions, and approvals. Read the honest list above before committing.
How much does Draftroom cost?
Draftroom costs about $99/month (Starter, checked 2026-08-15), which is $1188 per year.
What do I lose by replacing Draftroom?
Honestly: Production-hardened real-time and notification behavior across many simultaneous users; Years of edge-case handling around client permissions, review links, files, revisions, and approvals; Polished mobile review and collaboration behavior that non-technical clients can use without training; Operational history, project context, and team habits already accumulated inside an existing Draftroom workspace; Enterprise features such as SSO, advanced reporting, white-labeling, onboarding, and support. If any of those are load-bearing for you, keep paying.
Is there an open-source alternative to Draftroom?
No mature open-source alternative worth pointing at, which is exactly why the one-shot prompt on this page exists.