CompIDE
A desktop-first contest practice IDE built around Monaco Editor, local Java/C++/Python execution, fast template workflows, sample test management, and practical diagnostics for real coding sessions.
⚡ What It Delivers
Contest-Focused Editing
Monaco-powered editing with tabs, templates, and shortcuts tuned for fast iteration during practice.
Sample Test Workflow
Manage sample inputs/outputs, import test files, run all, and compare expected vs actual output in one panel.
Local Toolchain Integration
Detects Java/C++/Python runtimes locally and runs code offline without web dependencies.
🎯 The Problem
Contest practice often means jumping between an editor, terminal, sample files, and browser tabs. Generic IDEs are powerful, but the workflow overhead is slow when all you want is to solve and test problems quickly.
Code editor, terminal, sample files, and run output are often split across different tools.
Creating and organizing sample input/output files repeatedly is tedious.
Raw compiler output is useful, but beginners and fast practice sessions benefit from clearer guidance.
🎬 Demo & Screenshots
Desktop Demo Videos
Overview pass: full window, welcome-first screen, sidebar, and output panel layout.
UI detail pass: run controls, editor surface, and centered welcome branding.
These are lightweight recorded walkthrough clips generated from real desktop captures of the current macOS build.
Screenshot Gallery
🧭 Typical Workflow
Open / Create
Start on the built-in welcome page, create a new file, or open a project folder for local practice.
Pick Template
Use language templates (Java/C++/Python, graph/DP/DSU, fast I/O, etc.) to bootstrap faster.
Run Samples
Add tests manually or import sample files, run all cases, and compare expected vs actual output.
Fix + Iterate
Use improved diagnostics, local terminal access, and fast reruns until the solution is stable.
✨ Key Features
Multi-file Tabs
Open and edit multiple local files with Monaco models and tab switching.
Autosave
Periodic autosave for existing files to reduce accidental loss during practice sessions.
Sample Case Import
Import .in/.out/.txt/.ans files and build test cases quickly.
Copyable Output
Output panel is easy to select/copy with explicit copy action and keyboard support.
Toolchain Detection
Bundle status shows detected Java/C++/Python runtimes and install hints.
Better Diagnostics
Compile/runtime failures include likely location and probable cause to speed debugging.
Open Terminal
Launch a terminal at the workspace root directly from the app.
Premium UI Refresh
Cursor-inspired visual polish, button states, welcome screen, and cleaner desktop styling.
🏗️ Architecture
┌──────────────────────────────────────────────────────────────────┐ │ CompIDE (Electron) │ ├──────────────────────────────────────────────────────────────────┤ │ Renderer (Monaco UI) │ │ - editor tabs / templates / tests / output panel │ │ - local state (recent files, tests, preferences) │ │ - diagnostics + comparison UI │ │ │ │ │ ▼ IPC (preload bridge) │ │ Main Process │ │ - settings store │ │ - file dialogs / file I/O │ │ - terminal launcher │ │ - code runner orchestration │ │ - bundle detection (Java/C++/Python) │ │ │ │ │ ▼ │ │ Local Toolchains / Processes │ │ - javac/java, g++/clang++, python │ │ - test-case execution / compile / run │ └──────────────────────────────────────────────────────────────────┘
Tech Stack
🧱 How It Was Constructed
The project evolved as a practical tool first, not a template. Development focused on real friction points from contest practice and local iteration speed.
- Core runner first: local compile/run support for Java, C++, and Python with timeout handling.
- Contest workflow next: templates, custom input, sample tests, and output comparison.
- Desktop UX iteration: welcome-first startup, sidebar controls, multi-file tabs, terminal, and better button hierarchy.
- Reliability passes: guarded UI binding, startup boot-error banners, packaging fixes for Monaco and logo assets.
- Toolchain guidance: improved diagnostics and a helper flow for common C++ setup issues (especially macOS).
🚀 Build & Run
Local development
cd /Users/hanfei/Easy_Java_Ide-for-competitions
npm ci
npm startTests
npm testBuild macOS installer
npm run dist:macGenerated artifacts are placed in the repo dist/ folder (DMG and ZIP for macOS).
🧠 What We Learned
Small UX improvements (copy output, persistent input, welcome-first startup) matter more than adding random IDE features.
Pathing issues (Monaco/logo assets) only appeared in the packaged mac app, not dev mode. Build verification must be part of the loop.
Users move faster when compile/runtime errors are translated into likely location + cause instead of raw logs only.
A longer engineering write-up is available in the linked blog post.
🗺️ Roadmap
Monaco editor, local execution, templates, test cases, diagnostics.
Welcome page, multi-file tabs, autosave, terminal, sidebar toggle, mac packaging fixes.
More guided compiler/runtime setup and stronger install flows (especially for C++ on macOS).
Split panes, drag-reorder tabs, and deeper diff views for test output.
🙏 Credits
Charlie Han
Atrak.dev (ongoing refinements)
Electron + Monaco + Node.js
Competitive programmers / practice workflows
Built as a practical practice tool first: fast local feedback, fewer context switches, and easier debugging during contest prep.