https://github.com/bernietv/google-docs-clone
A collaborative, real-time document editing web application inspired by Google Docs.
https://github.com/bernietv/google-docs-clone
clerk convex liveblocks nextjs react shadcn-ui tailwindcss tiptap typescript
Last synced: 3 months ago
JSON representation
A collaborative, real-time document editing web application inspired by Google Docs.
- Host: GitHub
- URL: https://github.com/bernietv/google-docs-clone
- Owner: BernieTv
- Created: 2024-12-26T16:36:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-25T13:35:50.000Z (over 1 year ago)
- Last Synced: 2025-01-25T14:24:48.259Z (over 1 year ago)
- Topics: clerk, convex, liveblocks, nextjs, react, shadcn-ui, tailwindcss, tiptap, typescript
- Language: TypeScript
- Homepage: https://google-docs-clone-delta-tan.vercel.app
- Size: 312 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Google Docs Clone ✨
A powerful, collaborative document editor built with modern web technologies, offering seamless real-time editing, rich text formatting, and an intuitive user experience. 📝💻
This platform is designed to streamline document creation and team collaboration, empowering organizations to work efficiently and effectively. 🚀💪
---
## 🚀 **Key Features**
### 🔐 **Authentication & Organization Management** 🔒
- Secure user authentication powered by **Clerk** 🔑
- Seamless management of **personal** and **organizational workspaces** 🏢
- **Role-based access control** to ensure data security and proper permissions 🛡️
### 📝 **Rich Text Editing** ✍️
- Advanced text formatting: **bold, italic, underline** 🖋️
- Customizable **font family and sizes** 🖌️
- Support for **text and highlight colors** 🎨
- Intuitive **lists and task management** ✔️
- **Tables** with resizable columns 🗂️
- **Image insertion and resizing** 🖼️
- Efficient **link management** 🔗
### 👥 **Real-Time Collaboration** 🤝
- Simultaneous **multi-user editing** 🧑🤝🧑
- Clear **user presence indicators** 👀
- Integrated **comments and discussion threads** 💬
- Visual **user avatars and status updates** 👤
- Instant **real-time updates** across devices 📲
### 📄 **Document Management** 📂
- Build documents from **ready-to-use templates** 📝
- Organize and manage files in **workspaces** 📁
- Powerful **search functionality** 🔍
- Export documents as **PDF, HTML, or Text** 📥
### 🎨 **Modern UI/UX** 🌟
- Sleek, **intuitive user interface** 🖥️
- Fully **responsive design** for all devices 📱
- Comprehensive **template gallery** 🖼️
- Handy **document toolbar** 🛠️
- Easy-to-use **file menu** 📋
---
## 🛠️ **Technology Stack** 🖥️
- **Framework:** Next.js 14 ⚡
- **Database & Backend:** Convex 🗄️
- **Real-Time Collaboration:** Liveblocks 🌍
- **Authentication:** Clerk 🔑
- **Rich Text Editor:** TipTap ✍️
- **UI Components:** Radix UI, Shadcn/UI 🎨
- **Styling:** Tailwind CSS 🌬️
---
## 📚 **Getting Started** 🏁
Follow these steps to set up the project:
1. **Clone the Repository:**
```bash
git clone https://github.com/BernieTv/Google-Docs-Clone
cd Google-Docs-Clone
```
2. **Install Dependencies:**
```bash
bun install
```
3. **Configure Environment Variables:**
Create a `.env.local` file with the following variables:
```env
NEXT_PUBLIC_CONVEX_URL=your_convex_url
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
CLERK_SECRET_KEY=your_clerk_secret
LIVEBLOCKS_SECRET_KEY=your_liveblocks_key
```
4. **Start Development Server:**
```bash
bun run dev
```
5. Open the application in your browser at [http://localhost:3000](http://localhost:3000). 🌐
---
## 📂 **Project Structure** 🗂️
```
src/
├── app/ # Next.js app router pages
├── components/ # Reusable UI components
├── constants/ # Application-wide constants
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── store/ # State management
└── types/ # TypeScript types
convex/ # Backend functions
public/ # Static assets
```
---
## 📑 **Document Templates** 🗒️
Easily kickstart your work with ready-to-use templates:
- **Blank Document** 📃
- **Software Proposal** 🖥️
- **Project Proposal** 💼
- **Business Letter** 📄
- **Resume** 🧑💼
- **Cover Letter** 💌
- **General Letter** ✉️
---
## 📜 **License** 📝
This project is licensed under the **MIT License**. 🔓
---
**Empowering Collaboration, One Document at a Time.** 💪📝