How arnavgupta2021/quickgpt-rec works
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: App.jsx App routing · server.js Express API · messageController.js Message generation · AppContext.jsx App state
Components 26
Client experience
- App routing
client/src/App.jsx - App state
client/src/context/AppContext.jsx - Chat interface
client/src/components/ChatBox.jsx - Message view
client/src/components/Message.jsx - Chat sidebar
client/src/components/Sidebar.jsx - Login page
client/src/pages/Login.jsx - Credits page
client/src/pages/Credits.jsx - Community gallery
client/src/pages/Community.jsx - Payment loading
client/src/pages/Loading.jsx
API and identity
- Express API
server/server.js - User services
server/controllers/userController.js - JWT guard
server/middlewares/auth.js - Chat services
server/controllers/chatController.js
AI generation
- Message generation
server/controllers/messageController.js - Gemini
- Pollinations AI
- ImageKit hosting
Credits and billing
- Credit services
server/controllers/creditController.js - Stripe webhooks
server/controllers/webhooks.js - Stripe
Persistence
- User records
server/models/User.js - Chat records
server/models/Chat.js - Transactions
server/models/Transaction.js - Database connection
server/configs/db.js
Other components
- User
- MongoDB
Connections 43
- User → App routing: uses
client/src/App.jsx - App routing → Chat sidebar: renders
client/src/App.jsx - App routing → Chat interface: routes to
client/src/App.jsx - App routing → Credits page: routes to
client/src/App.jsx - App routing → Community gallery: routes to
client/src/App.jsx - App routing → Payment loading: shows
client/src/App.jsx - App routing → Login page: shows
client/src/App.jsx - App routing → App state: reads state
client/src/App.jsx - Chat interface → App state: uses state
client/src/components/ChatBox.jsx - Chat interface → Message view: renders
client/src/components/ChatBox.jsx - Chat sidebar → App state: uses state
client/src/components/Sidebar.jsx - Login page → App state: uses state
client/src/pages/Login.jsx - Credits page → App state: uses state
client/src/pages/Credits.jsx - Community gallery → App state: uses state
client/src/pages/Community.jsx - Payment loading → App state: uses state
client/src/pages/Loading.jsx - App state → Express API: calls API
client/src/context/AppContext.jsx - Express API → Database connection: connects
server/server.js - Express API → User services: routes requests
server/server.js - Express API → Chat services: routes requests
server/server.js - Express API → Message generation: routes requests
server/server.js - Express API → Credit services: routes requests
server/server.js - Express API → Stripe webhooks: routes webhook
server/server.js - User services → JWT guard: protects data
server/routes/userRoutes.js - Chat services → JWT guard: protects routes
server/routes/chatRoutes.js - Message generation → JWT guard: protects routes
server/routes/messageRoutes.js - Credit services → JWT guard: protects routes
server/routes/creditRoutes.js - JWT guard → User records: loads user
server/middlewares/auth.js - User services → User records: reads and writes
server/controllers/userController.js - User services → Chat records: queries gallery
server/controllers/userController.js - Chat services → Chat records: manages chats
server/controllers/chatController.js - Message generation → Chat records: reads and saves
server/controllers/messageController.js - Message generation → User records: updates credits
server/controllers/messageController.js - Message generation → Gemini: requests text
server/controllers/messageController.js - Message generation → Pollinations AI: requests image
README.md - Message generation → ImageKit hosting: uploads image
server/controllers/messageController.js - Credit services → Transactions: creates transaction
server/controllers/creditController.js - Credit services → Stripe: creates checkout
server/controllers/creditController.js - Credit services → Stripe: verifies payment
server/controllers/creditController.js - Credit services → User records: adds credits
server/controllers/creditController.js - Stripe webhooks → Stripe: receives events
README.md - Stripe webhooks → Transactions: updates transaction
server/controllers/webhooks.js - Stripe webhooks → User records: updates credits
server/controllers/webhooks.js - Database connection → MongoDB: connects
README.md