kevinguevara
560a413c1e
- Expanded useVideoDurations to detect both form-sourced segments AND editable-slot video fields inside content scenes - Wired videoDurations into ProductionForm (getTemplateDuration, compileExpressToTimeline, LivePreviewCanvas, ExportModal) - LivePreviewCanvas now accepts videoDurations prop - Simplified getTemplateDuration/compiler: any scene with a known video duration uses it, regardless of segmentSource type - A 33s uploaded video now creates a 33s timeline, not 5s
Bradly — Automated Branding Content Editor
Create on-brand video and image content at scale — without a designer.
Overview
Bradly (internally Remix) is a SaaS platform for automated branded content creation. It lets marketing teams, agencies, and creators produce visually consistent videos and images by defining brand rules once (Design MD) and applying them automatically across all content.
Key Features
- Design MD System — Define colors, typography, logos, intros/outros, audio, and transitions as a programmatic brand blueprint.
- Multi-Editor Architecture — Three editors sharing a common foundation:
- Studio — Professional timeline-based video/image editor with Figma-like canvas.
- Express — Template-driven rapid creation for non-designers.
- Template Builder — Visual template editor for brand managers.
- Server-Side Rendering — Export production-ready videos and images via Remotion.
- Content Grid — Editorial calendar with content planning workflow (Idea → Published).
- Multi-Brand Support — Manage multiple brands with isolated identities and assets.
- Batch Production — Generate multiple content pieces from CSV data in one go.
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | React 19 + TypeScript + Vite |
| Styling | Tailwind CSS v4 |
| Animations | Motion (Framer Motion) |
| Render Engine | Remotion v4 (composition + server-side rendering) |
| Icons | Lucide React |
| Backend | Express.js (unified server with Vite in dev) |
| Uploads | Multer (local disk) |
| Transcription | Groq API (Whisper Large v3) |
| Stock Media | Pexels API |
| Persistence | LocalStorage (frontend) + PostgreSQL (SaaS-ready schema) |
Getting Started
Prerequisites
- Node.js v18+ (recommended: v20+)
- npm v9+
Installation
# Clone the repository
git clone git@github.com:kevinguevara/Bradly.git
cd Bradly
# Install dependencies
npm install
# Configure environment
cp .env.example .env
# Edit .env with your API keys
Environment Variables
| Variable | Description |
|---|---|
GEMINI_API_KEY |
Google Gemini AI API key |
GROQ_API_KEY |
Groq Whisper V3 transcription key |
APP_URL |
Application host URL |
Development
npm run dev
The dev server starts with Express + Vite middleware on http://localhost:3000.
Production Build
npm run build
npm start
Project Structure
├── src/
│ ├── components/ # UI components organized by feature
│ │ ├── dashboard/ # Brand dashboard & management
│ │ ├── editor/ # Studio editor (canvas, timeline, layers)
│ │ ├── express/ # Express template editor
│ │ ├── export/ # Export & render management
│ │ ├── templates/ # Template Builder
│ │ └── ui/ # Shared UI components
│ ├── context/ # React contexts (Editor, TemplateBuilder)
│ ├── hooks/ # Custom hooks (useDragResize, etc.)
│ ├── utils/ # Utilities & adapters
│ ├── types.ts # TypeScript type definitions
│ └── App.tsx # Main application component
├── server.ts # Express server with Remotion rendering
├── schema.sql # PostgreSQL database schema
└── index.html # Entry point
License
Proprietary — All rights reserved.