A simple, real-time collaborative code editor where multiple users can join the same room and edit code together instantly.
Built with React, Monaco Editor (VS Code's editor), Socket.IO, and Tailwind CSS.
https://github.com/shinaayl/streamcode/assets/...
- Real-time code editing (multiple cursors & instant sync)
- Shared language selection (syntax highlighting updates for everyone)
- Late joiners receive current code & language state
- User presence (see who is in the room)
- Clean, responsive UI with Monaco Editor
| Layer | Technologies |
|---|---|
| Frontend | React, Vite, @monaco-editor/react, Tailwind CSS |
| Backend | Node.js, Express, Socket.IO |
| Real-time | Socket.IO (WebSocket + polling fallback) |
git clone https://github.com/shinaayl/streamcode.git
cd streamcode
# Install Dependencies
# Frontend
cd client
npm install
# Backend (in another terminal or new tab)
cd ../server
npm install
# Run the application
# Terminal 1 – Backend
cd server
npm run dev
# Terminal 2 – Frontend
cd client
npm run dev
Frontend → http://localhost:5173
Backend → http://localhost:5000
Example usage
-In the first tab: Create or join a room (room ID is usually auto-generated or shareable)
-In the second tab: Enter the same room ID
-Start typing — changes appear instantly for everyone
-Change language (JavaScript, Python, etc.) — highlighting updates for all users
How It Works(High-Level)
-Frontend uses Monaco Editor + Socket.IO client
-Backend manages rooms, broadcasts code changes & language updates
-Room state is kept in-memory (code + language)
-New users receive current state on join via sync-code event
Future Ideas / To-Do
-Add code execution (run button)
-Room persistence (Redis or database)
-User authentication / nicknames
-Chat inside the room
-Dark mode toggle
-Better error handling & loading states
## Author
Copyright © shinaayl
GitHub: [@shinayl](https://github.com/shinaayl)
LinkedIn: Ayomide Adeshina (https://www.linkedin.com/in/ayomide-adeshina-80a365292/)
"# SteamCode"