How mohitxy0092/code-editor works
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: page.tsx Playground page · route.ts GitHub import API · db.ts Prisma database · path-to-json.ts Template structure
Components 23
Accounts & projects
- Sign-in form
modules/auth/components/sign-in-form-client.tsx - Authentication
auth.ts - Project dashboard
app/dashboard/page.tsx - Project actions
modules/dashboard/actions/index.ts - Project list
modules/dashboard/components/project-table.tsx - Prisma database
lib/db.ts
Coding workspace
- Playground page
app/playground/[id]/page.tsx - Playground state
modules/playground/hooks/usePlayground.tsx - File explorer state
modules/playground/hooks/useFileExplorer.tsx - File explorer UI
modules/playground/components/playground-explorer.tsx - Code editor
modules/playground/components/playground-editor.tsx - AI suggestions
modules/playground/hooks/useAISuggestion.tsx - Template structure
modules/playground/lib/path-to-json.ts
Preview runtime
- WebContainer setup
modules/webcontainers/hooks/useWebContainer.ts - Preview runner
modules/webcontainers/components/webcontainer-preview.tsx - Runtime transformer
modules/webcontainers/hooks/transformer.ts - Terminal
modules/webcontainers/components/terminal.tsx
Import & AI services
- GitHub import API
app/api/github/import/route.ts - Chat API
app/api/chat/route.ts - Completion API
app/api/code-completion/route.ts - Starter projects
vibecode-starters
Other components
- User
- GitHub
Connections 23
- User → Sign-in form: chooses sign-in
modules/auth/components/sign-in-form-client.tsx - Sign-in form → Authentication: calls signIn
modules/auth/components/sign-in-form-client.tsx - Authentication → Prisma database: uses Prisma
auth.ts - Project dashboard → Project actions: loads projects
app/dashboard/page.tsx - Project dashboard → Project list: renders list
app/dashboard/page.tsx - Project actions → Prisma database: reads and writes
modules/dashboard/actions/index.ts - Playground page → Playground state: loads workspace
app/playground/[id]/page.tsx - Playground page → File explorer state: manages files
app/playground/[id]/page.tsx - Playground page → File explorer UI: renders tree
app/playground/[id]/page.tsx - Playground page → Code editor: renders editor
app/playground/[id]/page.tsx - Playground page → Preview runner: renders preview
app/playground/[id]/page.tsx - Playground page → AI suggestions: loads suggestions
app/playground/[id]/page.tsx - Playground state → Template structure: uses structure
modules/playground/hooks/usePlayground.tsx - Playground state → Prisma database: persists workspace
- File explorer state → Template structure: uses structure
modules/playground/hooks/useFileExplorer.tsx - Code editor → Template structure: uses file paths
modules/playground/components/playground-editor.tsx - Playground page → WebContainer setup: sets up runtime
app/playground/[id]/page.tsx - Preview runner → Runtime transformer: transforms files
modules/webcontainers/components/webcontainer-preview.tsx - Preview runner → Terminal: renders terminal
modules/webcontainers/components/webcontainer-preview.tsx - GitHub import API → GitHub: fetches repository
app/api/github/import/route.ts - GitHub import API → Authentication: checks user
app/api/github/import/route.ts - GitHub import API → Prisma database: creates project
app/api/github/import/route.ts - GitHub import API → Template structure: stores file tree
app/api/github/import/route.ts