Imagify

# ✨ Imagify - Transform Your Images Magically ✨ > 🎨 Where Creativity Meets Technology [](https://reactjs.org/) [](https://vitejs.dev/) [](https://tailwindcss.com/) [](https://www.typescriptlang.org/)

Features • Installation • Usage • Contributing

[](https://github.com/singh04ayush/imagify/stargazers) [](https://github.com/singh04ayush/imagify/network/members) [](https://github.com/singh04ayush/imagify/issues) ---

✨ Features

| 🖼️ Image Tools | 🎨 Effects | 💾 Export Options | |----------------|------------|------------------| | Crop & Resize | Filters | PNG Export | | Rotate & Flip | Adjustments| JPG Export | | Brightness | Presets | SVG Export | | Contrast | Custom | PDF Export |

• 🎯 Real-time Preview: See your changes instantly
• 🚀 Fast Processing: Optimized for performance
• 📱 Responsive Design: Works on all devices
• 🔒 Secure Processing: Your images stay private
• 🌈 Advanced Filters: Professional-grade effects
• 💡 Smart Tools: AI-powered enhancements
• 🎨 Custom Presets: Save your favorite styles
• 🔄 History: Undo/redo your changes

🚀 Quick Start

### Prerequisites - Node.js (v18 or higher) - npm (v9 or higher) - Git

1. Clone the Repository

git clone https://github.com/singh04ayush/imagify.git
cd imagify

2. Backend Setup

# Navigate to server directory
cd server

# Install dependencies
npm install

# Create .env file
cp .env.example .env

# Start the server
npm run dev

3. Frontend Setup

# Open a new terminal
# Navigate to client directory
cd client

# Install dependencies
npm install

# Start the development server
npm run dev

4. Access the Application

• Frontend: http://localhost:5173
• Backend API: http://localhost:5000

### Development Scripts | Command | Description | |---------|-------------| | `npm run dev` | Start development server | | `npm run build` | Build for production | | `npm run lint` | Run ESLint | | `npm run test` | Run tests | ### Environment Variables | Variable | Description | Default | |----------|-------------|---------| | `PORT` | Server port | 5000 | | `MONGODB_URI` | MongoDB connection string | - | | `JWT_SECRET` | JWT secret key | - |

💻 Usage Guide

| Step | Action | Description | |------|--------|-------------| | 1️⃣ | Upload | Drag & drop or click to upload | | 2️⃣ | Edit | Use tools to modify your image | | 3️⃣ | Preview | See changes in real-time | | 4️⃣ | Export | Save in your preferred format |

🛠️ Tech Stack

### Frontend     ### Backend   

🤝 Contributing

We welcome contributions! Here's how you can help: [](http://makeapullrequest.com) [](https://github.com/ellerbrock/open-source-badges/)

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

[](https://opensource.org/licenses/MIT) This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

🙏 Acknowledgments

| Resource | Description | |----------|-------------| | [Heroicons](https://heroicons.com/) | Beautiful icons | | [TailwindCSS](https://tailwindcss.com/) | Utility-first CSS framework | | [React Community](https://reactjs.org/community) | Amazing React ecosystem |

---

### Contributed with ❤️ by [ phoenixdev100 ] [](https://twitter.com/phoenixdev100) [](https://github.com/phoenixdev100)