LiveDocs - Your go-to collaborative editor.

LiveDocs is an innovative platform designed to revolutionize real-time collaboration. Whether you're working on a team document, brainstorming ideas, or organizing projects, LiveDocs empowers you with seamless text editing, rich commenting features, and an intuitive user interface. Built with cutting-edge technology, it ensures a secure, efficient, and responsive experience for teams of all sizes.

---

📑 Table of Contents

• ✨ Features
• 🛠️ Technologies Used
• 📂 File Structure
• 🚀 Getting Started
• 🙏 Acknowledgements
• 📜 License

---

✨ Features

LiveDocs is a collaborative text editor designed to deliver a seamless real-time editing experience. Here's what makes it stand out:

• Authentication: Secure and seamless user authentication with Clerk.
• Collaborative Editing: Real-time text editing with multiple users.
• Document Management: Create, delete, share, and organize your documents effortlessly.
• Comments: Add inline or general comments and engage in threaded discussions.
• Active Collaboration Indicators: See who else is editing the document in real-time.
• Notifications: Stay updated with document activities and shared access.
• Responsive Design: Optimized for all devices.

And much more, including thoughtfully designed code architecture and reusable components.

---

🛠️ Technologies Used

LiveDocs is powered by a modern tech stack:

• Next.js: The backbone of the user interface.
• TypeScript: For type safety and robust code.
• Liveblocks: Enables real-time collaboration features.
• Lexical Editor: A rich text editor for flexible content creation.
• ShadCN: Component styling and management.
• Tailwind CSS: For custom, responsive, and scalable styling.
• Clerk: Secure and seamless user authentication.
• Sentry: Error monitoring and performance tracking.

---

📂 File Structure

The project is organized as follows:

├── components.json
├── eslint.config.mjs
├── LICENSE
├── liveblocks.config.ts
├── next.config.ts
├── next-env.d.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── public
├── README.md
├── sentry.client.config.ts
├── sentry.edge.config.ts
├── sentry.server.config.ts
├── src
│   ├── app
│   │   ├── api
│   │   │   └── liveblocks-auth
│   │   │       └── route.ts
│   │   ├── (auth)
│   │   │   ├── sign-in
│   │   │   │   └── [[...sign-in]]
│   │   │   │       └── page.tsx
│   │   │   └── sign-up
│   │   │       └── [[...sign-up]]
│   │   │           └── page.tsx
│   │   ├── favicon.ico
│   │   ├── global-error.tsx
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   ├── Provider.tsx
│   │   └── (root)
│   │       ├── documents
│   │       │   └── [id]
│   │       │       └── page.tsx
│   │       └── page.tsx
│   ├── components
│   │   ├── ActiveCollaborators.tsx
│   │   ├── AddDocumentBtn.tsx
│   │   ├── CollaborativeRoom.tsx
│   │   ├── Collaborator.tsx
│   │   ├── Comments.tsx
│   │   ├── DeleteModal.tsx
│   │   ├── editor
│   │   │   ├── Editor.tsx
│   │   │   └── plugins
│   │   │       ├── FloatingToolbarPlugin.tsx
│   │   │       ├── Theme.ts
│   │   │       └── ToolbarPlugin.tsx
│   │   ├── Header.tsx
│   │   ├── Loader.tsx
│   │   ├── Notifications.tsx
│   │   ├── ShareModal.tsx
│   │   ├── ui
│   │   │   ├── button.tsx
│   │   │   ├── dialog.tsx
│   │   │   ├── input.tsx
│   │   │   ├── label.tsx
│   │   │   ├── popover.tsx
│   │   │   └── select.tsx
│   │   └── UserTypeSelector.tsx
│   ├── instrumentation.ts
│   ├── lib
│   │   ├── actions
│   │   │   ├── room.actions.ts
│   │   │   └── user.actions.ts
│   │   ├── liveblocks.ts
│   │   └── utils.ts
│   ├── middleware.ts
│   └── styles
│       ├── dark-theme.css
│       └── light-theme.css
├── tailwind.config.ts
├── tsconfig.json
└── types
    └── index.d.ts

---

🚀 Getting Started

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

Prerequisites

Ensure you have the following installed on your machine:

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

Cloning the Repository

git clone https://github.com/iamfitsum/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=

# Sentry
SENTRY_AUTH_TOKEN=

Replace the placeholder values with your actual Clerk, Liveblocks, and Sentry credentials. Obtain these credentials by signing up on the respective platforms.

Running the Project

Start the development server:

npm run dev

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

---

🙏 Acknowledgements

Special thanks to Adrian from JSMastery for his insightful video tutorial that guided the development of this project. Check out the course video here.

---

📜 License

This project is open-source and available under the MIT License.