CodeShare

Real-time collaborative code editor with auto-save functionality

👉 Live Preview 👈

🚀 Why CodeShare?

Real-time collaboration. See changes instantly. Auto-saves.

⚡ How It Works

1. Create Room → Get unique room ID
2. Join & Collaborate → Multiple users connect via WebSocket
3. Real-time Sync → Changes broadcast instantly
4. Auto-save → Saves after 10 seconds of inactivity

✨ What Makes It Unique

• Debounced Auto-save → No data loss
• Hybrid State → Memory + database
• Zero Config → Generate rooms on-demand

📚 What I Learned

• WebSocket State Management → Connection cleanup
• Performance Optimization → Memory vs database balance
• Timeout Management → Debounced auto-save
• Real-time Architecture → Data consistency

🛠️ Setup

npm install
npx prisma generate
npx prisma migrate dev
npm run dev

🔌 API

Create Room:

GET / → { roomId: "abc12" }

WebSocket Events:

// Join room
{ type: "join", payload: { roomId: "abc12" } }

// Send code
{ type: "code", payload: { roomId: "abc12", code: "console.log('hello');" } }

🚀 Future Development

• Better Error Handling → Retry mechanisms
• Read-only Mode → Observer permissions
• Permanent Storage → Persistent repositories
• User Cursors → Real-time editing positions

💻 Tech Stack

• Backend → Node.js + TypeScript + Express
• Real-time → WebSocket (ws library)
• Database → PostgreSQL + Prisma ORM