Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/princegupta101/live-code-share
Live Code Share provides real-time collaborative coding, with unique room creation, syntax highlighting, and auto-suggestions. Users can edit, save, download files, and chat in groups.
https://github.com/princegupta101/live-code-share
codemirror expressjs react-editor reactjs socket-io uuid-generator
Last synced: 2 months ago
JSON representation
Live Code Share provides real-time collaborative coding, with unique room creation, syntax highlighting, and auto-suggestions. Users can edit, save, download files, and chat in groups.
- Host: GitHub
- URL: https://github.com/princegupta101/live-code-share
- Owner: Princegupta101
- Created: 2024-03-21T07:20:39.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-07-30T18:37:27.000Z (6 months ago)
- Last Synced: 2024-07-30T22:58:45.972Z (6 months ago)
- Topics: codemirror, expressjs, react-editor, reactjs, socket-io, uuid-generator
- Language: JavaScript
- Homepage: https://live-code-share.vercel.app/
- Size: 521 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Live Code Share
Live Code Share is 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 simultaneously.
## VIDEO
https://youtu.be/MZYMNScnGBo
## Table of Contents
- [Live](#Live-Preview)
- [Features](#features)
- [Usage](#Usage)
- [Tech Stack](#TechStack)
- [Installation](#installation)
- [Low-Level-Diagram](#Low-Level-Diagram)
- [Contributing](#contributing)
- [Further-Support](#further-support)
## Live-Preview
You can view the live preview of the project [here](https://live-code-share.vercel.app/).
## Features
- 💻 Real-time collaborative coding across multiple files.
- 🚀 Unique room creation with collaboration room ID.
- 🌈 Syntax highlighting for various file types with automatic language detection.
- 💡 Smart code suggestions based on programming language.
- ⏱️ Instant updates and synchronization of code across all files.
- 📣 User join and leave notifications.
- 🎨 Multiple personalized coding themes.
- 🌍 Extensive language support for versatile programming.
- 🔠 Flexible font size and style options.
- 👥 User presence list with online/offline status indicators.
- 💬 Real-time group chat for seamless communication.
- 🚀 Live code preview feature.
## Usage
1. Navigate to the deployed application or run it locally.
2. Create or join a room using a unique room ID.
3. Collaborate with others in real-time by editing code together.
4. Utilize features such as syntax highlighting, code suggestions, and group chat for enhanced collaboration.
## TechStack
- JavaScript
- React
- React Router
- Tailwind CSS
- Node.js
- Express.js
- Socket.io
- Git
- GitHub
- Vercel
## Installation
Fork and clone this repository.
```bash
[email protected]:Princegupta101/Live-Code-Share.git
```
### Setup instruction for Frontend
1. Move into the directory
```bash
cd Client
```
2. install dependenices
```bash
npm install
```
3. run the server
```bash
npm run dev
```
### Setup instruction for Backend
1. Move into the directory
```bash
cd Server
```
2. install dependenices
```bash
npm install
```
3. run the server
```bash
npm run dev
```
## Low Level Diagram
## Contributing
We welcome contributions to Live Code Share Feel free to create pull requests with your enhancements or bug fixes. Please ensure your contributions adhere to the coding style and conventions used in the project.
## Further-Support
If you encounter any issues or have questions, feel free to raise them as GitHub issues, and we'll be happy to assist you.