Imagify

A modern AI-powered text-to-image generator web application that transforms your text descriptions into stunning visual art in seconds. Built with React and Express.js, Imagify provides a seamless user experience with a credit-based system for image generation.

✨ Features

• User Authentication: Secure registration and login system with JWT-based authentication
• Text-to-Image Generation: Transform text prompts into high-quality images using Clipdrop API
• Credit System: Each user receives 5 free credits upon registration to generate images
• Credit Balance Tracking: Real-time credit balance display in the navigation bar
• Image Download: Download generated images directly from the application
• Responsive Design: Modern, mobile-friendly UI built with TailwindCSS
• Smooth Animations: Enhanced user experience with Motion animations
• Pricing Plans: View available credit packages (Basic, Advanced, Business)
• Protected Routes: Secure API endpoints with authentication middleware
• Toast Notifications: User-friendly error and success messages

🛠️ Tech Stack

Frontend

• React 19.1.0 - UI library
• Vite 6.3.5 - Build tool and dev server
• TailwindCSS 4.1.7 - Utility-first CSS framework
• React Router DOM 7.6.0 - Client-side routing
• Motion 12.12.1 - Animation library
• Axios 1.9.0 - HTTP client
• React Toastify 11.0.5 - Toast notifications

Backend

• Express.js 5.1.0 - Web framework
• MongoDB - NoSQL database
• Mongoose 8.15.0 - MongoDB object modeling
• JSON Web Token (JWT) 9.0.2 - Authentication
• Bcrypt 6.0.0 - Password hashing
• CORS 2.8.5 - Cross-origin resource sharing
• Form-Data 4.0.2 - Form data handling
• Razorpay 2.9.6 - Payment gateway (for future implementation)

Database

• MongoDB - Document database

Tools / Libraries

• Nodemon 3.1.10 - Development server auto-reload
• Dotenv 16.5.0 - Environment variable management
• ESLint - Code linting
• Clipdrop API - Text-to-image generation service

📁 Folder Structure

Imagify/
├── client/                    # Frontend React application
│   ├── dist/                  # Production build output
│   ├── public/                # Static assets
│   │   └── favicon.svg
│   ├── src/
│   │   ├── assets/            # Images, icons, and static files
│   │   ├── components/        # Reusable React components
│   │   │   ├── Description.jsx
│   │   │   ├── Footer.jsx
│   │   │   ├── GenerateBtn.jsx
│   │   │   ├── Header.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── Navbar.jsx
│   │   │   ├── Steps.jsx
│   │   │   └── Testimonials.jsx
│   │   ├── context/           # React Context API
│   │   │   └── AppContext.jsx
│   │   ├── pages/             # Page components
│   │   │   ├── Home.jsx
│   │   │   ├── BuyCredits.jsx
│   │   │   └── Result.jsx
│   │   ├── App.jsx            # Main app component
│   │   ├── App.css
│   │   ├── index.css
│   │   └── main.jsx           # Entry point
│   ├── index.html
│   ├── package.json
│   ├── vite.config.js
│   └── eslint.config.js
│
└── server/                     # Backend Express application
    ├── config/                 # Configuration files
    │   └── mongodb.js          # MongoDB connection
    ├── controllers/            # Route controllers
    │   ├── userController.js   # User operations
    │   └── imageController.js  # Image generation logic
    ├── middlewares/            # Custom middleware
    │   └── auth.js             # JWT authentication
    ├── models/                 # Database models
    │   └── userModel.js        # User schema
    ├── routes/                 # API routes
    │   ├── userRoutes.js       # User endpoints
    │   └── imageRoutes.js      # Image endpoints
    ├── server.js               # Express server entry point
    └── package.json

🚀 Installation & Setup

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn package manager
• MongoDB database (local or cloud instance like MongoDB Atlas)
• Clipdrop API Key - Get your API key from Clipdrop

Backend Setup

1. Navigate to the server directory:

   cd server

2. Install dependencies:

   npm install

3. Create a .env file in the server directory:

   MONGODB_URI=mongodb://localhost:27017
   JWT_SECRET=your_secret_jwt_key_here
   CLIPDROP_API=your_clipdrop_api_key_here
   PORT=4000

4. Update the .env file with your actual values:

   • MONGODB_URI: Your MongoDB connection string (e.g., mongodb://localhost:27017 or MongoDB Atlas connection string)
   • JWT_SECRET: A random secret string for JWT token signing
   • CLIPDROP_API: Your Clipdrop API key
   • PORT: Server port (default: 4000)

5. Start the development server:

   npm run server

   Or for production:

   npm start

   The server will run on http://localhost:4000 (or your specified PORT).

Frontend Setup

1. Navigate to the client directory:

   cd client

2. Install dependencies:

   npm install

3. Create a .env file in the client directory:

   VITE_BACKEND_URL=http://localhost:4000

4. Update VITE_BACKEND_URL if your backend is running on a different URL or port.

5. Start the development server:

   npm run dev

   The frontend will run on http://localhost:5173 (default Vite port).

🔐 Environment Variables

Backend (.env in server/)

Variable	Description	Required	Example
MONGODB_URI	MongoDB connection string. The database name imagify will be appended automatically.	Yes	mongodb://localhost:27017 or mongodb+srv://user:pass@cluster.mongodb.net
JWT_SECRET	Secret key for signing and verifying JWT tokens. Use a strong, random string.	Yes	your_super_secret_jwt_key_12345
CLIPDROP_API	API key for Clipdrop text-to-image service. Get it from Clipdrop.	Yes	your_clipdrop_api_key
PORT	Port number for the Express server. Defaults to 4000 if not specified.	No	4000

Frontend (.env in client/)

Variable	Description	Required	Example
VITE_BACKEND_URL	Base URL of the backend API server. Must include protocol (http/https).	Yes	http://localhost:4000

🏃 How to Run the Project

Step-by-Step Instructions

1. Start MongoDB:

   • If using local MongoDB, ensure the MongoDB service is running
   • If using MongoDB Atlas, ensure your connection string is correct

2. Start the Backend Server:

   cd server
   npm install
   # Create .env file with required variables
   npm run server

   You should see: server running on port 4000 and Database connected

3. Start the Frontend Development Server:

   cd client
   npm install
   # Create .env file with VITE_BACKEND_URL
   npm run dev

   The app will open at http://localhost:5173

4. Access the Application:

   • Open your browser and navigate to http://localhost:5173
   • Register a new account or login
   • Start generating images!

Production Build

To create a production build of the frontend:

cd client
npm run build

The built files will be in the client/dist/ directory.

⚠️ Common Errors & Fixes

🔮 Future Improvements

Based on the current project scope, here are realistic improvements that could be implemented:

• Payment Integration: Complete Razorpay integration for credit purchases
• Image History: Store and display previously generated images for each user
• Image Editing: Add features to edit or modify generated images
• Multiple AI Models: Support for different image generation models/APIs
• Social Features: Share generated images, create galleries, user profiles
• Advanced Prompts: Support for negative prompts, style presets, image dimensions
• Rate Limiting: Implement rate limiting to prevent API abuse
• Email Verification: Add email verification for new user registrations
• Password Reset: Implement forgot password functionality
• Admin Dashboard: Admin panel for user management and credit administration
• Image Storage: Store images in cloud storage (AWS S3, Cloudinary) instead of base64
• Caching: Implement caching for frequently generated images
• Error Handling: Enhanced error handling and user feedback
• Testing: Add unit tests and integration tests
• Documentation: API documentation with Swagger/OpenAPI

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Note: This project uses the Clipdrop API for image generation. Make sure to comply with Clipdrop's terms of service and usage limits when using this application.