CropEase is a web application built with Next.js 14 that allows users to crop images seamlessly. It uses the react-easy-crop package for cropping functionality and integrates Tailwind CSS and ShadCN UI components to provide a responsive and modern design.
cropEase_demo.webm
- Image Cropping: Effortlessly crop images using an intuitive interface powered by
react-easy-crop. - Responsive Design: The app is fully responsive, ensuring a smooth experience across all devices.
- Modern UI: Built with Tailwind CSS and ShadCN for a sleek and minimalist user interface.
- Framework: Next.js 14
- Styling: Tailwind CSS and ShadCN UI
- Image Cropping: react-easy-crop
To get a local copy up and running, follow these steps.
Make sure you have the following installed on your local machine:
- Node.js (>= 18.0.0)
- npm or yarn
- Clone the repository:
git clone https://github.com/your-username/cropease.git- Navigate to the project directory:
cd cropease- Install dependencies:
Using npm:
npm installRunning the App To start the development server, run:
npm run devThe app will be available at http://localhost:3000.
Building for Production To build the project for production, run:
npm run buildThis will create an optimized production build of the app.
- Next.js
- Tailwind CSS
- ShadCN
- react-easy-crop
Upload an image you wish to crop. Use the crop area to adjust the dimensions and position of your image. Save or export your cropped image.
Contributions are welcome! Please fork the repository and open a pull request with your changes.
Create your Feature Branch (git checkout -b feature/YourFeature) Commit your Changes (git commit -m 'Add some YourFeature') Push to the Branch (git push origin feature/YourFeature) Open a Pull Request License Distributed under the MIT License. See LICENSE for more information.
This README.md file outlines the essential information needed for developers to set up and understand the project. You can adjust any part as per your specific project details.