Skip to content

Repository files navigation

CodeShare

Real-time collaborative code editing made simple and powerful.


🖼️ Preview Screenshots

🧭 Landing Page – Dark Mode

Landing Page Dark

🧑‍💻 Join a Room Instantly

Join Room

📚 Awareness Indicators

See who’s editing and where in real-time. Awareness

🤖 Room + AI Chatbot Integration

Room and Bot

☀️ Landing Page – Light Mode

Landing Page Light


🚀 Overview

CodeShare is a real-time collaborative code editor powered by Yjs, CodeMirror 6, and WebSockets. It lets developers write and share code together in live rooms with full sync and presence awareness.

Great for:

  • Pair programming
  • Live interviews
  • Teaching and debugging sessions
  • Team collaboration

✨ Features

  • 🔄 Real-time collaborative editing
  • 🎨 Syntax highlighting (JavaScript supported; more coming soon)
  • 👥 Awareness indicators: cursor positions and user presence
  • 🗃 Room-based collaboration
  • 🤖 AI Bot integration (optional)
  • 💾 Auto-save & restore sessions

📁 Monorepo Structure (Turborepo)

apps/ ├── frontend # Next.js app with CodeMirror + Yjs integration ├── websocket # WebSocket server (room-based real-time sync) └── backend # Optional REST API (room metadata, bot hooks)

packages/ └── ui # Shared UI components (shadcn/ui, Tailwind)


🧑‍💻 Tech Stack

  • Frontend: React, Next.js, CodeMirror 6, TailwindCSS
  • Backend: Node.js, Express, WebSocket
  • Collab Engine: Yjs, y-codemirror.next
  • Monorepo: Turborepo (pnpm workspaces)
  • Deployment: Vercel (frontend) + Render/ECS (backend)

🛠️ Setup

1. Clone the repository

git clone https://github.com/yourusername/codeshare
cd codeshare

🧑‍💻 Tech Stack

  • Frontend: React, Next.js, CodeMirror 6, TailwindCSS
  • Backend: Node.js, Express, WebSocket
  • Collab Engine: Yjs, y-codemirror.next
  • Monorepo: Turborepo (pnpm workspaces)
  • Deployment: Vercel (frontend) + Render/ECS (backend)

🛠️ Setup

1. Clone the repository

git clone https://github.com/yourusername/codeshare
cd codeshare
  1. Install dependencies
pnpm install
  1. Start the development server
pnpm run build
pnpm dev

This will launch both frontend and backend services (if using a Turborepo dev script).

About

CodeShare is a real-time collaborative code editor powered by Yjs, CodeMirror 6, and WebSockets. It lets developers write and share code together in live rooms with full sync and presence awareness.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages