https://github.com/souvik-223/driven-design

A whiteboarding application called DrivenDesign with added features for systems design and architecture designs of Enginners. People can also join collboratively together in real time discuss there ideas.
https://github.com/souvik-223/driven-design

canvas clerkauth convex liveblocks nextjs reactjs shadcn-ui tailwindcss typescript

Last synced: 5 days ago
JSON representation

A whiteboarding application called DrivenDesign with added features for systems design and architecture designs of Enginners. People can also join collboratively together in real time discuss there ideas.

• Host: GitHub
• URL: https://github.com/souvik-223/driven-design
• Owner: Souvik-223
• Created: 2024-02-19T12:38:20.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-09-09T08:16:20.000Z (5 months ago)
• Last Synced: 2024-09-09T21:48:58.212Z (5 months ago)
• Topics: canvas, clerkauth, convex, liveblocks, nextjs, reactjs, shadcn-ui, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://driven-design.vercel.app
• Size: 9.04 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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.

## ⚙️ Tech Stack

- Next JS

- React

- Typescript

- Convex

- LiveBlocks

- Clerk

- Canvas

- Tailwind css

- shad-cn

- Zustand

## 🎯 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

## 🤸 Quick Start

Follow these steps to set up the project locally on your machine.

1. **Clone the repository:**

```bash

git clone https://github.com/Souvik-223/driven-design.git

cd your-repo-name

```

2. **Install the required dependencies:**

```bash

npm install

```

3. **Configure environmental variables:**

   Create a `.env.local` file 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=

```

4. **Run the development server:**

```bash

npm run dev

npx convex dev

```