⚡ BrowserIDE

A lightweight, browser-based code editor that allows you to write and execute code in multiple programming languages directly from your web browser. No installation of compilers or interpreters needed!

Features

✨ Multi-Language Support

• JavaScript (Node.js)
• Python 3
• C++
• Java

🎨 User-Friendly Interface

• Clean, intuitive code editor with syntax highlighting
• Real-time language switching
• Custom input/output support (stdin/stdout)

⚡ Quick Execution

• One-click code compilation and execution
• Instant output display
• Error reporting

🔧 Backend Execution

• Powered by the Piston API for secure code execution
• CORS-enabled for seamless frontend-backend communication

Tech Stack

Frontend

• React - UI framework
• Lucide React - Icon library
• CSS3 - Styling

Backend

• Node.js - Runtime
• Express.js - Web framework
• Axios - HTTP client
• CORS - Cross-origin resource sharing
• Dotenv - Environment variable management

Project Structure

online-code-editor/
├── frontend/              # React application
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── App.js         # Main component
│   │   ├── App.css        # Styling
│   │   └── ...
│   └── package.json
├── backend/               # Express server
│   ├── server.js          # Main server file
│   ├── package.json
│   └── temp/              # Temporary files directory
├── README.md
└── .gitignore

Installation

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Setup Instructions

1. Clone the repository

   git clone https://github.com/supritR21/OnlineCodeEditor-SlashMark.git
   cd online-code-editor

2. Install Backend Dependencies

   cd backend
   npm install

3. Install Frontend Dependencies

   cd ../frontend
   npm install

Usage

Running the Application

1. Start the Backend Server

   cd backend
   npm start
   # or
   node server.js

   The server will run on http://localhost:5000

2. Start the Frontend (in a new terminal)

   cd frontend
   npm start

   The application will open in your browser at http://localhost:3000

Using the Editor

1. Select your desired programming language from the dropdown
2. Write your code in the Source Code panel
3. (Optional) Add custom input in the Custom Input panel for programs that require stdin
4. Click the Run Code button
5. View the output in the Output Console

API Reference

Execute Code Endpoint

POST /api/execute

Request Body:

{
  "language": "javascript",
  "source_code": "console.log('Hello, World!');",
  "stdin": ""
}

Response:

{
  "success": true,
  "output": "Hello, World!"
}

Supported Languages:

Language	Code	Version
JavaScript	javascript	18.15.0
Python	python	3.10.0
C++	cpp	10.2.0
Java	java	15.0.2

Configuration

Environment Variables

Create a .env file in the backend directory:

PORT=5000
NODE_ENV=development

Troubleshooting

Issue: "Error connecting to backend server"

• Ensure the backend server is running on http://localhost:5000
• Check that CORS is properly configured
• Verify that the API endpoint is correct

Issue: Code execution timeout

• The Piston API has execution time limits
• Try simplifying your code or breaking it into smaller problems

Issue: Unsupported language error

• Only JavaScript, Python, C++, and Java are currently supported
• Check your language selection in the dropdown

Future Enhancements

• 📝 Code syntax highlighting
• 💾 Save/load code snippets
• 🎯 Code templates and examples
• 📊 Execution time and memory usage statistics
• 🌙 Dark mode support
• 🔐 User authentication and code storage

Contributing

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

License

This project is licensed under the ISC License - see the package.json files for details.

Author

Suprit Raj

Acknowledgments

• Piston API - For providing a reliable code execution backend
• React - For the UI framework
• Express.js - For the web server framework

---

Happy Coding! 🚀