Synapse is a real-time collaborative code editor that allows developers to code together in perfect sync. Built with the MERN stack and powered by Yjs for conflict-free collaboration, it features a sleek UI, secure code execution via the Piston API, and an VS Code-like editing experience.

Dashboard
Secure Login & Room Management
Collaborative Editor
Real-time Editing with Terminal Output

• Real-Time Collaboration: Multi-user editing with sub-millisecond latency using Yjs & WebSockets.
• Modern UI: Beautiful, responsive interface built with React, Tailwind CSS, and Lucide Icons.
• Code Execution: Secure, sandboxed code execution for JS, Python, Java, and C++ via the Piston API.
• File System: Create, delete, and switch between multiple files within a single room.
• Presence Awareness: See who is online and track their cursors in real-time with color-coded indicators.
• Authentication: Secure user accounts with JWT-based stateless authentication.
• Persistence: Auto-save and manual save functionality to MongoDB.

• Framework: React.js (Vite)
• Styling: Tailwind CSS v4
• Editor: Monaco Editor (@monaco-editor/react)
• Collaboration: Yjs, y-websocket, y-monaco
• State/Routing: React Router DOM, Context API

• Runtime: Node.js & Express.js
• Database: MongoDB (Atlas)
• Real-time: ws (WebSocket) library
• Security: BCrypt (Hashing), JWT, CORS

Follow these steps to run Synapse locally.

• Node.js (v18+)
• MongoDB Atlas Connection String

git clone [https://github.com/atta-ullah01/synapse.git](https://github.com/atta-ullah01/synapse.git)
cd synapse

Navigate to the server directory and install dependencies:

cd server
npm install

Create a .env file in the server directory:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key

Start the server:

npm run dev

Open a new terminal, navigate to the client directory, and install dependencies:

cd ../client
npm install

Create a .env file in the client directory:

VITE_API_URL=http://localhost:5000

Start the frontend:

npm run dev

Visit http://localhost:5173 in your browser.

synapse/
├── client/              # React Frontend
│   ├── src/
│   │   ├── pages/       # Auth, Dashboard, EditorPage
│   │   ├── components/  # Reusable UI components
│   │   └── index.css    # Tailwind Imports & Global Styles
│   └── ...
├── server/              # Node.js Backend
│   ├── models/          # Mongoose Schemas (User, Room)
│   ├── routes/          # API Routes (Auth, Room, Execute)
│   ├── server.js         # Entry point (Express + WebSocket setup)
│   └── ...
└── README.md