Smart Image Cropper

A modern Vue 3 application that allows users to upload images and generate smart crops tailored for different social media platforms using Uploadcare's AI-powered image transformations.

Live Demo

View Deployed App

---

Tech Stack

• Vue 3 + Vite
• Composition API with <script setup>
• SCSS with CSS custom properties
• Uploadcare for image uploads, smart cropping, and transformations
• Responsive Design with modern layout techniques
• TypeScript for type safety (optional but recommended)

---

Features

1. Image Upload System

• Upload via Uploadcare with drag-and-drop support
• Accepts JPEG, PNG, WebP
• Upload progress indicator
• Live preview grid of uploaded images

2. Social Media Preview Generator

• Generates smart crops for major platforms:
  • Instagram (1:1, 4:5, 16:9)
  • Facebook
  • Twitter
  • LinkedIn
• Uses Uploadcare's smart crop capabilities
• Responsive grid layout with platform-specific styling
• Individual & bulk image downloads

---

---

Installation & Setup

Clone the project

git clone https://github.com/Muhamedall/smart-image-cropper.git cd smart-image-cropper

Install dependencies

npm install

Run local development server

npm run dev