# arnavgupta2021/quickgpt-rec architecture

> Architecture diagram of the GitHub repository arnavgupta2021/quickgpt-rec, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/arnavgupta2021/quickgpt-rec
- Repository: https://github.com/arnavgupta2021/quickgpt-rec

## Overview

QuickGPT is a full-stack AI chat and image-generation app with authentication, a community gallery, and paid credit plans. The main user flow runs from the React app through shared client state to authenticated Express routes and handlers; chat handlers call AI/image services and persist messages while charging credits. Payment handlers create and verify Stripe purchases, with a webhook alternative. The graph retains README-documented integrations and major pages; some client-to-API and webhook relationships are documented rather than visible in sampled client excerpts.

Main entry points: [`client/src/App.jsx`](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/App.jsx) (App routing), [`server/server.js`](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/server.js) (Express API), [`server/controllers/messageController.js`](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/controllers/messageController.js) (Message generation), [`client/src/context/AppContext.jsx`](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/context/AppContext.jsx) (App state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client experience"]
  node_app["App routing<br/>[App.jsx]"]
  node_context["App state<br/>[AppContext.jsx]"]
  node_chatbox["Chat interface<br/>[ChatBox.jsx]"]
  node_message["Message view<br/>[Message.jsx]"]
  node_sidebar["Chat sidebar<br/>[Sidebar.jsx]"]
  node_login["Login page<br/>[Login.jsx]"]
  node_creditsui["Credits page<br/>[Credits.jsx]"]
  node_community["Community gallery<br/>[Community.jsx]"]
  node_loading["Payment loading<br/>[Loading.jsx]"]
end

subgraph group_api["API and identity"]
  node_server["Express API<br/>[server.js]"]
  node_userctrl["User services<br/>[userController.js]"]
  node_auth["JWT guard<br/>[auth.js]"]
  node_chatctrl["Chat services<br/>[chatController.js]"]
end

subgraph group_ai["AI generation"]
  node_msgctrl["Message generation"]
  node_gemini{{"Gemini"}}
  node_pollinations{{"Pollinations AI"}}
  node_imagekit{{"ImageKit hosting"}}
end

subgraph group_billing["Credits and billing"]
  node_creditctrl["Credit services"]
  node_webhooks["Stripe webhooks<br/>[webhooks.js]"]
  node_stripe{{"Stripe"}}
end

subgraph group_data["Persistence"]
  node_userdb[("User records<br/>[User.js]")]
  node_chatdb[("Chat records<br/>[Chat.js]")]
  node_transactiondb[("Transactions<br/>[Transaction.js]")]
  node_dbconfig["Database connection<br/>[db.js]"]
end

node_user(("User"))
node_mongodb[("MongoDB")]

node_user -->|"uses"| node_app
node_app -->|"renders"| node_sidebar
node_app -->|"routes to"| node_chatbox
node_app -->|"routes to"| node_creditsui
node_app -->|"routes to"| node_community
node_app -->|"shows"| node_loading
node_app -->|"shows"| node_login
node_app -->|"reads state"| node_context
node_chatbox -->|"uses state"| node_context
node_chatbox -->|"renders"| node_message
node_sidebar -->|"uses state"| node_context
node_login -->|"uses state"| node_context
node_creditsui -->|"uses state"| node_context
node_community -->|"uses state"| node_context
node_loading -->|"uses state"| node_context
node_context -->|"calls API"| node_server
node_server -->|"connects"| node_dbconfig
node_server -->|"routes requests"| node_userctrl
node_server -->|"routes requests"| node_chatctrl
node_server -->|"routes requests"| node_msgctrl
node_server -->|"routes requests"| node_creditctrl
node_server -->|"routes webhook"| node_webhooks
node_userctrl -->|"protects data"| node_auth
node_chatctrl -->|"protects routes"| node_auth
node_msgctrl -->|"protects routes"| node_auth
node_creditctrl -->|"protects routes"| node_auth
node_auth -->|"loads user"| node_userdb
node_userctrl -->|"reads and writes"| node_userdb
node_userctrl -->|"queries gallery"| node_chatdb
node_chatctrl -->|"manages chats"| node_chatdb
node_msgctrl -->|"reads and saves"| node_chatdb
node_msgctrl -->|"updates credits"| node_userdb
node_msgctrl -->|"requests text"| node_gemini
node_msgctrl -->|"requests image"| node_pollinations
node_msgctrl -->|"uploads image"| node_imagekit
node_creditctrl -->|"creates transaction"| node_transactiondb
node_creditctrl -->|"creates checkout"| node_stripe
node_creditctrl -->|"verifies payment"| node_stripe
node_creditctrl -->|"adds credits"| node_userdb
node_webhooks -->|"receives events"| node_stripe
node_webhooks -->|"updates transaction"| node_transactiondb
node_webhooks -->|"updates credits"| node_userdb
node_dbconfig -->|"connects"| node_mongodb

click node_app "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/App.jsx"
click node_context "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/context/AppContext.jsx"
click node_chatbox "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/components/ChatBox.jsx"
click node_message "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/components/Message.jsx"
click node_sidebar "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/components/Sidebar.jsx"
click node_login "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/pages/Login.jsx"
click node_creditsui "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/pages/Credits.jsx"
click node_community "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/pages/Community.jsx"
click node_loading "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/pages/Loading.jsx"
click node_server "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/server.js"
click node_userctrl "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/controllers/userController.js"
click node_auth "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/middlewares/auth.js"
click node_chatctrl "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/controllers/chatController.js"
click node_msgctrl "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/controllers/messageController.js"
click node_creditctrl "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/controllers/creditController.js"
click node_webhooks "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/controllers/webhooks.js"
click node_userdb "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/models/User.js"
click node_chatdb "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/models/Chat.js"
click node_transactiondb "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/models/Transaction.js"
click node_dbconfig "https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/configs/db.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_context,node_chatbox,node_message,node_sidebar,node_login,node_creditsui,node_community,node_loading,node_user toneBlue
class node_server,node_userctrl,node_auth,node_chatctrl,node_mongodb toneAmber
class node_msgctrl,node_gemini,node_pollinations,node_imagekit toneMint
class node_creditctrl,node_webhooks,node_stripe toneRose
class node_userdb,node_chatdb,node_transactiondb,node_dbconfig toneIndigo
```

## Components

### Client experience

- [App routing](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [App state](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/context/AppContext.jsx): `client/src/context/AppContext.jsx`
- [Chat interface](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/components/ChatBox.jsx): `client/src/components/ChatBox.jsx`
- [Message view](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/components/Message.jsx): `client/src/components/Message.jsx`
- [Chat sidebar](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/components/Sidebar.jsx): `client/src/components/Sidebar.jsx`
- [Login page](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/pages/Login.jsx): `client/src/pages/Login.jsx`
- [Credits page](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/pages/Credits.jsx): `client/src/pages/Credits.jsx`
- [Community gallery](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/pages/Community.jsx): `client/src/pages/Community.jsx`
- [Payment loading](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/client/src/pages/Loading.jsx): `client/src/pages/Loading.jsx`

### API and identity

- [Express API](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/server.js): `server/server.js`
- [User services](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/controllers/userController.js): `server/controllers/userController.js`
- [JWT guard](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/middlewares/auth.js): `server/middlewares/auth.js`
- [Chat services](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/controllers/chatController.js): `server/controllers/chatController.js`

### AI generation

- [Message generation](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/controllers/messageController.js): `server/controllers/messageController.js`
- **Gemini**
- **Pollinations AI**
- **ImageKit hosting**

### Credits and billing

- [Credit services](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/controllers/creditController.js): `server/controllers/creditController.js`
- [Stripe webhooks](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/controllers/webhooks.js): `server/controllers/webhooks.js`
- **Stripe**

### Persistence

- [User records](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/models/User.js): `server/models/User.js`
- [Chat records](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/models/Chat.js): `server/models/Chat.js`
- [Transactions](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/models/Transaction.js): `server/models/Transaction.js`
- [Database connection](https://github.com/arnavgupta2021/quickgpt-rec/blob/main/server/configs/db.js): `server/configs/db.js`

### Other components

- **User**
- **MongoDB**

## Connections

- User → App routing: uses (evidence: `client/src/App.jsx`)
- App routing → Chat sidebar: renders (evidence: `client/src/App.jsx`)
- App routing → Chat interface: routes to (evidence: `client/src/App.jsx`)
- App routing → Credits page: routes to (evidence: `client/src/App.jsx`)
- App routing → Community gallery: routes to (evidence: `client/src/App.jsx`)
- App routing → Payment loading: shows (evidence: `client/src/App.jsx`)
- App routing → Login page: shows (evidence: `client/src/App.jsx`)
- App routing → App state: reads state (evidence: `client/src/App.jsx`)
- Chat interface → App state: uses state (evidence: `client/src/components/ChatBox.jsx`)
- Chat interface → Message view: renders (evidence: `client/src/components/ChatBox.jsx`)
- Chat sidebar → App state: uses state (evidence: `client/src/components/Sidebar.jsx`)
- Login page → App state: uses state (evidence: `client/src/pages/Login.jsx`)
- Credits page → App state: uses state (evidence: `client/src/pages/Credits.jsx`)
- Community gallery → App state: uses state (evidence: `client/src/pages/Community.jsx`)
- Payment loading → App state: uses state (evidence: `client/src/pages/Loading.jsx`)
- App state → Express API: calls API (evidence: `client/src/context/AppContext.jsx`)
- Express API → Database connection: connects (evidence: `server/server.js`)
- Express API → User services: routes requests (evidence: `server/server.js`)
- Express API → Chat services: routes requests (evidence: `server/server.js`)
- Express API → Message generation: routes requests (evidence: `server/server.js`)
- Express API → Credit services: routes requests (evidence: `server/server.js`)
- Express API → Stripe webhooks: routes webhook (evidence: `server/server.js`)
- User services → JWT guard: protects data (evidence: `server/routes/userRoutes.js`)
- Chat services → JWT guard: protects routes (evidence: `server/routes/chatRoutes.js`)
- Message generation → JWT guard: protects routes (evidence: `server/routes/messageRoutes.js`)
- Credit services → JWT guard: protects routes (evidence: `server/routes/creditRoutes.js`)
- JWT guard → User records: loads user (evidence: `server/middlewares/auth.js`)
- User services → User records: reads and writes (evidence: `server/controllers/userController.js`)
- User services → Chat records: queries gallery (evidence: `server/controllers/userController.js`)
- Chat services → Chat records: manages chats (evidence: `server/controllers/chatController.js`)
- Message generation → Chat records: reads and saves (evidence: `server/controllers/messageController.js`)
- Message generation → User records: updates credits (evidence: `server/controllers/messageController.js`)
- Message generation → Gemini: requests text (evidence: `server/controllers/messageController.js`)
- Message generation → Pollinations AI: requests image (evidence: `README.md`)
- Message generation → ImageKit hosting: uploads image (evidence: `server/controllers/messageController.js`)
- Credit services → Transactions: creates transaction (evidence: `server/controllers/creditController.js`)
- Credit services → Stripe: creates checkout (evidence: `server/controllers/creditController.js`)
- Credit services → Stripe: verifies payment (evidence: `server/controllers/creditController.js`)
- Credit services → User records: adds credits (evidence: `server/controllers/creditController.js`)
- Stripe webhooks → Stripe: receives events (evidence: `README.md`)
- Stripe webhooks → Transactions: updates transaction (evidence: `server/controllers/webhooks.js`)
- Stripe webhooks → User records: updates credits (evidence: `server/controllers/webhooks.js`)
- Database connection → MongoDB: connects (evidence: `README.md`)