Assessfy Pvt. Ltd Moderate 5 milestones 100 marks

Real-Time Collaborative Code Editor (like CodeShare)

Target year: TE Sem 5-6 (Mini-Project-IIA/IIB) AICTE: 3 credits · ~75 hrs Bloom: Analyze MU CBCS: IT601/IT701 Mini-Project 2A/2B

Real-world project · AICTE-aligned · AI-graded · Audit-ready certificate

Enroll as Student Mentor this project

Milestones

Available mentors

Enrolled students

Core skills

About this project

Build a browser-based code editor where multiple users can edit the same file simultaneously with conflict-free merging using Operational Transformation (OT) or CRDT. Support syntax highlighting for Python/JS/C++, file save, and a presence indicator (cursor + name).

Course Learning Outcomes (CLOs):
CLO1: Apply CRDT principles to a real-time collaborative system.
CLO2: Implement WebSocket-based bidirectional communication.
CLO3: Integrate a third-party editor (Monaco) into a React app.
CLO4: Handle multiple concurrent clients with presence + cursor sharing.
CLO5: Evaluate system scalability (latency, dropped-update rate).

Industry/societal relevance: Foundational pattern of Google Docs, Notion, Figma, Replit, CodeSandbox — directly applicable to web-frontend SDE roles at any modern Indian SaaS.

Milestones

1. Wireframes + Architecture

15 marks 7d

4-screen wireframes + system architecture (client-server-WS). Decide CRDT (Yjs) vs custom OT.

2. Monaco Editor Integration

20 marks 12d

Single-user editor with syntax highlighting. Save/load from backend. Plain HTTP-only baseline.

3. Yjs + WebSocket Sync

25 marks 18d

Two browser tabs edit same doc, see each other's changes in real-time. Document arch + sync flow.

4. Presence + Cursor Awareness

20 marks 14d

Each user has a colour + name. Show remote cursors. Handle disconnect/reconnect gracefully.

5. Stress Test + Deploy + Report

20 marks 14d

10-client stress test. Measure latency. Deploy to Vercel + Render. 8-page report.

Open internships using this project -->

Skills you'll learn

WebSocketsCRDT / OT algorithms (Yjs library)ReactMonaco editor (VS Code editor component)Node.jsReal-time sync

Tools used

Node.js + ExpressReact 18Monaco EditorYjs (CRDT lib)WebSockets (ws)Redis (for presence)GitHubVercel for hosting

Prerequisites

JavaScript intermediate; HTTP + WebSocket basics; intro React; data-structures (especially trees)

Available mentors

No mentors have signed up for this project yet.

Be the first to mentor

You'll earn — Certificate (PDF)

AICTE-aligned Project Completion Certificate

A formal, audit-ready PDF certificate issued by Assessfy + your institute on successful completion. Includes AICTE credit hours, your evaluator's signature, and a QR code for third-party verification.

AICTE-aligned

Certificate of Project Completion

This is to certify that

has successfully completed the project

Real-Time Collaborative Code Editor (like CodeShare)

Scan to Verify

Date

Signature

Auto-issued on completion QR-verifiable

You'll earn — Digital Badge

Shareable LinkedIn / Resume Skill Badge

A compact, verifiable Open-Badges-2.0-compliant digital credential. Add to your LinkedIn profile, GitHub README, or resume in one click. Recruiters can validate authenticity via a unique URL.

Moderate

Real-Time Collaborative Code Editor (…

Assessfy

Auto-issued on completion One-click LinkedIn add