FlatRender

AI-powered video and image creation platform. Create professional videos and images with templates, a drag-and-drop studio, and one-click export.

Products

• Video Maker — timeline editor, Konva canvas, scene browser, transitions, audio, nexrender export
• Image Editor — Konva canvas, filters, crop, background removal, layer system
• Video Trimmer — ffmpeg.wasm in-browser trim + crop + export
• Templates — browsable marketplace with category sidebar

Quick Start

npm install
cp .env.example .env.local   # fill in your credentials
npm run dev                  # http://localhost:3000

Related Repos

Repo	Path	Purpose
flatrender	D:\Projects\flatrender	This repo — Next.js app
flatrender-admin	D:\Projects\flatrender-admin\admin-api	.NET 10 Admin API
flatrender-admin	D:\Projects\flatrender-admin\admin-ui	React Admin SPA

Stack

• Next.js 15 App Router · TypeScript · Tailwind CSS · shadcn/ui
• Supabase — auth, database, storage
• Stripe — subscription payments
• React-Konva — canvas editor (video + image)
• next-intl — Persian (default) + English i18n
• ffmpeg.wasm — browser-side video trimming
• nexrender — server-side After Effects rendering

Environment Variables

See .env.example for the full list. Minimum required to run:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

Without Supabase the app runs in mock mode (studio uses localStorage).

Database Migrations

Run in order in Supabase SQL Editor:

1. supabase/migrations/001_profiles.sql
2. supabase/migrations/002_render_jobs.sql
3. supabase/migrations/003_projects.sql

Admin Panel

The admin panel at D:\Projects\flatrender-admin manages templates, categories, and media. When ADMIN_API_URL=http://localhost:5000 is set, the Next.js app fetches live data from it. Without it, hardcoded fallback data is used.

See CLAUDE.md for full development guide.