BuildIT Online Coding Platform

A modern, interactive online programming learning platform built with React, TypeScript, and Next.js. BuildIT provides a LeetCode-style interface with resizable panes, Monaco Editor integration, and comprehensive accessibility features.

Features

🎯 Core Functionality

• Monaco Editor Integration: Full-featured code editor with IntelliSense, syntax highlighting, and bracket pair colorization
• Multi-language Support: Python, Java, C++, JavaScript, Go, and many more to come...
• Resizable Panes: Drag-to-resize interface with localStorage persistence
• Live Preview: Real-time HTML/CSS/JS preview in sandboxed iframe
• Test Case Management: Interactive test case creation and execution
• Progress Tracking: Visual progress bar and step navigation

🎨 User Interface

• Modern Design: Clean, minimalist interface inspired by modern IDEs
• Theme Support: Light, dark, and high-contrast themes
• Responsive Layout: Optimized for desktop use
• Customizable: Adjustable font sizes and editor preferences

♿ Accessibility Features

• WCAG 2.1 AA Compliant: Full accessibility support
• Keyboard Navigation: Comprehensive keyboard shortcuts
• Screen Reader Support: Proper ARIA labels and live regions
• High Contrast Mode: Enhanced visibility for users with visual impairments

⌨️ Keyboard Shortcuts

• Ctrl+Enter: Run code
• Ctrl+: Focus console
• Standard editor shortcuts (Ctrl+Z, Ctrl+Y, etc.)

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

   git clone <repository-url>
   cd buildit-coding-environment

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open http://localhost:3000 in your browser

Architecture

State Management

• React Context: Centralized state management with CodingContext
• useReducer: Predictable state updates
• localStorage: Automatic persistence of user preferences

Component Structure

components/
├── CodingEnvironment.tsx # Main container
├── TopBar.tsx # Navigation and controls
├── BottomBar.tsx # Status information
├── ResizablePanes.tsx # Layout management
├── CodeEditor.tsx # Monaco editor wrapper
├── InstructionPane.tsx # Problem description
├── ConsolePane.tsx # Output and test cases
└── ToolsDropdown.tsx # Theme and settings

Key Technologies

• React 18: Modern React with hooks and concurrent features
• TypeScript: Type-safe development
• Next.js 14: App Router and server components
• Tailwind CSS: Utility-first styling
• shadcn/ui: High-quality component library
• Monaco Editor: VS Code editor experience
• React Markdown: Markdown rendering with custom components

Customization

Adding New Languages

1. Update the language selector in CodeEditor.tsx
2. Add language-specific execution logic in lib/codeRunner.ts
3. Configure Monaco language workers if needed

Extending Themes

1. Define new themes in CodeEditor.tsx Monaco configuration
2. Add theme options to ToolsDropdown.tsx
3. Update the context reducer to handle new theme states

Custom Problem Types

1. Extend the Problem interface in contexts/CodingContext.tsx
2. Update InstructionPane.tsx to render new problem formats
3. Modify lib/mockData.ts to include new problem examples

Future Extensions

Planned Features

• Multiplayer Support: Real-time collaborative editing with cursor synchronization
• Plugin System: Extensible architecture for custom language support
• Cloud Sync: Cross-device synchronization of code and progress
• Advanced Debugging: Breakpoints and step-through debugging
• Code Analysis: Static analysis and suggestions
• Custom Themes: User-created theme support

Extension Hooks

The codebase includes several extension points:

1. Language Runners: lib/codeRunner.ts can be extended for new execution environments
2. Theme System: Monaco themes can be dynamically loaded
3. Problem Formats: Markdown renderer supports custom components
4. State Persistence: Context system supports additional state properties

API Integration

Replace mock implementations with real APIs:

• runCode(): Connect to code execution service
• getHint(): Integrate with hint generation API
• Problem loading: Fetch from problem database

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Make your changes following the existing code style
4. Add tests for new functionality
5. Submit a pull request

Accessibility Guidelines

This project follows WCAG 2.1 AA guidelines:

• All interactive elements are keyboard accessible
• Proper semantic HTML structure
• ARIA labels and descriptions
• Color contrast ratios meet AA standards
• Screen reader compatibility
• Focus management and visual indicators

License

MIT License - see LICENSE file for details

Support

For issues and questions:

1. Check the GitHub issues page
2. Review the documentation
3. Create a new issue with detailed reproduction steps

---

Built with ❤️ using modern web technologies for an exceptional coding experience.