Add Interactive Code Playground

[alienx5499]

🎯 Feature Overview

Feature Title
Add Interactive Code Playground

Feature Category

• 🎓 Educational Value
• 🔧 Core Functionality
• 🎨 UI/UX Enhancement

🔍 Problem Statement

Is your feature request related to a problem? Please describe.
Users currently can only visualize sorting algorithms but cannot experiment with their own implementations or modifications. This limits the learning potential and practical understanding of the algorithms.

User Story
As a user learning sorting algorithms, I want to be able to write, modify, and test my own sorting algorithm implementations in a safe environment to better understand how they work.

💡 Proposed Solution

Describe the solution you'd like
Implement an interactive code playground that allows users to:

• Write and modify sorting algorithm code
• Test their implementations with different array inputs
• Compare their solutions with reference implementations
• Get real-time feedback and performance metrics

Key Features/Requirements:

• Code editor with syntax highlighting
• Live preview of sorting visualization
• Performance metrics display
• Reference implementation comparison
• Error handling and feedback
• Code sharing capability

Acceptance Criteria:

• Code editor is responsive and user-friendly
• Real-time visualization updates
• Accurate performance measurements
• Clear error messages
• Safe code execution environment
• Shareable code snippets

🔄 Alternative Solutions

Describe alternatives you've considered

• External IDE integration (rejected - too complex)
• Pre-written code templates only (rejected - limited learning)
• Separate web application (rejected - poor integration)

Why is this the best approach?
Integrated playground provides immediate feedback and maintains context within the application.

🎨 Design & Implementation Ideas

Technical Considerations:

• Frontend: React with Monaco Editor
• Code Execution: Web Worker
• State Management: Redux/Context
• Security: Sandboxed execution

📊 Impact Assessment

Priority/Importance

• Priority:

  • 🔴 High (Critical for learning)

• Impact:

  • 📈 Major (Significant educational value)

Target Audience:

• 👨‍🎓 Students learning algorithms
• 👩‍🏫 Educators teaching CS
• 👨‍💻 Developers studying algorithms

🎯 Hacktoberfest Information

Project Status:

• 🎯 Open for Hacktoberfest Contributors
• 🔒 Reserved for Specific Contributor
• ⏳ In Progress
• ✅ Completed

Difficulty Level:

• 🟢 Level 1 - Good first issue, basic React/JS
• 🟡 Level 2 - Moderate complexity, React/state management
• 🔴 Level 3 - Complex implementation, advanced concepts

Estimated Time: 4-5 days

Skills Required:

• JavaScript/TypeScript
• React.js
• Code Editor Integration
• Web Workers
• Security

Implementation Plan:

• Phase 1: Set up code editor integration
• Phase 2: Implement code execution environment
• Phase 3: Add visualization integration
• Phase 4: Implement sharing and feedback
• Phase 5: Testing and security review

📚 Additional Context

Use Cases/Scenarios:

1. Students practicing algorithm implementation
2. Educators demonstrating algorithm variations
3. Developers testing optimization ideas
4. Code sharing and collaboration

✅ Checklist

• I have searched existing issues to ensure this is not a duplicate
• I have provided a clear problem statement and solution
• I have considered alternative approaches
• I have assessed the impact and priority
• I have included relevant technical details

[pranjalarora98]

@alienx5499 can u plz assign me this issue!! Thanks!

[GauravKarakoti]

Can i work on this?

[alienx5499]

Only one contributor will be assigned to this issue.

Please note:

• The solution must follow the existing architecture and code style
• Partial or experimental PRs will not be merged
• The implementation must include basic security safeguards for code execution
• Inactive assignees may be unassigned if there is no progress update within a reasonable time

Before assignment, please briefly share:

• Your proposed approach for implementing this feature
• Any relevant experience with React, Monaco Editor, or sandboxed code execution

Once I review the details shared, I will assign the issue accordingly.

[GauravKarakoti]

🧠 High-Level Architecture

The interactive playground will be fully client-side, combining a code editor, sandboxed execution, and real-time visualization into a single learning loop.

Monaco Editor (User Code)
        ↓
Sandboxed Web Worker
        ↓
Instrumented Sorting Execution
        ↓
Visualization Engine + Metrics

---

🔧 Implementation Approach

1️⃣ Code Editor Integration (Frontend)

Tool: Monaco Editor
Reason: Industry-standard editor (VS Code core), rich IntelliSense, extensible.

Implementation details:

• Embed Monaco using @monaco-editor/react

• Provide:

  • Syntax highlighting (JS/TS)

  • Preloaded starter templates (e.g., Bubble Sort, Quick Sort)

  • Read-only reference implementation tab

• Controlled editor state to track changes

UX safeguards:

• Disable filesystem/network access

• Limit editor to algorithm-specific API surface

---

2️⃣ Safe Code Execution (Sandboxed)

Tool: Web Workers (Dedicated Worker per run)

Why Web Workers:

• Prevent UI blocking

• Isolate execution context

• No DOM / no network access by default

Execution flow:

1. User code is wrapped inside a controlled function signature:

   function sort(arr, visualize) { ... }
   

2. Code is sent to the Worker as a string

3. Worker:

   • Executes code with new Function(...)

   • Enforces timeouts (e.g., 2s max execution)

   • Catches runtime errors

4. Only structured messages allowed via postMessage

Security constraints:

• No eval in main thread

• No access to window, document, fetch

• Hard execution timeout + memory cap

---

3️⃣ Visualization Integration

Approach: Instrumented Execution

Instead of inspecting array state post-execution:

• Provide a visualize(step) callback

• User’s sorting code explicitly emits steps

Example:

visualize({ type: 'swap', indices: [i, j] });

This enables:

• Step-by-step animation

• Pausing / scrubbing

• Accurate operation tracking

---

4️⃣ Performance Metrics

Metrics are collected inside the Worker:

Tracked metrics:

• Comparisons

• Swaps

• Execution time

• Space usage (approx.)

Displayed in:

• Real-time stats panel

• Comparison chart vs reference implementation

---

5️⃣ Error Handling & Feedback

Error types handled:

• Syntax errors → inline editor markers

• Runtime errors → structured error panel

• Infinite loops → timeout warning

User feedback includes:

• Line number highlights

• Friendly explanations

• Suggested fixes (non-auto-correcting)

---

6️⃣ Code Comparison

• Side-by-side view:

  • User code vs reference

• Toggle visualization overlay:

  • “Your algorithm”

  • “Reference algorithm”

• Highlight inefficiencies (optional future enhancement)

---

7️⃣ Code Sharing

Approach: Serialized State

• Encode editor content + settings into:

  • URL query string (compressed)

  • or JSON blob (copy/share)

Example:

/playground?code=compressedBase64

Enables:

• Shareable links

• Classroom collaboration

• Reproducible learning examples

---

🧱 State Management

Recommended: React Context (Redux optional)

Managed state:

• Editor content

• Execution status

• Visualization steps

• Metrics

• Errors

Worker lifecycle is owned by a custom hook:

useSandboxedExecutor()

---

🔒 Security Review Summary

• No backend execution

• No persistent user code storage by default

• Strict execution limits

• Message-only communication

• No DOM or network access

This meets browser-level sandboxing guarantees.

---

🗺️ Phased Delivery Mapping

Phase | Deliverable -- | -- 1 | Monaco Editor + templates 2 | Worker-based execution 3 | Visualization hooks 4 | Metrics + comparison 5 | Sharing + security hardening

---

👨‍💻 Relevant Experience

I have hands-on experience building interactive educational tools using React, Web Workers, and sandboxed JavaScript execution.

I’ve worked with Monaco Editor for in-browser coding environments and have implemented isolated execution pipelines using Workers to safely run user-generated code without blocking the UI.

My background includes performance visualization, secure client-side execution, and designing developer-friendly UX for learning platforms. I’m comfortable handling execution safety, editor integration, and real-time UI updates.