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

Google Docs Clone Course - Detailed Summary

Key Concepts:

• Real-time collaborative document editor
• Rich text editing
• User and organization management
• Next.js 15, React 19, Convex, Liveblocks, Clerk
• Tiptap editor
• Shadcn UI component library
• Server Components & Client Components
• Route Groups & Dynamic Routes
• Convex schema and mutations
• Liveblocks presence and authentication
• Peer Dependencies & Legacy Peer Deps
• Tailwind CSS styling
• Print styling
• Global state management (Zustand)
• Custom Tiptap extensions
• Print styling
• Global error boundaries

1. Project Overview and Features:

• The course aims to build a fully functional Google Docs clone using modern web technologies.
• Real-time Collaboration: Multiple users can simultaneously edit the same document.
  • Example: One user types while another formats text or adds comments.
• Commenting System: Users can tag each other and discuss specific parts of the document.
  • Notification system tracks mentions and comments.
• Document Templates: Users can choose from various templates (software project proposals, business letters, resumes).
• Rich Text Editor: Includes heading styles, bullet lists, checklists, links, table insertion, font customization, and image uploads.
• Document Export: Supports exporting documents in HTML, PDF, plain text, and JSON formats.
• Account Management: Supports personal and organization accounts with an invite system for organizations.

2. Technology Stack:

• Next.js 15: A React framework for building server-rendered and statically generated web applications.
• React 19: A JavaScript library for building user interfaces.
• Convex: A real-time database for storing and synchronizing data.
• Liveblocks: A platform for building collaborative experiences.
• Clerk: A user management and authentication platform.

3. Setting Up the Project:

• System Requirements: Minimum Node.js version 18.18.
  • Check version using node -v in the terminal.
  • Install the latest Node.js LTS version if needed.
  • Ensure npm and npx are available.
• Next.js Version: Using Next.js 15.0.3 for consistent results.
  • Install with npx [email protected].
• Project Configuration:
  • Use TypeScript.
  • Use Tailwind CSS.
  • Use the src directory.
  • Use the App Router.
  • Do not use Turbopack.
  • Do not customize the import alias.
• React 19 Release Candidate:
  • React 19 is a release candidate and may cause issues with some npm packages.
  • Package maintainers need to update their packages to include React 19 as a peer dependency.
  • Using npm is recommended because it shows errors if a package does not have React 19 as a peer dependency.
  • Bun and pnpm only show silent warnings.
  • To fix peer dependency issues, use the --legacy-peer-deps flag during installation.
• Shadcn UI Setup:
  • Install Shadcn UI using npx shadcn-ui@latest init.
  • Fixate the version to 2.1.6 by running npx [email protected] init.
  • Select New York style, neutral base color, and CSS variables for theming.
  • Choose "Legacy peer deps" when prompted about React 19 issues.
  • Add all components at once using npx [email protected] add --all.
• Tailwind CSS Configuration:
  • Ensure the tailwind.config.js file is correctly configured with the routes where Tailwind is used.
  • Example: If creating a new folder inside src called Primitives, update the tailwind.config.js file to include this folder.
• Starting the Project:
  • Navigate to the project directory using cd docs-tutorial.
  • Run the project using npm run dev.

4. Project Structure and Routing:

• Reserved File Names: page.tsx and layout.tsx are reserved file names in Next.js.
• Route Creation: Create a folder inside the app folder to create a route.
  • Example: Creating a folder called documents will create a route at /documents.
  • The page.tsx file inside the folder will be the content of the route.
  • The layout.tsx file inside the folder will be the layout of the route.
• Nested Routes: Create a folder inside another folder to create a nested route.
  • Example: Creating a folder called 123 inside the documents folder will create a route at /documents/123.
• Dynamic Routes: Use square brackets [] to create dynamic routes.
  • Example: Creating a folder called [documentId] inside the documents folder will create a dynamic route at /documents/:documentId.
  • Access the dynamic route parameters using await params.documentId inside the page.tsx file.
• Route Groups: Use parentheses () to group routes without affecting the URL structure.
  • Example: Creating a folder called (auth) inside the app folder will not include auth in the URL.
• Layouts: Create a layout.tsx file inside a route folder to define a layout for that route.
  • The layout component must accept a children prop.
  • Layouts do not re-render when navigating between routes within the same layout.
• Linking Between Pages: Use the Link component from next/link to create links between pages.

5. Implementing the Editor:

• Tiptap Installation:
  • Install Tiptap dependencies using npm install @tiptap/react @tiptap/pm @tiptap/starter-kit.
  • Specify exact versions: npm install @tiptap/[email protected] @tiptap/[email protected] @tiptap/[email protected].
  • Add --legacy-peer-deps flag to resolve peer dependency issues.
• Editor Component:
  • Import useEditor and EditorContent from @tiptap/react.
  • Import StarterKit from @tiptap/starter-kit.
  • Create an editor instance using useEditor.
  • Render the editor content using EditorContent.
• Client Component:
  • Mark the editor component as a client component by adding "use client" at the top of the file.
  • This is necessary because Tiptap uses React hooks, which can only be used in client components.
• Styling the Editor:
  • Add CSS styles to the editor content to make it look like an A4 paper.
  • Use Tailwind CSS classes for basic styling.
  • Use inline styles for dynamic styling (e.g., padding).
  • Add print styles to ensure the document looks good when printed.
• Adding Extensions:
  • Starter Kit includes essential editor extensions (e.g., headings, bullet lists, code blocks).
  • Install additional extensions using npm (e.g., @tiptap/extension-task-list, @tiptap/extension-image).
  • Import and add the extensions to the extensions array in the useEditor hook.
• Styling Extensions:
  • Add CSS styles for the extensions in the globals.css file.
  • Use the .tiptap class to target Tiptap elements.
  • Copy styles from the extension's styles.css or styles.scss file.

6. Building the Toolbar:

• Toolbar Component:
  • Create a Toolbar component to hold the editor controls.
  • Mark the toolbar component as a client component.
• Toolbar Button Component:
  • Create a ToolbarButton component to represent a button in the toolbar.
  • Accepts onClick, isActive, and icon props.
  • Uses the cn utility function to merge Tailwind CSS classes safely.
• Global State Management (Zustand):
  • Install Zustand using npm install [email protected] --legacy-peer-deps.
  • Create a store to hold the editor instance.
  • Use the store to share the editor instance between the editor component and the toolbar component.
  • Update the store whenever the editor instance changes (e.g., on create, on update, on selection update).
• Adding Toolbar Buttons:
  • Create an array of sections, where each section is an array of button objects.
  • Each button object has a label, icon, onClick, and isActive property.
  • Render the sections in the toolbar component.
• Implementing Button Functionality:
  • Use the editor instance from the store to implement the button functionality.
  • Example: For the "bold" button, use editor.chain.focus().toggleBold().run().
  • Use the editor.isActive() method to determine if a button should be active.

7. Custom Tiptap Extensions:

• Creating a Custom Extension:
  • Create a new file in the src/extensions folder (e.g., font-size.ts).
  • Import Extension from @tiptap/core.
  • Define the extension using Extension.create().
  • Give the extension a name.
  • Add options (e.g., types).
  • Add global attributes (e.g., fontSize).
  • Add commands (e.g., setFontSize, unsetFontSize).
• Adding the Extension to the Editor:
  • Import the extension in the editor component.
  • Add the extension to the extensions array in the useEditor hook.

8. Liveblocks Integration:

• Liveblocks Account: Create a Liveblocks account and obtain your API keys.
• Liveblocks Installation:
  • Install Liveblocks dependencies using npm install @liveblocks/client @liveblocks/react @liveblocks/react-tiptap @liveblocks/react-ui.
  • Specify exact versions: npm install @liveblocks/[email protected] @liveblocks/[email protected] @liveblocks/[email protected] @liveblocks/[email protected].
  • Add --legacy-peer-deps flag to resolve peer dependency issues.
• Liveblocks Configuration:
  • Create a liveblocks.config.ts file.
  • Add the liveblocks plugin to your Next.js configuration.
• Room Component:
  • Create a Room component to wrap the editor.
  • Pass the document ID as the roomId to the LiveblocksProvider.
• Use Liveblocks Extension:
  • Import and add the useLiveblocks extension to the Tiptap editor.
• Authentication:
  • Create an API endpoint to authenticate users with Liveblocks.
  • Use the Liveblocks secret key to verify the user's identity.
  • Use the Clerk user ID to identify the user.
  • Return a Liveblocks session to the client.
• User Mapping:
  • Use the resolveUsers prop on the LiveblocksProvider to map user IDs to user data.
  • Fetch user data from your database or authentication provider.
• Presence:
  • Use the useOthers hook to access the presence data of other users in the room.
  • Display the avatars of other users in the room.

9. Clerk Authentication:

• Clerk Account: Create a Clerk account and create a new application.
• Clerk Installation:
  • Install Clerk dependencies using npm install @clerk/nextjs.
• Environment Variables:
  • Add the Clerk publishable key and secret key to your .env.local file.
• Middleware:
  • Create a middleware.ts file in the src directory to add Clerk to your Next.js environment.
• JWT Template:
  • Create a JWT template in the Clerk dashboard.
  • Copy the issuer URL and add it to your auth.config.ts file.
• Convex Client Provider:
  • Modify the ConvexClientProvider component to work with Clerk.
  • Use the useAuth hook from @clerk/clerk-react to get the user's authentication state.
  • Pass the user's authentication token to the Convex client.
• Protecting Routes:
  • Use the Authenticated, Unauthenticated, and AuthLoading components from @clerk/clerk-react to protect routes.
• User Button:
  • Use the UserButton component from @clerk/clerk-react to display a user profile button.

10. Deployment:

• GitHub Repository: Create a new GitHub repository for your project.
• Vercel Account: Create a Vercel account and link it to your GitHub repository.
• Vercel Configuration:
  • Override the build command in Vercel to use npx convex deploy.
  • Add the Convex deploy key and other environment variables to Vercel.
• Deployment:
  • Deploy your project to Vercel.

11. Key Statements:

• "Next.js changes very fast and if you want the best experience of following this tutorial and getting the exact same result as I do the closer your versions are to mine the better experience and end result you are going to have."
• "Shad CN is not a component Library it's a collection of reusable components that we can copy and paste inside of our apps"
• "Every component inside of the app folder is a server component by default"
• "From now on you can access the pams using await pams that is the proper way of doing it"

12. Technical Terms and Concepts:

• Peer Dependencies: Dependencies that a package expects the user to have installed in their project.
• Release Candidate: A pre-release version of software that is being tested before it is officially released.
• Route Groups: A way to group routes in Next.js without affecting the URL structure.
• Dynamic Routes: Routes in Next.js that can accept parameters.
• Server Components: React components that are rendered on the server.
• Client Components: React components that are rendered on the client.
• Global State Management: A way to share state between different components in an application.
• Custom Tiptap Extensions: A way to extend the functionality of the Tiptap editor.
• Liveblocks Presence: A way to track the presence of other users in a Liveblocks room.
• JWT (JSON Web Token): A standard for securely transmitting information between parties as a JSON object.
• Convex Schema: A definition of the data structure in a Convex database.
• Convex Mutations: Functions that modify data in a Convex database.
• Convex Queries: Functions that read data from a Convex database.
• Full-Text Search: A technique for searching text data based on keywords.
• Debouncing: A technique for limiting the rate at which a function is called.

13. Logical Connections:

• The course starts with setting up the project and introducing the core technologies.
• It then moves on to implementing the editor and building the toolbar.
• Next, it covers user management and authentication.
• Finally, it integrates Liveblocks for real-time collaboration and deploys the application.
• Each section builds upon the previous one, creating a complete and functional application.

14. Data, Research Findings, or Statistics:

• Minimum Node.js version required: 18.18
• Next.js version used: 15.0.3
• Shadcn UI version used: 2.1.6
• Zustand version used: 5.0.1
• Tiptap versions used: 2.10.2
• React Color version used: 2.9.3
• React Icons version used: 5.3.0
• Liveblocks versions used: 2.2.2
• Knox version used: 2.2.3

15. Synthesis/Conclusion:

This course provides a comprehensive guide to building a real-time collaborative document editor using modern web technologies. It covers everything from setting up the project to implementing advanced features like user management, authentication, and live collaboration. By the end of the course, you will have a powerful document editor that demonstrates your ability to create complex and interactive web applications. The course emphasizes practical application and provides detailed instructions for each step of the development process.