Skip to content

taiseen/real-time-google-docs-clone

Repository files navigation

8 - December - 2024

Real Time Google Doc Clone

  • To Learning Purpose || R&D

For package install:-

npm i --legacy-peer-deps

For run the project:-

npm run dev

For run the database:-

npx convex dev

Need these config values to run this project:-

CLERK_SECRET_KEY = *****
CONVEX_DEPLOYMENT = *****
LIVEBLOCKS_SECRET_KEY = *****
LIVEBLOCKS_SECRET_KEY = *****
NEXT_PUBLIC_CONVEX_URL = *****
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY = *****

Custom port & auto browser open:-

"scripts": {
  "dev": "npm run browser-open && next dev -p 4000",
  "browser-open": "start http://localhost:4000",
},

Package dependencies list:-

For LiveBlock packages:-

Learning Points:-

  • dynamically get params id's
  • layout page do not rerender
  • usage of color picker
  • image upload dialog open programmatically
  • ruler indicator inside allocated area (dynamic calculation)
  • dynamically object key selection
  • mouse dragging marker selection
  • ruler dynamic calculation
  • search-param custom hook
  • convex db schema system
  • usage of carousel system at UI
  • usage of clerk auth system at UI
  • usage of menu & submenu system at UI
  • usage of alert & dialog system at UI
  • usage of table data display system at UI

Resource