Skip to content
/ vidsynth-ai Public

VidSynth AI is a cutting-edge SaaS platform designed to revolutionize content creation for online creators. The platform automates and streamlines video creation through AI-powered features, enabling creators to produce engaging short-form content in minutes.

2 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

akramj13/vidsynth-ai

BranchesTags

Repository files navigation

VidSynth AI

VidSynth AI Landing Page

AI-Powered Video Content Creation Platform

Transform Reddit posts, create split-screen videos, and generate AI-narrated content with one powerful tool

Next.js React TypeScript Remotion License

📖 Table of Contents

🎯 Overview

VidSynth AI is a cutting-edge SaaS platform designed to revolutionize content creation for online creators. The platform automates and streamlines video creation through AI-powered features, enabling creators to produce engaging short-form content in minutes.

What VidSynth AI Does

VidSynth AI helps you catch trends and create content that goes viral by providing three powerful video creation tools:

  1. Reddit Post Converter - Transform viral Reddit posts into engaging video content
  2. Split Screen Creator - Create dual-view videos with custom backgrounds
  3. ChatGPT Video Generator - Generate AI-narrated videos from AI-generated topics

Key Highlights

  • AI-Powered: Leverages Google Gemini, ElevenLabs, and Replicate for script generation, voice synthesis, and image creation
  • Serverless Rendering: Uses Remotion Lambda for scalable, high-performance video generation
  • Customizable: 20+ AI voices, 25+ caption styles, and multiple background options
  • Production-Ready: Built with Next.js 15, TypeScript, and modern web technologies
  • Credit System: Flexible pricing tiers with credit-based usage

✨ Features

🎬 Reddit Post to Video Converter

Transform Reddit posts into engaging video content with:

  • URL-based Reddit post fetching
  • Custom script input option
  • AI voice narration (20+ voice options)
  • Customizable caption styles (25+ styles)
  • Gameplay background footage
  • Automated video composition

Workflow:

Reddit URL Input → Fetch Post → Voice Selection → Caption Style →
Background Selection → Preview → Generate Video

🎥 Split Screen Creator

Create professional split-screen videos featuring:

  • Side-by-side video composition
  • Custom video upload support
  • AI voice narration
  • Stylized captions
  • Background integration
  • Real-time preview

🤖 ChatGPT Video Generator

Generate AI-powered topic videos with:

  • Automated script generation using Google Gemini
  • AI-generated images via Replicate (Flux Schnell)
  • Voice synthesis with ElevenLabs
  • Automated caption generation
  • Multi-step workflow for customization

🎨 Customization Options

  • 20+ AI Voices: Natural-sounding voices powered by ElevenLabs
  • 25+ Caption Styles: Fully customizable with Tailwind CSS
  • Multiple Backgrounds: Gameplay footage and custom options
  • Real-time Preview: See your video before rendering

💳 Subscription & Credits

  • Free Tier: Get started with limited credits
  • Hobby Plan: Perfect for casual creators
  • Clipper Plan: For regular content creators
  • Pro Plan: Unlimited possibilities for professionals

🛠️ Tech Stack

Frontend

Technology Version Purpose
Next.js 15.5.6 React framework with App Router
React 19.0.0 UI library
TypeScript 5 Type safety
Tailwind CSS 3.4.1 Utility-first CSS framework
Framer Motion 12.4.10 Animation library
Shadcn/UI Latest Accessible component library
Radix UI Latest Unstyled UI primitives
Lucide React 0.475.0 Icon library

Backend & Database

Technology Version Purpose
Drizzle ORM 0.39.3 Type-safe database toolkit
PostgreSQL Latest Primary database
Supabase 2.48.1 Backend-as-a-service
Clerk 6.12.2 Authentication & user management

AI & Media Processing

Service Purpose
Remotion React-based video rendering (v4.0.267)
Remotion Lambda Serverless video rendering on AWS
Google Gemini AI script generation (Gemini 1.5 Flash)
ElevenLabs Text-to-speech voice synthesis
Replicate AI image generation (Flux Schnell)
AssemblyAI Caption/transcription generation
AWS S3 Video and asset storage

Development Tools

  • ESLint - Code linting
  • Drizzle Kit - Database migrations
  • Axios - HTTP client
  • Canvas - Server-side canvas rendering
  • Svix - Webhook management

🚀 Getting Started

Prerequisites

  • Node.js 18+ and npm/yarn/pnpm
  • PostgreSQL database
  • AWS account (for S3 and Remotion Lambda)
  • API keys for:
    • Clerk (authentication)
    • Google Gemini (script generation)
    • ElevenLabs (voice synthesis)
    • Replicate (image generation)
    • AssemblyAI (captions)

Installation

  1. Clone the repository

    git clone https://github.com/yourusername/vidsynth-ai.git
cd vidsynth-ai

  2. Install dependencies

    npm install
# or
yarn install
# or
pnpm install

  3. Set up environment variables

    Copy the example environment file:

    cp env-example.txt .env.local

    Fill in all required environment variables (see Environment Variables section)

  4. Set up the database

    Generate and run migrations:

    npm run db:generate
npm run db:push

  5. Run the development server

    npm run dev

  6. Open your browser

    Navigate to http://localhost:3000

📁 Project Structure

vidsynth-ai/
├── app/                          # Next.js App Router
│   ├── (auth)/                   # Authentication routes (Clerk)
│   │   ├── sign-in/
│   │   └── sign-up/
│   ├── dashboard/                # Main application (protected)
│   │   ├── _components/          # Dashboard-specific components
│   │   │   ├── VideoContext.tsx  # Video state management
│   │   │   └── sidebar.tsx       # Dashboard sidebar
│   │   ├── reddit/               # Reddit post converter
│   │   │   ├── page.tsx          # URL input & custom script
│   │   │   ├── voice-selection/
│   │   │   ├── caption-selection/
│   │   │   ├── background-selection/
│   │   │   └── preview/
│   │   ├── split-screen/         # Split screen creator
│   │   ├── chatgpt-video/        # ChatGPT video generator
│   │   └── settings/             # User settings
│   ├── api/                      # API routes
│   │   ├── get-reddit/           # Fetch Reddit posts
│   │   ├── generate-script/      # AI script generation
│   │   ├── generate-images/      # AI image generation
│   │   ├── get-audio/            # Voice synthesis
│   │   ├── get-captions/         # Caption generation
│   │   ├── generate-video/       # Video rendering
│   │   ├── upload-video/         # S3 upload
│   │   ├── store-video/          # Database storage
│   │   └── user/                 # User management
│   ├── affiliates/               # Affiliate program
│   ├── pricing/                  # Pricing page
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Landing page
├── components/                   # Reusable components
│   ├── ui/                       # Shadcn/Radix components
│   ├── Hero.tsx                  # Landing page hero
│   ├── Features.tsx              # Features section
│   ├── Navbar.tsx                # Navigation bar
│   ├── ScrollingVideos.tsx       # Video showcase
│   └── ...                       # Other landing components
├── config/                       # Configuration
│   ├── index.ts                  # App config (voices, captions, pricing)
│   ├── schema.ts                 # Drizzle database schema
│   ├── db.ts                     # Database connection
│   └── supabase.ts               # Supabase client
├── remotion/                     # Remotion video components
│   ├── Composition.tsx           # Main video composition
│   ├── Root.tsx                  # Root wrapper
│   └── index.ts                  # Exports
├── lib/                          # Utility functions
│   └── utils.ts                  # Helper functions
├── public/                       # Static assets
│   ├── videos/                   # Video files
│   ├── images/                   # Images
│   └── icons/                    # Icons
├── docs/                         # Documentation assets
│   └── landing.png               # Landing page screenshot
├── middleware.ts                 # Clerk auth middleware
├── next.config.ts                # Next.js configuration
├── tailwind.config.ts            # Tailwind configuration
├── drizzle.config.ts             # Database configuration
└── package.json                  # Dependencies

🔌 API Routes

Video Generation APIs

Endpoint Method Description
/api/get-reddit GET Fetch Reddit post metadata
/api/generate-script POST Generate video scripts using Google Gemini
/api/generate-images POST Create images via Replicate AI (Flux Schnell)
/api/get-audio POST Generate audio using ElevenLabs TTS
/api/get-captions POST Generate captions with AssemblyAI
/api/generate-poster POST Create video poster/thumbnail
/api/generate-video POST Render final video on Remotion Lambda
/api/upload-video POST Upload video to AWS S3
/api/store-video POST Store video metadata in database

User Management APIs

Endpoint Method Description
/api/user/register POST Register new user
/api/user/deduct-credit POST Deduct credits for video generation
/api/user/credits GET Get user credit balance
/api/clerk-webhook POST Handle Clerk authentication events

Utility APIs

Endpoint Method Description
/api/get-signed-url POST Generate S3 signed URLs
/api/videos/[id] GET Retrieve video metadata
/api/videos/[id] DELETE Delete video

🔐 Environment Variables

Create a .env.local file with the following variables:

# Application
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Database
DATABASE_URL=postgresql://user:password@host:port/database

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

# AWS S3 Configuration
AWS_ACCESS_KEY_ID=AKIA...
AWS_SECRET_ACCESS_KEY=...
AWS_REGION=us-east-1
S3_BUCKET_NAME=vidsynth-videos
S3_POSTER_BUCKET_NAME=vidsynth-posters

# Remotion Lambda
REMOTION_AWS_ACCESS_KEY_ID=AKIA...
REMOTION_AWS_SECRET_ACCESS_KEY=...
REMOTION_LAMBDA_REGION=us-east-1
REMOTION_S3_BUCKET_NAME=remotion-renders

# API Keys
ELEVENLABS_API_KEY=sk_...
ASSEMBLYAI_API_KEY=...
REPLICATE_API_TOKEN=r8_...
GOOGLE_GEMINI_API_KEY=AI...

# Supabase (Optional)
NEXT_PUBLIC_SUPABASE_URL=https://...supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...

See env-example.txt for a complete list of required variables.

🗄️ Database Schema

Users Table

{
  id: string (primary key)
  email: string
  name: string
  clerkId: string (unique)
  credits: number (default: 100)
  subscriptionStatus: 'FREE' | 'HOBBY' | 'CLIPPER' | 'PRO'
  createdAt: timestamp
  updatedAt: timestamp
}

Video Data Table

{
  id: string (primary key)
  userId: string (foreign key)
  type: 'REDDIT' | 'SPLIT_SCREEN' | 'CHATGPT'
  title: string
  status: 'DRAFT' | 'PROCESSING' | 'COMPLETED' | 'FAILED'
  redditUrl: string (nullable)
  script: text
  voiceId: string
  captionStyle: json
  backgroundType: string
  videoUrl: string (nullable)
  posterUrl: string (nullable)
  duration: number (nullable)
  createdAt: timestamp
  updatedAt: timestamp
}

Database Commands

# Generate migrations
npm run db:generate

# Apply migrations
npm run db:migrate

# Push schema changes
npm run db:push

# Open Drizzle Studio (GUI)
npm run db:studio

🎬 Video Generation Pipeline

1. Content Preparation

  • User inputs content (Reddit URL, custom script, or AI topic)
  • Validate user subscription status
  • Check and deduct credits

2. Resource Generation

  • Script: Fetch Reddit post or generate with Google Gemini
  • Audio: Generate voiceover using ElevenLabs TTS
  • Images: Create visuals with Replicate AI (for ChatGPT videos)
  • Captions: Generate timestamped captions with AssemblyAI

3. Video Composition

  • Remotion Lambda assembles video components:
    • Background footage/gameplay
    • Caption overlays with custom styling
    • Audio synchronization
    • Image sequences (for ChatGPT videos)

4. Rendering & Delivery

  • Remotion Lambda renders video on AWS (2048MB memory)
  • Upload to S3 bucket
  • Generate signed URL for download
  • Store metadata in PostgreSQL
  • Update project status to COMPLETED

Architecture Flow

User Input
    ↓
Validate & Check Credits
    ↓
Generate Resources (Script/Audio/Images)
    ↓
Assemble Remotion Composition
    ↓
Render on Remotion Lambda
    ↓
Upload to S3
    ↓
Store Metadata in DB
    ↓
Deliver to User

💻 Development

Available Scripts

# Development
npm run dev              # Start dev server
npm run build           # Build for production
npm run start           # Start production server
npm run lint            # Run ESLint

# Database
npm run db:generate     # Generate migrations
npm run db:migrate      # Run migrations
npm run db:push         # Push schema changes
npm run db:studio       # Open Drizzle Studio

Development Guidelines

State Management

  • Use VideoContext for multi-step wizard flows
  • Implement proper loading states
  • Handle error scenarios gracefully
  • Maintain subscription status awareness

Component Structure

  • Keep components modular and reusable
  • Use Shadcn/UI for consistent design
  • Implement proper TypeScript types
  • Add comprehensive error handling

Performance Optimization

  • Preload assets when possible
  • Optimize state updates
  • Implement proper cleanup
  • Manage memory efficiently

Security Considerations

  • Validate all user inputs
  • Check file types before upload
  • Implement rate limiting
  • Verify user authorization
  • Validate credits before processing

🚢 Deployment

Vercel Deployment (Recommended)

  1. Push to GitHub

    git add .
git commit -m "Initial commit"
git push origin main

  2. Deploy to Vercel

    • Connect your GitHub repository to Vercel
    • Add all environment variables
    • Deploy

  3. Set up Remotion Lambda

Environment Setup

Ensure all environment variables are configured in your deployment platform:

  • Database connection
  • API keys
  • AWS credentials
  • Clerk authentication

Post-Deployment

  1. Run database migrations
  2. Test video generation pipeline
  3. Configure webhooks (Clerk, Stripe)
  4. Set up monitoring and logging

🤝 Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository
  2. Create a 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

Code Style

  • Follow TypeScript best practices
  • Use functional components and hooks
  • Implement proper error handling
  • Add JSDoc comments for complex functions
  • Keep code concise and maintainable
  • Write meaningful variable names

📄 License

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

🙏 Acknowledgments

Built with ❤️ by the VidSynth AI team

About

VidSynth AI is a cutting-edge SaaS platform designed to revolutionize content creation for online creators. The platform automates and streamlines video creation through AI-powered features, enabling creators to produce engaging short-form content in minutes.

Resources

Readme
Activity

Stars

2 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages