How darkmortal/online-ide works
OnlineIDE is a browser-based coding environment: users select a language, edit code and input, run it, and view execution results; they can also save and reopen shareable editor states. The frontend coordinates these interactions through shared editor state, while an Express endpoint delegates compilation and execution. Firebase-backed sharing is a separate persistence branch. The README gives only a product overview, and compiler, fetch, and sharing helper implementations were not sampled, so uncertain internal calls are omitted.
Main entry points: App.tsx App coordinator · editorSlice.ts Editor state · Share.tsx Share controls · dbConfig.ts Firebase config
Components 18
Editor frontend
- App coordinator
frontend/src/App.tsx - Language selector
frontend/src/components/language/LanguageSelector.tsx - Code editor
frontend/src/components/codeblock/Code.tsx - Program input
frontend/src/components/userinput/InputParams.tsx - Run action
frontend/src/components/run/Run.tsx - Result display
frontend/src/components/output/Output.tsx - Editor state
frontend/src/store/editorSlice.ts
Code execution
- HTTP server
backend/src/server.ts - Compile coordinator
backend/src/compiler/compiler.ts - Execution module
backend/src/compiler/execute.ts - Language runner
backend/src/compiler/Command.py
State sharing
- Share controls
frontend/src/components/share/Share.tsx - Load shared state
frontend/src/lib/dataFetch.ts - Create share link
frontend/src/lib/linkGenerator.ts - Update shared state
frontend/src/lib/dataUpdate.ts - Firebase config
frontend/src/lib/dbConfig.ts - Firestore
Other components
- IDE user
Connections 27
- IDE user → App coordinator: uses
- App coordinator → Language selector: renders
- App coordinator → Code editor: renders
- App coordinator → Program input: renders
- App coordinator → Run action: renders
- App coordinator → Result display: renders
- App coordinator → Share controls: renders
- Language selector → Editor state: sets language
- Code editor → Editor state: sets code
- Program input → Editor state: sets input
- Run action → Editor state: reads and updates
- Editor state → Result display: provides results
- Run action → HTTP server: POST /compile
- HTTP server → Compile coordinator: compiles
- Compile coordinator → Execution module: delegates execution
- Execution module → Language runner: invokes runner
- Share controls → Editor state: reads editor data
- Share controls → Create share link: creates link
- Share controls → Update shared state: saves changes
- App coordinator → Load shared state: loads shared state
- Load shared state → Firebase config: uses config
- Create share link → Firebase config: uses config
- Update shared state → Firebase config: uses config
- Firebase config → Firestore: connects
- Load shared state → Firestore: reads shared state
- Create share link → Firestore: saves shared state
- Update shared state → Firestore: updates shared state