DevSync - A Realtime Code Editor

Your solution for real-time project collaboration. Create and join projects, edit code together, and manage your workspace with ease. Enhance your teamwork today.

🔍 Explore Features

• 🌟 Welcome Screen: A friendly welcome screen greets new users upon visiting the website.
• 🏠 Home Page: Options to create a new project or join an existing one created by another user, with sections for displaying created projects and recently joined projects, presented as cards for better UI.
• 📃 Project Cards: Display the project name and creator, options to delete the project or copy the project ID, show the count of online users currently in the project, and display the number of files and folders within the project.
• 🧩 Unique Project ID: Each project is assigned a unique project ID for easy identification and collaboration.
• 🔍 Project Availability Check: Upon loading a project, the system checks if the project is available and displays a "Project Not Found" screen if it's not available.
• ⏳ Loading Screen: A loading screen is displayed while checking the project's availability on the server.
• 🗂️ Explorer Panel: Users can create, rename, and delete folders and files with appropriate icons based on file extensions, and nested folder creation is supported, similar to most code editors.
• 👥 Connected Users List: A panel showing the list of all connected clients, including their online status.
• 🖊️ Collaborative Code Editor: Real-time synchronization of typed text in selected files among all connected users, syntax highlighting for various programming languages, tabs for opening multiple files with options to close tabs by clicking on tab icons, auto-suggestions based on the programming language, and instant synchronization of code changes, files, folders, and chats for all users within the project.
• 🎨 Editor Customization: Options to change the theme of the code editor, adjustable font size and line height for a personalized coding experience, and comprehensive language support for syntax highlighting and auto-suggestions for the most popular programming languages.
• 💬 Real-time Chat System: A chat system for all connected users to communicate in real-time, ensuring synchronization using socket.io.
• 🎭 Illustrative Feedback: SVG illustrations to enhance user experience when certain actions are not available.
• 📣 User Notifications: Notifications for when a new user joins or leaves the project.

🌐 View Live Demo

You can view the live preview of the project here.

🛠️ Tech Used

⚙️ Setup Instructions

1. Fork this repository: Click the Fork button located in the top-right corner of this page to fork the repository.

2. Clone the repository:

   git clone https://github.com/<your-username>/devsync.git

3. Set .env file: Inside the client and server directories rename the .env.example file to .env and set the following environment variables:

   Client:

   NEXT_PUBLIC_SOCKET_URL=<your_server_url>

   Server:

   PORT=3000
   CORS_ORIGIN = http://localhost:3000

4. Install dependencies: Navigate to the client and server directories separately and run:

    yarn

5. Start the frontend and backend servers:
   Client:

   cd client
   yarn run dev

   Server:

   cd server
   yarn run dev

6. Access the application: Open a browser and enter the following URL:

   http://localhost:3000/

🤝 Contributing

Your input can help shape DevSync! Whether you've found a bug, have a feature suggestion, or want to fix a typo, your contribution is invaluable. Check out our contribution guidelines to get started!

💖 Support Us

Enjoying this project? Give it a 🌟 star to help others find it and to motivate continued development.

🪪 License

This project is licensed under the MIT License.