DEV3Technologies
All case studies

DEV3 Technologies · own product

FaceAiPro: a subscription AI reel studio with talking presenters and an ffmpeg render farm

Our own product: a Next.js and MongoDB SaaS that turns a topic or product link into a vertical reel with an AI script, a natural voice, karaoke captions, AI images and a talking AI presenter, rendered by background workers and sold through Stripe subscriptions and credits.

Next.jsReactTypeScriptMongoDBMongooseStripeFFmpegAuth.jsTailwind CSSthree.jsAI video
Industry
AI media & creator tools
Services
Custom SaaS EngineeringAI ImplementationWeb Development

Live project preview

DEV3 Technologies · own product — screenshots
Open live demo
Landing page — a 3D hero of orbiting presenter reels introduces the AI reel studio.

Landing page — a 3D hero of orbiting presenter reels introduces the AI reel studio.

The challenge

Short vertical videos sell products, but making one means writing a script, recording a voice, finding visuals, captioning every word and editing it all together. AI can do each step, yet a product built on it has hard problems: rendering video is slow and cannot run inside a web request, AI calls and renders cost real money, so every credit spent has to be accounted for and refunded when a job fails, and customers want to see the result before they pay for a render.

Our solution

We built FaceAiPro as a Next.js 15 web app and a separate render worker that share one MongoDB replica set and one private storage folder.

Key design decisions

  • Long work only in the worker. Presenter videos, renders and presenter creation are queued as jobs. Workers lease them from MongoDB with heartbeats, retry failures and reap stuck jobs, so any number of workers can run on CPU or GPU machines while the web app only enqueues and polls.
  • A credit ledger that cannot go negative. Every balance change goes through one service: atomic, idempotent and written to a ledger row. Credits are reserved when a job is queued and refunded automatically on failure or cancellation.
  • One timeline, two players. The scene, caption and presenter timing lives in a single shared module used by both the browser preview and the ffmpeg renderer, so what a customer previews is what gets rendered.
  • Pay once per asset. Voices, presenter frames and presenter clips are cached by content hash, so re-rendering after a caption change never pays for the voice or presenter again.
  • Text drawn with canvas. Captions, covers and intro frames are drawn with a canvas library rather than ffmpeg text filters, so rendering works on ffmpeg builds without libass.
  • Billing that works on day one. Stripe Checkout, the Customer Portal and webhooks drive subscriptions and credit packs; without Stripe keys a simulated billing mode runs the same flow, so the product can be tried end to end before a Stripe account is connected.
  • Prices from the database. Plans, feature flags, credits and credit costs are edited in the admin panel and never trusted from the browser.

Results

FaceAiPro ships as a complete, sellable product with a public read-only demo that plays bundled sample reels. By the numbers, counted from the source:

  • 8 preset AI presenters and 5 presenter layouts, plus customer-made presenters from a description or a photo
  • 6 bundled sample reels and 7 sample projects in the demo seed
  • 31 pages, 52 API routes and 19 Mongoose models
  • Renders at 1080×1920, 30 fps, with loudness normalised to −14 LUFS

It runs as a web app plus one or more render workers on any server with ffmpeg, and is available on the DEV3 marketplace.

Setup guide

Requirements

  • Node.js 24 and npm
  • MongoDB running as a replica set (the credit ledger uses transactions; hosted MongoDB clusters are replica sets already)
  • ffmpeg and ffprobe on the machine that runs the render worker, and Python 3 for the free neural voices
  • Your own AI API key for scripts, images, premium voices and AI presenters
  • Optional: Stripe keys for live billing (billing is simulated until they are set), SMTP for email, and a Google OAuth client for Google sign-in

Rendering is a long-running job, so the worker needs a normal server or VM. The web app can run on serverless hosting, but renders only happen where a worker with ffmpeg is running.

Install

  1. Download the ZIP from your DEV3 account and unzip it. Open Documentation/index.html in a browser for the full guide.

  2. Copy the environment template and fill it in:

    cp .env.example .env.local

    Set MONGODB_URI, MONGODB_DB, AUTH_SECRET (for example openssl rand -base64 32), NEXT_PUBLIC_SITE_URL and your AI key. Leave the Stripe, SMTP and Google values empty to start: billing runs in simulated mode and emails are printed to the console.

  3. Install everything and seed the demo data (plans, settings, demo logins, preset presenters and the bundled sample reels):

    npm run setup

    This runs npm install, creates the Python environment for the free voices and runs the seed. The seed refuses to write into a non-empty database it did not create.

  4. Start the web app and the render worker together:

    npm run dev:all

    Open the address the web process prints and use one of the one-click demo accounts on the sign-in page.

Production

  1. Web app: npm run build and npm start behind a TLS reverse proxy.
  2. Render worker: npm run start:worker on one or more machines with ffmpeg, the fonts, Python edge-tts and access to the same STORAGE_DIR. WORKER_CONCURRENCY sets jobs per worker. On Linux: apt install ffmpeg python3-venv fonts-dejavu-core, then npm run setup:tts.
  3. Stripe: set STRIPE_SECRET_KEY, add the webhook endpoint https://<your domain>/api/stripe/webhook with the events listed in the deployment guide, put its signing secret in STRIPE_WEBHOOK_SECRET, and enable the Customer Portal.
  4. Optional caption fonts: drop open .ttf/.otf fonts into engine/fonts/ and they appear in the font pickers.

npm run verify runs the typecheck, lint and tests against throwaway databases.

Updates

Download the new version from Account → Downloads on dev3.tech. Keep your own changes on a branch and merge the new release into it.

How to use

Try the live demo

The live demo is read-only. The sign-in page has one-click demo accounts (password Demo@12345):

  • pro@faceaipro.test – the studio, an Omni AI presenter project and sample reels
  • business@faceaipro.test – an agency account with a large credit balance and custom presenters
  • creator@faceaipro.test – premium voices and AI images
  • free@faceaipro.test – the free trial with a watermark and the upgrade flow
  • admin@faceaipro.test – the admin panel: revenue, users, plans and render jobs

Studio edits stay in your browser, and rendering and AI generation are switched off: they run on your own server.

Make a reel (customers)

  1. Start a project in the studio and enter a topic, a brief or a product link. Choose the tone, length and language, then Generate the script, storyboard and caption.
  2. Pick a presenter (a talking photo or an Omni AI presenter) and a layout, then a voice.
  3. Adjust the scenes: swap images for uploads or library media, set motion and fit, and edit the on-screen headline.
  4. Style the captions and the cover, and add background music.
  5. Preview in the browser player: it plays the real voice, captions, presenter and timing without spending credits.
  6. Render. Credits are reserved, the worker renders the MP4, and the reel appears in My reels with the cover and caption to download. If a render fails, the credits come back automatically.

Customers manage their plan, credit packs and payment methods under Billing, and their sessions under Settings.

Run the business (admins)

  • Plans: set monthly and yearly prices, monthly credits and feature flags. Price changes create new Stripe prices; existing subscribers keep theirs.
  • Settings: credit costs for each action, site settings and contact details.
  • Users: adjust credits, change plans, suspend accounts and revoke sessions.
  • Render jobs: watch progress and worker heartbeats, retry or cancel jobs.
  • Presenters: manage the preset presenters customers choose from.
  • Payments, subscriptions, messages and the audit log cover the rest of the day-to-day.

Related case studies