docs(readme): add contribution guide and architecture overview

Author: coderomm

README.md

@@ -103,6 +103,37 @@ If you'd like to contribute—whether it's improving the UI, optimizing performa
 
 ---
 
+### 🧠 How to Contribute
+
+1. **Fork the Repo** and clone it locally
+2. Run `pnpm install` and `pnpm dev` to start the dev server
+3. Check the `Issues` tab for open tasks — especially those labeled `good first issue`
+4. Follow the `CONTRIBUTING.md` (coming soon) for guidelines
+5. Submit a Pull Request — even small improvements matter!
+
+💡 **Ideas for Contribution** (feel free to raise these as issues):
+- Add undo/redo support in standalone mode
+- Add support for duplicating a selected shape using **Ctrl + D** keyboard shortcut.
+- Fix: **Rounded corners not working for Diamond shape**
+  When the **"rounded"** option is selected for diamond shapes, the corners remain sharp. Update the rendering logic to support rounded edges for diamonds.
+
+👉 Tag your issue with `good first issue`, `help wanted`, or `enhancement` so others can discover and contribute!
+
+---
+
+### 📄 Architecture Overview (Differences from Cohort Project)
+
+- **Next.js 15 for Fullstack**: Frontend and backend are handled together using server actions. No separate HTTP services.
+- **No Mandatory Auth for Canvas Use**: Users can draw without logging in. Auth is only required for collaboration.
+- **Server Actions Instead of REST APIs**: Room creation, joining, and user management are handled through server actions.
+- **Standalone Mode with Local Storage**: For solo drawing sessions, data is stored locally and never sent to a server.
+- **Interactive Room Collaboration Mode**: Shows participant presence, names, and avatars in real-time sync only as of now.
+- **End-to-End Encrypted Collaboration**: No drawn shapes or messages are stored in any database.
+- **Database Used Only for Auth**: All other state management is client-side or ephemeral.
+- **Hookified WebSocket Layer**: Abstracts the socket connection with clean React patterns.
+
+---
+
 ## 📄 License
 
 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**.  

apps/collabydraw/.env.example

@@ -0,0 +1,4 @@
+DATABASE_URL='postgresql://postgres:your_secure_password@localhost:5432/CollabyDraw'
+NEXTAUTH_URL="http://localhost:3000"
+WS_URL="ws://localhost:8080"
+JWT_SECRET=your_secret_here

apps/collabydraw/.gitignore

@@ -31,7 +31,8 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env*
+.env
+.env.local
 
 # vercel
 .vercel

apps/collabydraw/app/(auth-layout)/layout.tsx

@@ -1,4 +1,3 @@
-import { LogoSvg } from "@/components/Branding";
 import Link from "next/link";
 
 export default function AuthLayout({
@@ -15,7 +14,7 @@ export default function AuthLayout({
                 <div className="h-fit min-h-screen w-full relative p-10 lg:p-12 overflow-hidden flex flex-col items-center justify-center">
                     <div className="relative z-10">
                         <Link href="/" className="Logo flex items-center select-none is-normal is-plain underline-none text-current">
-                            <div className=""><LogoSvg /></div>
+                            {/* <div className=""><LogoSvg /></div> */}
                             <div className="md:flex hidden">
                                 <h1 className="brand-title CollabydrawLogo-text font-collabyfont">CollabyDraw</h1>
                             </div>

apps/collabydraw/components/SignupWelcomeButton.tsx

@@ -9,7 +9,7 @@ export default function SignupWelcomeButton() {
                 session?.user.id ? (
                     <></>
                 ) : (
-                    <Link className="welcome-screen-menu-item " href="/auth/signup" target="_blank" rel="noreferrer">
+                    <Link className="welcome-screen-menu-item " href="/auth/signup">
                         <div className="welcome-screen-menu-item__icon">
                             <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" className="" fill="none" strokeWidth="2" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
                                 <g strokeWidth="1.5">

apps/collabydraw/components/auth/signup-form.tsx

@@ -109,7 +109,9 @@ export function SignUpForm() {
                         </FormItem>
                     )}
                 />
-                <Button type="submit" className="!mt-[10px] w-full h-12 rounded-md text-sm font-semibold shadow-none bg-color-primary hover:bg-brand-hover active:bg-brand-active active:scale-[.98]">
+                <Button disabled={isPending} 
+                type="submit" 
+                className="!mt-[10px] w-full h-12 rounded-md text-sm font-semibold shadow-none bg-color-primary hover:bg-brand-hover active:bg-brand-active active:scale-[.98]">
                     Sign Up
                 </Button>
             </form>

apps/ws/.env.example

@@ -0,0 +1 @@
+JWT_SECRET=your_secret_here

packages/db/.env.example

@@ -0,0 +1 @@
+DATABASE_URL="postgresql://postgres:mysecratepassword@localhost:5432/postgres"

packages/db/.gitignore

@@ -1,3 +1,4 @@
 node_modules
 # Keep environment variables out of version control
 .env
+.env.local