🚀 CodeFlow

The Ultimate Real-Time Collaborative Coding Platform

Code together, talk together. CodeFlow brings your team closer with a shared code editor and built-in voice chat, no matter where you are.

🎮 Live · 🐛 Report Bug · 💡 Request Feature

---

✨ Features

🎨 Real-Time Code Editor Collaborate seamlessly with Monaco Editor integration, syntax highlighting, and live code synchronization

🎙️ Voice Chat Integration Crystal-clear voice communication with WebRTC, audio messages, and noise cancellation

🤖 AI Code Assistant Intelligent suggestions, automated reviews, and smart refactoring recommendations

🔥 Core Features

• 🔄 Real-Time Collaboration: Multiple developers can edit code simultaneously with instant synchronization
• 🎯 Multi-Language Support: JavaScript, TypeScript, Python, C++, and more
• 💬 Live Chat: Text and voice messages with message history
• 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• 🌙 Dark/Light Mode: Toggle between beautiful dark and light themes
• ⚡ Code Execution: Run code directly in the browser with instant output
• 🏠 Room Management: Create and join coding rooms with unique IDs
• 👥 User Presence: See who's online and track participant activity
• 🔐 Secure Connections: All communications are encrypted and secure

---

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Modern web browser with WebRTC support

Installation

1. Clone the repository

   git clone https://github.com/muhammadyaqoobmuet/code-flow
   cd codeflow

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env

   Edit .env and add your configuration:

   VITE_REACT_APP_BACKEND_URL=http://localhost:3000

4. Start the development servers

   Frontend (Terminal 1):

   npm run dev

   Backend (Terminal 2):

   npm run server

5. Open your browser

   Navigate to http://localhost:5173 and start coding together! 🎉

---

🏗️ Project Structure

codeflow/
├── 📁 public/                    # Static assets
│   ├── image.png                 # App logo and images
│   └── vite.svg
├── 📁 src/                       # Source code
│   ├── 📁 components/            # Reusable UI components
│   │   ├── 📁 ui/               # Base UI components (buttons, cards, etc.)
│   │   └── background-gradient-animation.jsx
│   ├── 📁 lib/                   # Utility functions
│   │   └── utils.js             # Class name utilities
│   ├── 📁 pages/                 # Application pages
│   │   ├── 📁 CreateRoom/       # Room creation page
│   │   ├── 📁 Home/             # Landing page
│   │   ├── 📁 JoinRoom/         # Room joining page
│   │   └── 📁 Room/             # Main collaboration room
│   │       ├── 📁 components/   # Room-specific components
│   │       │   ├── ChatComponent.jsx
│   │       │   ├── SharedCodeEditor.jsx
│   │       │   ├── CollabPanel.jsx
│   │       │   └── Header.jsx
│   │       └── page.jsx         # Room main component
│   ├── App.jsx                   # Main app component
│   ├── main.jsx                  # App entry point
│   ├── socket.js                 # Socket.io client configuration
│   └── index.css                 # Global styles
├── 📄 server.js                  # Express + Socket.io server
├── 📄 actions.js                 # Socket event constants
├── 📄 servers.js                 # WebRTC configuration
├── 📄 package.json               # Dependencies and scripts
├── 📄 tailwind.config.js         # Tailwind CSS configuration
├── 📄 vite.config.js            # Vite configuration
└── 📄 README.md                  # You are here!

---

🎯 Usage

Creating a Room

1. Click "Create a Room" on the homepage
2. Enter your username
3. A unique room ID will be generated automatically
4. Share the room ID with your collaborators
5. Start coding together!

Joining a Room

1. Click "Join a Room" on the homepage
2. Enter your username and the room ID
3. Join the collaborative session instantly

Voice Communication

• 🎙️ Start Voice Call: Click the phone icon in the chat panel
• 🔇 Mute/Unmute: Toggle microphone during calls
• 📢 Voice Messages: Record and send voice messages
• 🔊 Audio Playback: Play received voice messages

---

🛠️ Technology Stack

Category	Technologies
Frontend
Backend
Code Editor
Real-time
Animations
Forms

---

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

# Backend URL
VITE_REACT_APP_BACKEND_URL=http://localhost:3000

# Optional: Judge0 API for code execution
RAPIDAPI_KEY=your_rapidapi_key_here

Tailwind CSS

The project uses Tailwind CSS v4 with custom configurations:

// tailwind.config.js
export default {
  darkMode: ["class"],
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "#8D84B2",
        secondary: "#7D84B2",
        // ... custom color palette
      },
    },
  },
};

---

📡 API Reference

Socket Events

Event	Description	Payload
JOIN	Join a room	{ roomId, username }
SYNC_CODE	Synchronize code	{ roomId, code }
MESSAGE_SEND	Send chat message	{ roomId, message, username }
VOICE_CALL_OFFER	Start voice call	{ roomId, offer, username }
VOICE_CALL_ANSWER	Answer voice call	{ roomId, answer }

REST Endpoints

Currently, the application uses WebSocket connections for all real-time features. REST API endpoints may be added in future versions.

---

🤝 Contributing

We love contributions! Here's how you can help:

Development Setup

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes
4. Run tests

   npm test

5. Commit your changes

   git commit -m 'Add amazing feature'

6. Push to the branch

   git push origin feature/amazing-feature

7. Open a Pull Request

Contribution Guidelines

• Follow the existing code style
• Write clear commit messages
• Add tests for new features
• Update documentation as needed
• Be respectful and inclusive

---

🐛 Troubleshooting

Common Issues

🔧 Socket connection fails

Problem: Cannot connect to the server

Solution:

1. Ensure the backend server is running on port 3000
2. Check your firewall settings
3. Verify the VITE_REACT_APP_BACKEND_URL environment variable

🎙️ Voice chat not working

Problem: Cannot hear other participants

Solution:

1. Check browser permissions for microphone access
2. Ensure you're using HTTPS in production
3. Verify WebRTC support in your browser

💻 Code not syncing

Problem: Changes not appearing for other users

Solution:

1. Check network connectivity
2. Refresh the page and rejoin the room
3. Ensure you're in the same room ID

---

📈 Roadmap

🎯 Version 2.0 (Coming Soon)

• File System Integration: Upload and manage project files
• Git Integration: Version control with commit history
• Advanced AI Features: Code completion and bug detection
• Screen Sharing: Share your screen with collaborators
• Whiteboard: Visual collaboration tools
• Mobile App: Native iOS and Android apps

🔮 Future Features

• Docker Support: Containerized development environments
• Plugin System: Extensible architecture
• Team Management: User roles and permissions
• Analytics Dashboard: Usage metrics and insights
• Themes Marketplace: Custom UI themes

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👨‍💻 Authors & Contributors

Muhammad Yaqoob 💻

---

🙏 Acknowledgments

• Monaco Editor for the amazing code editor experience
• Socket.io for real-time communication
• Tailwind CSS for the beautiful UI components
• Framer Motion for smooth animations
• Lucide Icons for the beautiful icon set
• WebRTC for peer-to-peer communication

---

💖 Support

If you found this project helpful, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs
• 💡 Suggesting new features
• 🤝 Contributing to the codebase
• 📢 Sharing with your friends and colleagues

---

🚀 Ready to start collaborating? Try CodeFlow now!

Made with ❤️ by the CodeFlow team