Build a Real-Time Collaboratibe Whiteboard With Nextjs

Features:

• Whiteboard from scratch
• Toolbar with Text, Shapes, Sticky Notes & Pencil
• Layering functionality
• Coloring system
• Undo & Redo functionality
• Keyboard shortcuts
• Real-time collaboration
• Real-time database
• Auth, organisations and invites
• Favoriting functionality
• Next.js 14 framework
• TailwindCSS & ShadcnUI styling

Cloning the repository

git clone https://github.com/Debshibraj123/realtime_collab_whiteboard.git

Install packages

npm i

Setup .env file

CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
LIVEBLOCKS_SECRET_KEY=

Setup Convex

npx convex dev

Start the app

npm run dev