🖼️ Visualize-It

AI-Powered Image Generation & Enhancement Platform
Built with ❤️ using MERN Stack, Tailwind CSS, and integrated with ClipDrop AI & Razorpay.

---

🚀 Project Overview

Visualize-It is a modern AI-based web application that allows users to generate, edit, and enhance images seamlessly.
It provides a smooth user experience with secure payment integration, allowing users to purchase image credits and unlock premium features.

This project was built to strengthen my full-stack development skills while exploring AI APIs, secure payment flows, and scalable UI design.

---

🧠 What I Learned

During the development of Visualize-It, I gained hands-on experience in:

• 🧭 Authentication & Authorization using JWT tokens
• 💳 Payment Gateway Integration with Razorpay
• 🪄 Working with ClipDrop.ai API for AI image generation
• 🧰 Building RESTful APIs with Node.js & Express
• 🖼️ Structuring a responsive and modern UI using Tailwind CSS
• ⚡ Managing state & API calls efficiently in React
• 🧪 Debugging real-world issues like token expiration, SDK loading & order creation

---

🛠️ Tech Stack

Frontend	Backend	AI & Payments	Styling
React (Vite)	Node.js	ClipDrop.ai API	Tailwind CSS
Context API	Express.js	Razorpay	Motion (Framer)
Axios	MongoDB	JWT Auth	React Icons

---

✨ Key Features

• 🧑‍💻 User Authentication – Secure login/signup with JWT
• 🖼️ AI Image Generation – Generate images using ClipDrop prompts
• ✍️ Credit System – Users can purchase credits to generate more images
• 💳 Razorpay Integration – Real payment flow with test mode
• 🪄 Responsive UI – Clean & modern design using Tailwind
• 📜 Transaction & Usage Tracking – User credit history and order details

---

📂 Folder Structure

Visualize-It
├── 📁 Client/
│   │   ├── 📁 components/
│   │   │   ├── 📄 Discription.jsx
│   │   │   ├── 📄 GenrateBtn.jsx
│   │   │   ├── 📄 Navbar.jsx
│   │   │   ├── 📄 footer.jsx
│   │   │   ├── 📄 header.jsx
│   │   │   ├── 📄 login.jsx
│   │   │   ├── 📄 step.jsx
│   │   │   └── 📄 testimonial.jsx
│   │   ├── 📁 context/
│   │   │   ├── 📄 AppContextProvider.jsx
│   │   │   └── 📄 appContext.js
│   │   ├── 📁 pages/
│   │   │   ├── 📄 Buycredit.jsx
│   │   │   ├── 📄 home.jsx
│   │   │   └── 📄 result.jsx
│   │   ├── 📄 App.jsx
│   │   ├── 🎨 index.css
│   │   └── 📄 main.jsx
│   └── 🔒 .env 🚫 (auto-hidden)
└── 📁 Server/
    ├── 📁 Config/
    │   └── 📄 db.js
    ├── 📁 Controller/
    │   ├── 📄 image.controller.js
    │   └── 📄 user.controller.js
    ├── 📁 Middleware/
    │   └── 📄 auth.js
    ├── 📁 Models/
    │   ├── 📄 transcition.model.js
    │   └── 📄 user.model.js
    ├── 📁 Routes/
    │   ├── 📄 imageRoute.js
    │   └── 📄 userRoute.js
    ├── 📁 node_modules/ 🚫 (auto-hidden)
    ├── 🔒 .env 🚫 (auto-hidden)
    └── 📄 server.js

---

Author

• Saksham Srivastava
• 🌐 LinkedIn : https://www.linkedin.com/in/saksham-srivastava-343088255
• 💻 GitHub : https://github.com/yaxxhsri7444
• Gmail: srivastavasaksham243@gmail.com