Introduction

Linkpad is a real-time collaborative web application that allows users to share and edit documents. With features like live cursors, real-time text updates, and threaded comments, it’s an tool for teams, writers, and developers looking to collaborate efficiently.

Features

• Real-Time Collaboration: Edit documents with others in real time. Changes are synced for all participants.
• Live Cursor: See the cursors of other collaborators as they edit the document.
• Threaded Comments: Leave comments and create threads for discussions directly in the document.
• Modern UI: Built with Tailwind CSS for a sleek and responsive design.
• Secure Authentication: User accounts are managed using Clerk, ensuring secure access.

Tech Stack

• Frontend and Backend: Next.js and React
• Styling: Tailwind CSS
• Authentication: Clerk
• Real-Time Collaboration: Liveblocks
• Programming Language: TypeScript

Installation

Prerequisites

Make sure you have the following installed:

• Node.js
• Yarn or npm

Steps

1. Clone the repository:

   git clone https://github.com/your-username/Linkpad.git
   cd Linkpad

2. Install dependencies:

   yarn install

   or

   npm install

3. Create a .env.local file in the root directory and add the necessary environment variables:

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key
   CLERK_SECRET_KEY=your-clerk-secret-key
   
   LIVEBLOCKS_SECRET_KEY=your-liveblocks-secret-key
   

4. Run the development server:

   yarn dev

   or

   npm run dev

5. Open the app in your browser:

   http://localhost:3000
   

Usage

• Create a new document: Start a new document and share it by using the email of collaborator.
• Collaborate: See live updates from collaborators and interact via comments and threads.
• Customize: Use the modern, responsive UI to focus on your workflow.