Skip to content

README.md

Latest commit

 

History

History
248 lines (182 loc) · 8.11 KB

README.md

File metadata and controls

248 lines (182 loc) · 8.11 KB

BrandFlow AI

Next.js 15 TypeScript Tailwind CSS tRPC Drizzle ORM

AI-Powered Social Media Automation Platform

landing-page dashboard-index

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

Engr Mejba Ahmed

AI Developer | Software Engineer | Entrepreneur

Portfolio LinkedIn GitHub

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