How sharveshc/codeflow works
Purpose and Entry Points
CodeFlow is a cloud coding environment: authenticated users edit, execute, organize, and AI-assist code snippets. The React/Vite client starts at src/main.tsx, composes routing and application shell in src/App.tsx, and exposes the primary workspace through src/pages/Editor.tsx.
Client Application and Routing
Page-level flows separate public landing/auth screens from the protected editor. Authentication state is provided globally, and access control gates editor routes.
• src/App.tsx
• src/contexts/AuthContext.tsx
• src/components/ProtectedRoute.tsx
Editor Workspace
The editor page coordinates code, language selection, execution, snippet selection, and editor preferences. Monaco-facing editing is isolated in the editor component; results are rendered separately in the output console.
• src/pages/Editor.tsx
• src/components/EditorComponent.tsx
• src/components/OutputConsole.tsx
Identity and User Boundary
Firebase Authentication supports email/password, Google sign-in, verification, and password-recovery views. The authenticated user identity is the boundary for private snippet ownership and protected navigation.
• src/components/Auth.tsx
• src/pages/Login.tsx
• src/integrations/firebase/client.ts
Snippet Persistence and Autosave
Snippet CRUD is centralized behind a client library and presented through the sidebar/list UI. Editor changes can be debounced and automatically persisted; duplicate handling and ownership safeguards belong to this persistence boundary. Firebase/Firestore rules and indexes are deployed alongside the application.
• src/lib/snippets.ts
• src/components/SnippetList.tsx
• src/hooks/useAutoSave.ts
• firestore.rules
Code Execution Boundary
Client code execution is delegated to an external Judge0 API, rather than running user code in the browser or repository infrastructure. The execution adapter handles submission/polling concerns and returns output for the workspace console.
• src/lib/piston.ts
• src/pages/Editor.tsx
• src/components/OutputConsole.tsx
AI Assistance Boundary
The chat widget sends requests to a configurable AI endpoint. A serverless handler protects the Google Generative AI key and brokers requests to Google’s model service; both root Vercel and alternate function-package layouts exist.
• src/components/AIChatWidget.tsx
• api/ai-chat.js
• vercel-api/api/ai-chat.js
Runtime and Deployment
The frontend is TypeScript/React 18 built by Vite, with Tailwind and shadcn/Radix-style UI components. Vercel is the intended production host for static delivery and serverless AI functions. Firebase supplies Authentication and Firestore; repository Firebase config also supports Firebase hosting/deployment artifacts.
• package.json
• vercel.json
• firebase.json
Main entry points: Editor.tsx Editor workspace · App.tsx App shell & routes · snippets.ts Snippet library · vercel.json Vercel hosting
Components 21
React client
- Client entry
src/main.tsx - App shell & routes · Separates public auth pages from protected workspace routes.
src/App.tsx - Auth state
src/contexts/AuthContext.tsx - Route guard
src/components/ProtectedRoute.tsx - Authentication UI · Email/password, Google sign-in, verification, and recovery flows.
src/components/Auth.tsx - Editor workspace · Coordinates code, language, snippets, execution, and preferences.
src/pages/Editor.tsx - Code editor
src/components/EditorComponent.tsx - Output console
src/components/OutputConsole.tsx - Snippet sidebar
src/components/SnippetList.tsx - Autosave
src/hooks/useAutoSave.ts - AI chat widget
src/components/AIChatWidget.tsx
Firebase services
- Snippet library · Centralizes CRUD, ownership safeguards, and duplicate handling.
src/lib/snippets.ts - Firebase client · Provides authenticated identity and Firestore access.
src/integrations/firebase/client.ts - Firestore access rules · Enforces private snippet ownership.
firestore.rules - Firebase deployment config
firebase.json
External APIs
- Judge0 adapter · Submits and polls external code execution.
src/lib/piston.ts - Judge0 API
- Google Generative AI
Deployment
- AI serverless handler · Brokers requests while keeping the Google AI key server-side.
api/ai-chat.js - Alternate AI handler · Alternative serverless handler layout.
vercel-api/api/ai-chat.js - Vercel hosting
vercel.json
Connections 26
- Client entry → App shell & routes: mounts
- App shell & routes → Auth state: provides identity
- App shell & routes → Route guard: guards editor route
- App shell & routes → Authentication UI: public auth flow
- Route guard → Editor workspace: permits authenticated users
- Auth state → Firebase client: authenticates through
- Authentication UI → Auth state: sign-in actions
- Editor workspace → Code editor: edits code
- Editor workspace → Output console: displays results
- Editor workspace → Snippet sidebar: selects snippets
- Editor workspace → Autosave: persists changes
- Snippet sidebar → Snippet library: CRUD
- Autosave → Snippet library: debounced save
- Snippet library → Firebase client: uses Firestore
- Firestore access rules → Snippet library: authorizes ownership
- Editor workspace → Judge0 adapter: executes code
- Judge0 adapter → Judge0 API: submission and polling
- Judge0 adapter → Output console: returns output
- Editor workspace → AI chat widget: opens assistance
- AI chat widget → AI serverless handler: chat request
- AI serverless handler → Google Generative AI: model request
- Alternate AI handler → Google Generative AI: alternate deployment path
- Vercel hosting → AI serverless handler: hosts function
- Vercel hosting → Alternate AI handler: supports alternate layout
- Vercel hosting → Client entry: serves Vite build
- Firebase deployment config → Firebase client: deployment support