https://github.com/booze33/liveblocks
https://github.com/booze33/liveblocks
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/booze33/liveblocks
- Owner: Booze33
- Created: 2024-07-22T12:23:17.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-13T10:47:39.000Z (almost 2 years ago)
- Last Synced: 2025-01-08T10:49:33.942Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://liveblocks-sepia.vercel.app
- Size: 563 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A Collaborative LiveDocs
## 📋 Table of Contents
1. ⚙️ [Tech Stack](#tech-stack)
2. 🔋 [Features](#features)
3. 🤸 [Quick Start](#quick-start)
4. 🕸️ [Snippets (Code to Copy)](#snippets)
5. 🚀 [More](#more)
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.
If you're getting started and need assistance or face any bugs, join our active Discord community with over **34k+** members. It's a place where people help each other out.
- Next.js
- TypeScript
- Liveblocks
- Lexical Editor
- ShadCN
- Tailwind CSS
## 🔋 Features
👉 **Authentication**: User authentication using GitHub through NextAuth, 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
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/adrianhajdin/collaborative-editor.git
cd collaborative-editor
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Set Up Environment Variables**
Create a new file named `.env` in the root of your project and add the following content:
```env
#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](https://clerk.com/) and [Liveblocks](liveblocks.io/) website.
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
#