Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jhwa426/collaborative-editor
Built a Full-Stack Collaborative Editor using TypeScript and Next JS, which enabled a collaborative text editor with real-time updates, document management, comments with threading, active collaborator indicators, and responsive design across all devices.
https://github.com/jhwa426/collaborative-editor
full-stack-web-development git lexical-editor liveblocks nextjs shadcn-ui tailwindcss typescript vercel
Last synced: 15 days ago
JSON representation
Built a Full-Stack Collaborative Editor using TypeScript and Next JS, which enabled a collaborative text editor with real-time updates, document management, comments with threading, active collaborator indicators, and responsive design across all devices.
- Host: GitHub
- URL: https://github.com/jhwa426/collaborative-editor
- Owner: jhwa426
- Created: 2024-08-15T23:08:48.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-09-12T00:42:12.000Z (2 months ago)
- Last Synced: 2024-10-10T19:29:46.009Z (about 1 month ago)
- Topics: full-stack-web-development, git, lexical-editor, liveblocks, nextjs, shadcn-ui, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage: https://collaborative-editor-ce.vercel.app
- Size: 599 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Collaborative Editor
Built a Full-Stack Collaborative Editor using TypeScript and Next JS, which enabled a collaborative text editor with real-time updates, document management (including create, delete, share, and list operations), comments with threading, active collaborator indicators, and responsive design across all devices.
## [Collaborative Editor](https://collaborative-editor-ce.vercel.app)
### Features
- Authentication: User authentication using Google 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: CRDU operations (Create, Delete, Share, List)
- **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
## Technical Skills 💻
## Getting Started
### Installation
1. Open Terminal.
2. Change the current working directory to the location where you want the cloned directory.
3. Clone the repository: `git clone https://github.com/jhwa426/Collaborative-Editor`
4. Navigate to the project directory: `cd collaborative-editor`
5. Install the dependencies: `npm install`
6. Set Up Environment Variables
Create a new file named `.env.local` 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=
```
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
7. Open your browser and visit: `http://localhost:3000`