https://github.com/kanadshee-18/syncboard
SyncBoard is a Google Docs-like editor that enables seamless real-time collaboration 🔄 and personal document editing ✏️. Built with Next.js ⚛️, Liveblocks ⚡, Clerk 🔑, and Tailwind CSS 🎨, it ensures a smooth 🏄♂️ and efficient ⚡ writing experience. 🚀
https://github.com/kanadshee-18/syncboard
clerk convex liveblocks next15 nuqs react19 tailwind-css tiptap-editor
Last synced: 4 months ago
JSON representation
SyncBoard is a Google Docs-like editor that enables seamless real-time collaboration 🔄 and personal document editing ✏️. Built with Next.js ⚛️, Liveblocks ⚡, Clerk 🔑, and Tailwind CSS 🎨, it ensures a smooth 🏄♂️ and efficient ⚡ writing experience. 🚀
- Host: GitHub
- URL: https://github.com/kanadshee-18/syncboard
- Owner: KanadShee-18
- Created: 2025-02-23T06:47:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-26T07:49:10.000Z (over 1 year ago)
- Last Synced: 2025-02-26T08:34:20.476Z (over 1 year ago)
- Topics: clerk, convex, liveblocks, next15, nuqs, react19, tailwind-css, tiptap-editor
- Language: TypeScript
- Homepage: https://sync-board-alpha.vercel.app
- Size: 3.52 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sync Board
[🌎 Visit Site](https://sync-board-alpha.vercel.app)
- **Sync Board** is a **real-time collaborative document editor** built with **Next.js 15** and **Tiptap Editor**. It enables users to create and edit various types of documents in real time, leveraging **Liveblocks** for seamless collaboration. Users can mention others in documents, chat while editing, and use **prebuilt templates** to kickstart their work. Additionally, Sync Board allows saving documents in multiple formats.
## 
## Features
### 🚀 Real-Time Collaboration
- Users can edit documents simultaneously.
- Changes are reflected instantly using **Liveblocks**.
### 💬 User Mentions & Chat
- Mention other users within the document.
- Engage in inline discussions while editing.
### 📄 Prebuilt Templates
- Various document templates to choose from.
- Saves time by providing ready-made structures.
### 💾 Export & Save Documents
- Save files in multiple formats (PDF, Markdown, etc.).
- Download documents easily.
### 🎨 Beautiful UI
- Styled with **Tailwind CSS** for a modern and responsive experience.
## Tech Stack
- **Frontend:** Next.js 15, React, Tailwind CSS
- **Editor:** Tiptap
- **Real-Time Collaboration:** Liveblocks
- **Authentication:** Clerk
- **Deployment:** Vercel
---
## Installation & Setup
1. Clone the repository:
```bash
git clone https://github.com/KanadShee-18/SyncBoard.git
```
2. Install dependencies:
```bash
npm install --legacy-peer-deps
```
for yarn or bun it will be simple,
```
bun install or, yarn install
```
3. Set up environment variables:
```plaintext
CONVEX_DEPLOYMENT=your_api_key
NEXT_PUBLIC_CONVEX_URL=generated through npx convex dev
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=clerk_secret_key
LIVEBLOCKS_SECRET_KEY=liveblocks_secret
```
4. Run the development server:
```bash
npm run dev
```
and also
```
npx convex dev
```
5. Open [http://localhost:3000](http://localhost:3000) in your browser and see how cool it is.
## Usage
1. Sign in and create a new document.
2. Choose a template or start from scratch.
3. Mention collaborators and edit in real-time.
4. Save or export your document in the desired format.
## Contributing
We welcome contributions! Feel free to:
- Open issues for bugs or feature requests.
- Submit pull requests for improvements.
---
### 📞 Connect with Us
For any queries or feedback, reach out via [GitHub Issues](https://github.com/KanadShee-18/SyncBoard/issues).
---
## THANK YOU !