BrandFlow AI

AI-Powered Social Media Automation Platform

Transform a single piece of content into platform-optimized posts for LinkedIn, Facebook, Twitter/X, Instagram, Pinterest, and TikTok — all with AI-generated images and smart scheduling.

Live Demo · Documentation · Report Bug

---

Features

Content Transformation

• One Input, Six Outputs — Write once, publish everywhere with AI-optimized variations
• Platform-Aware Formatting — Automatic character limits, hashtag optimization, and tone adjustment
• AI Image Generation — Create stunning visuals tailored for each platform's dimensions

Smart Scheduling

• Visual Calendar — Drag-and-drop scheduling across all platforms
• Optimal Timing — AI-suggested posting times based on audience engagement
• Queue Management — Bulk schedule and manage content pipeline

Analytics & Insights

• Unified Dashboard — Track performance across all platforms in one place
• Engagement Metrics — Likes, comments, shares, and reach analytics
• Content Performance — Identify top-performing posts and content patterns

Team Collaboration

• Multi-User Workspaces — Invite team members with role-based permissions
• Brand Kit — Centralized brand colors, fonts, and voice guidelines
• Approval Workflows — Review and approve content before publishing

---

Tech Stack

Category	Technology
Framework	Next.js 15 (App Router)
Language	TypeScript 5.x
Styling	Tailwind CSS 4, CVA (class-variance-authority)
API	tRPC v11 (type-safe)
Database	PostgreSQL (Neon), Drizzle ORM
Authentication	Clerk
Payments	Stripe
AI	OpenAI GPT-4o, DALL-E 3
State	Zustand, TanStack Query
Forms	React Hook Form + Zod

---

Getting Started

Prerequisites

• Node.js 20+
• pnpm 9.x
• PostgreSQL database (or Neon account)
• Clerk account
• OpenAI API key

Installation

1. Clone the repository

   git clone https://github.com/mejba13/brandflow-ai.git
   cd brandflow-ai

2. Install dependencies

   pnpm install

3. Configure environment variables

   cp .env.example .env.local

   Fill in your credentials in .env.local:

   DATABASE_URL=postgresql://...
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...
   CLERK_SECRET_KEY=sk_...
   OPENAI_API_KEY=sk-...

4. Set up the database

   pnpm db:push

5. Start the development server

   pnpm dev

   Open http://localhost:3000 in your browser.

---

Project Structure

src/
├── app/
│   ├── (auth)/              # Login/signup routes
│   ├── (dashboard)/         # Protected dashboard routes
│   │   └── dashboard/
│   │       ├── analytics/   # Performance metrics
│   │       ├── calendar/    # Scheduling calendar
│   │       ├── content/     # Content library
│   │       ├── create/      # Content creation wizard
│   │       └── settings/    # User preferences
│   └── api/
│       ├── trpc/            # tRPC endpoint
│       └── webhooks/        # Clerk & Stripe webhooks
├── components/
│   ├── content/             # Content-specific components
│   ├── landing/             # Marketing page sections
│   ├── layout/              # Dashboard layout components
│   └── ui/                  # Reusable UI primitives
└── lib/
    ├── ai/                  # OpenAI integration
    ├── db/                  # Drizzle schema & client
    ├── stripe/              # Billing utilities
    ├── supabase/            # Storage client
    └── trpc/                # API routers

---

Available Scripts

Command	Description
pnpm dev	Start development server
pnpm dev:turbo	Start with Turbopack (faster)
pnpm build	Create production build
pnpm lint	Run ESLint
pnpm type-check	TypeScript type checking
pnpm format	Format code with Prettier
pnpm db:generate	Generate Drizzle migrations
pnpm db:migrate	Run database migrations
pnpm db:push	Push schema to database
pnpm db:studio	Open Drizzle Studio GUI

---

Platform Support

Platform	Character Limit	Feed Image	Stories/Reels
LinkedIn	3,000	1200×627	1080×1920
Facebook	63,206	1200×630	1080×1920
Twitter/X	280	1600×900	1080×1920
Instagram	2,200	1080×1080	1080×1920
Pinterest	500	1000×1500	1080×1920
TikTok	2,200	1080×1080	1080×1920

---

Roadmap

• Dashboard UI & navigation
• Content creation wizard
• Content library management
• Scheduling calendar
• Analytics dashboard
• Brand kit management
• Social platform OAuth connections
• Live AI content generation
• Automated posting
• Mobile app (Flutter)

---

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a pull request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Developed By

Engr Mejba Ahmed

AI Developer | Software Engineer | Entrepreneur

---

Hire / Work With Me

I build AI-powered applications, mobile apps, and enterprise solutions. Let's bring your ideas to life!

Platform	Description	Link
Fiverr	Custom builds, integrations, performance optimization	fiverr.com/s/EgxYmWD
Mejba Personal Portfolio	Full portfolio & contact	mejba.me
Ramlit Limited	Software development company	ramlit.com
ColorPark Creative Agency	UI/UX & creative solutions	colorpark.io
xCyberSecurity	Global cybersecurity services	xcybersecurity.io

---

Built with passion using Next.js, tRPC, and AI