🌌 CodeSphere

It Doesn't Just Compile, It Comprehends.

An AI-powered multi-language online code compiler with Intent Mirror technology that understands what you meant to code, not just what you wrote.

Features • Setup • Usage • API Keys

🎯 What is Intent Mirror?

Unlike ordinary online compilers, CodeSphere uses Gemini AI to understand your programming intent through natural language comments. It doesn't just find bugs — it finds misaligned intent.

Example:

# intent: sort numbers in ascending order
numbers = [5, 2, 8, 1, 9]
result = sorted(numbers, reverse=True)  # ⚠️ Bug!
print(result)

AI Output: "It seems your intent was ascending, but your code sorts descending. Did you mean reverse=False?"

✨ Features

Core Functionality

🚀 Multi-Language Support: Python, Java, C++, JavaScript
🎨 Monaco Editor: Professional code editing with syntax highlighting
⚡ Real-Time Execution: Powered by Judge0 API
🤖 AI-Powered Suggestions: Gemini 1.5 Pro integration
🎯 Intent Mirror: Detects logic mismatches from intent comments

AI Features

💡 Explain: Understand what your code does
🔧 Fix: Get intelligent error fixes
⚡ Optimize: Receive performance improvements
🎯 Intent Analysis: Compare intent vs implementation

UX Features

🌙 Dark Mode First: Beautiful neon-accented dark theme
💎 Glassmorphism UI: Modern, elegant design
⌨️ Keyboard Shortcuts: Ctrl+Enter, Ctrl+I, Ctrl+.
💾 Auto-Save: LocalStorage session persistence
🎯 Focus Mode: Distraction-free coding
📊 Separated Output: Clear stdout/stderr/compile output display

🚀 Quick Start

Prerequisites

Node.js 18+
Gemini API Key (Get one here)
RapidAPI Account for Judge0 (Sign up here)

Installation

1️⃣ Clone and Install

# Clone the repository
cd "code compiler"

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

2️⃣ Configure Backend

Create backend/.env:

PORT=5000
JUDGE0_URL=https://judge0-ce.p.rapidapi.com
JUDGE0_API_KEY=your_rapidapi_key_here
GEMINI_API_KEY=your_gemini_api_key_here
GEMINI_MODEL=gemini-1.5-pro-latest

3️⃣ Start Development Servers

Terminal 1 - Backend:

cd backend
npm run dev

Terminal 2 - Frontend:

cd frontend
npm run dev

Open http://localhost:5173 🎉

🔑 Getting API Keys

Gemini API Key (Free)

Visit Google AI Studio
Sign in with your Google account
Click "Create API Key"
Copy your key to backend/.env

Judge0 API Key (Free Tier Available)

Go to Judge0 on RapidAPI
Sign up and subscribe to the free plan (50 requests/day)
Copy your RapidAPI key
Add to backend/.env

Alternative: Use the free Judge0 CE endpoint (no key required):

JUDGE0_URL=https://ce.judge0.com
# Leave JUDGE0_API_KEY empty

💻 Usage

Basic Workflow

Select Language: Choose from Python, JavaScript, C++, or Java
Write Code: Use the Monaco editor with syntax highlighting
Add Input: Enter stdin data if needed
Run: Click "Run" or press Ctrl+Enter

Intent Mirror Workflow

Write Intent: Add a comment describing what you want:
```
# intent: calculate factorial recursively
```
Write Code: Implement your solution
Analyze: Click "Analyze" or press Ctrl+I
Review: Check AI suggestions for logic mismatches
Apply Fix: Press Ctrl+. to apply suggested fixes

Keyboard Shortcuts

Ctrl+Enter - Run code
Ctrl+I - Analyze intent
Ctrl+. - Apply AI fix

🏗️ Project Structure

code compiler/
├── backend/
│   ├── index.js              # Express server
│   ├── routes/
│   │   ├── compile.js        # Code execution endpoint
│   │   └── suggest.js        # AI suggestions endpoint
│   ├── services/
│   │   ├── gemini.js         # Gemini API integration
│   │   └── judge0.js         # Judge0 API integration
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── App.jsx           # Main application
│   │   ├── components/
│   │   │   └── Editor.jsx    # Monaco editor wrapper
│   │   ├── services/
│   │   │   └── api.js        # API client
│   │   └── styles.css        # Tailwind + custom styles
│   ├── vite.config.js
│   ├── tailwind.config.js
│   └── package.json
└── README.md

🎨 Design Philosophy

CodeSphere follows a dark-mode-first design approach with:

Base color: #0B1020 (deep space blue)
Accent colors: Neon cyan (#6ee7b7) and blue (#7dd3fc)
Glassmorphism panels with backdrop-blur effects
Subtle glow effects on interactive elements
Smooth animations and transitions

🧪 Testing

Backend Tests

cd backend
npm test

Manual Testing

Test Python execution with stdin
Test intent analysis with mismatched logic
Test all three AI tabs (Explain, Fix, Optimize)
Test keyboard shortcuts
Test session persistence (refresh page)

🚀 Deployment

Backend (Railway/Render)

Connect GitHub repository
Set environment variables in dashboard
Deploy from main branch

Frontend (Vercel)

Connect GitHub repository
Build command: cd frontend && npm run build
Output directory: frontend/dist
Environment: VITE_API_BASE=https://your-backend.com/api
Deploy

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - Free for personal and commercial use

🙏 Acknowledgments

Google Gemini for AI capabilities
Judge0 for code execution
Monaco Editor for the editor
Tailwind CSS for styling

Built with ❤️ by developers, for developers

⭐ Star this repo if you find it useful!

Code Compiler