# yaserarfath320/forge architecture

> Architecture diagram of the GitHub repository yaserarfath320/forge, 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/yaserarfath320/forge
- Repository: https://github.com/yaserarfath320/forge

## Overview

BuildAI is an AI app-building SaaS. Users describe an app, generate code, preview and refine it, then manage or export projects; accounts, plans, and credits govern usage. The graph follows the sampled workspace-to-API flow and preserves README-documented capabilities such as Sandpack preview, ZIP export, image uploads, and subscriptions. Some implementation details—especially upload and export wiring—were not excerpted, so those links are omitted or marked unverified rather than inferred.

Main entry points: [`components/workspaceClient.tsx`](https://github.com/yaserarfath320/forge/blob/master/components/workspaceClient.tsx) (Workspace controller), [`app/api/gen-ai-code/route.ts`](https://github.com/yaserarfath320/forge/blob/master/app/api/gen-ai-code/route.ts) (Code generation API), [`app/(main)/projects/page.tsx`](https://github.com/yaserarfath320/forge/blob/master/app/(main)/projects/page.tsx) (Projects dashboard), [`components/CodePanel.tsx`](https://github.com/yaserarfath320/forge/blob/master/components/CodePanel.tsx) (Preview and export)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Product experience"]
  node_landing["Prompt landing<br/>[page.tsx]"]
  node_projects_page["Projects dashboard<br/>[page.tsx]"]
  node_project_card["Project card<br/>[ProjectCard.tsx]"]
end

subgraph group_workspace["Workspace workflow"]
  node_workspace_page["Workspace route<br/>[page.tsx]"]
  node_workspace_client["Workspace controller"]
  node_chat["Chat and uploads<br/>[ChatPanel.tsx]"]
  node_code["Preview and export<br/>[CodePanel.tsx]"]
end

subgraph group_services["AI and persistence"]
  node_generation["Code generation API<br/>[route.ts]"]
  node_improvement["AI improvement API<br/>[route.ts]"]
  node_database[("PostgreSQL data<br/>[prisma.ts]")]
  node_project_actions["Project operations<br/>[projects.tsx]"]
end

subgraph group_accounts["Accounts and plans"]
  node_auth["Sign-in and sign-up<br/>[page.tsx]"]
  node_header["Account and plan header<br/>[Header.tsx]"]
  node_pricing["Subscription modal<br/>[PricingModal.tsx]"]
end

node_user(("Builder"))
node_gemini{{"Gemini model"}}
node_cline{{"Cline agent"}}
node_arcjet{{"Arcjet protection"}}
node_clerk{{"Clerk identity and billing"}}
node_supabase[("Supabase Storage")]

node_user -->|"describes app"| node_landing
node_landing -.->|"requires sign-in"| node_auth
node_user -.->|"opens workspace"| node_workspace_page
node_workspace_page -->|"renders"| node_workspace_client
node_workspace_client -->|"renders"| node_chat
node_workspace_client -->|"renders"| node_code
node_workspace_client -->|"requests generation"| node_generation
node_generation -->|"streams completion"| node_gemini
node_generation -->|"checks request"| node_arcjet
node_generation -->|"saves workspace and credits"| node_database
node_workspace_client -->|"requests improvements"| node_improvement
node_improvement -->|"runs agent"| node_cline
node_improvement -->|"saves files and deducts credits"| node_database
node_code -.->|"previews app"| node_user
node_code -.->|"exports ZIP"| node_user
node_chat -.->|"uploads images"| node_supabase
node_user -->|"manages projects"| node_projects_page
node_projects_page -->|"loads and deletes"| node_project_actions
node_project_actions -->|"reads and deletes"| node_database
node_projects_page -->|"renders cards"| node_project_card
node_user -.->|"opens account controls"| node_header
node_header -->|"opens plans"| node_pricing
node_pricing -->|"shows billing options"| node_clerk

click node_landing "https://github.com/yaserarfath320/forge/blob/master/app/page.tsx"
click node_auth "https://github.com/yaserarfath320/forge/blob/master/app/(auth)/sign-in/%5B%5B...sign-in%5D%5D/page.tsx"
click node_workspace_page "https://github.com/yaserarfath320/forge/blob/master/app/(main)/workspace/page.tsx"
click node_workspace_client "https://github.com/yaserarfath320/forge/blob/master/components/workspaceClient.tsx"
click node_chat "https://github.com/yaserarfath320/forge/blob/master/components/ChatPanel.tsx"
click node_code "https://github.com/yaserarfath320/forge/blob/master/components/CodePanel.tsx"
click node_generation "https://github.com/yaserarfath320/forge/blob/master/app/api/gen-ai-code/route.ts"
click node_improvement "https://github.com/yaserarfath320/forge/blob/master/app/api/improve/route.ts"
click node_database "https://github.com/yaserarfath320/forge/blob/master/lib/prisma.ts"
click node_projects_page "https://github.com/yaserarfath320/forge/blob/master/app/(main)/projects/page.tsx"
click node_project_actions "https://github.com/yaserarfath320/forge/blob/master/actions/projects.tsx"
click node_project_card "https://github.com/yaserarfath320/forge/blob/master/components/ProjectCard.tsx"
click node_header "https://github.com/yaserarfath320/forge/blob/master/components/ui/Header.tsx"
click node_pricing "https://github.com/yaserarfath320/forge/blob/master/components/PricingModal.tsx"

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_landing,node_projects_page,node_project_card toneBlue
class node_workspace_page,node_workspace_client,node_chat,node_code,node_supabase toneAmber
class node_generation,node_improvement,node_database,node_project_actions toneMint
class node_auth,node_header,node_pricing toneRose
class node_user,node_gemini,node_cline,node_arcjet,node_clerk toneIndigo
```

## Components

### Product experience

- [Prompt landing](https://github.com/yaserarfath320/forge/blob/master/app/page.tsx): `app/page.tsx`
- [Projects dashboard](https://github.com/yaserarfath320/forge/blob/master/app/(main)/projects/page.tsx): `app/(main)/projects/page.tsx`
- [Project card](https://github.com/yaserarfath320/forge/blob/master/components/ProjectCard.tsx): `components/ProjectCard.tsx`

### Workspace workflow

- [Workspace route](https://github.com/yaserarfath320/forge/blob/master/app/(main)/workspace/page.tsx): `app/(main)/workspace/page.tsx`
- [Workspace controller](https://github.com/yaserarfath320/forge/blob/master/components/workspaceClient.tsx): `components/workspaceClient.tsx`
- [Chat and uploads](https://github.com/yaserarfath320/forge/blob/master/components/ChatPanel.tsx): `components/ChatPanel.tsx`
- [Preview and export](https://github.com/yaserarfath320/forge/blob/master/components/CodePanel.tsx): `components/CodePanel.tsx`

### AI and persistence

- [Code generation API](https://github.com/yaserarfath320/forge/blob/master/app/api/gen-ai-code/route.ts): `app/api/gen-ai-code/route.ts`
- [AI improvement API](https://github.com/yaserarfath320/forge/blob/master/app/api/improve/route.ts): `app/api/improve/route.ts`
- [PostgreSQL data](https://github.com/yaserarfath320/forge/blob/master/lib/prisma.ts): `lib/prisma.ts`
- [Project operations](https://github.com/yaserarfath320/forge/blob/master/actions/projects.tsx): `actions/projects.tsx`

### Accounts and plans

- [Sign-in and sign-up](https://github.com/yaserarfath320/forge/blob/master/app/(auth)/sign-in/%5B%5B...sign-in%5D%5D/page.tsx): `app/(auth)/sign-in/[[...sign-in]]/page.tsx`
- [Account and plan header](https://github.com/yaserarfath320/forge/blob/master/components/ui/Header.tsx): `components/ui/Header.tsx`
- [Subscription modal](https://github.com/yaserarfath320/forge/blob/master/components/PricingModal.tsx): `components/PricingModal.tsx`

### Other components

- **Builder**
- **Gemini model**
- **Cline agent**
- **Arcjet protection**
- **Clerk identity and billing**
- **Supabase Storage**

## Connections

- Builder → Prompt landing: describes app (evidence: `app/page.tsx`)
- Prompt landing → Sign-in and sign-up: requires sign-in (evidence: `app/page.tsx`)
- Builder → Workspace route: opens workspace (evidence: `app/(main)/workspace/page.tsx`)
- Workspace route → Workspace controller: renders (evidence: `app/(main)/workspace/page.tsx`)
- Workspace controller → Chat and uploads: renders (evidence: `components/workspaceClient.tsx`)
- Workspace controller → Preview and export: renders (evidence: `components/workspaceClient.tsx`)
- Workspace controller → Code generation API: requests generation (evidence: `components/workspaceClient.tsx`)
- Code generation API → Gemini model: streams completion (evidence: `app/api/gen-ai-code/route.ts`)
- Code generation API → Arcjet protection: checks request (evidence: `app/api/gen-ai-code/route.ts`)
- Code generation API → PostgreSQL data: saves workspace and credits (evidence: `app/api/gen-ai-code/route.ts`)
- Workspace controller → AI improvement API: requests improvements (evidence: `components/workspaceClient.tsx`)
- AI improvement API → Cline agent: runs agent (evidence: `app/api/improve/route.ts`)
- AI improvement API → PostgreSQL data: saves files and deducts credits (evidence: `app/api/improve/route.ts`)
- Preview and export → Builder: previews app (evidence: `README.md`)
- Preview and export → Builder: exports ZIP (evidence: `README.md`)
- Chat and uploads → Supabase Storage: uploads images
- Builder → Projects dashboard: manages projects (evidence: `app/(main)/projects/page.tsx`)
- Projects dashboard → Project operations: loads and deletes (evidence: `app/(main)/projects/page.tsx`)
- Project operations → PostgreSQL data: reads and deletes (evidence: `actions/projects.tsx`)
- Projects dashboard → Project card: renders cards (evidence: `app/(main)/projects/page.tsx`)
- Builder → Account and plan header: opens account controls (evidence: `components/ui/Header.tsx`)
- Account and plan header → Subscription modal: opens plans (evidence: `components/ui/Header.tsx`)
- Subscription modal → Clerk identity and billing: shows billing options (evidence: `components/PricingModal.tsx`)