ClipMaker Pro

Professional Screen Recording Solution

A modern, feature-rich screen recording application built for web and mobile platforms

🎯 Overview

ClipMaker Pro is a comprehensive screen recording application that provides professional-grade recording capabilities directly in your browser or as a native mobile app. Built with modern web technologies and optimized for performance, it offers an intuitive interface for capturing, managing, and sharing screen recordings.

✨ Features

🎬 Recording Capabilities

• High-quality screen recording with customizable resolution and frame rate
• Selective area recording - Record specific regions of your screen
• Audio recording - Capture microphone input and system audio simultaneously
• Real-time audio visualization - Visual feedback for microphone and system audio levels
• Pause/Resume functionality - Full control over your recording sessions

🎛️ Advanced Controls

• Recording settings panel - Customize quality, format, and audio settings
• Live recording timer - Track recording duration in real-time
• Recording status indicators - Clear visual feedback on recording state

📁 Recording Management

• Recording history - View and manage all your recordings
• Local storage - Recordings saved securely on your device
• Download recordings - Export recordings in standard video formats
• Recording metadata - Track file size, duration, and creation date

📱 Cross-Platform Support

• Web application - Works in any modern browser
• Android app - Native mobile experience via Capacitor
• iOS app - Full iOS compatibility (coming soon)
• Responsive design - Optimized for all screen sizes

🛠️ Technology Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite
• UI Components: Radix UI primitives with shadcn/ui
• Styling: Tailwind CSS with custom design system
• Mobile Development: Capacitor for native mobile apps
• State Management: React Query for server state
• Audio Processing: Web Audio API for real-time visualization
• Routing: React Router for navigation

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• Modern web browser with screen recording support

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd clip-maker-pro

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open in browser

   • Navigate to http://localhost:5173
   • Grant necessary permissions for screen recording and microphone access

📱 Mobile App Development

Android App

The project includes automated Android APK building via GitHub Actions:

1. Automatic builds: APKs are built automatically when you create a GitHub release
2. Manual builds: Trigger builds manually from the Actions tab
3. Download: Get the latest APK from the GitHub Releases page

For local Android development:

# Add Android platform
npx cap add android

# Sync changes
npx cap sync android

# Run on device/emulator
npx cap run android

iOS App

# Add iOS platform (macOS only)
npx cap add ios

# Sync changes
npx cap sync ios

# Run on device/simulator (requires Xcode)
npx cap run ios

🏗️ Project Structure

src/
├── components/
│   ├── ui/                 # Reusable UI components
│   ├── AudioVisualizer.tsx # Real-time audio visualization
│   ├── AreaSelector.tsx    # Screen area selection
│   ├── RecordingControls.tsx # Main recording interface
│   ├── RecordingHistory.tsx  # Recording management
│   └── RecordingSettings.tsx # Configuration panel
├── pages/
│   ├── Index.tsx          # Main application page
│   └── NotFound.tsx       # 404 error page
├── hooks/                 # Custom React hooks
├── lib/                   # Utility functions
└── assets/               # Static assets

🎨 Design System

ClipMaker Pro uses a comprehensive design system built on Tailwind CSS:

• Semantic color tokens - Consistent theming across light/dark modes
• Typography scale - Harmonious text sizing and spacing
• Component variants - Flexible UI component styling
• Responsive breakpoints - Mobile-first responsive design
• Animation system - Smooth transitions and micro-interactions

🌐 Deployment

Web Deployment

The application can be deployed to any static hosting service:

# Build for production
npm run build

# Deploy the dist/ folder to your hosting service

Mobile App Deployment

Android

1. Create a GitHub release to trigger automatic APK building
2. Download the APK from GitHub Releases
3. Install on Android devices or distribute via app stores

iOS

1. Use Xcode to build and sign the iOS app
2. Submit to App Store Connect for distribution

🔧 Configuration

Environment Variables

No environment variables are required for basic functionality. The app works entirely client-side.

Recording Settings

• Video Quality: Adjustable resolution and frame rate
• Audio Settings: Microphone and system audio controls
• Storage: Local browser storage for recordings

🤝 Contributing

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

📄 License

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

🆘 Support

• Issues: Report bugs or request features via GitHub Issues
• Documentation: Visit our comprehensive documentation
• Community: Join our Discord community for support and discussions

🙏 Acknowledgments

• Built with Lovable - AI-powered development platform
• UI components from shadcn/ui
• Icons from Lucide React
• Mobile capabilities powered by Capacitor