Collaborative Editor

Overview

LiveDocs is a clone of Google Docs built with Next.js, Liveblocks, and styled with TailwindCSS. The project aims to showcase real-time collaboration features while demonstrating the developer’s skills. With features like user authentication, collaborative text editing, document management, comments, and notifications, LiveDocs offers a comprehensive environment for working on documents with multiple users simultaneously.

Features

• Authentication: User authentication through GitHub using NextAuth for secure sign-in/out.
• Collaborative Text Editor: Real-time editing of documents by multiple users.
• Documents Management: Create, delete, share, and list documents with search and sorting capabilities.
• Comments: Inline and general comments with threading for discussions.
• Active Collaborators: Real-time presence indicators of active collaborators.
• Notifications: Alert users of document shares, new comments, and collaborator activities.
• Responsive Design: Application is responsive across all devices.

Installation

Prerequisites

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone <repository-url>
cd <repository-folder>

Installation

npm install

Set Up Environment Variables

Create a .env file in the project root and add:

CLERK_KEY=your-clerk-key
LIVEBLOCKS_KEY=your-liveblocks-key

Running the Project

npm start

Open http://localhost:3000 in your browser.

Summary

LiveDocs is a project showcasing real-time collaboration functionalities similar to Google Docs, built with Next.js, Liveblocks, and TailwindCSS. With features like authentication, collaborative editing, document management, and notifications, LiveDocs provides a robust environment for multiple users to work on documents concurrently. The easy setup process allows developers to quickly explore and utilize the project for their own real-time collaborative applications.