|
1 | | -# CollabyDraw |
| 1 | +# 🎨 Collabydraw | Hand-drawn look & feel • Collaborative • Secure |
2 | 2 |
|
3 | | -CollabyDraw is a real-time collaborative drawing application inspired by Excalidraw and a project built by Harkirat Singh Sir in his **Cohort 3**. While working on the project, I made some modifications and introduced features that make **CollabyDraw** slightly different from what project built during Cohort and possibly from other students' implementations. |
| 3 | +--- |
4 | 4 |
|
5 | | -## 🚀 Features |
| 5 | +**CollabyDraw** is a web-based collaborative whiteboard where multiple users can draw, edit, and brainstorm together in real time. Whether solo or in a group session, the app offers a smooth, intuitive canvas experience with real-time sync, shape tools, editable text, and privacy-focused end-to-end encryption — all without needing an account. |
6 | 6 |
|
7 | | -### 🎨 **Standalone Mode (No Authentication Required)** |
8 | | -- Users can start drawing **without signing up or logging in**. |
9 | | -- Offers the **same features** as collaboration mode, except live room functionality. |
10 | | -- Data is stored in **local storage**, ensuring **privacy** and **no dependency on a database**. |
| 7 | +--- |
11 | 8 |
|
12 | | -### 🎨 **Live Collaboration Mode** |
13 | | -- Users can **join rooms** and collaborate in real-time. |
14 | | -- Participants are **visibly displayed in an interactive UI**, similar to Excalidraw. |
15 | | -- Built-in **WebSocket-based syncing** for smooth collaboration. |
| 9 | +### ✅ Core Features |
16 | 10 |
|
17 | | -### 🎨 **Next.js Server Actions (No Separate HTTP Services)** |
18 | | -- The cohort project used a separate HTTP service for: |
19 | | - - Room creation & management |
20 | | - - User authentication & management |
21 | | -- **CollabyDraw eliminates separate HTTP services** by using **Next.js server actions**, making the architecture cleaner and more efficient. |
| 11 | +- **Canvas Drawing**: Freehand, shapes, and editable text |
| 12 | +- **Rough.js Support**: Optional sketch-style drawing |
| 13 | +- **Perfect-freehand Support**: Hand drawn feel |
| 14 | +- **Eraser Tool**: Remove individual shapes |
| 15 | +- **Editable Text**: Double-click to edit on canvas |
22 | 16 |
|
23 | | -### 🎨 **Privacy-Focused Architecture** |
24 | | -- **Standalone mode does not require a database**; it relies on **local storage**. |
25 | | -- Planning to fully **eliminate database usage in the future**, similar to Excalidraw. |
| 17 | +--- |
26 | 18 |
|
27 | | -### 🎨 **Interactive and Responsive UI** |
28 | | -- Built with a focus on **high performance and smooth UX**. |
29 | | -- WebSocket connections are **hookified** for better state management. |
30 | | -- The UI is highly **interactive and visually appealing**, improving the user experience over the cohort project. |
| 19 | +### 🔗 Collaboration |
31 | 20 |
|
32 | | -## 🛠️ Tech Stack |
| 21 | +- **Real-time Sync**: WebSocket-powered live drawing |
| 22 | +- **Multi-Tab Awareness**: No duplicate join/leave events |
| 23 | +- **Optimistic Updates**: Instant feedback before server response |
33 | 24 |
|
34 | | -- **Frontend:** Next.js 15 |
35 | | -- **Real-time Sync:** WebSockets |
36 | | -- **State Management:** React hooks |
37 | | -- **Storage:** Local Storage (Standalone Mode), Database (for authentication in Collaboration Mode) |
| 25 | +--- |
38 | 26 |
|
39 | | -## 🆚 Differences from Cohort Project |
| 27 | +### 🔐 **Privacy & End-to-End Encryption (E2EE)** in CollabyDraw |
40 | 28 |
|
41 | | -| Feature | Cohort Project by Harkirath | CollabyDraw | |
42 | | -|---------------------------|---------------------------|-------------| |
43 | | -| Authentication Required | Yes | No (Standalone Mode) | |
44 | | -| Local Storage Support | No | Yes | |
45 | | -| Database Dependency | Yes | No (Standalone Mode) | |
46 | | -| Separate HTTP Services | Yes | No (Uses Next.js Server Actions) | |
47 | | -| Live Collaboration UI | Basic | Interactive UI with participant list | |
48 | | -| Performance Optimizations | Basic | Hookified WebSocket connection & responsive UI | |
| 29 | +CollabyDraw is built with **privacy by design** to ensure that no sensitive drawing data can be accessed by anyone other than the intended participants. |
49 | 30 |
|
50 | | -## 🎯 Future Plans |
51 | | -- **Fully eliminate database dependency** to enhance privacy. |
52 | | -- **Enhance UI further** with better collaboration tools. |
53 | | -- **Improve performance** with optimizations in WebSocket handling. |
| 31 | +### 🔑 **How It Works** |
| 32 | + |
| 33 | +- When a user creates or joins a room, the app generates a link like: |
| 34 | + |
| 35 | + ``` |
| 36 | + https://collabydraw.xyz#room=abc123,xyz456 |
| 37 | + ``` |
| 38 | + |
| 39 | + - `abc123`: Unique room ID (used by the server) |
| 40 | + - `xyz456`: Encryption key (used **only** on the client) |
| 41 | +
|
| 42 | +### 🧠 **Key Never Touches the Server** |
| 43 | +
|
| 44 | +- The **encryption key** after the comma (`xyz456`) is part of the URL fragment (`#...`). |
| 45 | +- This fragment is **never sent** in HTTP requests, meaning: |
| 46 | + |
| 47 | + > The server cannot see or store the encryption key. |
| 48 | + > |
| 49 | +
|
| 50 | +### 🔒 **Client-Side Only Decryption** |
| 51 | +
|
| 52 | +- All encrypted drawing data is transmitted over WebSocket. |
| 53 | +- The **decryption and rendering** happen completely on the client-side using the `key` from the URL. |
| 54 | +- Even if someone intercepts the WebSocket traffic, they cannot decrypt the data without the key. |
| 55 | +
|
| 56 | +### 🛡️ **Benefits** |
| 57 | +
|
| 58 | +- No one — not even the server — can read what’s drawn in a room without the key. |
| 59 | +- Ensures **confidentiality** for private brainstorming, teaching, or design sessions. |
| 60 | +- Works like **Excalidraw's E2EE rooms**, but tailored for your collaborative drawing logic. |
| 61 | +
|
| 62 | +--- |
| 63 | +
|
| 64 | +### 🧠 Reliability |
| 65 | +
|
| 66 | +- **Message Queue**: Stores unsent messages in memory/localStorage |
| 67 | +- **Auto Retry**: Flushes queued messages on reconnect |
| 68 | +
|
| 69 | +--- |
| 70 | +
|
| 71 | +### 🧭 Modes |
| 72 | +
|
| 73 | +- **Standalone Mode**: Offline/local drawing |
| 74 | +- **Room Mode**: Collaborative sessions |
| 75 | +
|
| 76 | +--- |
| 77 | +
|
| 78 | +### ⚙️ Tech Stack |
| 79 | +
|
| 80 | +- **Frontend**: React (Vite), TypeScript, Tailwind CSS |
| 81 | +- **Canvas**: HTML Canvas API + Custom Engine |
| 82 | +- **Realtime**: Native WebSocket (`useWebSocket` hook) |
| 83 | +- **Security**: Hash-based E2EE |
| 84 | +
|
| 85 | +--- |
| 86 | +
|
| 87 | +### 📄 Notion Document |
| 88 | +
|
| 89 | +https://plum-chamomile-116.notion.site/Collabydraw-Hand-drawn-look-feel-Collaborative-Secure-1cb6d6552d9b802597c1cb575db2a9da?pvs=4 |
| 90 | +
|
| 91 | +--- |
| 92 | +
|
| 93 | +### 📽️ Youtube Video |
| 94 | +
|
| 95 | +https://www.youtube.com/watch?v=NNVdRCoFnK0 |
| 96 | +
|
| 97 | +--- |
| 98 | +
|
| 99 | +### 🌍 Open Source & Contributions |
54 | 100 |
|
55 | | -## 🌍 Open Source & Contributions |
56 | 101 | I want **CollabyDraw** to be open source so that other students and developers can explore and learn from it. |
57 | | -If you'd like to contribute—whether it's improving the UI, optimizing performance, or adding new features—feel free to open an issue or submit a pull request! |
| 102 | +If you'd like to contribute—whether it's improving the UI, optimizing performance, or adding new features—feel free to open an issue or submit a pull request! |
| 103 | +
|
| 104 | +--- |
58 | 105 |
|
59 | | -## 📜 License |
60 | | -This project is open-source and available under the MIT License. |
| 106 | +## 📄 License |
61 | 107 |
|
62 | | ---- |
| 108 | +This project is licensed under a **Custom Personal Use License** — you may view and learn from the code, but **commercial use, redistribution, or claiming authorship is strictly prohibited**. |
| 109 | +See the full [LICENSE](./LICENSE) for details. |
0 commit comments