🖼️ Image Composer

A modern, client-side image compression and optimization tool built with React and TypeScript. Process your images directly in the browser with no server uploads required.

✨ Features

• 🔒 Client-Side Processing: All image processing happens in your browser - your images never leave your device
• 🎨 Multiple Format Support: Convert between JPEG, PNG, and WebP formats
• 📱 Fully Responsive: Optimized for mobile, tablet, and desktop devices
• 🎯 Batch Processing: Process multiple images at once with bulk selection tools
• 🔄 Real-Time Preview: See your changes instantly before downloading
• 🎛️ Advanced Controls:
  • Quality adjustment (1-100%)
  • Format conversion (JPEG/PNG/WebP)
  • Rounded corners with adjustable radius
  • Drag and drop support
• 🌐 Social Sharing: Share your compression results directly to social media
• 📊 Compression Stats: View detailed statistics about your image optimization

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn or bun

Installation

1. Clone the repository:

git clone https://github.com/rafay99-epic/ImageComposer.git
cd ImageComposer

2. Install dependencies:

# Using npm
npm install

# Using yarn
yarn

# Using bun
bun install

3. Start the development server:

# Using npm
npm run dev

# Using yarn
yarn dev

# Using bun
bun dev

4. Open http://localhost:5173 in your browser

🛠️ Built With

• React - UI Framework
• TypeScript - Type Safety
• Vite - Build Tool
• Tailwind CSS - Styling
• shadcn/ui - UI Components
• Lucide Icons - Icons

📱 Mobile Optimization

• Touch-friendly controls
• Responsive layouts
• Optimized for various screen sizes
• Native share integration
• Mobile-first design approach

🔐 Privacy & Security

• No server uploads required
• All processing happens locally
• No data collection
• No external API calls for image processing

🎯 Use Cases

• Optimize images for web use
• Reduce file sizes for sharing
• Convert between image formats
• Prepare images for social media
• Batch process multiple images

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

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

🙏 Acknowledgments

• browser-image-compression for image processing
• react-hot-toast for notifications
• Community feedback and contributions

---

Made with ❤️ by Abdul Rafay