Skip to main content
Mohammed Ehab LogoMohammed Ehab
← Back to all projects
Full Stack2024

LiveDoc

A full-stack, real-time collaborative document platform enabling concurrent rich-text editing, live cursor presence, and instant workspace synchronization.

LiveDoc
Next.jsTypeScriptMongoDBTailwind CSSWebSocketsCloudinaryReact JSTiptap
ARCHITECTURE & OVERVIEW

LiveDocs is a modern, real-time collaborative documentation platform inspired by Google Docs and Notion. Built using Next.js 16, React 19, TypeScript, and MongoDB, it delivers seamless concurrent editing powered by Tiptap and CRDT-based Yjs over WebSockets. Users can organize notes in hierarchical folders, collaborate with sub-second synchronization, upload media via Cloudinary, and manage team permissions with instant notification alerts. KEY FEATURES • Real-Time Collaboration: Conflict-free multi-user editing powered by Yjs CRDTs and WebSocket sync with live cursor tracking. • Rich Text Suite: Modular editor supporting custom formatting, code blocks, typography styling, and inline Cloudinary image uploads. • Workspace Organization: Hierarchical folder structures, document indexing, and role-based sharing controls. • Live Notifications: Real-time collaborator invitations and activity feeds. • Secure Backend: Next.js App Router, JWT authentication, bcrypt hashing, and MongoDB/Mongoose persistence.

Core Objective

Engineered for high performance, sub-100ms response times, and an intuitive user experience.

Engineering Highlight

Optimized React component architecture with clean SSR data loading and robust error boundary handling.