Build a Real-Time Google Docs Clone With Next 15, React, Tailwind (2024)

Опубликовано: 30 Ноябрь 2024
на канале: Code With Antonio

8,417

877

⭐ Source code & more: https://dub.sh/yHzgD0r
Assets: https://dub.sh/docs-clone-assets
Liveblocks: https://lblcks.io/7qfuW9W
Clerk: https://go.clerk.com/3ywohHV
Convex: https://convex.dev/c/cwa

Hi all 👋 In this 10-hour tutorial you will learn how to create a full-stack Google docs clone, including real-time collaboration, comments, threads, an advanced TipTap editor, custom extensions, templates and much more.

Key Features:

📝 Rich Text Editor
🤝 Real-time Collaboration & Database
💭 Comments and Mentions
🔔 Notifications System
📑 Document Templates
📋 Copy and Paste Formatting
↩️ Undo/Redo History
📊 Table Support
🖼️ Image Uploads
📏 Margin Controls
⬇️ Export (PDF, HTML, TXT, JSON)
👥 User Profiles
🏢 Organization Workspaces
✉️ Organization Invites
🔒 Authentication
📱 Responsive Design
🎯 Cursor Tracking
🎨 Text Formatting Tools
📝 Lists and Checklists
🔗 Link Embedding
⚛️ Framework Next.js 15
🎨 Shadcn UI & Tailwind CSS
🚀 Deployment on Vercel

Timestamps
00:00 Intro & demo
02:13 Project setup
28:44 Project structure
46:49 Tiptap editor
01:02:28 Tiptap extensions
01:26:49 Editor store
01:44:38 Editor tools
01:58:18 Font family & headings tools
02:19:05 Color tools (text & highlight)
02:33:26 Link and image tools
02:51:23 Align and list tools
03:00:03 Font size tool (custom extension)
03:19:40 Line height tool (custom extension)
03:32:55 Margin ruler component
03:59:42 Navigation bar component
04:23:57 Navigation bar tools
04:35:01 Search input component
05:00:54 Template gallery component
05:16:25 Database setup (Convex)
05:33:29 Authentication setup (Clerk)
05:51:27 Create and list documents
06:19:00 Update and delete documents
06:49:22 Search documents
06:57:25 Organizations feature
07:23:29 Collaboration setup (Liveblocks)
07:47:12 Room permissions
08:09:06 Populate user information
08:30:35 Notifications feature
08:47:19 Collaborative margin ruler
08:53:29 Document information
09:27:31 Templates initial content & app optimization
09:39:27 Deployment (Vercel)
09:58:27 Editor autofocus & redeploy