This is an open source project created as a learning tool and technology showcase. It serves as a platform for experimenting with modern web technologies and best practices in front-end development.
Image Cropper is a React-based web application that provides an intuitive interface for image manipulation. Features include:
- 📥 Drag & drop image upload with validation
- 🎨 Canvas-based image display with interactive manipulation
- 🔒 Image security validation and sanitization
- 🔄 Image transformations (zoom, pan)
- 💻 Modern UI with responsive design
This project demonstrates implementation of several modern technologies:
- React 19 - For building the user interface
- TypeScript - For type-safe code
- Tailwind CSS - For styling
- Zustand - For state management
- RSBuild - For optimized builds
- Canvas API - For image manipulation
- React Toastify - For notifications
- Lucide React - For UI icons
To start the development server, install the dependencies and run the following commands:
Using yarn:
yarn installUsing npm:
npm installUsing pnpm:
pnpm installUsing yarn:
yarn devUsing npm:
npm run devUsing pnpm:
pnpm devThis will start the development server using rsbuild.
This project serves as a showcase for:
- Building performant image manipulation tools in the browser
- Implementing secure file handling practices
- Creating intuitive drag & drop interfaces
- State management patterns with Zustand
- Working with Canvas API for image processing
- Building accessible UI components
In the project, you can run:
yarn dev- Starts the development server.yarn build- Creates a production build.yarn lint- Lints your TypeScript files using ESLint.yarn lint:style- Checks your styles using Stylelint.
This project is open for contributions. Feel free to experiment, improve, and learn from the codebase.
This project is licensed under the MIT License.