# ClipoAI - Video Editing and AI-Powered Content Creation Platform

## Project Overview
ClipoAI is a Next.js-based web application focused on video editing, content creation, and AI-powered tools. The platform converts larger videos into clips and provides various AI-driven features for content creators.

## Technology Stack
- **Framework**: Next.js 14.2.20
- **Frontend**: React 18.3.1 with TypeScript support
- **Styling**: Tailwind CSS, Bootstrap 5.3.3, Sass
- **Video Processing**: FFmpeg (@ffmpeg/ffmpeg)
- **UI Components**: Material-UI, Headless UI, React Icons
- **State Management**: Zustand
- **Authentication**: Google OAuth (@react-oauth/google)
- **Cloud Storage**: Google Cloud Storage
- **Analytics**: PostHog
- **Deployment**: Optimized for Vercel

## Key Features & Components

### Video Processing & Editing
- Video player with custom controls
- Video timeline and progress tracking
- Trimming slider for precise editing
- Auto-reframe functionality
- Video clipper tools
- Playback controls with volume management
- Real-time editing capabilities

### AI-Powered Tools
- AI curation and content suggestions
- Auto captioning and subtitle generation
- Multilingual subtitle support
- Auto format conversion
- Auto highlights extraction
- Personalized descriptions
- Content repurposing tools
- Emoji suggestion tool
- Remove pauses functionality

### Content Generation
- Text generator
- Email generator
- Post generator (social media)
- Code generator
- Image generator and editor
- Video generator
- Viral templates

### User Interface & Experience
- Responsive design with mobile support
- Dark/light theme support (Appearance components)
- Font selector and styling options
- Brand kit integration
- Dashboard with project management
- Upload interface with drag-and-drop
- Download manager
- Notification system

### Business Features
- Pricing plans and subscription management
- User profiles and authentication
- Session management
- Shipping and delivery tracking
- Testimonials and reviews
- FAQ and help documentation
- Contact forms and support

## Project Structure

### Core Directories
- `/components` - Reusable React components organized by feature
- `/pages` - Next.js pages and API routes
- `/styles` - CSS and styling files
- `/utils` - Utility functions and helpers
- `/hooks` - Custom React hooks
- `/context` - React context providers
- `/services` - API services and external integrations
- `/stores` - State management (Zustand stores)
- `/lib` - Library configurations and utilities
- `/public` - Static assets and media files

### Key Configuration Files
- `next.config.mjs` - Next.js configuration
- `tailwind.config.js` - Tailwind CSS configuration
- `jsconfig.json` - JavaScript/TypeScript configuration
- `next-sitemap.config.js` - SEO and sitemap generation

## Development Commands
- `npm run dev` - Start development server (port 3000)
- `npm run dev:5000` - Start development server on port 5000
- `npm run build` - Build for production
- `npm run start` - Start production server
- `npm run lint` - Run ESLint

## Key Dependencies
- **Video Processing**: @ffmpeg/ffmpeg, react-player, video.js
- **UI/UX**: @mui/material, @headlessui/react, react-icons, lucide-react
- **Editing Tools**: fabric (canvas manipulation), react-draggable, react-resizable
- **Content Tools**: compromise, natural (NLP), prismjs (syntax highlighting)
- **File Handling**: html2canvas, pptxgenjs, srt-parser-2
- **Authentication**: firebase, @react-oauth/google
- **Styling**: react-color, @uiw/react-color, react-colorful

## AI Integration Points
The application heavily integrates AI for:
1. Video content analysis and auto-highlighting
2. Subtitle generation and translation
3. Content suggestions and curation
4. Automated editing recommendations
5. Template generation for viral content
6. Text and code generation
7. Image processing and generation

## Target Use Cases
- Content creators and influencers
- Social media managers
- Video editors and producers
- Marketing teams
- Educational content creators
- Business communication

This platform serves as a comprehensive solution for modern content creation workflows, combining traditional video editing with AI-powered automation and optimization tools.