Full-stack Realtime Google Docs Clone using Next.js 15 and Convex

📔 Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Buy Me a Coffee
• Follow Me
• Learn More
• Deploy on Vercel
• Give A Star
• Star History
• Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

google-docs-clone/
  |- convex/
    |-- _generated/
    |-- .env.example
    |-- .env.local
    |-- auth.config.ts
    |-- documents.ts
    |-- environment.d.ts
    |-- schema.ts
  |- public/
    |-- blank-document.svg
    |-- business-letter.svg
    |-- cover-letter.svg
    |-- letter.svg
    |-- logo.svg
    |-- project-proposal.svg
    |-- resume.svg
    |-- software-proposal.svg
  |- src/
    |-- app/
        |--- (home)/
        |--- api/
        |--- documents/
        |--- apple-icon.png
        |--- error.tsx
        |--- favicon.ico
        |--- globals.css
        |--- icon1.png
        |--- icon2.png
        |--- layout.tsx
        |--- not-found.tsx
    |-- components/
        |--- ui/
        |--- convex-client-provider.tsx
        |--- fullscreen-loader.tsx
        |--- remove-dialog.tsx
        |--- rename-dialog.tsx
    |-- config/
        |--- editor.ts
        |--- index.ts
    |-- constants/
        |--- index.ts
    |-- extensions/
        |--- font-size.ts
        |--- line-height.ts
    |-- hooks/
        |--- use-debounce.ts
        |--- use-search-param.tsx
    |-- lib/
        |--- utils.ts
    |-- store
        |--- use-editor-store.ts
    |-- middleware.ts
  |- .env.example
  |- .env.local
  |- .eslintrc.json
  |- .gitignore
  |- .prettierrc.json
  |- .prettierrc.mjs
  |- bun.lockb
  |- components.json
  |- environment.d.ts
  |- liveblocks.config.ts
  |- next.config.ts
  |- package.json
  |- postcss.config.mjs
  |- README.md
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env.local file in root and convex directory.
4. Contents of .env.local:

# disabled clerk and next.js telemetry
NEXT_TELEMETRY_DISABLED=1
CLERK_TELEMETRY_DISABLED=1

# app base url
NEXT_PUBLIC_APP_BASE_URL="http://localhost:3000"

# convex deployment & url
CONVEX_DEPLOYMENT="dev:<deployment-id>" # team: <team-id>, project: <project-id>
NEXT_PUBLIC_CONVEX_URL="https://<deployment-id>.convex.cloud"

# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
CLERK_SECRET_KEY="sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

# liveblocks keys
NEXT_PUBLIC_LIVEBLOCKS_API_KEY="pk_dev_-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
LIVEBLOCKS_SECRET_KEY="sk_dev_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

5. Contents of convex/.env.local:

# clerk issuer url (go to your clerk dashboard > JWT Templates > New template > Convex > Save and copy your Issuer URL)
CLERK_ISSUER_URL=https://example-id.clerk.accounts.dev

6. App Base URL

Set the NEXT_PUBLIC_APP_BASE_URL to http://localhost:3000 where your app will be running locally or in production.

7. Convex Deployment

• Visit the Convex website: https://convex.dev
• Log in to your Convex account or sign up if you don't have one.
• Once logged in, navigate to the "Deployments" section.
• Create a new deployment or select an existing one.
• Replace <deployment-name>, <team-name>, and <project-name> in the .env.local file with your Convex deployment details.
• In the Convex dashboard, find the public URL associated with your deployment.
• Replace <your-convex-url> in the .env.local file with your Convex public URL.

8. Clerk Authentication Keys

• Visit the Clerk dashboard: https://clerk.dev
• Log in to your Clerk account or sign up if you don't have one.
• Go to the "Projects" section and select your project.
• Navigate to the "API Keys" tab.
• Copy the "Publishable Key" and replace <your-clerk-publishable-key> in the .env.local file with the copied key.
• Copy the "Secret Key" and replace <your-clerk-secret-key> in the .env.local file with the copied key.
• Go to your Clerk dashboard > JWT Templates > New template > Convex > Save and copy your Issuer URL.
• Replace <your-clerk-issuer-url> with the url that you copied.
• Also, go to Convex dashboard > Settings > Environment Variables > Add CLERK_ISSUER_URL variable with value that you copied.

9. Liveblocks API Keys

• Visit the Liveblocks website > dashboard.
• Navigate to API settings or keys section.
• Generate or locate your API key and secret.
• Set NEXT_PUBLIC_LIVEBLOCKS_API_KEY and LIVEBLOCKS_SECRET_KEY in the .env file according to the obtained information.

10. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps or bun install --legacy-peer-deps.

11. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev or bun dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

💎 Acknowledgements

Useful resources and dependencies that are used in Docs.

• Thanks to CodeWithAntonio: https://codewithantonio.com/
• @clerk/nextjs: ^6.9.14
• @liveblocks/client: ^2.16.0
• @liveblocks/node: ^2.16.0
• @liveblocks/react: ^2.16.0
• @liveblocks/react-tiptap: ^2.16.0
• @liveblocks/react-ui: ^2.16.0
• @radix-ui/react-alert-dialog: ^1.1.4
• @radix-ui/react-dialog: ^1.1.4
• @radix-ui/react-dropdown-menu: ^2.1.2
• @radix-ui/react-menubar: ^1.1.4
• @radix-ui/react-separator: ^1.1.0
• @radix-ui/react-slot: ^1.1.1
• @tiptap/extension-color: ^2.10.3
• @tiptap/extension-font-family: ^2.10.3
• @tiptap/extension-highlight: ^2.10.3
• @tiptap/extension-image: ^2.10.3
• @tiptap/extension-link: ^2.11.2
• @tiptap/extension-table: ^2.10.3
• @tiptap/extension-table-cell: ^2.10.3
• @tiptap/extension-table-header: ^2.10.3
• @tiptap/extension-table-row: ^2.10.3
• @tiptap/extension-task-item: ^2.10.3
• @tiptap/extension-task-list: ^2.10.3
• @tiptap/extension-text-align: ^2.11.2
• @tiptap/extension-text-style: ^2.10.3
• @tiptap/extension-underline: ^2.10.3
• @tiptap/pm: ^2.10.3
• @tiptap/react: ^2.11.2
• @tiptap/starter-kit: ^2.11.2
• class-variance-authority: ^0.7.1
• clsx: ^2.1.1
• convex: ^1.18.2
• date-fns: ^4.1.0
• embla-carousel-react: ^8.5.2
• lucide-react: ^0.464.0
• next: 15.0.3
• next-themes: ^0.4.4
• nuqs: ^2.3.1
• react: 19.0.0-rc-66855b96-20241106
• react-color: ^2.19.3
• react-dom: 19.0.0-rc-66855b96-20241106
• react-icons: ^5.4.0
• sonner: ^1.7.2
• tailwind-merge: ^2.5.5
• tailwindcss-animate: ^1.0.7
• tiptap-extension-resize-image: ^1.2.1
• zustand: ^5.0.1
• @babel/eslint-parser: ^7.25.9
• @trivago/prettier-plugin-sort-imports: ^4.3.0
• @types/node: ^20
• @types/react: ^18
• @types/react-color: ^3.0.12
• @types/react-dom: ^18
• eslint: ^8
• eslint-config-next: 15.0.3
• eslint-config-prettier: ^9.1.0
• eslint-plugin-prettier: ^5.2.1
• postcss: ^8
• prettier: ^3.4.1
• prettier-plugin-tailwindcss: ^0.6.9
• sort-classes: npm:prettier-plugin-tailwindcss
• tailwindcss: ^3.4.1
• tidy-imports: npm:@trivago/prettier-plugin-sort-imports
• typescript: ^5

☕ Buy Me a Coffee

🚀 Follow Me

📚 Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

📃 Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

(back to top)