✨ Imagify — AI Image Generation & Transformations (Full-Stack MERN SaaS)

A production-ready full-stack MERN AI Image Transformation App where users can generate AI-powered images, apply transformations, and enjoy a seamless, responsive experience.
Built using React + Vite + Tailwind + Express + MongoDB, powered by ClipDrop AI for magical image generation.

• Frontend (Vercel): https://imagify-blue-psi.vercel.app
• Backend (Render): https://imagify-ai4t.onrender.com

---

🚀 Features

• 🎨 AI-based Image Generation & Transformation
• ⚡ Super-fast processing via ClipDrop API
• 📱 Responsive and modern UI with React + Tailwind
• 🔐 Secure backend with JWT authentication (optional)
• 📤 Upload → Transform → Download in seconds
• 🗃️ Organized code structure for scalable development

---

🛠️ Tech Stack

🖥️ Frontend

• ⚛ React.js (Vite)
• 💨 Tailwind CSS
• 🌐 React Router DOM
• ⚙️ Axios

🔧 Backend

• Node.js
• Express.js
• JWT Authentication (optional)

💾 Database

• 🍃 MongoDB + Mongoose

✨ AI & Image Processing

• ClipDrop API (Magic Replace, Enhance, Upscale, and more)

---

🏗️ Architecture Overview

Client (React + Vite + Tailwind)
|
| ---> API Requests (Axios)
|
Backend (Node + Express)
|
| ---> Image Processing Calls (ClipDrop API)
| ---> JWT Auth (optional)
|
Database (MongoDB)

---

📁 Folder Structure

📦 Click to expand the full project structure

IMAGIFY/
│
├── client/                     # Frontend (React + Vite)
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── context/
│   │   ├── utils/
│   │   └── App.jsx
│   └── vite.config.js
│
├── server/                     # Backend (Node + Express)
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── middleware/
│   ├── utils/
│   └── server.js
│
└── README.md

---

📦 Installation & Setup

1️⃣ Clone the repository

git clone https://github.com/mrsarthakgupta/Imagify
cd Imagify

---

🔧 Backend Setup

2️⃣ Install backend dependencies

cd server
npm install

3️⃣ Create a .env file in the server folder

PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
CLIPDROP_API=your_clipdrop_api_key

4️⃣ Start backend

npm run server

---

🎨 Frontend Setup

5️⃣ Install frontend dependencies

cd ../client
npm install

6️⃣ Create .env file in client

VITE_BACKEND_URL=http://localhost:5000

7️⃣ Start frontend

npm run dev

---

🔌 API Endpoints

Method	Endpoint	Description
POST	/api/auth/signup	Register a new user (optional)
POST	/api/auth/login	Log in user and return JWT token
POST	/api/generate	Generate AI images using ClipDrop API
POST	/api/transform	Apply AI transformations on uploaded images

---

🌐 Deployment Links

• Frontend (Vercel): https://imagify-blue-psi.vercel.app
• Backend (Render): https://imagify-ai4t.onrender.com

---

🧠 What I Learned

• How to integrate ClipDrop AI APIs for real-time image generation
• Handling image buffers, binary data, and API responses
• Structuring scalable MERN applications with clean folder architecture
• Deploying frontend on Vercel and backend on Render
• Managing environment variables and API keys securely
• Improving React UI/UX for image upload → transform → download
• Optimizing Node.js endpoints for fast AI processing

---

🗺️ Roadmap (Future Enhancements)

• Multiple AI transformation tools (Upscale, Reimagine, Relight)
• Admin panel for monitoring API usage
• Dark mode UI
• Performance upgrades for heavy AI tasks

---

🎯 Summary

This project demonstrates a real-world SaaS-style MERN + AI application with image generation, transformations, optimized backend processing, and modern UI — ideal for showcasing full-stack development and AI integration skills.

---

⭐ Author

Sarthak Gupta — Full Stack Developer