DotAi App

DotAi is a full-stack, AI-powered chat and image generation application. It provides users with a conversational interface similar to ChatGPT, alongside the ability to generate images using text prompts. The platform features a credit-based system with Stripe integration for seamless purchases, user authentication, and a community feed to showcase published AI-generated images.

Features

• Text-based AI Chat: Chat with an advanced AI model (gemini-2.5-flash).
• AI Image Generation: Generate stunning images from text prompts via ImageKit AI.
• Credit System: Users spend credits for generating text (1 credit) and images (2 credits).
• Stripe Integration: Secure webhook-based payment processing to purchase additional credits.
• Community Feed: A dedicated section to explore and publish AI-generated images created by other users.
• User Authentication: Secure registration and login using JWT and bcrypt.
• Modern UI: Responsive, aesthetically pleasing dark-mode interface built with React 19 and Tailwind CSS 4.

Tech Stack

Frontend (Client)

• Framework: React 19 + Vite
• Routing: React Router DOM
• Styling: Tailwind CSS 4
• State/Requests: Axios, Context API
• Utilities: React Markdown, PrismJS (Syntax Highlighting), Moment, React Hot Toast

Backend (Server)

• Framework: Node.js, Express.js
• Database: MongoDB via Mongoose
• Authentication: JSON Web Tokens (JWT), bcryptjs
• AI Integration: OpenAI API SDK (configured for Gemini 2.5 Flash)
• Image Processing/Storage: ImageKit
• Payments: Stripe

Prerequisites

Before running the project locally, ensure you have the following installed:

• Node.js (v18 or higher recommended)
• MongoDB Database (Local or MongoDB Atlas)
• Stripe Account (for payment webhooks)
• ImageKit Account (for AI image generation and media storage)
• Gemini API Key (or OpenAI API Key depending on exact model usage)

Environment Variables

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

PORT=3000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key

# ImageKit Configuration
IMAGEKIT_URL_ENDPOINT=your_imagekit_url_endpoint
IMAGEKIT_PUBLIC_KEY=your_imagekit_public_key
IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key

# AI Configuration
OPENAI_API_KEY=your_gemini_or_openai_api_key

# Stripe Configuration
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

Create a .env file in the client directory (if needed for API URLs):

VITE_API_URL=http://localhost:3000

Installation & Setup

1. Clone the repository:

   git clone https://github.com/mufeed-dev/DotAi-App.git
   cd DotAi-App-master

2. Install Server Dependencies:

   cd server
   npm install

3. Install Client Dependencies:

   cd ../client
   npm install

4. Start the Server (Development):

   cd server
   npm run server

5. Start the Client (Development):

   cd client
   npm run dev

6. Access the App: Open your browser and navigate to http://localhost:5173.

Folder Structure

DotAi-App-master/
├── client/                 # React Frontend
│   ├── public/             # Static assets
│   ├── src/                # React components, pages, context, and assets
│   ├── package.json        # Client dependencies
│   ├── vite.config.js      # Vite configuration
│   └── ...
├── server/                 # Node.js/Express Backend
│   ├── configs/            # DB, ImageKit, and OpenAI configurations
│   ├── controllers/        # API route controllers (chat, message, user, webhooks)
│   ├── middlewares/        # Express middlewares (auth, etc.)
│   ├── models/             # Mongoose schemas
│   ├── routes/             # API routes
│   ├── server.js           # Server entry point
│   ├── package.json        # Server dependencies
│   └── ...
└── README.md               # Project documentation

API Endpoints Overview

• User Routes (/api/user)

  • POST /register - Register a new user
  • POST /login - Authenticate a user
  • GET /data - Get current user data (Protected)
  • GET /published-images - Fetch community images

• Chat Routes (/api/chat)

  • GET / - Get all user chats (Protected)
  • POST / - Create a new chat (Protected)
  • DELETE / - Delete a chat session (Protected)

• Message Routes (/api/message)

  • POST /text - Send a text prompt and get an AI response (Protected)
  • POST /image - Generate an AI image (Protected)

• Credit/Payment Routes (/api/credit)

  • (Handles Stripe integration and fetching user credit balance)

• Webhook Routes (/api/stripe)

  • POST / - Stripe webhook listener for payment success handling