Live Notepad

A high-performance, real-time collaborative text editor built for speed and simplicity. Live Notepad allows multiple users to edit documents simultaneously in synchronized rooms with sub-millisecond latency.

Core Features

• Real-Time Collaboration: Instant character-by-character synchronization across all connected clients.
• Conflict Resolution: Implements Operational Transformation (OT) strategies to handle concurrent edits and maintain document consistency.
• Live Presence: Real-time remote cursor tracking, showing exactly where other users are typing.
• Zero Friction: No sign-ups required. Unique room URLs allow for instant sharing and joining.
• Rich Text Support: Full markdown capability including lists, bold/italic styling, and code blocks.

Technical Architecture

Backend (Go)

The server is built in Go to leverage its superior concurrency primitives:

• WebSockets: Uses persistent connections for full-duplex communication.
• Concurrency Pattern: Implements a "Fan-In/Fan-Out" architecture. Each room runs a dedicated goroutine that serializes incoming operations via Go Channels, ensuring thread safety without heavy locking.
• State Management: Uses Mutexes (sync.Mutex) to protect the "Single Source of Truth" document state while allowing non-blocking reads for new clients.

Frontend (Next.js)

• Framework: Built with Next.js for server-side rendering and optimized routing.
• Editor Engine: Integrates Quill.js to capture granular "Delta" updates (insertions/deletions).
• Protocol: Custom JSON-based WebSocket protocol to transmit operations and cursor vectors efficiently.

Getting Started

Prerequisites

• Go 1.21+
• Node.js 18+

Installation

1. Clone the repository

   git clone https://github.com/peterzdhuang/RealTimeNoteEditor.git
   cd RealTimeNoteEditor

2. Start the Backend

   cd backend
   go mod download
   go run main.go

   The WebSocket server will start on localhost:8080.

3. Start the Frontend Open a new terminal:

   cd frontend
   npm install
   npm run dev

   The application will be available at http://localhost:3000.

Roadmap

• Persistence: Integration with Redis/PostgreSQL to save room states indefinitely.
• Authentication: Optional user accounts for private document management.
• History: "Time-travel" slider to view and revert to previous versions of the document.