DEV Community

Sahil Atahar
Sahil Atahar

Posted on • Updated on

Code Sync - A Realtime Code Editor

Home Page Screenshot

A collaborative, real-time code editor where users can seamlessly code together. It provides a platform for multiple users to enter a room, share a unique room ID, and collaborate on code and drawing simultaneously.

🔮 Features of the project:

  • 💻 Real-time collaboration on code editing across multiple files
  • 🚀 Unique room generation with room ID for collaboration
  • 🌈 Syntax highlighting for various file types with auto-language detection
  • 💡 Auto suggestion based on programming language
  • ⏱️ Instant updates and synchronization of code changes across all files
  • 📣 Notifications for users to join and leave events
  • 🎨 Multiple themes for a personalized coding experience
  • 🌍 Comprehensive language support for versatile programming
  • 🔠 Option to change font size and font family
  • 👥 User presence list of users currently in the collaboration session, including online/offline status indicators
  • 📁 Open, edit, save, and delete file functionalities
  • 💾 Option to download files edited within the collaboration session
  • 💬 Group chatting allows users to communicate in real time while working on code.
  • 🎩 Real-time tooltip displaying users currently editing
  • 🚀 Code Execution: Users can execute the code directly within the collaboration environment, providing instant feedback and results.

Project link: https://github.com/sahilatahar/Code-Sync
Live Preview: https://code-sync-live.vercel.app/

💻 Tech Stack

React JS, TypeScript, Tailwind CSS, Node JS, Express JS, Socket IO, Git

Screenshots

Screenshot 1

Screenshot 2

This project is open source, so contributors are welcome.

If you have any suggestions or feedback please let me know.

Please give a ⭐ GitHub star to this project if you like this.

Top comments (0)