# its-ansh-jha/infonexvibecode architecture

> Architecture diagram of the GitHub repository its-ansh-jha/infonexvibecode, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-23). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/its-ansh-jha/infonexvibecode
- Repository: https://github.com/its-ansh-jha/infonexvibecode

## Overview

1. **Overall shape**
   - This repo is a full-stack TypeScript app with a clear split between a React/Vite frontend (`client/`) and an Express backend (`server/`).
   - The main product is an AI-driven app-building workspace: users chat with an agent, create projects, edit files, run code, preview apps, and manage billing.

2. **Frontend shell and navigation**
   - The client is a single-page React app (`client/src/main.tsx`, `App.tsx`) using Wouter routing, TanStack Query, and a large set of Shadcn UI components.
   - The UI is organized around workspace-style pages such as chat, projects, files, terminal, preview, create, features, login, and billing.
   - Layout is responsive: desktop sidebar plus mobile bottom navigation, with theme state handled by `ThemeContext`.

3. **Workspace interaction model**
   - The main user flow is: authenticate → choose or create a project → interact in chat → inspect files/terminal/preview.
   - `ChatPage`, `FilesPage`, `TerminalPage`, and `PreviewPage` form the core operational surface of the product.
   - Hooks like `useAuth`, `usePlan`, and `useAgentBusy` coordinate UI state with backend capabilities and plan limits.

4. **Backend API boundary**
   - The server is an Express app (`server/index.ts`, `server/routes.ts`) that exposes the app’s API and also serves SSR SEO pages and Vite assets.
   - `server/middleware/auth.ts` protects authenticated routes.
   - The backend owns business logic for projects, chat streaming, file storage, billing, and AI/tool orchestration.

5. **Data model and persistence**
   - PostgreSQL is the primary database, accessed through Drizzle (`drizzle.config.ts`, `shared/schema.ts`, `server/db.ts`).
   - `shared/schema.ts` acts as the contract between client and server for core entities such as plans, subscriptions, payments, projects, and messages.
   - The `shared/models/` folder suggests additional shared domain types for chat workflows.

6. **Authentication and identity**
   - Firebase Authentication is used on the client, with server-side verification through `server/lib/firebaseAdmin.ts`.
   - The auth boundary is important: the frontend handles sign-in UX, while the backend trusts only verified Firebase identity tokens for protected API access.
   - This separation keeps user sessions and data access consistent across chat, projects, billing, and file operations.

7. **AI agent and tool orchestration**
   - The backend integrates with Replit AI / Anthropic via `server/lib/gemini.ts` and related AI tooling, using structured tool calls rather than free-form JSON parsing.
   - The agent can call tools for file operations, shell execution, code analysis, search, verification, and project scaffolding.
   - `server/mcp/server.ts` indicates an MCP-compatible tool server layer, which is likely how the AI agent gets access to repo-aware actions.

8. **Code execution and live development**
   - Code runs in isolated E2B sandboxes (`server/lib/e2b.ts`) rather than on the host machine.
   - The platform supports long-running processes, interactive terminal behavior, heartbeat keep-alives, and live preview/hot reload flows.
   - This is the main execution boundary: the backend controls sandbox lifecycle, while the client only sees terminal output, preview results, and status.

9. **Project/file storage and binary assets**
   - Source files are stored in PostgreSQL now; the repo includes a migration path from S3 (`server/lib/migrateS3ToDb.ts`).
   - S3 is retained only for binary uploads like images or attachments (`server/lib/s3.ts`), served back through authenticated routes.
   - `server/lib/envFile.ts`, `boilerplate.ts`, `parseTools.ts`, and `secretsRequests.ts` support project setup, config parsing, and secret handling.

10. **Billing and plan enforcement**
   - Freemium billing is backed by Cashfree (`server/lib/cashfree.ts`) and persisted in `subscriptions` and `payments` tables.
   - Plan limits are enforced server-side before AI usage and project creation, not just in the UI.
   - The client billing page shows quotas, usage, and payment history; the chat UX also surfaces upgrade prompts when credits are exhausted.

11. **SEO and public marketing pages**
   - The server renders SEO-friendly pages for bots via `server/seo/*` and `server/seo/ssrShell.ts`.
   - Public content includes landing, about, glossary, and guides, plus `robots.txt` and `sitemap.xml`.
   - Regular users still get the React app, so this is a hybrid SSR-for-bots / SPA-for-users setup.

12. **Supporting integrations and utilities**
   - `server/lib/serper.ts` adds web search, while `server/lib/bedrock.ts` and `server/lib/gemini.ts` suggest multiple AI provider adapters or helper layers.
   - `server/lib/viteConfigSync.ts` and `server/templates/` support generated projects and environment alignment.
   - The `.agents/skills/mcp-builder/` folder is tooling for building or evaluating MCP skills, not part of the runtime product path, but it reinforces the repo’s tool-driven architecture.

13. **Key data flow to diagram**
   - Browser → authenticated React UI → Express API.
   - Express API → PostgreSQL for app state, Firebase Admin for auth verification, Cashfree for billing, E2B for execution, S3/local uploads for binaries, and AI/search services for agent actions.
   - AI loop → tool calls → file/terminal/project side effects → streamed back to client via SSE-style real-time responses.

14. **Important architectural boundary**
   - The system’s main trust boundary is the backend: it owns auth verification, credit checks, sandbox control, billing, and all writes.
   - The client is a thin interactive shell for workspace actions; it does not directly manipulate core data stores or execution environments.

Main entry points: [`server/routes.ts`](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/routes.ts) (Routes), [`server/replit_integrations/chat`](https://github.com/its-ansh-jha/infonexvibecode/tree/main/server/replit_integrations/chat) (Chat workflow), [`client/src/main.tsx`](https://github.com/its-ansh-jha/infonexvibecode/blob/main/client/src/main.tsx) (App shell), [`server/index.ts`](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/index.ts) (API server)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client"]
  node_client_main["App shell<br/>React/Vite SPA<br/>[main.tsx]"]
  node_client_pages["Workspace pages<br/>React pages"]
  node_client_shell["Nav chrome<br/>UI layout"]
  node_client_state["Client state<br/>Contexts/hooks"]
end

subgraph group_server["Server"]
  node_server_entry["API server<br/>Express app<br/>[index.ts]"]
  node_server_routes["Routes<br/>[routes.ts]"]
  node_server_auth["Auth guard<br/>Middleware<br/>[auth.ts]"]
  node_server_db[("Postgres<br/>Drizzle DB<br/>[db.ts]")]
  node_server_chat["Chat workflow<br/>Agent orchestration"]
  node_server_storage["Project storage<br/>Storage layer<br/>[storage.ts]"]
  node_server_billing["Billing<br/>Plan enforcement<br/>[cashfree.ts]"]
  node_server_execution["Sandbox runtime<br/>E2B execution<br/>[e2b.ts]"]
  node_server_ai["AI adapters<br/>LLM tooling<br/>[gemini.ts]"]
  node_server_seo["SEO pages<br/>SSR content<br/>[ssrShell.ts]"]
  node_server_mcp["MCP server<br/>Tool server<br/>[server.ts]"]
end

subgraph group_shared["Shared"]
  node_shared_schema["Data schema<br/>Shared contract<br/>[schema.ts]"]
  node_shared_models["Chat models<br/>Shared types<br/>[chat.ts]"]
end

subgraph group_integrations["Integrations"]
  node_client_firebase["Firebase client<br/>Auth client<br/>[firebase.ts]"]
  node_server_search["Search tools<br/>Web search<br/>[serper.ts]"]
  node_server_authn["Firebase Admin<br/>Auth verification<br/>[firebaseAdmin.ts]"]
  node_server_uploads["Binary assets<br/>S3 storage<br/>[s3.ts]"]
  node_server_cashfree["Cashfree<br/>Payments gateway<br/>[cashfree.ts]"]
end

node_client_main -->|"routes to"| node_client_pages
node_client_main -->|"composes"| node_client_shell
node_client_main -->|"wraps with"| node_client_state
node_client_state -->|"uses"| node_client_firebase
node_client_pages -->|"calls API"| node_server_routes
node_server_entry -->|"mounts"| node_server_routes
node_server_routes -->|"protects"| node_server_auth
node_server_routes -->|"reads/writes"| node_server_db
node_server_routes -->|"uses contract"| node_shared_schema
node_server_routes -->|"uses"| node_shared_models
node_server_routes -->|"streams"| node_server_chat
node_server_routes -->|"manages"| node_server_storage
node_server_routes -->|"enforces"| node_server_billing
node_server_chat -->|"invokes"| node_server_ai
node_server_chat -->|"runs code in"| node_server_execution
node_server_chat -->|"mutates files"| node_server_storage
node_server_chat -->|"searches"| node_server_search
node_server_chat -->|"exposes tools"| node_server_mcp
node_server_auth -->|"verifies identity"| node_server_authn
node_server_storage -->|"stores binaries"| node_server_uploads
node_server_billing -->|"charges via"| node_server_cashfree
node_server_entry -->|"serves"| node_server_seo
node_server_entry -->|"serves SPA"| node_client_main

click node_client_main "https://github.com/its-ansh-jha/infonexvibecode/blob/main/client/src/main.tsx"
click node_client_pages "https://github.com/its-ansh-jha/infonexvibecode/tree/main/client/src/pages"
click node_client_shell "https://github.com/its-ansh-jha/infonexvibecode/tree/main/client/src/components"
click node_client_state "https://github.com/its-ansh-jha/infonexvibecode/tree/main/client/src/contexts"
click node_client_firebase "https://github.com/its-ansh-jha/infonexvibecode/blob/main/client/src/lib/firebase.ts"
click node_server_entry "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/index.ts"
click node_server_routes "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/routes.ts"
click node_server_auth "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/middleware/auth.ts"
click node_server_db "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/db.ts"
click node_shared_schema "https://github.com/its-ansh-jha/infonexvibecode/blob/main/shared/schema.ts"
click node_shared_models "https://github.com/its-ansh-jha/infonexvibecode/blob/main/shared/models/chat.ts"
click node_server_chat "https://github.com/its-ansh-jha/infonexvibecode/tree/main/server/replit_integrations/chat"
click node_server_storage "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/storage.ts"
click node_server_billing "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/cashfree.ts"
click node_server_execution "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/e2b.ts"
click node_server_ai "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/gemini.ts"
click node_server_search "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/serper.ts"
click node_server_authn "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/firebaseAdmin.ts"
click node_server_uploads "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/s3.ts"
click node_server_cashfree "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/cashfree.ts"
click node_server_seo "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/seo/ssrShell.ts"
click node_server_mcp "https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/mcp/server.ts"

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_client_main,node_client_pages,node_client_shell,node_client_state toneBlue
class node_server_entry,node_server_routes,node_server_auth,node_server_db,node_server_chat,node_server_storage,node_server_billing,node_server_execution,node_server_ai,node_server_seo,node_server_mcp toneAmber
class node_shared_schema,node_shared_models toneMint
class node_client_firebase,node_server_search,node_server_authn,node_server_uploads,node_server_cashfree toneRose
```

## Components

### Client

React/Vite workspace shell and pages

- [App shell](https://github.com/its-ansh-jha/infonexvibecode/blob/main/client/src/main.tsx): React/Vite SPA · Client entry, routing, and top-level composition · `client/src/main.tsx`
- [Workspace pages](https://github.com/its-ansh-jha/infonexvibecode/tree/main/client/src/pages): React pages · Chat, projects, files, terminal, preview, create, billing, login, and landing · `client/src/pages`
- [Nav chrome](https://github.com/its-ansh-jha/infonexvibecode/tree/main/client/src/components): UI layout · Sidebar, mobile navigation, and workspace framing · `client/src/components`
- [Client state](https://github.com/its-ansh-jha/infonexvibecode/tree/main/client/src/contexts): Contexts/hooks · Auth, theme, plan, busy-state, and query coordination · `client/src/contexts`

### Server

Express API, orchestration, SSR, and persistence

- [API server](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/index.ts): Express app · HTTP entrypoint, API hosting, and asset serving · `server/index.ts`
- [Routes](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/routes.ts): API routes · Main API surface and request dispatch · `server/routes.ts`
- [Auth guard](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/middleware/auth.ts): Middleware · Authenticated route protection and identity enforcement · `server/middleware/auth.ts`
- [Postgres](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/db.ts): Drizzle DB · Primary persistence for app state and workflow data · `server/db.ts`
- [Chat workflow](https://github.com/its-ansh-jha/infonexvibecode/tree/main/server/replit_integrations/chat): Agent orchestration · Streaming chat, tool calls, and workspace actions · `server/replit_integrations/chat`
- [Project storage](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/storage.ts): Storage layer · Project files, uploads, and persisted workspace state · `server/storage.ts`
- [Billing](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/cashfree.ts): Plan enforcement · Plans, subscriptions, payments, and quota checks · `server/lib/cashfree.ts`
- [Sandbox runtime](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/e2b.ts): E2B execution · Isolated code execution, terminals, and previews · `server/lib/e2b.ts`
- [AI adapters](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/gemini.ts): LLM tooling · Model access, tool parsing, and orchestration helpers · `server/lib/gemini.ts`
- [SEO pages](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/seo/ssrShell.ts): SSR content · Server-rendered marketing and discovery pages · `server/seo/ssrShell.ts`
- [MCP server](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/mcp/server.ts): Tool server · Structured tool surface for agent actions · `server/mcp/server.ts`

### Shared

Cross-boundary contracts and domain models

- [Data schema](https://github.com/its-ansh-jha/infonexvibecode/blob/main/shared/schema.ts): Shared contract · Core entities shared by client and server · `shared/schema.ts`
- [Chat models](https://github.com/its-ansh-jha/infonexvibecode/blob/main/shared/models/chat.ts): Shared types · Additional domain models for chat workflows · `shared/models/chat.ts`

### Integrations

External services and platform adapters

- [Firebase client](https://github.com/its-ansh-jha/infonexvibecode/blob/main/client/src/lib/firebase.ts): Auth client · Browser-side sign-in and identity handling · `client/src/lib/firebase.ts`
- [Search tools](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/serper.ts): Web search · External search integration for agent assistance · `server/lib/serper.ts`
- [Firebase Admin](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/firebaseAdmin.ts): Auth verification · Server-side token verification and trusted identity checks · `server/lib/firebaseAdmin.ts`
- [Binary assets](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/s3.ts): S3 storage · Binary uploads and attachment retrieval · `server/lib/s3.ts`
- [Cashfree](https://github.com/its-ansh-jha/infonexvibecode/blob/main/server/lib/cashfree.ts): Payments gateway · External billing provider for subscriptions and payments · `server/lib/cashfree.ts`

## Connections

- App shell → Workspace pages: routes to · SPA navigation selects workspace and public pages
- App shell → Nav chrome: composes · Top-level app renders navigation chrome
- App shell → Client state: wraps with · App provides auth, theme, and query state
- Client state → Firebase client: uses · Browser auth state comes from Firebase
- Workspace pages → Routes: calls API · Workspace pages fetch projects, chat, files, billing, and previews
- API server → Routes: mounts · Express entry delegates to route handlers
- Routes → Auth guard: protects · Authenticated endpoints verify access
- Routes → Postgres: reads/writes · Business state is persisted in Postgres
- Routes → Data schema: uses contract · API payloads align with shared entities
- Routes → Chat models: uses · Chat workflow types cross the boundary
- Routes → Chat workflow: streams · Chat endpoint drives agent interaction and tool execution
- Routes → Project storage: manages · Project files and uploads are handled by storage layer
- Routes → Billing: enforces · Plan checks and payment state gate premium actions
- Chat workflow → AI adapters: invokes · Agent orchestration uses model and tool helpers
- Chat workflow → Sandbox runtime: runs code in · Tool actions execute inside isolated sandboxes
- Chat workflow → Project storage: mutates files · Agent writes project files and state changes
- Chat workflow → Search tools: searches · Agent can augment responses with web search
- Chat workflow → MCP server: exposes tools · Tool server provides structured repo-aware actions
- Auth guard → Firebase Admin: verifies identity · Protected requests rely on server-side token checks
- Project storage → Binary assets: stores binaries · Images and attachments are kept in object storage
- Billing → Cashfree: charges via · Payments are processed through the billing gateway
- API server → SEO pages: serves · Bots receive SSR marketing and discovery pages
- API server → App shell: serves SPA · Users receive the React app and static assets