Ghost_IDE

The online IDE haunted by an AI that codes with you… and sometimes against you.

Comment

GhostIDE: A Haunted Journey Through Code 👻

Inspiration

The idea for GhostIDE came from a simple yet powerful realization: developers need an accessible, collaborative coding environment that doesn't just execute code—it understands it. We wanted to create an online IDE that felt alive, guided by an AI "ghost" that haunts your code editor, offering suggestions, explanations, and support when you need it most.

The spooky theme isn't just aesthetic—it represents the mysterious, sometimes magical nature of coding itself. Every developer has felt that eerie moment when their code suddenly works, or when a bug appears from nowhere. We embraced that feeling and built GhostIDE around it.

What We Learned

Technical Mastery

Building GhostIDE taught us invaluable lessons about full-stack development:

  1. Real-time Architecture: Implementing WebSocket communication between frontend and backend required understanding bidirectional data flow and state synchronization.

  2. Secure Code Execution: Running user-submitted code safely is non-trivial. We learned about:

    • Container isolation with Docker
    • Process sandboxing for native execution
    • Timeout mechanisms: $T_{max} = 30s$ per execution
    • Resource limits to prevent abuse

  3. AI Integration: Working with Google's Gemini API taught us about:

    • Prompt engineering for code assistance
    • Context management for conversational AI
    • Handling API rate limits and errors gracefully

  4. Deployment Challenges: Discovering that Docker-in-Docker doesn't work on Render forced us to pivot and implement native code execution—a valuable lesson in adaptability.

Mathematical Insights

We applied several computer science concepts:

  • Timeout calculation: $T_{execution} \leq T_{max}$ where $T_{max} = 30$ seconds
  • Concurrent execution limits: $N_{concurrent} \leq 10$ processes
  • Session cleanup interval: $\Delta t = 300$ seconds (5 minutes)

How We Built It

Architecture Overview

┌─────────────┐         WebSocket/HTTP        ┌─────────────┐
│   Frontend  │ ◄─────────────────────────── │   Backend   │
│  (Vercel)   │                               │  (Render)   │
└─────────────┘                               └─────────────┘
      │                                              │
      │                                              ├─► SQLite/PostgreSQL
      │                                              ├─► Gemini API
      │                                              └─► Code Execution
      └─► Monaco Editor                                  (Docker/Native)

Development Phases

Phase 1: Foundation (Week 1)

  • Set up React + TypeScript frontend with Vite
  • Built FastAPI backend with async/await patterns
  • Integrated Monaco Editor for code editing
  • Implemented basic file management

Phase 2: Code Execution (Week 2)

  • Created Docker containers for Python, JavaScript, Java, C++
  • Implemented secure execution with timeouts
  • Added language-specific syntax validation
  • Built execution result streaming via WebSocket

Phase 3: AI Integration (Week 3)

  • Integrated Google Gemini API (switched from OpenAI)
  • Designed conversational context management
  • Created "Ghost AI" personality with spooky responses
  • Built collapsible chat interface

Phase 4: Production Deployment (Week 4)

  • Deployed frontend to Vercel
  • Deployed backend to Render
  • Discovered Docker-in-Docker limitation
  • Implemented native code execution fallback
  • Configured CORS and environment variables

Key Technologies

Frontend Stack:

{
  framework: "React 18",
  language: "TypeScript",
  bundler: "Vite",
  editor: "Monaco Editor",
  styling: "TailwindCSS",
  state: "Zustand",
  routing: "React Router",
  realtime: "Socket.IO"
}

Backend Stack:

{
    'framework': 'FastAPI',
    'language': 'Python 3.12',
    'server': 'Uvicorn',
    'database': 'SQLAlchemy',
    'validation': 'Pydantic',
    'ai': 'Google Gemini API',
    'execution': ['Docker', 'Native Runtimes']
}

Challenges We Faced

1. Docker-in-Docker on Render 🐳

Problem: Render's container environment doesn't support Docker-in-Docker, breaking our entire code execution system.

Solution: We pivoted to native execution by:

  • Pre-installing language runtimes (Python, Node.js, OpenJDK, g++) in the Docker image
  • Implementing compilation for Java and C++: $$\text{compile}(code.java) \rightarrow \text{execute}(code.class)$$
  • Using Python's subprocess for process isolation
  • Maintaining the same security model with timeouts and resource limits

2. WebSocket State Management 🔌

Problem: Managing concurrent WebSocket connections with proper session cleanup and Ghost AI context.

Solution:

  • Implemented session manager with UUID-based identification
  • Created cleanup service running every $\Delta t = 5$ minutes
  • Built proper context serialization: dict → AIContext → Response

3. Real-time Code Execution Feedback ⚡

Problem: Users needed to see execution output in real-time, not just final results.

Challenge equation: $$\text{latency} = T_{network} + T_{execution} + T_{compilation}$$

Solution: Implemented streaming via WebSocket with chunked output for better UX.

What's Next

Future enhancements we're considering:

  1. Collaborative Editing: Multiple users editing the same file simultaneously using Operational Transforms
  2. More Languages: Support for Rust, Go, Ruby, PHP
  3. Git Integration: Clone, commit, and push directly from the IDE
  4. Terminal Access: Full shell access within the browser
  5. Theme Customization: More spooky themes beyond the default ghost aesthetic

Conclusion

Building GhostIDE was a journey through modern web development, from React to FastAPI, from Docker to native execution, from local development to production deployment. We learned that flexibility and adaptability are just as important as technical skills—when Docker failed us, we found another way.

The result is a fully functional online IDE with AI assistance, supporting 4 programming languages, deployed on production-grade infrastructure. It's haunted, it's powerful, and it's ready to help developers code better. 👻

Live Demo: https://ghost-ide.vercel.app

GitHub: https://github.com/OopsNidhiCodes/Ghost_IDE

Built With

Share this project:

Updates