Live Docs

A real-time collaborative document editing application built with Next.js, Liveblocks, and Clerk authentication.

Tech Stack

Frontend

• Framework: Next.js 14 with React 18
• Styling: Tailwind CSS with Radix UI components
• Authentication: Clerk (@clerk/nextjs)
• Real-time Collaboration: Liveblocks (@liveblocks/react, @liveblocks/react-lexical)
• Text Editor: Lexical (@lexical/react)
• State Management: React Context (Liveblocks)
• Icons: Lucide React
• Error Tracking: Sentry (@sentry/nextjs)

Backend

• Runtime: Node.js with Next.js API Routes
• Real-time Server: Liveblocks Node.js (@liveblocks/node)
• Authentication: Clerk middleware
• Error Tracking: Sentry (@sentry/nextjs)

Project Structure

├── app/
│   ├── (auth)/           # Authentication pages (sign-in, sign-up)
│   ├── (root)/           # Main application routes
│   │   └── documents/    # Document management
│   ├── api/              # API routes
│   │   └── liveblocks-auth/  # Liveblocks authentication endpoint
│   └── layout.tsx        # Root layout
├── components/           # React components
│   ├── editor/           # Lexical editor components
│   ├── ui/               # Reusable UI components (Radix)
│   └── *.tsx             # Feature components (CollaborativeRoom, Comments, etc.)
├── lib/                  # Utility functions and server actions
│   ├── actions/          # Server actions for document operations
│   ├── liveblocks.ts     # Liveblocks server configuration
│   └── utils.ts          # Helper utilities
├── middleware.ts          # Clerk authentication middleware
├── liveblocks.config.ts  # Liveblocks type definitions
└── types/                # TypeScript type definitions

Key Features

Frontend

• Real-time collaborative document editing
• User authentication and management (sign-in/sign-up)
• Document creation, sharing, and deletion
• Real-time cursor presence and collaborator indicators
• Comment threads on documents
• Document sharing with permission controls
• Responsive UI with modern design

Backend

• Server-side authentication via Clerk middleware
• Liveblocks room authorization
• Document CRUD operations via server actions
• Real-time synchronization through Liveblocks WebSocket connection
• Sentry error monitoring and performance tracking

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Clerk account (for authentication)
• Liveblocks account (for real-time collaboration)
• Sentry account (for error tracking)

Installation

1. Clone the repository:

git clone <repository-url>
cd live_docs

2. Install dependencies:

npm install

3. Set up environment variables in .env.local:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
LIVEBLOCKS_SECRET_KEY=
SENTRY_DSN=

4. Run the development server:

npm run dev

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

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

License

MIT