Editify AI 🎨✨

A modern AI image generation and processing web application.

🚀 Live Demo: Editify AI

## 📌 Overview

Editify AI is a MERN (MongoDB, Express.js, React, Node.js) application that lets users generate images from text prompts and transform existing images using multiple AI-powered tools. The UI is clean, fast, and mobile‑first, optimized with Tailwind CSS and motion animations.

🛠️ Tech Stack

• Frontend: React (Vite), Tailwind CSS, Framer/Motion
• Backend: Node.js, Express.js
• Database: MongoDB (Mongoose)
• Payments: Razorpay
• AI Provider: Clipdrop APIs
• Auth: JWT
• Deployment: Vercel (client), Render/Node hosting (server)

🎯 Features

Core AI Capabilities

• ✅ Text‑to‑Image generation (Clipdrop Text-to-Image)
• ✅ Image Cleanup (remove unwanted objects)
• ✅ Background Removal (transparent PNG)
• ✅ Text Removal (remove watermarks/captions)
• ✅ UnCrop (extend image beyond borders)
• ✅ Product Photography Enhancement (lighting/shadows)

Product & UX

• ✅ Interactive image comparison sliders (before/after)
• ✅ Modern monochromatic UI, responsive layouts
• ✅ Smooth motion animations and micro‑interactions
• ✅ “Generate” and “Process” tabs in results workflow

Platform

• ✅ JWT-based authentication (login/register)
• ✅ Credits system (balance tracked per user)
• ✅ Razorpay payments (Basic/Advanced/Business plans)
• ✅ Robust error handling, toasts, and loading states
• ✅ CORS configured + increased payload limit for image uploads

🔐 Authentication

• Email/password with bcrypt hashing
• JWT tokens stored client-side; sent via headers.token
• userAuth middleware decodes token and attaches userId to the request body

💳 Payments (Razorpay)

• Create order: /api/user/pay-razor (auth required)
• Verify order: /api/user/verify-razorpay
• Adds credits to the user upon successful verification

Make sure you have valid Razorpay Test or Live credentials in your server .env.

🧠 AI Providers (Clipdrop)

The server integrates with Clipdrop:

• text-to-image/v1
• cleanup/v1 (object removal)
• remove-background/v1
• remove-text/v1
• uncrop/v1

All image endpoints accept base64 images (client compresses large images before upload).

📁 Environment Variables

Create a .env in server/ with:

PORT=4000
MONGODB_URI=mongodb://localhost:27017/ai-image-generator
JWT_SECRET=your_jwt_secret

# Razorpay
RAZORPAY_KEY_ID=rzp_test_xxxxxxxxxxx
RAZORPAY_KEY_SECRET=xxxxxxxxxxxxxxxxx

# Clipdrop
CLIPDROP_API=clipdrop_xxxxxxxxxxxxxxxxx

Create a .env in client/ (Vite):

VITE_BACKEND_URL=http://localhost:4000
VITE_RAZORPAY_KEY_ID=rzp_test_xxxxxxxxxxx

▶️ Local Development

Server

cd server
npm install
npm run server   # starts nodemon (see package.json)

Client

cd client
npm install
npm run dev

🔗 API Endpoints (selected)

Auth & User

• POST /api/user/register
• POST /api/user/login
• GET /api/user/credits (auth)

Payments

• POST /api/user/pay-razor (auth)
• POST /api/user/verify-razorpay

Image

• POST /api/image/generate-image (auth)

Image Processing

• POST /api/image-processing/cleanup (auth)
• POST /api/image-processing/remove-background (auth)
• POST /api/image-processing/remove-text (auth)
• POST /api/image-processing/uncrop (auth)
• POST /api/image-processing/product-photography (auth)

🧩 UX Highlights

• Header: “Complete AI Image Suite” with feature highlights
• Home: Feature grid, workflow, testimonials, pricing
• Sliders for Cleanup and Background Removal
• Result page with tabs (Generate vs Process) and improved prompts

⚙️ Notes & Troubleshooting

• If you see CORS errors, ensure server CORS is configured for the client origin and JSON limits are high enough (50mb).
• Razorpay 401 “Authentication failed” → verify server .env keys; restart server.
• Large images → client compresses >2MB before sending; server validates up to 10MB.

📄 License

MIT