Code Sync

A real-time collaborative code editor that enables multiple developers to code together seamlessly. Built with React, TypeScript, Socket.IO, and Express.

Features

• Real-time Collaboration: Multiple users can edit code simultaneously with live updates
• File Management: Create, rename, delete files and directories in real-time
• Live Cursors: See where other users are typing with cursor position tracking
• Integrated Chat: Communicate with collaborators without leaving the editor
• Drawing Board: Collaborative whiteboard for brainstorming and explaining concepts
• Syntax Highlighting: Support for multiple programming languages via CodeMirror
• User Presence: See who's online/offline in your coding session
• File Download: Export your project files as a ZIP archive

Tech Stack

Frontend

• React 18 with TypeScript
• Vite for fast development and building
• CodeMirror 6 for code editing
• Socket.IO Client for real-time communication
• TailwindCSS for styling
• React Router for navigation
• Tldraw for collaborative drawing

Backend

• Node.js with Express
• Socket.IO for WebSocket connections
• TypeScript for type safety

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd fullstack-app

2. Install dependencies for both client and server:

npm install
cd client && npm install
cd ../server && npm install
cd ..

Running the Application

Development Mode

Run both client and server concurrently:

npm run dev

This will start:

• Client on http://localhost:5173 (Vite default)
• Server on http://localhost:3000

Running Separately

Client:

cd client
npm run dev

Server:

cd server
npm run dev

Building for Production

Client:

cd client
npm run build

Server:

cd server
npm run build
npm start

Usage

1. Open the application in your browser
2. Create or join a room with a unique room ID
3. Share the room ID with collaborators
4. Start coding together in real-time!

Project Structure

fullstack-app/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page components
│   │   ├── context/       # React context providers
│   │   ├── hooks/         # Custom React hooks
│   │   ├── types/         # TypeScript type definitions
│   │   └── utils/         # Utility functions
│   └── public/            # Static assets
├── server/                # Express backend
│   ├── src/
│   │   ├── types/         # TypeScript type definitions
│   │   └── server.ts      # Main server file
│   └── public/            # Static files served by Express
└── package.json           # Root package.json for running both

Environment Variables

Create a .env file in the server directory if needed:

PORT=3000