CodeSync: Real-time Collaborative Code Editor 🧑‍💻

CodeSync is a real-time collaborative code editor designed for developers to work together on projects seamlessly. With a modern, intuitive interface, it offers features like live code editing, multi-file support, and integrated chat. The application is built with the MERN stack, leveraging Socket.IO for real-time communication and Render for hosting.

---

✨ Features

Core Functionality

• Real-time Collaboration: Synchronized code editing for all users in a room.
• Multi-file Support: Create, delete, and switch between multiple code files within a single room.
• Integrated Chat: Real-time room chat with history persistence.
• Online User Presence: See who's currently in your room.
• Code Execution: Run your code instantly in Node.js, Python, Java, C, and C++ through the JDoodle API.
• Secure Authentication: Email/password authentication using JSON Web Tokens (JWT).

Architecture & Design

• Scalable Real-time Engine: Designed to handle 1k+ concurrent users with a scalable Socket.IO architecture.
• Persistence: Code and chat history are saved in MongoDB Atlas for reliability.
• Modular Backend: Clear separation of concerns with dedicated controllers and services.
• Cost-effective Hosting: Deployed on Render to ensure a low-cost, scalable solution.

---

🛠 Tech Stack

Frontend

• React 18: Frontend UI library.
• Monaco Editor: The powerful code editor component.
• Socket.IO-Client: For real-time WebSocket communication.
• Axios: HTTP client for API requests.
• React Router v6: For client-side routing.
• React-Bootstrap: Responsive UI components.

Backend

• Node.js & Express.js: Backend web server.
• Socket.IO: Real-time engine for event-driven communication.
• Mongoose: MongoDB object modeling.
• bcryptjs: Password hashing.
• jsonwebtoken: For JWT authentication.
• cors: To manage Cross-Origin Resource Sharing.

Database

• MongoDB Atlas: A cloud-hosted NoSQL database service.

External APIs

• JDoodle: For multi-language code execution.

Deployment

• Render: Cloud platform for hosting the backend and frontend.

---

📁 Project Structure

codesync/
├── client/                      # React Frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── CodeEditor.jsx
│   │   │   ├── Chat.jsx
│   │   │   ├── FileTabs.jsx
│   │   │   └── OnlineUsers.jsx
│   │   ├── context/
│   │   │   ├── AuthContext.js
│   │   │   └── SocketContext.js
│   │   ├── pages/
│   │   │   ├── Dashboard.jsx
│   │   │   ├── Room.jsx
│   │   │   ├── Login.jsx
│   │   │   └── Signup.jsx
│   │   ├── services/
│   │   │   └── api.js
│   │   └── App.jsx
├── server/                      # Node.js Backend
│   ├── models/
│   │   ├── User.js
│   │   ├── Room.js
│   │   └── Chat.js
│   ├── routes/
│   │   ├── auth.js
│   │   └── rooms.js
│   ├── controllers/
│   │   ├── authController.js
│   │   ├── roomController.js
│   │   └── jDoodleService.js
│   ├── middleware/
│   │   └── auth.js
│   └── index.js                 # Main server entry point
├── package.json
└── README.md