Build a Real-Time Google Docs Clone With Next 15, React, Tailwind (2024)
ā Source code: https://cwa.run/google-docs-code 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
Build and Deploy an N8N & Zapier Clone | Next.js 15, React, Better Auth, Polar | Full Course 2025
Build and Deploy a B2B AI SaaS Support Platform | Next.js 15, React, Convex, Turborepo, Vapi, AWS
SaaS Notion Clone with Realtime cursors, Nextjs 13, Stripe, Drizzle ORM, Tailwind, Supabase, Sockets
Build and Deploy an AI Automation Platform | Next.js 15, React, Better Auth | Zapier & N8N Clone
Build and Deploy Claude Skills and MCP Servers | The Complete 2026 Guide
ShopStack: Production-Ready E-commerce Solution with React 19, Stripe & TanStack Start | Part 1/3
Don't Pay for Claude Code | Build This Instead
Full Stack AI Voice SaaS: Next.js, tRPC, and Voice Cloning
Uninterrupted Deep Work Mix ~ Immersive Productivity Soundscape ~ Neural Focus Study Music
Build a Complete SaaS With Next.js, Tailwind, React, Hono.js (2024)
AI Presentation Builder (PART 1/2) - Nextjs 15, OpenAI, LemonSqueezy, Prisma, Clerk, Neon
CLAUDE CODE ADVANCED FULL COURSE (3 HOURS)
Build a Real-Time Slack Clone With Nextjs, React, Tailwind, Auth.js | Part 1/2 (2024)
Real-Time WebSockets Course | Build a Live Sports Dashboard with Node.js & PostgreSQL
8 Hours - Relaxing Music with Sea Turtles in Hawaii | Great Escapes
Hyper Focus Mode | Concentration Music Productivity | Work Focus Background | Deep Flow 2026
Full Archon Guide - Build AI Coding Harnesses That Actually Ship (LIVE)
Build and Deploy a SaaS AI Website Builder | Next.js 15, React, Inngest, Prisma | Lovable clone
Build a Jira Clone With Nextjs, React, Tailwind, Hono.js | Part 1/2 (2024)
