Add a dedicated Code Playground page and navigation entry

[thedaripanator]

Description

Problem

OpenCSE currently provides learning resources, notes, and documentation for various Computer Science and Engineering subjects. However, users do not have a built-in environment to practice and execute code while learning programming concepts.

Learners often need to switch between OpenCSE and external platforms or IDEs to test code, which interrupts the learning flow.

---

Proposed Solution

Introduce a dedicated Code Playground page that allows users to write, execute, and test code directly within OpenCSE.

The playground should provide an interactive coding environment that complements existing learning resources and enables hands-on experimentation.

---

Features

Phase 1 (Initial Implementation)

• Add a Code Playground link/button to the navigation bar.
• Create a dedicated route/page for the playground.
• Add a code editor area.
• Add language selection support.
• Add a Run Code button.
• Add an output console.
• Maintain consistency with the existing OpenCSE design language.

Phase 2 (Enhanced Experience)

• Monaco Editor integration.
• Multiple programming language support.
• Input section for custom test cases.
• Output formatting improvements.
• Save and restore code sessions.

---

Proposed Architecture

+------------------+
|      User        |
+--------+---------+
         |
         v
+------------------+
| Navigation Bar   |
| Code Playground  |
+--------+---------+
         |
         v
+------------------+
| Playground Page  |
+--------+---------+
         |
         v
+----------------------------+
|        Code Editor         |
|      (Monaco Editor)       |
+-------------+--------------+
              |
              v
+----------------------------+
|      Language Selector     |
+-------------+--------------+
              |
              v
+----------------------------+
|       Run Code Button      |
+-------------+--------------+
              |
              v
+----------------------------+
| Code Execution Service/API |
|   (Judge0 / Piston / etc.) |
+-------------+--------------+
              |
              v
+----------------------------+
|       Output Console       |
+----------------------------+

---

User Flow

OpenCSE
   |
   v
Code Playground
   |
   v
Write Code
   |
   v
Select Language
   |
   v
Run Code
   |
   v
Execution Engine
   |
   v
Display Output

---

Benefits

• Enables hands-on learning directly within OpenCSE.
• Reduces dependency on external IDEs and coding websites.
• Improves learner engagement.
• Supports practical understanding of programming concepts.
• Creates a foundation for future coding-related features.

---

Possible Future Enhancements

• Monaco Editor integration
• Custom input support
• Test case execution
• Practice problems
• Save code functionality
• Share code snippets
• Coding challenges
• AI-assisted code explanations

---

Technical Considerations

Possible approaches for code execution:

1. Judge0 API

   • Easy integration
   • Supports multiple languages
   • Secure sandboxed execution

2. Piston API

   • Open-source
   • Lightweight integration

3. Self-hosted Docker-based runner

   • Maximum control
   • Higher maintenance requirements

Judge0 or Piston may be suitable for the initial implementation due to simplicity and broad language support.

[thedaripanator]

/assign

[PiyushTheProgrammer]

Hey @thedaripanator and maintainers!
This is a fantastic feature idea that will greatly enhance the OpenCSE learning experience. I noticed the issue is still open and unassigned in the sidebar, so I would love to step in, take ownership, and build this out!

Here is my proposed execution plan to deliver a scalable Code Playground, aligning closely with your proposed architecture:

Frontend Editor Integration: Instead of waiting for Phase 2, I can integrate the Monaco Editor right from the start to provide a premium coding experience with syntax highlighting and intellisense.

Execution Engine: I completely agree with the technical consideration of using the Judge0 API for the initial implementation. It’s highly reliable for secure, sandboxed execution and easily supports the multiple programming languages required.

State Management: I will implement local storage mechanisms to save and restore code sessions seamlessly so users don't lose their work.

UI/UX: I'll ensure the playground fits perfectly with OpenCSE's existing design language, structuring a clean layout for the language selector, the "Run Code" button, and a responsive output console.

Having built complex full-stack platforms and orchestrated real-time system APIs previously, I am very comfortable handling both the frontend editor integration and the backend execution services required for this.

Let me know if I can go ahead and open a draft PR for this! I'm ready to start coding right away.