Google Docs Clone

A Google Docs clone built with Next.js 15 and React 19.

By codewithantonio.com

Prerequisites

• Node.js (v18 or higher recommended)
• npm or bun

Getting Started

1. Install dependencies:

   Using npm:

   npm install --legacy-peer-deps  # Required due to React 19 RC

   Using bun:

   bun install

2. Set up your environment variables:

   cp .env.example .env.local

   Then fill in the required environment variables in .env.local

3. Start the development servers:

   You need to run both commands simultaneously in different terminal windows:

   Terminal 1 - Next.js server:

   npm run dev
   # or
   bun dev

   Terminal 2 - Convex server:

   npx convex dev
   # or
   bunx convex dev

Open http://localhost:3000 with your browser to see the result.

Important Note About Dependencies

This project uses React 19 (Release Candidate) with Next.js 15. Due to React 19 being in RC phase, some dependencies haven't been updated yet to officially support it. If you're using npm, you'll need to install dependencies with the --legacy-peer-deps flag. This has been tested and works correctly.

Users of bun can install normally without any special flags.

Deployment on Vercel

To deploy on Vercel, use the following commands:

1. Replace the build command:

   npx convex deploy --cmd 'npm run build'
   # or
   bunx convex deploy --cmd 'bun build'

2. Ensure the install command is set to:

   npm install --legacy-peer-deps

Environment Variables

The following environment variables are required:

• CONVEX_DEPLOYMENT & NEXT_PUBLIC_CONVEX_URL: Automatically generated by running:

  npx convex dev
  # or
  bunx convex dev

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: Clerk public key
• CLERK_SECRET_KEY: Clerk secret key
• LIVEBLOCKS_SECRET_KEY: Liveblocks secret key

Tech Stack

• Next.js 15
• React 19 (RC)
• Convex
• Clerk
• Liveblocks