Skip to main content

IDE & Curriculum Interface Subteam Overview

The IDE & Curriculum Interface Subteam is responsible for designing and implementing the core teaching and learning experience on the platform. This subteam builds the front-end environment where students write code, collaborate with tutors, and access instructional materials during live lessons. This work sits at the heart of the product, defining how users interact with code, learn from the curriculum, and stay engaged during sessions.

Key Responsibilities​

Browser-Based Coding IDE​

The primary responsibility of this subteam is to integrate and customize a web-based code editor that supports live coding, syntax highlighting, and real-time feedback.

Editor Framework Selection​

  • Integrate Monaco Editor or CodeMirror 6
  • Ensure compatibility with real-time collaboration features
  • Support for multiple programming languages (initially Python)

Core Editor Features​

  • Syntax highlighting with language-specific tokenization
  • Line numbering with error indicators
  • Multi-file/project support for complex exercises
  • Keyboard shortcuts matching popular IDEs (VS Code, etc.)
  • Theming support (light/dark modes minimum)

Code Execution​

  • Python code execution through hosted sandbox environment
  • Integration options:
    • Piston API for language execution
    • Docker-based isolated environments
    • Replit-like backend infrastructure

2. Real-Time Collaboration​

Priority Feature

This is a critical component of the platform's tutoring experience and requires special attention during implementation.

To support interactive tutoring, the editor must allow real-time, bidirectional editing where both student and tutor can view and modify code together.

Technical Implementation​

  • Conflict-Free Replicated Data Types (CRDTs)
    • Primary option: Yjs (automatic conflict resolution)
    • Alternative: Automerge
    • Fallback: WebSocket-based custom implementation

Collaboration Features​

  • Cursor presence indicators

    • Show active user cursors with labels
    • Different colors for student vs tutor
    • Smooth cursor movement animations

  • Edit history tracking

    • Track who made which changes
    • Option to replay edit history
    • Undo/redo awareness across users

  • Performance requirements

    • Minimal latency
    • Automatic reconnection on network issues
    • Offline resilience with sync on reconnect

3. Tutor View and Flow​

Priority Feature

The tutor experience is crucial for effective teaching and requires careful attention to permissions and UI/UX design.

Tutors must be able to seamlessly join scheduled sessions and collaborate with students inside the IDE.

Session Access​

Joining the Session​
  • Entry point: Internal tutor dashboard
  • Routing: Automatic routing to unique session space using session/editor ID
  • Authentication: Role-based access control determining permissions
Permission Model​
interface TutorPermissions {
  canEditCode: true;
  canViewSolution: true;
  canViewTestCases: true;
  canControlSession: true;
  canFreezeStudent: true;
  canUnlockHints: true;
}

interface StudentPermissions {
  canEditCode: true;
  canViewSolution: false;
  canViewTestCases: false;
  canControlSession: false;
  canFreezeStudent: false;
  canUnlockHints: false;
}

Live Collaboration Features​

Real-time Code Synchronization​
  • Instant reflection of all edits from both parties
  • Labeled cursors showing user names or roles
  • Visual indicators for active editing regions
Tutor-Only Controls​
  • Editor freeze: Temporarily prevent student edits
  • Hint system: Progressive hint unlocking
  • Inline comments: Add explanatory notes
  • Code highlighting: Draw attention to specific lines
  • Solution preview: View correct solution without exposing to student

Curriculum & State Synchronization​

Information Hierarchy​
  • Student view: Problem statement, public test cases, hints (when unlocked)
  • Tutor view: Everything in student view plus:
    • Complete solution code
    • All test cases (including hidden ones)
    • Teaching notes and common misconceptions
    • Alternative solutions

4. Curriculum Viewer​

The UI component that displays curriculum content alongside the code editor.

Display Features​

  • Content types supported:
    • Coding prompts and problem statements
    • Lesson objectives and learning outcomes
    • Step-by-step project instructions
    • Progressive hints system
    • Example outputs and edge cases

Dynamic Content Loading​

  • Fetch curriculum from backend API
  • Cache frequently accessed content
  • Support for markdown rendering
  • Code snippet highlighting within instructions

Layout Options​

  • Full curriculum view: Hide editor, focus on reading
  • Split view: Side-by-side editor and curriculum
  • Overlay mode: Curriculum as dismissible overlay
  • Responsive design: Automatic layout adjustment for screen size

Role-Based Content​

interface CurriculumContent {
  problemStatement: string;
  publicTestCases: TestCase[];
  hints: Hint[];

  // Tutor-only content
  solution?: string;
  hiddenTestCases?: TestCase[];
  teachingNotes?: string;
  commonMistakes?: string[];
}

5. Video Chat Integration​

Integration of video communication without disrupting the coding experience.

Implementation Approach​

  • Primary option: Jitsi Meet API
  • Integration method: Embedded iframe with custom controls
  • Fallback: WebRTC direct implementation

UI/UX Requirements​

  • Draggable window: Users can position video anywhere
  • Resizable: Support for minimized/maximized states
  • Picture-in-picture: Option for system-level PiP
  • Audio-only mode: Bandwidth-saving option
  • Screen sharing: Built-in support for sharing IDE or other windows

Expected Deliverables​

By the end of the development cycle, the IDE & Curriculum Interface Subteam will deliver:

1. Functional Code Editor​

  • Browser-based editor with full Python support
  • Syntax highlighting and IntelliSense-like features
  • Code execution with output display
  • Error handling and debugging support

2. Real-Time Collaboration System​

  • Seamless collaborative editing between tutor and student
  • Conflict-free simultaneous editing
  • Visual presence indicators
  • Session persistence and recovery

3. Session Management​

  • Student flow: Direct problem access creating new editor instance
  • Tutor flow: Join via editor ID with appropriate permissions
  • State synchronization: Maintain consistency across all participants

4. Curriculum Integration​

  • Dynamic lesson content display
  • Role-appropriate information hiding/showing
  • Progress tracking and state management
  • Responsive layout supporting various screen sizes

5. Video Communication​

  • Embedded video chat via Jitsi API
  • Non-intrusive UI integration
  • Full audio/video controls
  • Screen sharing capabilities

6. UX/UI Polish​

  • Responsive design for all screen sizes
  • Intuitive navigation and controls
  • Accessibility compliance (WCAG 2.1 AA)
  • Performance optimization for smooth experience

Collaboration Requirements​

Integration Points​

With Curriculum Team​

  • API contracts for content delivery
  • Content format specifications
  • Update notification system
  • Progress tracking integration

With Scheduling Subteam​

  • Session creation and management
  • Time-based access control
  • Session state persistence
  • Analytics data collection

Open Questions and Considerations​

Session Architecture​

  • Session definition: Is each problem a separate session, or are multiple problems grouped?
  • Session persistence: How long do sessions remain accessible after completion?
  • Session recording: Should sessions be recorded for review?

Permission System​

  • Granularity: How fine-grained should permissions be?
  • Dynamic permissions: Can permissions change during a session?
  • Override mechanisms: Emergency access procedures?

Technical Decisions​

  • Editor choice: Final decision between Monaco and CodeMirror
  • CRDT library: Performance testing needed for final selection
  • Execution backend: Cost/performance analysis for code execution options

User Experience​

  • Onboarding: How do new users learn the interface?
  • Customization: What aspects should be user-configurable?
  • Mobile support: Extent of mobile device compatibility?

Implementation Phases​

Phase 1: Core Editor​

  • Basic editor integration
  • Syntax highlighting
  • Local code execution

Phase 2: Collaboration​

  • CRDT integration
  • Basic cursor presence
  • Simple conflict resolution

Phase 3: Curriculum Integration​

  • Content display system
  • Role-based visibility
  • Progress tracking

Phase 4: Video Integration​

  • Jitsi API integration
  • UI polish for video window

Phase 5: Testing & Polish​

  • End-to-end testing
  • Performance optimization
  • Bug fixes and refinements