Initial commit — Bradly branding editor platform

2026-06-02 03:27:03 -05:00
commit b135a70cc7
180 changed files with 43160 additions and 0 deletions
@@ -0,0 +1,104 @@
+# 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
+
+```bash
+# 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
+
+```bash
+npm run dev
+```
+
+The dev server starts with Express + Vite middleware on `http://localhost:3000`.
+
+### Production Build
+
+```bash
+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.