A Collaborative LiveDocs

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🔗 Links

🤖 Introduction

Built with Next.js to handle the user interface, Liveblocks for real-time features and styled with TailwindCSS, LiveDocs is a clone of Goole Docs. The primary goal is to demonstrate the developer's skills in realtime enviroment that creates a lasting impact.

⚙️ Tech Stack

• Next.js
• TypeScript
• Liveblocks
• Clerk
• Lexical Editor
• ShadCN
• Tailwind CSS

🔋 Features

👉 Authentication: User authentication using Google/GitHub through Clerk, ensuring secure sign-in/out and session management.

👉 Collaborative Text Editor: Multiple users can edit the same document simultaneously with real-time updates.

👉 Documents Management

• Create Documents: Users can create new documents, which are automatically saved and listed.
• Delete Documents: Users can delete documents they own.
• Share Documents: Users can share documents via email or link with view/edit permissions.
• List Documents: Display all documents owned or shared with the user, with search and sorting functionalities.

👉 Comments: Users can add inline and general comments, with threading for discussions.

👉 Active Collaborators on Text Editor: Show active collaborators with real-time presence indicators.

👉 Notifications: Notify users of document shares, new comments, and collaborator activities.

👉 Responsive: The application is responsive across all devices.

and many more, including code architecture and reusability

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

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

Cloning the Repository

git clone https://github.com/swamiabhishek45/live-docs.git
cd live-docs

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

#Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

#Liveblocks
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=
LIVEBLOCKS_SECRET_KEY=

Replace the placeholder values with your actual Clerk & LiveBlocks credentials. You can obtain these credentials by signing up on the Clerk and Liveblocks website.

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

🔗 Links

• Public assets used in the project can be found here
• Liveblocks Starter Guide
• Clerk Starter Guide