Design · Weekend build
Build your own Frame.io
Notes at 00:42, not “somewhere around the middle”. Frame.io charges $15–$25 per person per month — that’s $180–$300 a year per person — for something you can replace with focused software of your own. Here is the honest scope, the honest timeline, and the exact prompt to hand your coding agent.
Who this replacement is for
This build targets a small video team collecting feedback on works in progress. The goal: move review out of email threads into timestamped comments and a clear approval per version. If you need more than that, keep paying — the point of building it yourself is owning a tool shaped exactly like your workflow, not re-implementing a venture-funded roadmap.
Same build, different logo: this v1 also replaces Filestage — they all solve the same core job.
How long it actually takes
One number would be a lie, so here are three. Each tier is a real, usable product — pick the one that matches how much of Frame.io you actually use.
| Estimate | What you get |
|---|---|
| 12 hours | uploads, timestamped comments, versions, approval states |
| 4 days | drawing annotations, mentions, guest links, comment resolution |
| 3 months+ | transcoding, camera-to-cloud, nle integrations, realtime presence — the part you should probably skip |
What a minimal Frame.io alternative needs
- asset uploads with every version kept together
- timestamped comments pinned to the player timeline
- per-version approval states from in-review to approved
- side-by-side compare between two versions
- reviewer links that don’t require accounts
Data model
Project, Asset, Version, Comment, Approval
Integrations
R2 object storage, transactional email
Capability context
Astro, HTMX, R2
The guardrail
Use unguessable, revocable review links, authorize every comment against its project, and never let a reviewer link expose other projects or delete anything.
Deliberate non-goals
Do not build screen recording, transcoding, NLE integrations, camera-to-cloud uploads, or real-time multiplayer presence.
The complete build prompt
Copy this into your coding agent of choice. It is scoped for a useful v1 — journeys, screens, business rules, data model, security, tests, and acceptance scenarios included. Pick your stack:
You are building a production-ready software product named “Cutcheck”, a deliberately focused alternative to Frame.io. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a small video team collecting feedback on works in progress. Primary outcome: move review out of email threads into timestamped comments and a clear approval per version. Product principle: optimize the exact workflow below instead of copying the full breadth of Frame.io. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. The editor creates a project, uploads a first cut, and sends reviewers an unguessable link that requires no account. 2. A reviewer scrubs the timeline, leaves comments pinned to exact timestamps, replies to another reviewer, and marks the version changes-requested. 3. The editor uploads v2 to the same asset, compares it against v1 side by side, resolves the addressed comments, and receives final approval. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Projects: assets with latest-version thumbnails, approval state, open comment counts, and a new-asset upload action. 2. Review player: the video with comment pins on the timeline, a comment rail synced to playback, reply and resolve controls, and approval actions. 3. Version history: every version of an asset with upload dates, per-version comment counts, and a compare-two-versions action. 4. Compare: two versions side by side with synced playback, a shared scrubber, and the comment threads each version received. CORE CAPABILITIES 1. asset uploads with every version kept together 2. timestamped comments pinned to the player timeline 3. per-version approval states from in-review to approved 4. side-by-side compare between two versions 5. reviewer links that don’t require accounts DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Pin every comment to a specific version and timestamp so feedback never floats to the wrong cut. 2. Track approval per version: a new upload starts in review and never inherits its predecessor’s approval. 3. Make reviewer links unguessable, revocable, and scoped to one project; reviewers can comment and approve but never delete assets or reach other projects. 4. Resolving a comment records who resolved it and keeps the thread readable in the version history. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Project, Asset, Version, Comment, Approval. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Start with server-rendered Astro pages and ordinary HTML forms. Use HTMX for form submissions, partial navigation, and server-driven updates, then Alpine.js only for small local browser state. The core workflow must remain understandable if either enhancement layer fails. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with the AHA stack: Astro for routing, layouts, and server-rendered pages; HTMX for interactions that benefit from HTML fragment responses; and Alpine.js for small, local interface state. Prefer Cloudflare D1 for relational persistence, R2 for object storage, Workers for server endpoints and scheduled work, Durable Objects only for coordinated real-time state, and Workflows or Queues for durable background jobs—but only when the product requirements call for them. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies Astro, HTMX, R2 as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with R2 object storage and transactional email. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Use unguessable, revocable review links, authorize every comment against its project, and never let a reviewer link expose other projects or delete anything. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. A comment left at 00:42 on v1 stays attached to v1 after v2 is uploaded, and the compare view shows both versions’ threads. 2. A revoked reviewer link stops working immediately while comments already left through it remain attributed and intact. 3. Two reviewers commenting at the same timestamp produce two separate threads instead of overwriting each other. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build screen recording, transcoding, NLE integrations, camera-to-cloud uploads, or real-time multiplayer presence.
You are building a production-ready software product named “Cutcheck”, a deliberately focused alternative to Frame.io. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a small video team collecting feedback on works in progress. Primary outcome: move review out of email threads into timestamped comments and a clear approval per version. Product principle: optimize the exact workflow below instead of copying the full breadth of Frame.io. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. The editor creates a project, uploads a first cut, and sends reviewers an unguessable link that requires no account. 2. A reviewer scrubs the timeline, leaves comments pinned to exact timestamps, replies to another reviewer, and marks the version changes-requested. 3. The editor uploads v2 to the same asset, compares it against v1 side by side, resolves the addressed comments, and receives final approval. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Projects: assets with latest-version thumbnails, approval state, open comment counts, and a new-asset upload action. 2. Review player: the video with comment pins on the timeline, a comment rail synced to playback, reply and resolve controls, and approval actions. 3. Version history: every version of an asset with upload dates, per-version comment counts, and a compare-two-versions action. 4. Compare: two versions side by side with synced playback, a shared scrubber, and the comment threads each version received. CORE CAPABILITIES 1. asset uploads with every version kept together 2. timestamped comments pinned to the player timeline 3. per-version approval states from in-review to approved 4. side-by-side compare between two versions 5. reviewer links that don’t require accounts DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Pin every comment to a specific version and timestamp so feedback never floats to the wrong cut. 2. Track approval per version: a new upload starts in review and never inherits its predecessor’s approval. 3. Make reviewer links unguessable, revocable, and scoped to one project; reviewers can comment and approve but never delete assets or reach other projects. 4. Resolving a comment records who resolved it and keeps the thread readable in the version history. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Project, Asset, Version, Comment, Approval. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Render with React Server Components by default. Use Server Actions for authenticated form mutations and add Client Components only for interactions that genuinely require browser state, browser APIs, drag-and-drop, or live updates. The core workflow must remain understandable before client-side JavaScript finishes loading. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with Next.js, the App Router, and TypeScript. Use Server Components by default, Server Actions for authenticated mutations, and Route Handlers for public APIs, OAuth callbacks, webhooks, feeds, uploads, and downloads. Use PostgreSQL through Drizzle ORM with versioned migrations and an isolated test database. Access S3-compatible object storage through a server-only adapter, and run slow or retryable work in a real job or workflow system instead of the request lifecycle. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies Astro, HTMX, R2 as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with R2 object storage and transactional email. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Use unguessable, revocable review links, authorize every comment against its project, and never let a reviewer link expose other projects or delete anything. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. A comment left at 00:42 on v1 stays attached to v1 after v2 is uploaded, and the compare view shows both versions’ threads. 2. A revoked reviewer link stops working immediately while comments already left through it remain attributed and intact. 3. Two reviewers commenting at the same timestamp produce two separate threads instead of overwriting each other. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build screen recording, transcoding, NLE integrations, camera-to-cloud uploads, or real-time multiplayer presence.
You are building a production-ready software product named “Cutcheck”, a deliberately focused alternative to Frame.io. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a small video team collecting feedback on works in progress. Primary outcome: move review out of email threads into timestamped comments and a clear approval per version. Product principle: optimize the exact workflow below instead of copying the full breadth of Frame.io. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. The editor creates a project, uploads a first cut, and sends reviewers an unguessable link that requires no account. 2. A reviewer scrubs the timeline, leaves comments pinned to exact timestamps, replies to another reviewer, and marks the version changes-requested. 3. The editor uploads v2 to the same asset, compares it against v1 side by side, resolves the addressed comments, and receives final approval. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Projects: assets with latest-version thumbnails, approval state, open comment counts, and a new-asset upload action. 2. Review player: the video with comment pins on the timeline, a comment rail synced to playback, reply and resolve controls, and approval actions. 3. Version history: every version of an asset with upload dates, per-version comment counts, and a compare-two-versions action. 4. Compare: two versions side by side with synced playback, a shared scrubber, and the comment threads each version received. CORE CAPABILITIES 1. asset uploads with every version kept together 2. timestamped comments pinned to the player timeline 3. per-version approval states from in-review to approved 4. side-by-side compare between two versions 5. reviewer links that don’t require accounts DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Pin every comment to a specific version and timestamp so feedback never floats to the wrong cut. 2. Track approval per version: a new upload starts in review and never inherits its predecessor’s approval. 3. Make reviewer links unguessable, revocable, and scoped to one project; reviewers can comment and approve but never delete assets or reach other projects. 4. Resolving a comment records who resolved it and keeps the thread readable in the version history. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Project, Asset, Version, Comment, Approval. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Start with server-rendered Blade views and ordinary forms. Use Livewire for focused server-driven interactions and Alpine.js only for small local interface state. The core workflow must remain understandable without relying on a client-side application shell. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with Laravel, PHP, Blade, Livewire, and Alpine.js. Use controllers and Blade forms for durable navigation, Livewire for focused interactions, Form Requests for validation, Policies and Gates for authorization, and small application actions or services for domain transitions. Use Eloquent with migrations, database constraints, and transactions; Laravel Storage for private S3-compatible files; queued Jobs for retryable work; the Scheduler for recurring work; and Notifications or Mail for email. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies Astro, HTMX, R2 as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with R2 object storage and transactional email. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Use unguessable, revocable review links, authorize every comment against its project, and never let a reviewer link expose other projects or delete anything. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. A comment left at 00:42 on v1 stays attached to v1 after v2 is uploaded, and the compare view shows both versions’ threads. 2. A revoked reviewer link stops working immediately while comments already left through it remain attributed and intact. 3. Two reviewers commenting at the same timestamp produce two separate threads instead of overwriting each other. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build screen recording, transcoding, NLE integrations, camera-to-cloud uploads, or real-time multiplayer presence.
You are building a production-ready software product named “Cutcheck”, a deliberately focused alternative to Frame.io. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a small video team collecting feedback on works in progress. Primary outcome: move review out of email threads into timestamped comments and a clear approval per version. Product principle: optimize the exact workflow below instead of copying the full breadth of Frame.io. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. The editor creates a project, uploads a first cut, and sends reviewers an unguessable link that requires no account. 2. A reviewer scrubs the timeline, leaves comments pinned to exact timestamps, replies to another reviewer, and marks the version changes-requested. 3. The editor uploads v2 to the same asset, compares it against v1 side by side, resolves the addressed comments, and receives final approval. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Projects: assets with latest-version thumbnails, approval state, open comment counts, and a new-asset upload action. 2. Review player: the video with comment pins on the timeline, a comment rail synced to playback, reply and resolve controls, and approval actions. 3. Version history: every version of an asset with upload dates, per-version comment counts, and a compare-two-versions action. 4. Compare: two versions side by side with synced playback, a shared scrubber, and the comment threads each version received. CORE CAPABILITIES 1. asset uploads with every version kept together 2. timestamped comments pinned to the player timeline 3. per-version approval states from in-review to approved 4. side-by-side compare between two versions 5. reviewer links that don’t require accounts DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Pin every comment to a specific version and timestamp so feedback never floats to the wrong cut. 2. Track approval per version: a new upload starts in review and never inherits its predecessor’s approval. 3. Make reviewer links unguessable, revocable, and scoped to one project; reviewers can comment and approve but never delete assets or reach other projects. 4. Resolving a comment records who resolved it and keeps the thread readable in the version history. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Project, Asset, Version, Comment, Approval. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Start with server-rendered Rails views and ordinary forms. Use Turbo for navigation, submissions, and server-driven updates, then Stimulus only for small browser-side behavior. Do not turn the product into a client-side SPA, and keep the core workflow usable when enhancement fails. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with Ruby on Rails and Hotwire: Turbo for navigation, form submissions, and server-driven updates, and Stimulus for small browser-side behavior. Use RESTful controllers with strong parameters and explicit authorization, with domain transitions in testable models or small application services. Use Active Record migrations plus database-level constraints and transactions; Active Storage with an S3-compatible service for private files; Active Job with a durable queue backend for retryable work; Action Mailer for email; and Action Cable only when live updates are required. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies Astro, HTMX, R2 as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with R2 object storage and transactional email. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Use unguessable, revocable review links, authorize every comment against its project, and never let a reviewer link expose other projects or delete anything. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. A comment left at 00:42 on v1 stays attached to v1 after v2 is uploaded, and the compare view shows both versions’ threads. 2. A revoked reviewer link stops working immediately while comments already left through it remain attributed and intact. 3. Two reviewers commenting at the same timestamp produce two separate threads instead of overwriting each other. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build screen recording, transcoding, NLE integrations, camera-to-cloud uploads, or real-time multiplayer presence.
Build just one piece
Not ready to replace all of Frame.io? Fine. These are the peculiar sub-problems hiding inside it — the parts that are actually interesting to build. Each one is a standalone prompt, scoped to an evening, no strings attached to the full build.
The comment that knows its frame and its cutFeedback pinned to version two at 00:42 stays there when version three lands.
Build timestamped comments for a video review tool. Every comment is pinned to a specific version of an asset and a specific time in seconds, so feedback never floats to the wrong cut. Render pins on the player timeline at their timestamps; clicking one seeks the player there and highlights the thread. The comment rail scrolls in sync with playback, surfacing each thread as its moment approaches. Get the details right: capture the timestamp when the reviewer starts typing, not when they hit submit thirty seconds later; two reviewers commenting at the same timestamp create two separate threads, never an overwrite; and when version three uploads, versions one and two keep their threads intact and visible in version history. Store time as precise seconds and format display as timecode. Done when: a comment left at 00:42 on v1 still sits at 00:42 on v1 after v3 exists, timeline pins seek accurately, and simultaneous comments at one timestamp coexist as distinct threads.
The two players that scrub as oneSide-by-side v1 and v2 with a shared scrubber that refuses to drift.
Build a synced side-by-side compare view for two versions of a video. Two players, one shared scrubber, one play button. Play, pause, and seek drive both players together, and the hard part is keeping them together: the videos may differ in duration, buffering stalls one player while the other runs ahead, and independent clocks drift over a long review. Nominate one player as the clock master; on a timer, measure the follower's offset and correct it, with tiny drifts fixed by nudging playback rate and large gaps fixed by a hard seek. When either player stalls to buffer, pause both and resume together. Handle unequal lengths explicitly: the scrubber spans the longer version, and the shorter one holds its final frame instead of looping or going black. Show each version's comment threads beside its own player. Done when: a seek lands both players within a frame or two of each other, a mid-playback buffer stall never lets one video run ahead, and the shorter version ends gracefully.
The approval that dies with every new uploadVersion two starts in review, no matter how approved version one was.
Build per-version approval tracking for a video review tool. Approval belongs to a version, never to the asset. Each version moves through a small state machine, in review, changes requested, approved, and uploading a new version starts it at in review with zero inherited status, because the client approved that cut, not this one. Record every transition with who made it and when, so "who approved v2 and on what day" always has an answer. Define the edges precisely: an approval landing on v2 just as v3 finishes uploading applies to v2 and stays in its history; the asset list shows the latest version's state, with earlier approvals visible in version history rather than erased; and rolling a version back from approved requires an explicit transition on the record, not a quiet edit. Done when: a new upload always starts unapproved, the full transition history of every version is queryable with actors and timestamps, and no action on one version ever mutates another version's state.
The review link that can comment but never deleteNo accounts, full feedback rights, zero blast radius.
Build capability-scoped reviewer links for a video review tool. Reviewers get an unguessable token URL and no account. The token is a capability: it grants viewing, commenting, and approving on exactly one project, and nothing else. Enforce that on the server for every request, resolve the token, check it's live, verify the target resource belongs to the token's project, and reject everything outside that boundary, especially deletes, asset uploads, and any glimpse of other projects. A reviewer link that can be walked sideways into the rest of the system is the whole failure mode. Make links individually revocable with immediate effect: the next request with a dead token gets a clean expired page. Comments made through a link before revocation stay attributed and intact. Ask reviewers for a display name once and stamp it on their comments. Done when: a tampered token or foreign asset id gets a 403, a revoked link stops on the very next request while its past comments survive, and no sequence of requests through a reviewer token can destroy data.
Frequently asked questions
How long does it take to build your own Frame.io?
A basic version — uploads, timestamped comments, versions, approval states — takes about 12 hours. Roughly 4 days gets you a solid v1 with drawing annotations, mentions, guest links, comment resolution. Matching everything Frame.io really does (transcoding, camera-to-cloud, nle integrations, realtime presence) is closer to 3 months+, which is exactly why you should scope down instead.
How much does Frame.io cost if I keep subscribing?
Frame.io runs $15–$25 per person per month on public paid plans, which is $180–$300 per year for every person on your team. A focused self-built replacement costs your build time plus close-to-zero hosting.
What stack should I use to build a Frame.io alternative?
The build prompt on this page ships in four flavors: the AHA stack (Astro, HTMX, Alpine.js), Next.js, Laravel, and Ruby on Rails. The capability context for this product is Astro, HTMX, R2. Pick the stack you already know — the scope matters more than the framework.
What features does a minimal Frame.io replacement need?
A useful v1 needs: asset uploads with every version kept together; timestamped comments pinned to the player timeline; per-version approval states from in-review to approved; side-by-side compare between two versions; reviewer links that don’t require accounts. Everything else is scope creep until you personally miss it.
What should I deliberately not build?
Do not build screen recording, transcoding, NLE integrations, camera-to-cloud uploads, or real-time multiplayer presence.
Does this build also replace Filestage?
Yes. Frame.io, Filestage all solve the same core job — move review out of email threads into timestamped comments and a clear approval per version. The scoped v1 on this page covers what most people use any of them for, so one focused build replaces whichever you currently pay for.