A real-time collaborative code editor with group workspaces, GitHub integration, and built-in team chat.
- Collaborative code editor — multi-user real-time editing powered by WebSockets, with syntax highlighting for JavaScript, Python, Java, and HTML (CodeMirror 6)
- Change request workflow — members submit code changes, the group owner reviews and approves or rejects them; history is preserved
- GitHub integration — link any GitHub repo to a group; commits and file modifications sync back to GitHub via the Octokit REST API
- SSH key management — generate and register an SSH key from within the app to authorise pushes to GitHub
- Create a group — attach a GitHub repo, name the group, and invite members by phone number
- Group chat — real-time messaging with emoji reactions, message status (sending / delivered / read), background themes, and browser push notifications
- Member roles — ADMIN (owner) and MEMBER; only the owner can add members and approve changes
- Guest access — time-limited guest sessions for read-only collaboration without an account
- One-to-one chat — find a contact by phone number; messages delivered in real time via WebSocket with offline persistence
- Read receipts — single tick (sending), double tick (delivered), blue double tick (read)
- New message divider — visual separator for messages received while offline
- Browser push notifications — get notified of new messages even when the tab is in the background
- Friends — search users by phone number, add them as friends, and access their chat from the sidebar in one click
- Friend search — checks whether the current user has a phone number set; if not, prompts to add one before searching
- Profile page — view and edit display name, phone number; email is read-only
- Connected accounts — see which providers (GitHub, Google) are linked; connect a missing one with a single click
- Notification toggle — enable or disable browser push notifications; requests permission on first enable; shows a warning when blocked by the browser
- Dark mode — full light/dark theme toggle, persisted across sessions
- Onboarding tours — per-page guided tours (Shepherd.js) shown once on first visit; storageKey prevents repeat display
- Searchable repo dropdown — the GitHub group-creation page replaces the native
<select>with a filterable dropdown with live search and clear button - Chat background themes — six colour themes per chat (Default, Midnight, Sky, Sage, Rose, Sand), stored per conversation in
localStorage - Responsive layout — sidebar collapses on mobile; group chats redirect to a dedicated page on small screens
| Layer | Technology |
|---|---|
| Framework | Next.js 14 (App Router) |
| Language | TypeScript 5 |
| Monorepo | Turborepo 2 |
| Database | PostgreSQL + Prisma 5 |
| Auth | NextAuth v4 (GitHub OAuth, Google OAuth) |
| Real-time | WebSocket server (apps/web-socket) |
| Styling | Tailwind CSS 3 |
| Editor | CodeMirror 6 via @uiw/react-codemirror |
| GitHub API | Octokit REST |
| Animations | Framer Motion |
| Onboarding | Shepherd.js |
| Notifications | React Hot Toast + Web Notifications API |
co-lab/
├── apps/
│ ├── web/ # Next.js frontend + API routes
│ │ ├── app/
│ │ │ ├── api/ # REST API routes
│ │ │ ├── components/ # Shared UI components
│ │ │ ├── github/ # GitHub group creation page
│ │ │ ├── group/ # Group chat + code editor
│ │ │ ├── chat/ # Direct message chat
│ │ │ ├── chat-room/ # Chat sidebar (groups + friends)
│ │ │ ├── profile/ # User profile + settings
│ │ │ ├── notifications/ # Notification centre
│ │ │ └── ... # Auth pages, member management, etc.
│ │ └── prisma/ # Database schema + migrations
│ └── web-socket/ # Standalone WebSocket server
└── packages/
├── ui/ # Shared React component library
├── eslint-config/
└── typescript-config/
- Node.js 18+
- PostgreSQL database
- GitHub OAuth app (create one)
- Google OAuth credentials (create one)
Create apps/web/.env:
DATABASE_URL=postgresql://user:password@localhost:5432/colab
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-here
GITHUB_ID=your-github-oauth-app-id
GITHUB_SECRET=your-github-oauth-app-secret
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
NEXT_PUBLIC_WEB_SOCKET_URL=ws://localhost:8080
ALLOWED_ORIGINS=http://localhost:3000# Install dependencies
npm install
# Push the database schema
cd apps/web && npx prisma db push
# Start all apps in development
npm run devThe web app runs on http://localhost:3000 and the WebSocket server on ws://localhost:8080.
npm run build
npm start| Method | Route | Description |
|---|---|---|
| GET/POST | /api/auth/[...nextauth] |
NextAuth session handling |
| GET/POST | /api/profile |
Get and update user profile |
| GET/POST | /api/friends |
List friends / add a friend by phone |
| POST | /api/friend-search |
Find a user by phone number |
| POST | /api/set-phone |
Save the current user's phone number |
| GET | /api/get-user-number |
Look up a user by email, id, or phone |
| POST | /api/create-group-data |
Create a group linked to a GitHub repo |
| GET | /api/my-groups |
List groups the user owns or belongs to |
| GET | /api/check-group-member |
Check if a user is a group member |
| POST | /api/add-group-member |
Add a member to a group |
| GET/POST | /api/save-group-message |
Fetch or save group chat messages |
| GET/POST | /api/direct-message |
Fetch or send a direct message |
| GET | /api/direct-message/unread |
Count unread direct messages |
| GET/POST | /api/notifications |
Fetch or dismiss notifications |
| POST | /api/send-invite |
Send a group invite by phone |
| GET/POST | /api/files |
List or save code editor files |
| POST | /api/save-coding-files |
Persist code changes to a file |
| POST | /api/commit-changes |
Commit approved changes to GitHub |
| POST | /api/change-request |
Submit a change request |
| POST | /api/rejected-cr |
Record a rejected change request |
| GET | /api/modified-files |
List files changed in a session |
| GET | /api/github |
Proxy GitHub repo file tree |
User — profile, phone, OAuth accounts
Account — linked OAuth providers (GitHub, Google)
Friendship — accepted friend relationships
Group — collaborative workspace linked to a GitHub repo
GroupMember — user ↔ group membership with role (ADMIN / MEMBER)
GroupMessage — group chat messages
Chat — direct message conversation
Messages — individual direct messages with read status
Invite — pending group invitations (by phone)
File — code editor file content per group
ModifiedFiles — tracked changes within a session
Change — line-level diff entries
Notifications — group join / invite notifications
RejectedCr — rejected change request records
ApprovedCr — approved change request records
GuestUser — anonymous time-limited session
GuestGroup — guest ↔ group access mapping
Otp — one-time passwords for phone auth
Testimonial — user feedback shown on landing page
The project is deployed on Vercel. Set all environment variables listed above in the Vercel project settings. The WebSocket server (apps/web-socket) should be deployed separately (e.g. a Railway or Fly.io instance) and its public URL set as NEXT_PUBLIC_WEB_SOCKET_URL.