Skip to content

Latest commit

 

History

History
147 lines (98 loc) · 3.98 KB

README.md

File metadata and controls

147 lines (98 loc) · 3.98 KB

ImaginAI - Full Stack Text-to-Image Generator AI SaaS App

Welcome to ImaginAI, a cutting-edge Full Stack Text-to-Image Generator AI SaaS Application built with React JS and the MERN stack (MongoDB, Express, React, Node.js). This app allows users to generate images by entering text prompts, utilizing a powerful Clipdrop API for image creation. Additionally, users can purchase credits to generate more images through an integrated online payment gateway.

Features

  • User Authentication: Sign up and log in with MongoDB user authentication.
  • Text-to-Image Generation: Generate AI-powered images by inputting descriptive text.
  • Credit System: Users have a credit system to generate images. Credits can be topped up via an integrated online payment gateway.
  • Responsive UI: Built with React JS and styled using Tailwind CSS for a modern and responsive design.
  • Clipdrop API Integration: AI-based image generation through Clipdrop's image generation API.
  • MERN Stack: Full-stack app built using MongoDB, Express, React, and Node.js.

Tech Stack

  • Frontend:
    • React.js
    • Tailwind CSS
  • Backend:
    • Node.js
    • Express.js
    • MongoDB
  • AI Integration:
    • Clipdrop API
  • Payment Gateway:
    • Integrated online payment solution (Razorpay) for credit purchase.

Setup Instructions

1. Clone the Repository

git clone https://github.com/Aditya1or0/imaginAI.git
cd imaginAI

2. Backend Setup (Node.js & Express)

Install Dependencies

Navigate to the server directory and install the necessary dependencies:

cd server
npm install

Environment Variables

Create a .env file in the backend directory and add the following variables:

MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
CLIPDROP_API_KEY=your_clipdrop_api_key
PAYMENT_API_KEY=your_payment_gateway_api_key

Start the Server

Once dependencies are installed and environment variables are set, you can start the backend server:

npm start

3. Frontend Setup (React.js & Tailwind CSS)

Install Dependencies

Navigate to the client directory and install the necessary dependencies:

cd client
npm install

Start the React Development Server

To start the frontend development server, run the following command:

npm start

This will launch the React application at http://localhost:4000.

Usage

1. User Authentication

  • Sign Up: Create a new user account with email and password.
  • Login: Login to your account to access the full features of the app.

2. Image Generation

  • Enter a detailed description of the image you want to generate.
  • Use your available credits to generate the image.

3. Credit System

  • Users receive credits upon sign-up or can purchase more credits via the integrated payment gateway.
  • You can top up credits to generate additional images.

4. Payment Gateway

  • A fully integrated Razorpay payment system allows users to purchase more credits.
  • Users can securely top up their credits using Razorpay's online payment gateway.

API Endpoints

1. Authentication

  • POST /api/user/register: Create a new user account.
  • POST /api/user/login: Login to an existing account.

2. Image Generation

  • POST /api/image/generate: Generate an image by providing a text description.

3. Credit Management

  • GET /api/credits: Check current credit balance.
  • POST /api/credits/purchase: Purchase additional credits via the payment gateway.

License

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

Contributing

Feel free to fork this project and submit pull requests. Contributions are welcome!

Contact

For any inquiries or support, you can reach out to Aditya1or0 on GitHub.

Enjoy using ImaginAI and explore the limitless possibilities of generating AI-powered images!