Online Python Code Editor

A web-based Python code editor that allows users to write and execute Python code directly in their browser. Built with Flask backend and CodeMirror frontend, featuring syntax highlighting, dark theme, and real-time code execution.

Live Demo:https://viks-online-code-editor.vercel.app/

Features

• 🐍 Python Code Execution - Write and run Python code directly in the browser
• 🎨 Syntax Highlighting - CodeMirror editor with Dracula theme for a pleasant coding experience
• 🌙 Dark Theme - Modern dark UI with neon accents
• ⚡ Real-time Execution - Execute code and see output instantly
• 🧹 Clear Functionality - Clear editor and output with a single click
• 📱 Responsive Design - Works on desktop and mobile devices

Tech Stack

Backend

• Flask - Python web framework
• subprocess - For executing Python code securely

Frontend

• CodeMirror - Code editor with syntax highlighting
• JavaScript - For handling user interactions and API calls
• HTML/CSS - Modern, responsive UI

Deployment

• Vercel - Serverless deployment platform

Installation

Prerequisites

• Python 3.7 or higher
• pip (Python package manager)

Setup

1. Clone the repository:

git clone <repository-url>cd OnlineCodeEditor

2. Install dependencies:

pip install -r requirements.txt

3. Run the application:

python app.py

4. Open your browser and navigate to:

http://localhost:5000

Usage

1. Write Code: Type your Python code in the editor
2. Run Code: Click the "Run Code" button to execute your code
3. View Output: See the output or error messages in the output section
4. Clear: Use the "Clear" button to reset the editor and output

Project Structure

OnlineCodeEditor/
├── app.py # Flask application and API routes
├── requirements.txt # Python dependencies
├── vercel.json # Vercel deployment configuration
├── templates/
│ └── index.html # Main HTML template
└── static/
├── css/
│ └── style.css # Styling for the application
├── script.js # JavaScript for editor functionality
└── style.css # Additional styles

API Endpoints

POST /run

Execute Python code and return the output.

Request Body:

{
"code": "print('Hello, World!')"
}

Response:

{
"output": "Hello, World!\n"
}

Deployment

This project is configured for deployment on Vercel. The vercel.json file contains the deployment configuration.

To deploy:

1. Install Vercel CLI: npm i -g vercel
2. Run vercel in the project directory
3. Follow the prompts to deploy

Error Handling

The application handles various error scenarios:

• Python not found on the system
• Code execution errors
• Syntax errors in user code
• Network errors

Limitations

• Code execution is done server-side using subprocess
• No file system access for security reasons
• Limited to Python code execution
• No support for multi-file projects

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

This project is open source and available under the MIT License.

---

After 2 weeks of working on this project, I can say: