Skip to content

Latest commit

 

History

History
166 lines (107 loc) · 5.71 KB

README.md

File metadata and controls

166 lines (107 loc) · 5.71 KB

Project Banner

Table of Contents

Project Overview

Live Docs is a full-featured, real-time collaborative document editor designed to empower teams to work together seamlessly. This project brings together advanced real-time collaboration features, secure authentication, responsive design, and rich-text editing capabilities—all powered by a modern tech stack, including Next.js, Liveblocks, Clerk, Tailwind CSS, and Lexical.

With Live Docs, you can create, edit, and share documents with multiple users in real-time, leveraging powerful features like live cursors, nested comments, tagging, and more.

Key Features

  • Real-Time Collaboration: Live, multi-user document editing with live cursors showing collaborator activity.
  • Markdown Editor: Full support for rich-text formatting and markdown.
  • Flexible Document Sharing: Invite collaborators with different access levels (viewers, editors).
  • Responsive UI: Native-like, fully responsive design for desktop and mobile.
  • Authentication & Security: Hassle-free user authentication with Clerk.
  • Advanced UI/UX Features:   - Nested comments, tagging, and emoji reactions.   - Floating comments and instant notifications.   - User presence indicators for collaborative environments.

Tech Stacks

Getting Started

To get started with Live Docs on your local machine:

Prerequisites

Ensure you have Node.js and npm installed.

Installation

  1. Clone the repository:
git clone https://github.com/Arafat-alim/sync-pad.git
cd sync-pad
  1. Install dependencies:
npm install
  1. Configure environment variables:
  • Create a .env.local file in the root directory.    - Add your Clerk API keys, Liveblocks keys, etc. (Refer to the example .env.example).
  1. Run the development server:
npm run dev
  1. Visit http://localhost:3000 in your browser.

Architecture and Core Concepts

1. Real-Time Collaboration with Liveblocks

  • Room Management: Each document session is represented as a "room".
  • Live Cursors & User Presence: See collaborator activity in real-time.
  • Data Synchronization: All changes are instantly synchronized across users.

2. Authentication with Clerk

  • Easy-to-use user management and authentication.
  • Customizable sign-in, sign-up, and user management flows.

3. Rich-Text Editing with Lexical

  • Advanced text formatting options with a modern markdown editor.
  • Extensible with custom plugins for additional functionality.

Screenshots & Demonstrations

1. Home Page

Home Page Screenshot

2. Real-Time Editing

Real-Time Editing GIF

Challenges & Solutions

Challenge 1: Real-Time Synchronization

Solution: Leveraged Liveblocks to provide seamless, real-time data synchronization, ensuring all user changes are instantly reflected.

Challenge 2: Rich-Text Editing with Performance

Solution: Implemented Lexical, a performant text editor by Meta, and customized it with plugins for markdown support.

Challenge 3: Responsive Design

Solution: Used Tailwind CSS utility classes for a mobile-first, fully responsive layout.

Future Improvements

  • Advanced Permissions System: Granular control over document access and user roles.
  • Offline Support: Implement caching mechanisms for offline editing.
  • Enhanced Commenting System: Support for threaded conversations and reactions.

License

This project is licensed under the MIT License.

Contact & Contributions

For suggestions, contributions, or to report issues, please feel free to open an issue or contact me.