Kode.io

A real-time collaborative code editor built with React, Node.js, Socket.io, and MongoDB.

Features

• 🚀 Real-time collaborative code editing
• 👥 Live user presence indicator
• 🔗 Easy room sharing with copy-to-clipboard
• 💾 Automatic code persistence
• 🎨 VS Code-inspired dark theme
• ⚡ WebSocket-powered instant synchronization

Tech Stack

Frontend:

• React
• Monaco Editor (VS Code's editor)
• Socket.io Client
• React Router

Backend:

• Node.js
• Express.js
• Socket.io
• MongoDB with Mongoose

Installation

Prerequisites

• Node.js (v14+)
• MongoDB Atlas account (or local MongoDB)

Setup

1. Clone the repository:

git clone https://github.com/ShamyaHaria/Kode.io.git
cd kode.io

2. Install backend dependencies:

cd backend
npm install

3. Create .env file in backend folder:

MONGODB_URI=your_mongodb_connection_string
PORT=5001

4. Install frontend dependencies:

cd ../frontend
npm install

Running the Application

1. Start the backend server:

cd backend
node server.js

2. Start the frontend (in a new terminal):

cd frontend
npm start

3. Open http://localhost:3000 in your browser

Usage

1. Enter your name on the home page
2. Click "Create New Room" to start a new session
3. Share the room ID with others to collaborate
4. Code together in real-time!

Project Structure

kode.io/
├── backend/
│   ├── models/
│   │   └── Room.js
│   ├── server.js
│   ├── package.json
│   └── .env
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── Home.js
│   │   │   ├── Home.css
│   │   │   ├── Room.js
│   │   │   └── Room.css
│   │   ├── App.js
│   │   └── index.js
│   └── package.json
└── README.md

Future Enhancements

• Multiple programming language support
• Syntax error highlighting
• Code execution
• Chat functionality
• Cursor position tracking
• File upload/download

License

MIT

Author

Shamya Haria - Your GitHub