A Next.js-based platform for real-time collaborative code review where students can join sessions, review code, provide feedback, vote on comments, and get ranked based on the quality of their contributions.
- Modern, responsive design with gradient backgrounds
- "Enter Room Code" input for joining sessions
- "Create Session" button for starting new sessions
- Feature highlights and platform overview
- Mobile-responsive design with Tailwind CSS
- Session creation with unique room codes
- Language selection (JavaScript, Python, Java, C++, HTML, CSS, SQL, JSON)
- Timer setup for review sessions
- Maximum participants configuration
- Session name customization
- Real-time code editor with CodeMirror integration
- Syntax highlighting for multiple programming languages
- Real-time comments with Socket.IO WebSocket integration
- Voting system for comment quality
- Live participant list with rankings
- Session timer with pause/resume functionality
- Real-time synchronization of all actions
- Comprehensive session analytics
- Final participant rankings
- Top-voted comments showcase
- Session statistics (duration, comments, votes)
- Performance metrics and insights
- Next.js App Router with dynamic routing
- Socket.IO server for real-time features
- Custom Node.js server with WebSocket support
- In-memory session management (can be extended to database)
- Live code editing synchronization
- Real-time comment system
- Instant voting updates
- Participant join/leave notifications
- Typing indicators
- Connection status monitoring
- JavaScript (with React/Node.js examples)
- Python (with algorithm implementations)
- Java (with object-oriented examples)
- C++ (with STL and algorithms)
- HTML (with interactive web components)
- CSS (with modern styling patterns)
- SQL (with database queries)
- JSON (with API documentation)
- Responsive navigation and layout
- Mobile-optimized comment section
- Collapsible panels for smaller screens
- Touch-friendly interactive elements
- Adaptive typography and spacing
- Side-by-side code editor and comments
- Large code editing area
- Comprehensive participant dashboard
- Multi-column layouts for analytics
- Onboarding tutorial with step-by-step guidance
- Help system with contextual tips
- Report functionality for inappropriate comments
- Connection status indicators
- Session management with end session controls
- Error handling for network issues
- LocalStorage for session persistence
- Typing indicators for better collaboration
- Vote validation to prevent duplicate voting
- Comment moderation capabilities
- Next.js 15 - React framework with App Router
- React 19 - UI library
- Tailwind CSS 4 - Utility-first CSS framework
- CodeMirror 6 - Advanced code editor
- Socket.IO Client - Real-time communication
- Node.js - Server runtime
- Socket.IO - WebSocket server
- Custom HTTP server - Request handling
- @codemirror/lang-javascript - JavaScript syntax
- @codemirror/lang-python - Python syntax
- @codemirror/lang-java - Java syntax
- @codemirror/lang-cpp - C++ syntax
- @codemirror/lang-html - HTML syntax
- @codemirror/lang-css - CSS syntax
- @codemirror/lang-sql - SQL syntax
- @codemirror/lang-json - JSON syntax
- Node.js 18 or higher
- npm or yarn package manager
- Clone the repository
- Install dependencies:
npm install
Start the development server:
npm run devThe application will be available at http://localhost:3000
Build and start the production server:
npm run build
npm start- Click "Create Session" from the landing page
- Configure session settings (name, language, duration, max participants)
- Share the generated room code with participants
- Monitor session progress and manage participants
- End session when complete to generate summary
- Enter room code on the landing page
- Join session with your name
- Review the code in the editor
- Add constructive comments and feedback
- Vote on helpful comments from others
- Track your ranking and score
- Provide specific, actionable feedback
- Focus on code quality, performance, and readability
- Upvote genuinely helpful comments
- Stay engaged throughout the session
- Use the tutorial if you're new to the platform
| Feature | Status | Description |
|---|---|---|
| ✅ Landing Page | Complete | Modern UI with join/create options |
| ✅ Session Creation | Complete | Configurable session setup |
| ✅ Real-time Code Editor | Complete | CodeMirror with syntax highlighting |
| ✅ Comment System | Complete | Real-time commenting with voting |
| ✅ Voting System | Complete | Upvote quality feedback |
| ✅ Participant Rankings | Complete | Score-based leaderboard |
| ✅ Session Timer | Complete | Countdown with pause/resume |
| ✅ Mobile Responsive | Complete | Tailwind CSS responsive design |
| ✅ Multiple Languages | Complete | 8 programming languages |
| ✅ Real-time Sync | Complete | Socket.IO WebSocket integration |
| ✅ Session Summary | Complete | Analytics and final rankings |
| ✅ Help Tutorial | Complete | Onboarding guidance |
| ✅ Report System | Complete | Flag inappropriate comments |
| ✅ Connection Status | Complete | Live connection monitoring |
- PostgreSQL or MongoDB for persistent storage
- User authentication and profiles
- Session history and analytics
- Line-specific commenting
- Code diff visualization
- GitHub/GitLab integration
- Screen sharing capabilities
- Voice/video chat integration
- Vercel deployment configuration
- Docker containerization
- CI/CD pipeline setup
- Environment variable management
This project is part of a collaborative coding platform implementation following the specifications in what.txt. Built with modern web technologies for real-time collaboration and peer learning.