Driven Design - A collaborative, real-time whiteboard. Packed with features such as real-time database, whiteboard from scratch with ability to add shapes like Rectangles and Ellipses, Sticky notes and Pencil drawing.
- Next JS
- React
- Typescript
- Convex
- LiveBlocks
- Clerk
- Canvas
- Tailwind css
- shad-cn
- Zustand
- 🛠️ 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
Follow these steps to set up the project locally on your machine.
- Clone the repository:
git clone https://github.com/Souvik-223/driven-design.git
cd your-repo-name- Install the required dependencies:
npm install- Configure environmental variables:
Create a
.env.localfile in the project root and set the necessary environment variables.
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
LIVEBLOCKS_SECRET_KEY=
- Run the development server:
npm run dev
npx convex dev