Skip to content

Commit d2c75f0

Browse files
coderommcoderomm
committed
refactor: Update documentation
1 parent 7b7b4c6 commit d2c75f0

File tree

8 files changed

+173
-1246
lines changed

8 files changed

+173
-1246
lines changed

‎apps/collabydraw/app/(site)/about/page.tsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import React from "react";
2+
3+
export default function AboutPage() {
4+
return (
5+
<div className="space-y-xl bg-page-gradient-purple py-40">
6+
<section className="container max-w-screen-md space-y-sm text-color-primary-text">
7+
<h1 className="text-4xl sm:text-4xl lg:text-6xl font-semibold mb-6 text-center font-assistant">
8+
About CollabyDraw
9+
</h1>
10+
11+
<div className="prose prose-invert prose-headings:text-white prose-a:text-blue-400 prose-strong:text-white prose-code:text-pink-400 max-w-none lg:text-xl">
12+
<p>
13+
<strong>CollabyDraw</strong> is a web-based collaborative whiteboard
14+
where multiple users can draw, edit, and brainstorm together in real
15+
time. Whether solo or in a group session, the app offers a smooth,
16+
intuitive canvas experience with real-time sync, shape tools, editable
17+
text, and privacy-focused end-to-end encryption — all without needing
18+
an account.
19+
</p>
20+
21+
<h3 className="mt-3 mb-1 lg:mt-8 lg:mb-2">✅ Core Features</h3>
22+
<ul className="flex flex-col gap-1">
23+
<li><strong>Canvas Drawing:</strong> Freehand, shapes, and editable text</li>
24+
<li><strong>Rough.js Support:</strong> Optional sketch-style drawing</li>
25+
<li><strong>Perfect-freehand Support:</strong> Hand drawn feel</li>
26+
<li><strong>Eraser Tool:</strong> Remove individual shapes</li>
27+
<li><strong>Editable Text:</strong> Double-click to edit on canvas</li>
28+
</ul>
29+
30+
<h3 className="mt-3 mb-1 lg:mt-8 lg:mb-2">🔗 Collaboration</h3>
31+
<ul className="flex flex-col gap-1">
32+
<li><strong>Real-time Sync:</strong> WebSocket-powered live drawing</li>
33+
<li><strong>Multi-Tab Awareness:</strong> No duplicate join/leave events</li>
34+
<li><strong>Optimistic Updates:</strong> Instant feedback before server response</li>
35+
</ul>
36+
37+
<h3 className="mt-3 mb-1 lg:mt-8 lg:mb-2">🔐 Privacy & End-to-End Encryption (E2EE)</h3>
38+
<p>
39+
CollabyDraw is built with <strong>privacy by design</strong> to ensure
40+
that no sensitive drawing data can be accessed by anyone other than the
41+
intended participants.
42+
</p>
43+
44+
<h4 className="mt-3 mb-1 lg:mt-8 lg:mb-2">🔑 How It Works</h4>
45+
<pre>
46+
<code>https://collabydraw.app/#room=abc123,xyz456</code>
47+
</pre>
48+
<ul className="flex flex-col gap-1">
49+
<li><code>abc123</code>: Unique room ID (used by the server)</li>
50+
<li><code>xyz456</code>: Encryption key (used <strong>only</strong> on the client)</li>
51+
</ul>
52+
53+
<h4 className="mt-3 mb-1 lg:mt-8 lg:mb-2">🧠 Key Never Touches the Server</h4>
54+
<ul className="flex flex-col gap-1">
55+
<li>
56+
The <strong>encryption key</strong> after the comma (<code>xyz456</code>) is part
57+
of the URL fragment (<code>#...</code>)
58+
</li>
59+
<li>This fragment is <strong>never sent</strong> in HTTP requests</li>
60+
</ul>
61+
<blockquote>
62+
The server cannot see or store the encryption key.
63+
</blockquote>
64+
65+
<h4 className="mt-3 mb-1 lg:mt-8 lg:mb-2">🔒 Client-Side Only Decryption</h4>
66+
<ul className="flex flex-col gap-1">
67+
<li>All encrypted drawing data is transmitted over WebSocket</li>
68+
<li>
69+
The <strong>decryption and rendering</strong> happen completely on the
70+
client-side using the key from the URL
71+
</li>
72+
<li>
73+
Even if someone intercepts the WebSocket traffic, they cannot decrypt
74+
the data without the key
75+
</li>
76+
</ul>
77+
78+
<h4 className="mt-3 mb-1 lg:mt-8 lg:mb-2">🛡️ Benefits</h4>
79+
<ul className="flex flex-col gap-1">
80+
<li>No one — not even the server — can read what’s drawn without the key</li>
81+
<li>Ensures <strong>confidentiality</strong> for private sessions</li>
82+
<li>
83+
Works like <strong>Excalidraw&apos;s E2EE rooms</strong>, but tailored for your logic
84+
</li>
85+
</ul>
86+
87+
<h3 className="mt-3 mb-1 lg:mt-8 lg:mb-2">🧠 Reliability</h3>
88+
<ul className="flex flex-col gap-1">
89+
<li><strong>Message Queue:</strong> Stores unsent messages in memory/localStorage</li>
90+
<li><strong>Auto Retry:</strong> Flushes queued messages on reconnect</li>
91+
</ul>
92+
93+
<h3 className="mt-3 mb-1 lg:mt-8 lg:mb-2">🧭 Modes</h3>
94+
<ul className="flex flex-col gap-1">
95+
<li><strong>Standalone Mode:</strong> Offline/local drawing</li>
96+
<li><strong>Room Mode:</strong> Collaborative sessions</li>
97+
</ul>
98+
99+
<h3 className="mt-3 mb-1 lg:mt-8 lg:mb-2">⚙️ Tech Stack</h3>
100+
<ul className="flex flex-col gap-1">
101+
<li><strong>Frontend:</strong> React (Vite), TypeScript, Tailwind CSS</li>
102+
<li><strong>Canvas:</strong> HTML Canvas API + Custom Engine</li>
103+
<li><strong>Realtime:</strong> Native WebSocket (<code>useWebSocket</code> hook)</li>
104+
<li><strong>Security:</strong> Hash-based E2EE</li>
105+
</ul>
106+
107+
<h3 className="mt-3 mb-1 lg:mt-8 lg:mb-2">📂 Github Repo</h3>
108+
<p>
109+
<a href="https://github.com/coderomm/CollabyDraw" target="_blank" rel="noopener noreferrer">
110+
github.com/coderomm/CollabyDraw
111+
</a>
112+
</p>
113+
114+
<h3 className="mt-3 mb-1 lg:mt-8 lg:mb-2">📽️ YouTube Demo</h3>
115+
<div className="aspect-w-16 aspect-h-9 mb-4">
116+
<iframe
117+
className="w-full h-full rounded-md"
118+
src="https://www.youtube.com/embed/NNVdRCoFnK0"
119+
title="YouTube demo"
120+
frameBorder="0"
121+
allowFullScreen
122+
></iframe>
123+
</div>
124+
125+
<h3 className="mt-3 mb-1 lg:mt-8 lg:mb-2">🐦 Tweet Embed</h3>
126+
<a href="https://twitter.com/coder_om/status/1711737824058880576"></a>
127+
</div>
128+
</section>
129+
</div>
130+
);
131+
}

‎apps/collabydraw/app/(site)/details/CodeBlock.tsx‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎apps/collabydraw/app/(site)/details/page.tsx‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎apps/collabydraw/app/globals.css‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@ h6 {
186186
--button-active-bg: var(--color-surface-high);
187187
--button-active-border: var(--brand-active);
188188
--color-promo: var(--color-primary);
189+
--color-primary-text: #030064;
189190

190191
--selection-box-border-color: #6965db;
191192
--theme-filter: none;
@@ -736,10 +737,49 @@ button {
736737
z-index: 2;
737738
}
738739

739-
.dark .collabydraw-textEditorContainer textarea{
740+
.dark .collabydraw-textEditorContainer textarea {
740741
filter: var(--theme-filter);
741742
}
742743

743744
.canvas-bg-color-item {
744745
filter: var(--theme-filter);
746+
}
747+
748+
.bg-page-gradient-purple,
749+
.bg-page-gradient-yellow {
750+
background-image: linear-gradient(138.59deg, #e0dfff26 4.71%, #e0dfff00 32.89%), radial-gradient(52.08% 32.07% at 97.32% 50.03%, #e0dfff26 0, #e0dfff00 100%);
751+
}
752+
753+
.prose :where(p):not(:where([class~=not-prose], [class~=not-prose] *)) {
754+
line-height: 140%;
755+
margin-bottom: 1.25em;
756+
margin-top: .5rem;
757+
}
758+
759+
.prose :where(.prose>:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
760+
margin-top: 0;
761+
}
762+
763+
.prose-xl :where(p):not(:where([class~=not-prose], [class~=not-prose] *)) {
764+
line-height: 160%;
765+
margin-bottom: 1.2em;
766+
margin-top: .5rem;
767+
}
768+
769+
.prose-xl :where(.prose-xl>:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
770+
margin-top: 0;
771+
}
772+
773+
@media (min-width: 1025px) {
774+
.lg\:prose-xl :where(p):not(:where([class~=not-prose], [class~=not-prose] *)) {
775+
line-height: 160%;
776+
margin-bottom: 1.2em;
777+
margin-top: .5rem;
778+
}
779+
}
780+
781+
@media (min-width: 1025px) {
782+
.lg\:prose-xl :where(.lg\:prose-xl>:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
783+
margin-top: 0;
784+
}
745785
}

‎apps/collabydraw/components/ClientTweet.tsx‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎apps/collabydraw/package.json‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,6 @@
4242
"react": "^18.3.1",
4343
"react-dom": "^18.3.1",
4444
"react-hook-form": "^7.54.2",
45-
"react-markdown": "^10.1.0",
46-
"react-syntax-highlighter": "^15.6.1",
47-
"react-tweet-embed": "^2.0.0",
48-
"rehype-raw": "^7.0.0",
49-
"remark-gfm": "^4.0.1",
5045
"roughjs": "^4.6.6",
5146
"sonner": "^1.7.4",
5247
"tailwind-merge": "^3.0.1",

‎apps/collabydraw/tailwind.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ export default {
107107
"color-on-surface": "var(--color-on-surface)",
108108
"button-hover-bg": "var(--button-hover-bg)",
109109
"button-active-bg": "var(--button-active-bg)",
110+
"color-primary-text": "var(--color-primary-text)",
110111
},
111112
textColor: {
112113
"collaby-textfield": "var(--CollabyTextField--color)",

0 commit comments

Comments
 (0)