Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gunjankadu/code-together

Code Together is an interactive, real-time code editor that enables users to collaboratively code. It offers a space for multiple individuals to join a room, exchange a distinct room ID, and work together on code in real-time.
https://github.com/gunjankadu/code-together

Last synced: 5 days ago
JSON representation

Host: GitHub
URL: https://github.com/gunjankadu/code-together
Owner: GunjanKadu
Created: 2024-03-11T11:03:13.000Z (8 months ago)
Default Branch: main
Last Pushed: 2024-04-15T19:06:38.000Z (7 months ago)
Last Synced: 2024-04-15T20:26:40.560Z (7 months ago)
Language: JavaScript
Homepage: https://code-together-client-rho.vercel.app
Size: 2.06 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Code Together - A Realtime Code Editor

![screenshot](./screenshots/preview.png)

![screenshot](./screenshots/preview1.png)

## 🔮 Features

- 💻 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 user join and leave events
- 🎨 Multiple themes for 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.

## 🚀 Live Preview

You can view the live preview of the project [here](https://code-together-client-rho.vercel.app/).

## 💻 Tech Stack

![JavaScript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E)
![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
![NodeJS](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)
![ExpressJS](https://img.shields.io/badge/Express.js-404D59?style=for-the-badge)
![Socket io](https://img.shields.io/badge/Socket.io-ffffff?style=for-the-badge)
![Git](https://img.shields.io/badge/GIT-E44C30?style=for-the-badge&logo=git&logoColor=white)
![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)
![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)

## 📂 Folder Structure

```
client/
├── public/
│ ├── favicon/
│ │ └── ...
│ └── style.css # Tailwind output
├── src/
│ ├── assets/
│ │ └── ...
│ ├── components/
│ │ ├── chats/
│ │ │ ├── ChatInput.jsx
│ │ │ └── ChatList.jsx
│ │ ├── common/
│ │ │ ├── Clients.jsx
│ │ │ ├── Footer.jsx
│ │ │ └── Select.jsx
│ │ ├── editor/
│ │ │ ├── Editor.jsx
│ │ │ └── EditorComponent.jsx
│ │ ├── files/
│ │ │ ├── FileEditor.jsx
│ │ │ └── FileSystem.jsx
│ │ ├── forms/
│ │ │ └── FormComponent.jsx
│ │ ├── loading/
│ │ │ └── Loading.jsx
│ │ ├── sidebar/
│ │ │ └── Sidebar.jsx
│ │ ├── tabs/
│ │ │ ├── ChatsTab.jsx
│ │ │ ├── ClientsTab.jsx
│ │ │ ├── FileTab.jsx
│ │ │ ├── SettingsTab.jsx
│ │ │ └── TabButton.jsx
│ │ ├── toast/
│ │ │ └── Toast.jsx
│ │ ├── GitHubCorner.jsx
│ │ └── SplitterComponent.jsx
│ ├── context/
│ │ ├── AppContext.jsx
│ │ ├── AppProvider.jsx
│ │ ├── ChatContext.jsx
│ │ ├── FileContext.jsx
│ │ └── TabContext.jsx
│ ├── hooks/
│ │ ├── useChatRoom.jsx
│ │ ├── useFileSystem.jsx
│ │ ├── useLocalStorage.jsx
│ │ ├── usePageEvents.jsx
│ │ ├── useClientActivity.jsx
│ │ └── useWindowDimensions.jsx
│ ├── layouts/
│ │ └── EditorLayout.jsx
│ ├── pages/
│ │ ├── EditorPage.jsx
│ │ └── HomePage.jsx
│ ├── resources/
│ │ ├── Font.js
│ │ ├── Languages.js
│ │ └── Themes.js
│ ├── socket/
│ │ ├── useSocket.jsx
│ │ └── socket.js
│ ├── utils/
│ │ ├── actions.js
│ │ ├── editorPlaceholder.js
│ │ ├── formateDate.js
│ │ ├── initialFile.js
│ │ ├── socketStatus.js
│ │ └── tabs.js
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .env
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── vercel.json
└── vite.config.js

server/
├── utils/
│ └── actions.js
├── .env
├── .gitignore
├── package-lock.json
├── package.json
└── server.js

screenshots/
CONTRIBUTING.md
LICENSE
README.md
```

## ⚙️ Installation

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:**
```bash
git clone https://github.com//Code-Together.git
```
3. **Set .env file:**
Inside the client and server directory, create or edit the .env file and add the following line:
Frontend:

```bash
VITE_BACKEND_URL=
```

Backend:

```bash
PORT=3000
```

4. **Install dependencies:**
Navigate to the frontend and backend directories separately and run:
```bash
npm install
```
5. **Start the frontend and backend servers:**
Frontend:
```bash
cd client
npm run dev
```
Backend:
```bash
cd server
npm run dev
```
6. **Access the application:**
Open a browser and enter the following URL:
```bash
http://localhost:5173/
```