Digitalise Agency

reelflow-studio

ReelFlow Studio

A client's video publishing is fully automated, with no screen a person could use, so approving a video meant reaching into the machinery. This is that screen: one button per decision. Every button retries up to six times and counts a job done only when the automation confirms it, because those steps sometimes stall. The demo here runs that loop on a made-up queue, not the client's live system.

Client work; frontend contract only

Built by our founder, Salman Adnan, for one of this agency's clients. Its source is private since it's a real client's operations tool. The linked demo replays the same approve, caption, publish, and schedule loop against a fabricated video queue, not the real client's workflows.

Filmstrip Flow: video clips ride a filmstrip, collect their captions, and ship once approved. The review screen this project adds, drawn as a conveyor. Live and interactive: drag it to orbit, scroll or pinch to zoom. Open full screen
The real ReelFlow Studio UI shell, running locally.
Idle state before the video queue is loaded from n8n.
33distinct n8n endpoints
6retry attempts per call
4operator tabs

Overview

A single-file operator console for a set of n8n automation workflows: video approval and publishing, LinkedIn content generation, and a scripting agent. The browser talks directly to n8n webhooks, with retry logic so a flaky workflow run never silently drops an approval.

The client's content pipeline runs entirely in n8n against Google Sheets and Drive, which has no client-facing UI, so this app gives the client one page with a button per decision, each a webhook call with retry logic.

Key features

  • Four tabs, each with its own start button: AI Videos, Hi-Tec Automations, Mr. Salman LinkedIn, and a Carousel sub-tab.
  • index.html is everything: markup, CSS, and three IIFE script blocks, with state in module variables plus sessionStorage.
  • A Netlify edge function proxies anyone-with-the-link Google Drive files so video and iframe embeds are same-origin, whitelisting MIME types and returning 409 when a file is not shared.
  • Every call auto-retries: 6 attempts, a 120 s timeout per attempt (240 s for slow jobs), a 15 s gap; a call is completed only when the workflow responds with the literal string Completed.
  • Two Python Pinecone loader scripts seed retrieval indexes, embedding with gemini-embedding-001 at 3072 dimensions.

Results

The four tabs call 33 distinct n8n endpoints from one base URL. End-to-end runs are not verified here, since they need a live n8n instance; the loaders were verified to start and fail cleanly.

Tech stack

  • Static HTML/CSS/vanilla JS
  • n8n webhooks
  • Netlify edge function
  • Python (Pinecone loaders)

A challenge worth noting

n8n webhook runs can time out or drop partway, and a dropped approval is worse than a visible error. With no server-side status to poll, the contract became that a workflow answers with the literal string Completed and anything else counts as failure, wrapped in a retry loop. The other lesson: browsers block cross-origin media on the response headers, not just request CORS, so the actual fix is a same-origin proxy that forwards Range and preserves the 206 status to keep video seeking working.

Book a call

Let's talk about what you're building.

Pick a slot below. No forms, no back-and-forth emails.