Code Sync - A Realtime Code Editor

Sahil Atahar - Feb 7 - - Dev Community

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.

. .