# mohitxy0092/code-editor architecture

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

## Overview

This is a browser-based coding playground: users can sign in, work with project files in an editor, and run projects in an embedded WebContainer preview. The surrounding product includes a project dashboard, GitHub repository import, starter templates, and AI chat/code-completion endpoints. The graph emphasizes the editor-to-preview workflow and the evidenced authentication, persistence, and import paths. Several API and UI modules are indexed but not excerpted, so their internal connections are omitted rather than inferred.

Main entry points: [`app/playground/[id]/page.tsx`](https://github.com/mohitxy0092/code-editor/blob/master/app/playground/%5Bid%5D/page.tsx) (Playground page), [`app/api/github/import/route.ts`](https://github.com/mohitxy0092/code-editor/blob/master/app/api/github/import/route.ts) (GitHub import API), [`lib/db.ts`](https://github.com/mohitxy0092/code-editor/blob/master/lib/db.ts) (Prisma database), [`modules/playground/lib/path-to-json.ts`](https://github.com/mohitxy0092/code-editor/blob/master/modules/playground/lib/path-to-json.ts) (Template structure)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_accounts["Accounts & projects"]
  node_signin["Sign-in form"]
  node_auth["Authentication<br/>[auth.ts]"]
  node_dashboard["Project dashboard<br/>[page.tsx]"]
  node_projectactions["Project actions<br/>[index.ts]"]
  node_projects["Project list<br/>[project-table.tsx]"]
  node_database[("Prisma database<br/>[db.ts]")]
end

subgraph group_workspace["Coding workspace"]
  node_playground["Playground page<br/>[page.tsx]"]
  node_playgroundstate["Playground state<br/>[usePlayground.tsx]"]
  node_filestate["File explorer state"]
  node_filetree["File explorer UI"]
  node_editor["Code editor"]
  node_aisuggest["AI suggestions"]
  node_templateformat["Template structure<br/>[path-to-json.ts]"]
end

subgraph group_runtime["Preview runtime"]
  node_webcontainer["WebContainer setup<br/>[useWebContainer.ts]"]
  node_preview["Preview runner"]
  node_transformer["Runtime transformer<br/>[transformer.ts]"]
  node_terminal["Terminal<br/>[terminal.tsx]"]
end

subgraph group_services["Import &amp; AI services"]
  node_githubimport["GitHub import API<br/>[route.ts]"]
  node_chatapi["Chat API<br/>[route.ts]"]
  node_completionapi["Completion API<br/>[route.ts]"]
  node_starters["Starter projects"]
end

node_user(("User"))
node_github{{"GitHub"}}

node_user -->|"chooses sign-in"| node_signin
node_signin -->|"calls signIn"| node_auth
node_auth -->|"uses Prisma"| node_database
node_dashboard -->|"loads projects"| node_projectactions
node_dashboard -->|"renders list"| node_projects
node_projectactions -->|"reads and writes"| node_database
node_playground -->|"loads workspace"| node_playgroundstate
node_playground -->|"manages files"| node_filestate
node_playground -->|"renders tree"| node_filetree
node_playground -->|"renders editor"| node_editor
node_playground -->|"renders preview"| node_preview
node_playground -->|"loads suggestions"| node_aisuggest
node_playgroundstate -->|"uses structure"| node_templateformat
node_playgroundstate -.->|"persists workspace"| node_database
node_filestate -->|"uses structure"| node_templateformat
node_editor -->|"uses file paths"| node_templateformat
node_playground -.->|"sets up runtime"| node_webcontainer
node_preview -->|"transforms files"| node_transformer
node_preview -->|"renders terminal"| node_terminal
node_githubimport -->|"fetches repository"| node_github
node_githubimport -->|"checks user"| node_auth
node_githubimport -->|"creates project"| node_database
node_githubimport -->|"stores file tree"| node_templateformat

click node_signin "https://github.com/mohitxy0092/code-editor/blob/master/modules/auth/components/sign-in-form-client.tsx"
click node_auth "https://github.com/mohitxy0092/code-editor/blob/master/auth.ts"
click node_dashboard "https://github.com/mohitxy0092/code-editor/blob/master/app/dashboard/page.tsx"
click node_projectactions "https://github.com/mohitxy0092/code-editor/blob/master/modules/dashboard/actions/index.ts"
click node_projects "https://github.com/mohitxy0092/code-editor/blob/master/modules/dashboard/components/project-table.tsx"
click node_database "https://github.com/mohitxy0092/code-editor/blob/master/lib/db.ts"
click node_playground "https://github.com/mohitxy0092/code-editor/blob/master/app/playground/%5Bid%5D/page.tsx"
click node_playgroundstate "https://github.com/mohitxy0092/code-editor/blob/master/modules/playground/hooks/usePlayground.tsx"
click node_filestate "https://github.com/mohitxy0092/code-editor/blob/master/modules/playground/hooks/useFileExplorer.tsx"
click node_filetree "https://github.com/mohitxy0092/code-editor/blob/master/modules/playground/components/playground-explorer.tsx"
click node_editor "https://github.com/mohitxy0092/code-editor/blob/master/modules/playground/components/playground-editor.tsx"
click node_aisuggest "https://github.com/mohitxy0092/code-editor/blob/master/modules/playground/hooks/useAISuggestion.tsx"
click node_templateformat "https://github.com/mohitxy0092/code-editor/blob/master/modules/playground/lib/path-to-json.ts"
click node_webcontainer "https://github.com/mohitxy0092/code-editor/blob/master/modules/webcontainers/hooks/useWebContainer.ts"
click node_preview "https://github.com/mohitxy0092/code-editor/blob/master/modules/webcontainers/components/webcontainer-preview.tsx"
click node_transformer "https://github.com/mohitxy0092/code-editor/blob/master/modules/webcontainers/hooks/transformer.ts"
click node_terminal "https://github.com/mohitxy0092/code-editor/blob/master/modules/webcontainers/components/terminal.tsx"
click node_githubimport "https://github.com/mohitxy0092/code-editor/blob/master/app/api/github/import/route.ts"
click node_chatapi "https://github.com/mohitxy0092/code-editor/blob/master/app/api/chat/route.ts"
click node_completionapi "https://github.com/mohitxy0092/code-editor/blob/master/app/api/code-completion/route.ts"
click node_starters "https://github.com/mohitxy0092/code-editor/tree/master/vibecode-starters"

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_signin,node_auth,node_dashboard,node_projectactions,node_projects,node_database,node_user toneBlue
class node_playground,node_playgroundstate,node_filestate,node_filetree,node_editor,node_aisuggest,node_templateformat toneAmber
class node_webcontainer,node_preview,node_transformer,node_terminal toneMint
class node_githubimport,node_chatapi,node_completionapi,node_starters toneRose
class node_github toneIndigo
```

## Components

### Accounts & projects

- [Sign-in form](https://github.com/mohitxy0092/code-editor/blob/master/modules/auth/components/sign-in-form-client.tsx): `modules/auth/components/sign-in-form-client.tsx`
- [Authentication](https://github.com/mohitxy0092/code-editor/blob/master/auth.ts): `auth.ts`
- [Project dashboard](https://github.com/mohitxy0092/code-editor/blob/master/app/dashboard/page.tsx): `app/dashboard/page.tsx`
- [Project actions](https://github.com/mohitxy0092/code-editor/blob/master/modules/dashboard/actions/index.ts): `modules/dashboard/actions/index.ts`
- [Project list](https://github.com/mohitxy0092/code-editor/blob/master/modules/dashboard/components/project-table.tsx): `modules/dashboard/components/project-table.tsx`
- [Prisma database](https://github.com/mohitxy0092/code-editor/blob/master/lib/db.ts): `lib/db.ts`

### Coding workspace

- [Playground page](https://github.com/mohitxy0092/code-editor/blob/master/app/playground/%5Bid%5D/page.tsx): `app/playground/[id]/page.tsx`
- [Playground state](https://github.com/mohitxy0092/code-editor/blob/master/modules/playground/hooks/usePlayground.tsx): `modules/playground/hooks/usePlayground.tsx`
- [File explorer state](https://github.com/mohitxy0092/code-editor/blob/master/modules/playground/hooks/useFileExplorer.tsx): `modules/playground/hooks/useFileExplorer.tsx`
- [File explorer UI](https://github.com/mohitxy0092/code-editor/blob/master/modules/playground/components/playground-explorer.tsx): `modules/playground/components/playground-explorer.tsx`
- [Code editor](https://github.com/mohitxy0092/code-editor/blob/master/modules/playground/components/playground-editor.tsx): `modules/playground/components/playground-editor.tsx`
- [AI suggestions](https://github.com/mohitxy0092/code-editor/blob/master/modules/playground/hooks/useAISuggestion.tsx): `modules/playground/hooks/useAISuggestion.tsx`
- [Template structure](https://github.com/mohitxy0092/code-editor/blob/master/modules/playground/lib/path-to-json.ts): `modules/playground/lib/path-to-json.ts`

### Preview runtime

- [WebContainer setup](https://github.com/mohitxy0092/code-editor/blob/master/modules/webcontainers/hooks/useWebContainer.ts): `modules/webcontainers/hooks/useWebContainer.ts`
- [Preview runner](https://github.com/mohitxy0092/code-editor/blob/master/modules/webcontainers/components/webcontainer-preview.tsx): `modules/webcontainers/components/webcontainer-preview.tsx`
- [Runtime transformer](https://github.com/mohitxy0092/code-editor/blob/master/modules/webcontainers/hooks/transformer.ts): `modules/webcontainers/hooks/transformer.ts`
- [Terminal](https://github.com/mohitxy0092/code-editor/blob/master/modules/webcontainers/components/terminal.tsx): `modules/webcontainers/components/terminal.tsx`

### Import & AI services

- [GitHub import API](https://github.com/mohitxy0092/code-editor/blob/master/app/api/github/import/route.ts): `app/api/github/import/route.ts`
- [Chat API](https://github.com/mohitxy0092/code-editor/blob/master/app/api/chat/route.ts): `app/api/chat/route.ts`
- [Completion API](https://github.com/mohitxy0092/code-editor/blob/master/app/api/code-completion/route.ts): `app/api/code-completion/route.ts`
- [Starter projects](https://github.com/mohitxy0092/code-editor/tree/master/vibecode-starters): `vibecode-starters`

### Other components

- **User**
- **GitHub**

## Connections

- User → Sign-in form: chooses sign-in (evidence: `modules/auth/components/sign-in-form-client.tsx`)
- Sign-in form → Authentication: calls signIn (evidence: `modules/auth/components/sign-in-form-client.tsx`)
- Authentication → Prisma database: uses Prisma (evidence: `auth.ts`)
- Project dashboard → Project actions: loads projects (evidence: `app/dashboard/page.tsx`)
- Project dashboard → Project list: renders list (evidence: `app/dashboard/page.tsx`)
- Project actions → Prisma database: reads and writes (evidence: `modules/dashboard/actions/index.ts`)
- Playground page → Playground state: loads workspace (evidence: `app/playground/[id]/page.tsx`)
- Playground page → File explorer state: manages files (evidence: `app/playground/[id]/page.tsx`)
- Playground page → File explorer UI: renders tree (evidence: `app/playground/[id]/page.tsx`)
- Playground page → Code editor: renders editor (evidence: `app/playground/[id]/page.tsx`)
- Playground page → Preview runner: renders preview (evidence: `app/playground/[id]/page.tsx`)
- Playground page → AI suggestions: loads suggestions (evidence: `app/playground/[id]/page.tsx`)
- Playground state → Template structure: uses structure (evidence: `modules/playground/hooks/usePlayground.tsx`)
- Playground state → Prisma database: persists workspace
- File explorer state → Template structure: uses structure (evidence: `modules/playground/hooks/useFileExplorer.tsx`)
- Code editor → Template structure: uses file paths (evidence: `modules/playground/components/playground-editor.tsx`)
- Playground page → WebContainer setup: sets up runtime (evidence: `app/playground/[id]/page.tsx`)
- Preview runner → Runtime transformer: transforms files (evidence: `modules/webcontainers/components/webcontainer-preview.tsx`)
- Preview runner → Terminal: renders terminal (evidence: `modules/webcontainers/components/webcontainer-preview.tsx`)
- GitHub import API → GitHub: fetches repository (evidence: `app/api/github/import/route.ts`)
- GitHub import API → Authentication: checks user (evidence: `app/api/github/import/route.ts`)
- GitHub import API → Prisma database: creates project (evidence: `app/api/github/import/route.ts`)
- GitHub import API → Template structure: stores file tree (evidence: `app/api/github/import/route.ts`)