# prabhas-koppireddy/codecraft architecture

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

- Interactive diagram: https://gitdiagram.com/prabhas-koppireddy/codecraft
- Repository: https://github.com/prabhas-koppireddy/codecraft

## Overview

This is a browser-based, multi-language code editor with remote execution and a community snippet library. The main workflow is editing code, running it through the app’s API and OneCompiler, then viewing output; users can also save and browse snippets, comment and star them, and view profile activity. Pricing and Lemon Squeezy integration appear in the tree, but their runtime wiring is not shown in the sampled source. Some page and backend relationships are therefore omitted where the excerpts do not establish the calls.

Main entry points: [`convex/snippets.ts`](https://github.com/prabhas-koppireddy/codecraft/blob/main/convex/snippets.ts) (Snippet operations), [`src/store/useCodeEditorStore.ts`](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/store/useCodeEditorStore.ts) (Editor state), [`src/app/profile/page.tsx`](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/profile/page.tsx) (User profile), [`src/components/providers/ConvexClientProvider.tsx`](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/components/providers/ConvexClientProvider.tsx) (Auth and data provider)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Editor and execution"]
  node_editor_page["Editor page<br/>[page.tsx]"]
  node_editor_ui["Editor controls<br/>[EditorPanel.tsx]"]
  node_editor_options["Editor options"]
  node_editor_store["Editor state"]
  node_run_api["Run API<br/>[route.ts]"]
  node_output_ui["Execution output<br/>[OutputPanel.tsx]"]
  node_language_config["Language and themes<br/>[index.ts]"]
end

subgraph group_community["Snippet community"]
  node_snippets_page["Snippet discovery<br/>[page.tsx]"]
  node_snippet_detail["Snippet detail<br/>[page.tsx]"]
  node_snippet_editor["Share snippet"]
  node_snippet_profile["Profile snippets<br/>[page.tsx]"]
  node_snippet_service["Snippet operations<br/>[snippets.ts]"]
end

subgraph group_accounts["Accounts and activity"]
  node_profile_page["User profile<br/>[page.tsx]"]
  node_execution_service["Execution history and stats<br/>[codeExecutions.ts]"]
  node_user_service["User operations<br/>[users.ts]"]
end

subgraph group_commerce["Plans and billing"]
  node_pricing_page["Pricing page<br/>[page.tsx]"]
  node_billing_service["Lemon Squeezy integration<br/>[lemonSqueezy.ts]"]
end

subgraph group_platform["Application services"]
  node_snippet_store[("Snippet data<br/>[schema.ts]")]
  node_provider["Auth and data provider"]
  node_convex{{"Convex backend"}}
end

node_visitor(("User"))
node_compiler{{"OneCompiler"}}
node_identity{{"Clerk identity"}}

node_visitor -->|"opens"| node_editor_page
node_editor_page -->|"renders"| node_editor_ui
node_editor_ui -->|"reads and updates"| node_editor_store
node_editor_options -->|"sets language"| node_editor_store
node_editor_store -->|"uses defaults"| node_language_config
node_editor_store -->|"posts code"| node_run_api
node_run_api -->|"submits execution"| node_compiler
node_editor_store -->|"updates result state"| node_output_ui
node_visitor -->|"browses"| node_snippets_page
node_snippets_page -->|"queries snippets"| node_snippet_service
node_visitor -->|"opens snippet"| node_snippet_detail
node_snippet_detail -->|"queries and mutates"| node_snippet_service
node_visitor -->|"shares code"| node_snippet_editor
node_snippet_editor -->|"creates snippet"| node_snippet_service
node_snippet_service -->|"reads and writes"| node_snippet_store
node_visitor -->|"views profile"| node_profile_page
node_profile_page -->|"queries activity"| node_execution_service
node_profile_page -->|"queries starred snippets"| node_snippet_service
node_visitor -->|"views plans"| node_pricing_page
node_provider -->|"authenticates"| node_identity
node_provider -->|"provides client access"| node_convex
node_snippet_service -->|"runs functions"| node_convex
node_execution_service -->|"runs functions"| node_convex
node_user_service -->|"runs functions"| node_convex
node_billing_service -->|"runs functions"| node_convex

click node_editor_page "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/(root)/page.tsx"
click node_editor_ui "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/(root)/_components/EditorPanel.tsx"
click node_editor_options "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/(root)/_components/LanguageSelector.tsx"
click node_editor_store "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/store/useCodeEditorStore.ts"
click node_run_api "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/api/run/route.ts"
click node_output_ui "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/(root)/_components/OutputPanel.tsx"
click node_language_config "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/(root)/_constants/index.ts"
click node_snippets_page "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/snippets/page.tsx"
click node_snippet_detail "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/snippets/%5Bid%5D/page.tsx"
click node_snippet_editor "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/(root)/_components/ShareSnippetDialog.tsx"
click node_snippet_profile "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/profile/page.tsx"
click node_snippet_service "https://github.com/prabhas-koppireddy/codecraft/blob/main/convex/snippets.ts"
click node_snippet_store "https://github.com/prabhas-koppireddy/codecraft/blob/main/convex/schema.ts"
click node_provider "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/components/providers/ConvexClientProvider.tsx"
click node_profile_page "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/profile/page.tsx"
click node_execution_service "https://github.com/prabhas-koppireddy/codecraft/blob/main/convex/codeExecutions.ts"
click node_user_service "https://github.com/prabhas-koppireddy/codecraft/blob/main/convex/users.ts"
click node_pricing_page "https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/pricing/page.tsx"
click node_billing_service "https://github.com/prabhas-koppireddy/codecraft/blob/main/convex/lemonSqueezy.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_editor_page,node_editor_ui,node_editor_options,node_editor_store,node_run_api,node_output_ui,node_language_config,node_visitor toneBlue
class node_snippets_page,node_snippet_detail,node_snippet_editor,node_snippet_profile,node_snippet_service toneAmber
class node_profile_page,node_execution_service,node_user_service toneMint
class node_pricing_page,node_billing_service toneRose
class node_snippet_store,node_provider,node_convex,node_compiler,node_identity toneIndigo
```

## Components

### Editor and execution

- [Editor page](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/(root)/page.tsx): `src/app/(root)/page.tsx`
- [Editor controls](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/(root)/_components/EditorPanel.tsx): `src/app/(root)/_components/EditorPanel.tsx`
- [Editor options](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/(root)/_components/LanguageSelector.tsx): `src/app/(root)/_components/LanguageSelector.tsx`
- [Editor state](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/store/useCodeEditorStore.ts): `src/store/useCodeEditorStore.ts`
- [Run API](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/api/run/route.ts): `src/app/api/run/route.ts`
- [Execution output](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/(root)/_components/OutputPanel.tsx): `src/app/(root)/_components/OutputPanel.tsx`
- [Language and themes](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/(root)/_constants/index.ts): `src/app/(root)/_constants/index.ts`

### Snippet community

- [Snippet discovery](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/snippets/page.tsx): `src/app/snippets/page.tsx`
- [Snippet detail](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/snippets/%5Bid%5D/page.tsx): `src/app/snippets/[id]/page.tsx`
- [Share snippet](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/(root)/_components/ShareSnippetDialog.tsx): `src/app/(root)/_components/ShareSnippetDialog.tsx`
- [Profile snippets](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/profile/page.tsx): `src/app/profile/page.tsx`
- [Snippet operations](https://github.com/prabhas-koppireddy/codecraft/blob/main/convex/snippets.ts): `convex/snippets.ts`

### Accounts and activity

- [User profile](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/profile/page.tsx): `src/app/profile/page.tsx`
- [Execution history and stats](https://github.com/prabhas-koppireddy/codecraft/blob/main/convex/codeExecutions.ts): `convex/codeExecutions.ts`
- [User operations](https://github.com/prabhas-koppireddy/codecraft/blob/main/convex/users.ts): `convex/users.ts`

### Plans and billing

- [Pricing page](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/app/pricing/page.tsx): `src/app/pricing/page.tsx`
- [Lemon Squeezy integration](https://github.com/prabhas-koppireddy/codecraft/blob/main/convex/lemonSqueezy.ts): `convex/lemonSqueezy.ts`

### Application services

- [Snippet data](https://github.com/prabhas-koppireddy/codecraft/blob/main/convex/schema.ts): `convex/schema.ts`
- [Auth and data provider](https://github.com/prabhas-koppireddy/codecraft/blob/main/src/components/providers/ConvexClientProvider.tsx): `src/components/providers/ConvexClientProvider.tsx`
- **Convex backend**

### Other components

- **User**
- **OneCompiler**
- **Clerk identity**

## Connections

- User → Editor page: opens
- Editor page → Editor controls: renders
- Editor controls → Editor state: reads and updates
- Editor options → Editor state: sets language
- Editor state → Language and themes: uses defaults
- Editor state → Run API: posts code
- Run API → OneCompiler: submits execution
- Editor state → Execution output: updates result state
- User → Snippet discovery: browses
- Snippet discovery → Snippet operations: queries snippets
- User → Snippet detail: opens snippet
- Snippet detail → Snippet operations: queries and mutates
- User → Share snippet: shares code
- Share snippet → Snippet operations: creates snippet
- Snippet operations → Snippet data: reads and writes
- User → User profile: views profile
- User profile → Execution history and stats: queries activity
- User profile → Snippet operations: queries starred snippets
- User → Pricing page: views plans
- Auth and data provider → Clerk identity: authenticates
- Auth and data provider → Convex backend: provides client access
- Snippet operations → Convex backend: runs functions
- Execution history and stats → Convex backend: runs functions
- User operations → Convex backend: runs functions
- Lemon Squeezy integration → Convex backend: runs functions