Image Editor - Professional Application Form Image Processor

A modern, professional web application for processing and optimizing images to meet exact application form requirements. Built with Next.js, TypeScript, and Tailwind CSS.

✨ Features

🖼️ Image Processing

• Resize & Compress: Adjust dimensions and file size to meet exact specifications
• DPI Control: Set precise DPI values for print quality requirements
• Format Conversion: Convert between JPEG and PNG formats
• Aspect Ratio: Maintain or unlock aspect ratio for flexible sizing
• Unit Support: Switch between pixels and centimeters

🎨 Modern UI/UX

• Dark Mode: Beautiful dark theme with smooth transitions (default)
• Theme Toggle: Switch between light and dark modes
• Responsive Design: Works perfectly on all devices
• Smooth Animations: Framer Motion powered interactions
• Professional Look: Clean, modern interface for professional use

🔧 Technical Features

• Real-time Preview: See changes instantly
• Drag & Drop: Intuitive file upload interface
• File Validation: Automatic format and size checking
• Progress Tracking: Visual feedback during processing
• Download Ready: Processed images ready for immediate use

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone <repository-url>
cd image-editor

# Install dependencies
npm install

# Run development server
npm run dev

Build for Production

npm run build
npm start

🎯 Use Cases

Perfect for professionals who need to:

• Resize photos for passport applications
• Optimize signatures for document uploads
• Adjust images for government forms
• Compress files for online submissions
• Convert formats for specific requirements

🛠️ Tech Stack

• Frontend: Next.js 14, React 18, TypeScript
• Styling: Tailwind CSS with custom dark mode support
• Animations: Framer Motion
• UI Components: Custom component library with shadcn/ui
• Build Tool: Next.js App Router
• Deployment: Vercel ready

🌙 Dark Mode

The application features a sophisticated dark mode system:

• Default Theme: Dark mode is enabled by default
• Theme Persistence: Your preference is saved in localStorage
• System Integration: Automatically detects system theme preference
• Smooth Transitions: Beautiful theme switching animations
• Accessibility: Proper contrast ratios in both themes

Theme Toggle

• Located in the top-right corner of the navigation bar
• Click to switch between light and dark modes
• Icon changes dynamically (sun/moon) based on current theme

📱 Responsive Design

• Mobile First: Optimized for mobile devices
• Tablet Friendly: Perfect layout for tablets
• Desktop Optimized: Enhanced experience on larger screens
• Touch Support: Full touch gesture support

🔒 Security & Privacy

• Client-side Processing: All image processing happens in the browser
• No Data Storage: Images are never uploaded to servers
• Privacy First: Your images stay on your device
• Secure: No external API calls or data transmission

📄 License

This project is licensed under the MIT License.

🤝 Contributing

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

📞 Support

For support or questions, please open an issue in the repository.