https://github.com/davanesh/google_docs_clone
SyncDocs is a real-time collaborative document editing application built with Next.js 15 and Tailwind CSS for the frontend, Clerk for authentication, Liveblocks for seamless real-time collaboration, and Convex for the backend. It offers a modern, responsive, and intuitive interface for creating, editing, and managing documents collaboratively. 🚀
https://github.com/davanesh/google_docs_clone
Last synced: about 1 year ago
JSON representation
SyncDocs is a real-time collaborative document editing application built with Next.js 15 and Tailwind CSS for the frontend, Clerk for authentication, Liveblocks for seamless real-time collaboration, and Convex for the backend. It offers a modern, responsive, and intuitive interface for creating, editing, and managing documents collaboratively. 🚀
- Host: GitHub
- URL: https://github.com/davanesh/google_docs_clone
- Owner: Davanesh
- Created: 2024-12-02T15:52:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-14T21:06:37.000Z (over 1 year ago)
- Last Synced: 2025-03-28T18:51:51.297Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://syncdocs.vercel.app
- Size: 990 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
SyncDocs
SyncDocs is a powerful, real-time collaborative document editing application inspired by Google Docs. With cutting-edge technology and a sleek, modern design, SyncDocs allows users to create, edit, and collaborate seamlessly.
🌟 Features
🔒 Authentication: Secure and user-friendly authentication powered by Clerk.
🌐 Real-Time Collaboration: Collaborate in real-time using Liveblocks for a smooth user experience.
🗄️ Backend: Scalable and efficient backend powered by Convex.
🎨 Modern Frontend: Built with Next.js 15 and styled using Tailwind CSS for a responsive and intuitive interface.
📄 Document Management: Create, edit, and save documents effortlessly.
🚀 Tech Stack
Frontend:
Next.js 15
Tailwind CSS
Backend:
Convex
Authentication:
Clerk
Real-Time Collaboration:
Liveblocks
🛠️ Installation
Follow these steps to run SyncDocs locally:
Clone the repository:
git clone https://github.com/your-username/syncdocs.git
cd syncdocs
Install dependencies:
npm install --legacy-peer-deps
Set up environment variables:
Create a .env.local file in the root directory and add the following:
# Deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
LIVEBLOCK_SECRET_KEY=
Run the development server:
npm run dev
Open http://localhost:3000 in your browser to see the application in action.
📂 Project Structure
app/ - Main application folder for Next.js 15 with the following structure:
(home)/ - Contains components for the home page such as documents-table.tsx, navbar.tsx, page.tsx, search-input.tsx, and templates-gallery.tsx.
api/ - Contains backend-related files powered by Convex.
documents/ - Contains the [documentId]/ folder with all the components of the editor, including:
actions.ts
avatars.tsx
document-input.tsx
document.tsx
editor.tsx
inbox.tsx
loading.tsx
navbar.tsx
page.tsx
room.tsx
ruler.tsx
threads.tsx
toolbar.tsx
fonts/ - Manages custom fonts for the application.
error.tsx - Error page.
favicon.ico - App favicon.
globals.css - Global styles.
layout.tsx - Application layout.
components/ - Reusable React components, including:
ui/ - UI components like fullscreen-loader.tsx, remove-dialog.tsx, and rename-dialog.tsx.
convex-client-provider.tsx - Provides Convex client integration.
constants/ - Holds application constants.
extensions/ - Additional functionalities or extensions.
hooks/ - Custom React hooks.
lib/ - Utility libraries.
store/ - State management logic.
🌐 Live Demo
Check out the live version here: https://syncdocs.vercel.app