DevStudy 🚀

A comprehensive, interactive learning platform designed to help developers master engineering skills, system design, and coding through hands-on practice.

✨ Key Features

• Interactive Coding Labs:
  • Multi-Language Support: Write and run code in JavaScript, TypeScript, Python, Java, C++, C#, Go, Rust, and PHP.
  • Hybrid Execution Engine:
    • Web Languages (JS/TS): Executed locally in the browser for instant feedback.
    • System Languages: Securely executed remotely via the Piston API.
  • Live Web Preview: Real-time HTML/CSS rendering in a sandboxed environment.
• System Design Studio:
  • Built-in Mermaid.js editor for creating flowcharts, sequence diagrams, and architecture diagrams.
  • Live preview and SVG export capabilities.
• Developer Roadmaps: Curated learning paths for various engineering roles.
• Modern UI/UX:
  • Fully responsive mobile-first design.
  • Dark/Light mode support.
  • Clean, distraction-free interface.

🛠️ Tech Stack

Core

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Library: React 19

Styling & UI

• CSS Framework: Tailwind CSS v4
• Icons: Lucide React
• Fonts: Geist Sans & Mono

Tools & Libraries

• Code Editor: @monaco-editor/react (VS Code's editor core)
• Diagramming: mermaid
• Execution API: Piston

📐 Architecture & Methods

1. Code Execution Strategy

The platform uses a hybrid execution model to balance performance and capability:

• Local Execution: JavaScript and TypeScript are executed directly in the browser using a safe wrapper around ew Function(). We intercept console.log to display output in the UI.
• Remote Execution: Languages like Python, Java, and C++ are sent to the Piston API. This ensures secure execution of compiled languages without burdening the client.

2. System Design Visualization

The Mermaid Editor leverages the client-side rendering capabilities of Mermaid.js. It parses text definitions in real-time to generate SVG diagrams, allowing users to visualize complex systems instantly.

3. Component Structure

• Modular Design: Components like CodeEditor and MermaidEditor are self-contained with their own state management and error handling.
• Responsive Layouts: Utilizes Tailwind's grid and flexbox systems to ensure usability across desktop and mobile devices.

🚀 Getting Started

1. Clone the repository �ash git clone https://github.com/URAYUSHJAIN/Devstudy.git cd Devstudy

2. Install dependencies `�ash npm install

   or

   bun install `

3. Run the development server �ash npm run dev

4. Open your browser Navigate to http://localhost:3000 to see the application.

🤝 Contributing

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