LiveStack is a real-time collaborative coding platform where developers, students, and educators can code together inside shared virtual rooms — without any setup friction.
Think of it as Google Docs for code, with built-in video calls, live chat, and a VS Code-grade editor, all running in the browser.
You can:
- Create or join a room and start coding together instantly
- See everyone's edits and cursors live as they happen
- Talk and discuss via peer-to-peer audio and video
- Chat, share code snippets, and take notes inside the same room
- Review the session — code, notes, and members — after it ends
It is built with the MERN stack (MongoDB, Express, React, Node.js) and uses Socket.IO for real-time sync and WebRTC for media streaming. This repo is the frontend, deployed on Netlify, connecting to the backend REST API and WebSocket server.
- Screenshots
- Features
- Tech Stack
- Project Structure
- Getting Started
- Pages & Routes
- State Management
- Real-Time Events
- WebRTC Architecture
- Deployment
- Contributing
- License
Sign up and log in using Email/Password or Google OAuth to get started instantly.
Animated landing page with Framer Motion, call-to-action buttons, and feature highlights.
Create a new room or join an existing one via a shared link or Room ID.
Inside a room — code editor, live chat, video/audio panel, and member list all in one place.
Powered by Monaco (VS Code engine) with live cursor sync. Only admins can change the language.
Dedicated real-time chat panel for every room with live messaging among all members.
Peer-to-peer video and audio via WebRTC with individual mute/camera controls.
Share the room via WhatsApp, Gmail, Telegram, or by copying the Room ID or Link.
Manage your profile, browse past rooms, and filter/search with pagination.
Copy code, update shared code (admin only), view members, and write personal notes.
- Live Code Editor — Monaco Editor with real-time code sync and collaborative cursor tracking
- Audio & Video Calls — Peer-to-peer WebRTC streaming, no third-party media servers needed
- Live Chat — Real-time room chat with typing indicators
- Google OAuth + Email Auth — Flexible login via Google account or email/password
- Room Management — Public/private rooms, language selection, descriptions, and themes
- Room Sharing — Share via link, Room ID, WhatsApp, Gmail, or Telegram
- Personal Notes — Draggable notepad inside every room, saved per user per room
- User Dashboard — View, search, filter, and paginate all your joined and created rooms
- Room Overview — Post-session summary with final code, notes, and participant list
- Live Presence — Real-time indicators for who is online, typing, or has media active
- Admin Controls — Admins can change the editor language and manage room settings
- Responsive Layout — Adaptive split-pane layouts for both desktop and mobile
| Technology | Version | Role |
|---|---|---|
| React | 19 | UI framework |
| Vite | 6 | Build tool and dev server |
| Redux Toolkit | 2 | Global state management |
| React Router DOM | 7 | Client-side routing |
| Tailwind CSS | 4 | Styling |
| Monaco Editor | 4.7 | In-browser code editor (VS Code engine) |
| Socket.IO Client | 4.8 | Real-time WebSocket communication |
| WebRTC (native) | — | Peer-to-peer audio/video streaming |
| Framer Motion | 12 | Animations and transitions |
| Axios | 1.9 | HTTP client for API calls |
| React Hot Toast | 2.5 | Toast notifications |
| React Resizable Panels | 3 | Draggable split-pane editor layout |
| React RND | 10.5 | Draggable and resizable notes window |
| React Type Animation | 3.2 | Typewriter effect in hero section |
| @react-oauth/google | 0.12 | Google OAuth sign-in button |
client/
├── public/
│ ├── images/
│ │ └── how-it-works/ # Screenshots (used in this README)
│ │ ├── signup-login.webp
│ │ ├── homepage.webp
│ │ ├── create-room.webp
│ │ ├── live-collaboration.webp
│ │ ├── monaco-editor.webp
│ │ ├── chat.webp
│ │ ├── audio-video.webp
│ │ ├── share-room.webp
│ │ ├── dashboard.webp
│ │ └── utilities-notes.webp
│ ├── videos/
│ │ └── hacker_room_video.mp4
│ └── livestack.png
│
└── src/
├── api/
│ ├── axios/
│ │ └── axiosInstance.js # Axios base config and interceptors
│ └── apis.js # All API endpoint functions
│
├── components/
│ ├── Dashboard/ # ProfileCard, Rooms, RoomCard, SearchFilterBar
│ ├── Home/ # Hero, Explore sections
│ ├── Layout/ # ResponsiveEditorLayout, DesktopLayout, MobileLayout
│ ├── Room/ # CodeEditor, VideoCall, ChatBox, MediaControls,
│ │ # MembersList, NotesWindow, ShareModal, InputBar,
│ │ # MessageBubble, UserTyping, CodeHeader
│ ├── RoomOverview/ # RoomHeader, CodeSection, NotesSection, RoomMembers
│ ├── CreateRoomModal.jsx
│ ├── Navbar.jsx
│ ├── Footer.jsx
│ ├── Spinner.jsx
│ └── UserProtected.jsx # Auth guard for protected routes
│
├── data/
│ └── howItWorksFeatures.js # Step-by-step feature content for HowItWorks page
│
├── pages/
│ ├── Home.jsx
│ ├── Login.jsx
│ ├── Signup.jsx
│ ├── Room.jsx
│ ├── Dashboard.jsx
│ ├── RoomOverview.jsx
│ ├── HowItWorks.jsx
│ └── NotFound.jsx
│
├── redux/
│ ├── slices/ # auth, room, code, chat, socket, videoCall
│ ├── thunks/ # auth, room, socket async thunks
│ └── store.js
│
├── services/
│ ├── SocketClient.js # Socket.IO singleton
│ └── PeerConnectionManager.js # WebRTC peer connection abstraction
│
├── App.jsx # Route definitions
├── main.jsx # React DOM entry point
└── index.css # Global styles
- Node.js
>= 18.x - npm
>= 9.x - A running LiveStack Backend instance
# Clone the repository
git clone https://github.com/Sammaiah-Guguloth/LiveStack-Frontend.git
cd LiveStack-Frontend
# Install dependencies
npm installCreate a .env file in the project root:
# Base URL of the backend REST API
VITE_API_BASE_URL=http://localhost:5000/api/v1
# Backend server URL for Socket.IO connection
VITE_SERVER_URL=http://localhost:5000
# Google OAuth Client ID (from Google Cloud Console)
VITE_GOOGLE_CLIENT_ID=your_google_oauth_client_idAll variables must be prefixed with
VITE_to be accessible inside the Vite build.
# Start the development server
npm run dev
# → http://localhost:5173
# Build for production
npm run build
# Preview the production build locally
npm run preview
# Lint the codebase
npm run lint| Route | Page | Auth Required |
|---|---|---|
/ |
Home — landing page with hero and feature sections | No |
/signup |
Signup — email/password registration | No |
/login |
Login — email or Google OAuth | No |
/dashboard |
Dashboard — profile, rooms list, search and filter | Yes |
/room/:roomId |
Room — full collaborative coding environment | Yes |
/dashboard/room-info/:roomId |
Room Overview — post-session code and notes summary | No |
/howItWorks |
How It Works — animated step-by-step walkthrough | No |
Protected routes are wrapped in UserProtected.jsx, which redirects unauthenticated users to /login.
Redux Toolkit manages all global state, split into focused slices:
| Slice | What it holds |
|---|---|
auth |
Logged-in user data, loading and error states |
room |
Current room info, members list, room settings |
code |
Shared code content, selected programming language |
chat |
Chat messages for the current room |
socket |
Socket.IO connection instance and connection status |
videoCall |
Local and remote media streams, mute and camera states |
Async API calls are handled via createAsyncThunk in src/redux/thunks/.
LiveStack uses Socket.IO for all real-time communication between clients and the server.
| Event | Description |
|---|---|
user-joined |
Broadcasts when a new user enters the room; triggers WebRTC offer flow |
user-left |
Broadcasts when a user exits; cleans up remote streams and UI |
code-change |
Syncs live code edits across all users in the room |
cursor-change |
Broadcasts real-time cursor positions for collaborative cursors |
language-change |
Syncs the selected programming language (admin controlled) |
message |
Sends and receives real-time chat messages |
user-typing |
Notifies others that someone is currently typing in the editor |
receive-offer |
WebRTC offer sent to initiate a peer connection |
receive-answer |
WebRTC answer to complete the connection handshake |
ice-candidate |
Exchanges ICE candidates for NAT traversal |
media-updated |
Syncs mic and camera state changes across all peers |
LiveStack uses a mesh topology for audio and video — each participant creates a direct RTCPeerConnection with every other participant in the room.
Connection flow when a new user joins:
New user enters room
│
├─ getUserMedia() → capture local audio/video stream
├─ createOffer() → sent to each existing peer via Socket.IO
│
Existing peers respond
├─ createAnswer() → sent back to the new user
└─ exchange ICE candidates → NAT traversal, best path selected
│
└─ ontrack fires → remote stream rendered in <VideoCall />
All WebRTC logic is encapsulated in src/services/PeerConnectionManager.js, handling RTCPeerConnection, addTrack, createOffer, createAnswer, setLocalDescription, setRemoteDescription, onicecandidate, and ontrack.
Note: Mesh connections grow as n(n−1)/2 with participant count. This is ideal for small groups. A migration to SFU architecture is planned for scaling to larger rooms.
The frontend is deployed on Netlify with automatic deployments on every push to main.
Live URL: https://livestack.netlify.app
To deploy your own fork:
- Push your fork to GitHub
- Connect the repo to Netlify
- Set the following build settings:
- Build command:
npm run build - Publish directory:
dist
- Build command:
- Add the environment variables under Site Settings → Environment Variables
- Deploy
The public/_redirects file is already included to handle client-side routing:
/* /index.html 200
Pull requests are welcome. For major changes, open an issue first to discuss what you'd like to change.
# Fork this repository on GitHub
# Create a feature branch
git checkout -b feature/your-feature-name
# Commit your changes
git commit -m "feat: describe your change"
# Push and open a Pull Request
git push origin feature/your-feature-nameCommit convention:
| Prefix | Use for |
|---|---|
feat: |
New feature |
fix: |
Bug fix |
docs: |
Documentation changes |
style: |
Formatting, no logic change |
refactor: |
Code restructure, no behavior change |
chore: |
Build scripts or dependency updates |
This project is licensed under the MIT License.