Skip to content

README.md

Latest commit

 

History

History
98 lines (75 loc) · 1.96 KB

README.md

File metadata and controls

98 lines (75 loc) · 1.96 KB

CodeCast - Real-time Code Collaboration

A real-time collaborative code editor where multiple users can join a room and code together live. Built from scratch using React.js, Socket.io, Express.js, and Bootstrap.

Demo

Demo

How it works:

  1. Enter your name and click “Create New Room” or enter a Room ID to join.
  2. Share the Room ID/URL with others.
  3. Collaborate live – any code you type will sync instantly.
  4. Get real-time updates when people join or leave.

Technologies

Frontend:

  • React.js
  • Bootstrap
  • CodeMirror (code editor)
  • React Router
  • UUID (for unique room IDs)
  • react-avatar (user avatars)

Backend:

  • Node.js
  • Express.js
  • Socket.io (real-time WebSocket communication)

Features

  • Create & Join Rooms
  • Real-Time Code Sync Across Users
  • Unique Room URLs with Shareable Links
  • Username & Avatar Display
  • Toast Notifications for Join/Leave
  • Room Clean-up and Disconnect Handling

Installation

  1. Clone the repository:

    git clone https://github.com/namaniisc/CodeCast.git
cd CodeCast

  2. Install client dependencies:

    cd client
npm install

  3. Install server dependencies:

    cd ../server
npm install

Running the App

  1. Start the backend:

    cd server
npm start

  2. Start the frontend:

    cd ../client
npm start

  3. Open in browser:

    http://localhost:3000

Project Structure

.
├── client/             React frontend
│   ├── public/         Static assets (e.g., logo)
│   └── src/            Source code
│       ├── components/
│       ├── pages/
│       └── App.js
├── server/             Express + Socket.io backend
│   ├── index.js
│   └── package.json
└── README.md

Contributing

Pull requests and issues are welcome! Feel free to improve features, fix bugs, or enhance the documentation.