Skip to content

Add LeetCode-style DSA coding interface#17

Open
Cristian305 wants to merge 1 commit intoJk2006k:mainfrom
Cristian305:feature/dsa-code-editor
Open

Add LeetCode-style DSA coding interface#17
Cristian305 wants to merge 1 commit intoJk2006k:mainfrom
Cristian305:feature/dsa-code-editor

Conversation

@Cristian305
Copy link
Copy Markdown

🎯 Bounty Issue: #12

Implements a complete LeetCode-style coding interface for the DSA round as requested.

✅ Features Implemented

  • Split-screen layout - Problem description on left, code editor on right
  • Code editor with syntax highlighting - VS Code-style dark theme
  • Language switcher - JavaScript and Python support
  • Problem description section - Examples, constraints, clean formatting
  • Predefined test cases - Sample test cases with mock execution
  • Run button - Execute code against test cases (mock results)
  • Pass/fail results - Detailed test case results with input/output/expected
  • Clean, minimal UI - Similar to LeetCode aesthetic
  • Mobile-friendly - Responsive design

🔧 Technical Details

  • Built with React hooks (useState, useRef)
  • Integrates seamlessly with existing routing
  • Accessible via "Start DSA Round" button from /dsa page
  • Sample "Two Sum" problem included for demonstration
  • Mock test execution with realistic timing simulation

🎨 UI/UX

  • Dark theme code editor matching modern coding environments
  • Syntax highlighting for JavaScript/Python
  • Professional color scheme and typography
  • Intuitive split-pane layout maximizing screen real estate

🚀 Usage

  1. Navigate to /dsa (existing instructions page)
  2. Complete system checks (camera, screen share, fullscreen)
  3. Click "Start DSA Round"
  4. Access the new coding interface at /dsa-interview

Resolves all requirements from issue #12. Ready for review!

Bounty: $2

Features implemented:
✅ Split-screen layout (problem description + code editor)
✅ Code editor with syntax highlighting (JavaScript/Python)
✅ Language switcher between JavaScript and Python
✅ Problem description with examples and constraints
✅ Predefined test cases with mock execution
✅ Run button to execute code against test cases
✅ Pass/fail results for each test case
✅ Clean, minimal UI similar to LeetCode
✅ Dark theme code editor with VS Code-like styling
✅ Test output panel with detailed results

Includes sample Two Sum problem with proper test cases.
Integrates with existing DSA instructions page via 'Start DSA Round' button.

Resolves: Build LeetCode-style coding interface for DSA round (Jk2006k#12)
Bounty: $2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant