A modern, fully-functional online code editor and compiler built with Next.js 13. CodeRunner allows users to write, compile, and execute code in multiple programming languages with a beautiful, responsive interface.

Features

Core Functionality

• Multi-Language Support: Write and execute code in:
  • Python
  • C
  • C++
  • Java

Code Editor

• Syntax Highlighting: Line numbers and clean code editing interface
• Real-time Editing: Smooth typing experience with auto-expanding text area
• Code Templates: Pre-loaded Hello World templates for each language

Execution & Output

• Live Compilation: Compile and run code with a single click
• Execution Time Tracking: See how long your code took to execute
• Error Handling: Meaningful error messages for compilation and runtime errors
• Output Display: Clean, scrollable output panel with success/error indicators

Code Sharing

• Share Functionality: Generate shareable links for your code
• Persistent Storage: Code snippets are stored in Supabase database
• Load Shared Code: Access shared code via URL parameters
• Copy to Clipboard: Quickly copy code or share links

User Interface

• Dark/Light Mode: Toggle between dark, light, and system themes
• Fully Responsive: Optimized for desktop, tablet, and mobile devices
• Modern Design: Clean, aesthetic UI built with shadcn/ui components
• Single Page Application: No page reloads, smooth user experience

Tech Stack

• Framework: Next.js 13 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Database: Supabase (PostgreSQL)
• Icons: Lucide React
• Theme: next-themes

Getting Started

Prerequisites

• Node.js 18+ installed
• A Supabase account and project

Installation

1. Clone the repository:

git clone <https://github.com/codewithdhruba01/CodeRunner.git
cd coderunner

2. Install dependencies:

3. Set up environment variables:

Create a .env.local file in the root directory and add your Supabase credentials:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

You can find these in your Supabase project settings under API.

4. Run the development server:

5. Open http://localhost:3000 in your browser.

Database Setup

The application requires a Supabase database with the following table structure. The migration is already created in the supabase folder:

CREATE TABLE code_snippets (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  share_id text UNIQUE NOT NULL,
  language text NOT NULL,
  code text NOT NULL,
  created_at timestamptz DEFAULT now()
);

The database has Row Level Security (RLS) enabled with policies allowing:

• Anyone to read code snippets (for sharing)
• Anyone to create code snippets (for anonymous sharing)

Usage

Writing Code

1. Select your programming language from the dropdown (Python, C, C++, or Java)
2. Write your code in the editor panel
3. Click "Run Code" to compile and execute
4. View output or errors in the right panel

Sharing Code

1. Write your code in the editor
2. Click the "Share" button
3. A shareable link will be automatically copied to your clipboard
4. Send the link to anyone - they can view and run your code

Loading Shared Code

• Click on a shared link (e.g., https://yourapp.com?share=abc123)
• The code will automatically load in the editor
• You can run, modify, or share it again

Theme Switching

• Click the sun/moon icon in the header
• Choose from Light, Dark, or System theme
• Your preference is saved automatically

Code Execution

Important Note

The current implementation uses a mock execution engine for demonstration purposes. It performs basic pattern matching to simulate code execution and provides realistic output.

For Production Use

To enable real code compilation and execution, integrate with a code execution API service:

1. Judge0 API (Recommended)

   • Website: https://judge0.com
   • Supports 60+ languages
   • Sandboxed execution

2. Piston API

   • Website: https://github.com/engineer-man/piston
   • Open source
   • Easy to self-host

3. JDoodle API

   • Website: https://www.jdoodle.com/compiler-api
   • Commercial solution

Integration Example

Replace the /app/api/execute/route.ts file with actual API calls:

const response = await fetch('https://api.judge0.com/submissions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-RapidAPI-Key': process.env.JUDGE0_API_KEY,
  },
  body: JSON.stringify({
    source_code: code,
    language_id: getLanguageId(language),
  }),
});

Project Structure

coderunner/
├── app/
│   ├── api/
│   │   └── execute/
│   │       └── route.ts         # Code execution API endpoint
│   ├── layout.tsx               # Root layout with theme provider
│   ├── page.tsx                 # Main application page
│   └── providers.tsx            # Theme provider wrapper
├── components/
│   ├── ui/                      # shadcn/ui components
│   ├── code-editor.tsx          # Code editor component
│   ├── header.tsx               # App header with theme toggle
│   └── output-panel.tsx         # Output display component
├── lib/
│   ├── code-templates.ts        # Default code templates
│   ├── supabase.ts              # Supabase client configuration
│   └── utils.ts                 # Utility functions
└── public/                      # Static assets

Error Handling

The application provides meaningful error messages for common issues:

Python

• Missing main execution
• Syntax errors
• Import restrictions (for security)

C/C++

• Missing main function
• Missing header files
• Compilation errors
• Missing return statements

Java

• Missing class definition
• Missing main method
• Compilation errors

Contributing

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

Future Enhancements

• Real code execution with Judge0 or Piston API
• Syntax highlighting with Monaco Editor or CodeMirror
• Code formatting and beautification
• Custom input handling for programs
• More programming languages (Ruby, Go, Rust, etc.)
• Code collaboration in real-time
• Save code snippets to user accounts
• Code versioning and history
• Download code as files
• Custom themes and editor settings

License

This project is licensed under the MIT License.

Contributing

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