🖼️ PromptCanvas

Transforming Words Into Stunning Visuals Using AI

---

⚙️ Built with the tools and technologies:

---

📸 Description

PromptCanvas is a Full Stack AI SaaS Application that lets users generate images from text prompts using AI. Built with the MERN stack (MongoDB, Express, React, Node.js), it features user authentication, a credit system, online payment integration via Razorpay, and the ability to download generated images.

---

🌟 Live Demo

live-link

---

🚀 Features

• 🖼️ Generate images from text using the ClipDrop API
• 🔐 User Authentication (Signup/Login)
• 🎫 Credit-based system: 1 credit = 1 image
• 💳 Buy more credits using Razorpay integration
• 📥 Download generated images with a single click
• 📊 Transaction history & credit tracking
• 💾 MongoDB backend for persistent storage
• 🌐 Fully responsive React frontend

---

🛠️ Tech Stack

Frontend:

• React.js
• Axios
• React Router DOM
• TailwindCSS

Backend:

• Node.js
• Express.js
• MongoDB + Mongoose
• JWT for Authentication
• Razorpay SDK for Payments

---

📁 Project Structure

├── client/               # React frontend
├── server/               # Node.js backend
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   └── middlewares/
└── README.md

---

📦 Setup Instructions

1. Clone the Repository

git clone https://github.com/moali007/promptcanvas.git
cd promptcanvas

2. Install Dependencies

# Install server dependencies
cd server
npm install

# Install client dependencies
cd ../client
npm install

3. Set Environment Variables

Create a .env file in the server/ folder:

PORT=''
MONGO_URI=your_mongo_connection_string
JWT_SECRET=your_jwt_secret
CLIPDROP_API=your_clipdrop_api_key
RAZORPAY_KEY_ID=your_razorpay_key_id
RAZORPAY_KEY_SECRET=your_razorpay_key_secret
CURRENCY=INR

Also, create a .env file in the client/ folder:

VITE_BACKEND_URL = 'your_backend_url'
VITE_RAZORPAY_KEY_ID=your_razorpay_key_id

4. Start the App

# Start backend
cd server
npm run start

# Start frontend
cd ../client
npm run dev

---

📸 Screenshots

---

---

---

🔒 Authentication

• JWT-based login/signup system
• Auth middleware to protect image generation and credit purchase routes

---

🧾 Credit System

• Each user starts with default credits i.e 5 credits
• 1 credit = 1 image generation
• Users can purchase more credits via Razorpay
• Credit balance updates after successful payment

---

🧠 AI Image Generation

• Integrated ClipDrop's text-to-image API
• Images returned as base64 and displayed in the UI
• Users can download images directly to their device

---

🪙 Payments with Razorpay

• Razorpay Orders API used to create payment requests
• Transaction stored in MongoDB
• On successful payment, credits are added to the user's balance

---

🤝 Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

---

📄 License

MIT

---

🙌 Acknowledgements

• ClipDrop API
• Razorpay
• MongoDB
• React

---