QuickGPT

QuickGPT is a full-stack AI chatbot web application built using the MERN stack (MongoDB, Express.js, React.js, and Node.js). The application enables users to generate AI-based text responses and create images from prompts through integrated AI models.

The project uses the Google Gemini AI model for text generation and ImageKit's AI image generation feature for image creation. A credit-based system is implemented, allowing users to purchase credits via Stripe to access AI features.

---

Features

• User Authentication — Secure signup and login with JWT-based sessions.
• AI Text Generation — Real-time conversational responses powered by Google Gemini 2.0 Flash.
• AI Image Generation — Prompt-to-image generation using ImageKit's AI transform feature.
• Credit System — Usage tracking for AI features (1 credit per text, 2 credits per image).
• Payment Integration — Stripe Checkout for purchasing credit packs.
• Community Gallery — Published AI-generated images visible to all users.
• Responsive UI — Fully adaptive interface built with React and Tailwind CSS.
• Secure Backend — REST API with environment-based configuration and JWT authentication.

---

Quick Start

1. Prerequisites

• Node.js v18 or later — Download
• MongoDB — Local instance or a free MongoDB Atlas cluster

2. Clone & Install

# Clone the repository
git clone https://github.com/Shreecharana24/MERN-Stack-Chatbot.git
cd MERN-Stack-Chatbot

# Install server dependencies
cd server
npm install

# Install client dependencies
cd ../client
npm install

3. API Keys Setup

You will need accounts and API keys from the following services:

Service	Purpose	Get Your Keys
Google AI Studio	Gemini text generation	aistudio.google.com/apikey
ImageKit	AI image generation & storage	imagekit.io/dashboard/developer/api-keys
Stripe	Payment processing	dashboard.stripe.com/apikeys
Stripe Webhooks	Credit top-up after payment	dashboard.stripe.com/webhooks
MongoDB Atlas	Database connection string	cloud.mongodb.com

ImageKit note: AI image generation uses ImageKit's URL-based AI transform feature (ik-genimg-prompt-...). Make sure your ImageKit plan supports AI generation, and set your IMAGEKIT_URL_ENDPOINT to your ImageKit CDN URL (e.g. https://ik.imagekit.io/your_id).

Stripe Webhook note: When setting up your webhook in the Stripe dashboard, set the endpoint URL to https://your-domain.com/api/stripe and listen for the checkout.session.completed event. Copy the Signing Secret it generates — that is your STRIPE_WEBHOOK_SECRET.

4. Environment Configuration

Create a .env file inside the server/ directory with the following variables:

# MongoDB
MONGODB_URI=your_mongodb_connection_string
# e.g. mongodb+srv://username:password@cluster.mongodb.net

# Google Gemini
GEMINI_API_KEY=your_gemini_api_key

# JWT (any long random string — used to sign auth tokens)
JWT_SECRET=your_jwt_secret_key

# ImageKit
IMAGEKIT_PUBLIC_KEY=your_imagekit_public_key
IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key
IMAGEKIT_URL_ENDPOINT=your_imagekit_cdn_url

# Stripe
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_signing_secret

5. Run the Application

Open two terminals and run these simultaneously:

Terminal 1 — Backend:

cd server
npm run server     # runs with nodemon (auto-restarts on changes)
# or: npm start    # runs without nodemon

Terminal 2 — Frontend:

cd client
npm run dev

The app will be available at: http://localhost:5173

The backend runs on: http://localhost:3000

---

Project Structure

MERN-Stack-Chatbot/
├── client/                  # React frontend (Vite)
│   └── src/
│       ├── components/      # Sidebar, ChatBox, Message
│       ├── context/         # AppContext (global state)
│       ├── pages/           # Credits, Community, Loading, Login
│       └── assets/          # Icons, images, dummy data
└── server/                  # Node.js + Express backend
    ├── configs/             # DB, ImageKit, OpenAI (Gemini) setup
    ├── controllers/         # Route logic
    ├── middlewares/         # JWT auth middleware
    ├── models/              # Mongoose schemas (User, Chat, Transaction)
    └── routes/              # API route definitions

---

Tech Stack

Layer	Technology
Frontend	React.js 19, Tailwind CSS 4, Vite
Backend	Node.js, Express.js 5
Database	MongoDB, Mongoose
AI — Text	Google Gemini 2.0 Flash (via OpenAI-compatible API)
AI — Image	ImageKit AI Image Generation
Payments	Stripe Checkout
Auth	JWT (jsonwebtoken), bcryptjs

---

API Endpoints

User

Method	Endpoint	Auth	Description
POST	/api/user/register	No	Register a new user
POST	/api/user/login	No	Login and receive JWT token
GET	/api/user/data	Yes	Get current user data
GET	/api/user/published-images	No	Get all community images

Chat

Method	Endpoint	Auth	Description
POST	/api/chat/create	Yes	Create a new chat
GET	/api/chat/get	Yes	Get all user chats
POST	/api/chat/delete	Yes	Delete a chat

Messages

Method	Endpoint	Auth	Description
POST	/api/message/text	Yes	Send a text prompt (costs 1 credit)
POST	/api/message/image	Yes	Send an image prompt (costs 2 credits)

Credits

Method	Endpoint	Auth	Description
GET	/api/credit/plan	No	Get available credit plans
POST	/api/credit/purchase	Yes	Create a Stripe Checkout session
POST	/api/stripe	No	Stripe webhook (credit top-up)

---

Credit Plans

Plan	Price	Credits
Basic	$10	100
Pro	$20	500
Premium	$30	1000

New users start with 20 free credits.