How prabhas-koppireddy/codecraft works
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: snippets.ts Snippet operations · useCodeEditorStore.ts Editor state · page.tsx User profile · ConvexClientProvider.tsx Auth and data provider
Components 23
Editor and execution
- Editor page
src/app/(root)/page.tsx - Editor controls
src/app/(root)/_components/EditorPanel.tsx - Editor options
src/app/(root)/_components/LanguageSelector.tsx - Editor state
src/store/useCodeEditorStore.ts - Run API
src/app/api/run/route.ts - Execution output
src/app/(root)/_components/OutputPanel.tsx - Language and themes
src/app/(root)/_constants/index.ts
Snippet community
- Snippet discovery
src/app/snippets/page.tsx - Snippet detail
src/app/snippets/[id]/page.tsx - Share snippet
src/app/(root)/_components/ShareSnippetDialog.tsx - Profile snippets
src/app/profile/page.tsx - Snippet operations
convex/snippets.ts
Accounts and activity
- User profile
src/app/profile/page.tsx - Execution history and stats
convex/codeExecutions.ts - User operations
convex/users.ts
Plans and billing
- Pricing page
src/app/pricing/page.tsx - Lemon Squeezy integration
convex/lemonSqueezy.ts
Application services
- Snippet data
convex/schema.ts - Auth and data provider
src/components/providers/ConvexClientProvider.tsx - Convex backend
Other components
- User
- OneCompiler
- Clerk identity
Connections 25
- 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