README.md

CodeshareLive

Real-time collaborative code editor — built for developers who ship together.

Stop sharing screenshots. Start sharing live code.
The fastest way to collaborate, pair program, and debug with developers anywhere in the world.

---

✨ Why CodeshareLive?

Most code-sharing tools feel like an afterthought — clunky, slow, and disconnected from a real coding experience. CodeshareLive was purpose-built from the ground up to feel like you're coding in the same IDE, sitting side by side with your team.

Zero signup. Zero installs. Just click a link and code.

🎯 Core Features

⚡ Instant Rooms Generate a unique room with one click using UUID-based room IDs. Share the link — anyone who opens it is instantly connected. No accounts, no friction.	👥 Live Collaboration See every keystroke in real-time powered by Socket.io. Color-coded remote cursors show exactly where each participant is editing — true multiplayer coding.
🖥️ Monaco Editor The same editor engine that powers VS Code. Full syntax highlighting, IntelliSense-style features, and a familiar keyboard experience across 19 languages.	▶️ In-Browser Code Execution Run Python, JavaScript, Java, C/C++, and Go directly from the editor. The sandboxed backend compiler returns output instantly — no local setup required.
🎨 Interactive Whiteboard Toggle drawing mode to sketch diagrams, annotate code, or brainstorm ideas on a shared canvas overlay — synced in real-time across all participants.	🔒 Read-Only Mode Lock the editor with a single toggle to prevent accidental edits during reviews, presentations, or interviews. Control stays with the host.
🌙 Dark / Light Themes System-aware theme switching with smooth transitions. Your eyes will thank you during those late-night sessions.	📥 Download Code Export your work as a properly-named file with the correct extension for the selected language. One click, done.

🗣️ Supported Languages

🏗️ Architecture

codesharelive/
├── client/                    # Next.js 16 + React 19 Frontend
│   ├── src/
│   │   ├── app/               # App Router pages & API routes
│   │   │   ├── [roomId]/      # Dynamic room routes
│   │   │   ├── about/         # About page
│   │   │   ├── blog/          # Blog
│   │   │   ├── changelog/     # Changelog
│   │   │   ├── contact/       # Contact form
│   │   │   ├── faq/           # FAQ
│   │   │   ├── privacy-policy/
│   │   │   ├── terms/         # Terms of Service
│   │   │   └── templates/     # Code templates
│   │   └── components/
│   │       ├── Editor.js       # Monaco + Socket.io + Canvas
│   │       ├── Header.js       # Navigation bar
│   │       ├── Footer.js       # Site footer
│   │       ├── ThemeProvider.js # Dark/light theme context
│   │       └── home/           # Landing page components
│   │           ├── AnimatedContainer.js
│   │           ├── FeaturesDetail.js
│   │           ├── HeroBackground.js
│   │           ├── JoinForm.js
│   │           └── MockEditor.js
│   └── package.json
│
├── server/                    # Express 5 + Socket.io Backend
│   └── src/
│       └── index.js           # WebSocket hub + Compilex API
│
└── README.md

🛠️ Tech Stack

Layer	Technology	Purpose
Frontend	Next.js 16, React 19	Server-side rendering, App Router
Editor	Monaco Editor (via @monaco-editor/react)	VS Code-grade editing
Styling	Tailwind CSS 4, Framer Motion	Utility-first CSS, animations
Icons	Lucide React, React Icons	Crisp SVG icon sets
Realtime	Socket.io 4 (client + server)	WebSocket-based live sync
Backend	Express 5, Node.js	REST API + WebSocket server
Compiler	Compilex + child_process	Sandboxed multi-language execution
Deployment	Vercel (frontend)	Edge-optimized hosting

🚀 Quick Start

Prerequisites

• Node.js v18+ recommended
• npm (comes with Node.js)

1. Clone the repository

git clone https://github.com/ShubhamV2503/codesharelive.git
cd codesharelive

2. Start the backend server

cd server
npm install
node src/index.js

The server starts at http://localhost:4000

3. Start the frontend

Open a new terminal:

cd client
npm install
npm run dev

The app opens at http://localhost:3000

4. Start collaborating

1. Open http://localhost:3000 in your browser
2. Click Create Instant Room to generate a unique workspace
3. Share the URL with anyone — they're instantly connected
4. Select a language, write code, and run it in real-time

🌍 Use Cases

💼 Technical Interviews Watch candidates think in real-time. Run their code instantly against test cases. A professional experience that reflects your engineering culture.

🎓 Teaching & Mentoring Walk students through code live. Sketch architecture on the whiteboard. Lead shared sessions with up to 20 participants.

🤝 Pair Programming Debug together in real-time. See your partner's cursor, edits, and thought process. Ship features faster, together.

🧬 Environment Variables

Create a .env.local file in the client/ directory:

# Socket server URL (defaults to localhost:4000 if not set)
NEXT_PUBLIC_SOCKET_URL=http://localhost:4000

# App URL for OpenGraph metadata
NEXT_PUBLIC_APP_URL=https://codesharelive.vercel.app

# Google Search Console verification (optional)
NEXT_PUBLIC_GOOGLE_VERIFICATION=your_verification_code

📄 License & Contributing

This repository and its codebase are proprietary. All rights reserved.

However, contributions are welcome! If you'd like to improve CodeshareLive, here's how:

1. Fork the repository
2. Create a new branch for your feature or fix (git checkout -b feature/amazing-feature)
3. Make your changes and commit them (git commit -m "Add amazing feature")
4. Push to your fork (git push origin feature/amazing-feature)
5. Open a Pull Request — describe what you changed and why

Once your PR is reviewed and merged, you'll be added as a contributor 🎉

Note: By submitting a PR, you agree that your contributions will be licensed under the same terms as this project.

---