A modern, responsive image cropping application built with React and TypeScript. This project provides a user-friendly interface for cropping and manipulating images with a clean, accessible design.
- Interactive image cropping with real-time preview
- Support for multiple aspect ratios
- Round and square cropping shapes
- Responsive design that works on all devices
- Dark/light theme support
- Drag and drop file upload
- Support for JPG, PNG, and GIF formats
- Modern, accessible UI components
- Frontend Framework: React 18
- Build Tool: Vite
- Type Safety: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React Query
- Routing: React Router DOM
- Form Handling: React Hook Form
- Toast Notifications: Sonner
- Node.js (v18 or higher)
- npm (comes with Node.js)
- Clone the repository:
git clone <repository-url>- Navigate to project directory:
cd image-cropper- Install dependencies:
npm install- Start development server:
npm run devThe application will be available at http://localhost:8080
npm run dev- Start development servernpm run build- Build for productionnpm run build:dev- Build for developmentnpm run lint- Run ESLintnpm run preview- Preview production build
src/
├── components/ # Reusable UI components
│ ├── ImageCropper/ # Image cropping components
│ └── ui/ # Base UI components
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── pages/ # Route components
└── main.tsx # Application entry point
The project uses TypeScript for type safety and Vite for fast development and optimized builds. Key configurations can be found in:
vite.config.ts- Vite configurationtsconfig.json- TypeScript configurationtailwind.config.ts- Tailwind CSS configurationeslint.config.js- ESLint configuration
Contributions are welcome! Please feel free to submit issues and pull requests.
This project is licensed under the MIT License - see the LICENSE file for details.