Real-time chat built for developers. Share code, get AI explanations, collaborate faster.
🔥 View Live App | 📚 Read Deployment Guide
- 💬 Real-time messaging via WebSocket (Socket.io)
- 🖥️ Code snippets with Monaco Editor (VS Code engine), syntax highlighting, and line numbers
- ✨ AI code explanation — click "Explain this" on any code block for an inline GPT-4o-powered explanation
- 🏢 Workspaces & Channels — create teams, organize conversations by topic
- 🟢 Presence indicators — see who's online in real-time
- ⌨️ Typing indicators — "Shihab is typing..."
- 🔗 Invite codes — share a code to invite teammates
- 🌙 Dark-mode first — built for developers who live in the terminal
| Layer | Technology |
|---|---|
| Frontend | Next.js 15 + React 19 |
| Styling | Tailwind CSS 4 |
| Code Editor | Monaco Editor |
| Real-Time | Socket.io |
| Backend | Node.js + Express |
| Database | MongoDB + Mongoose |
| Auth | JWT (email/password) |
| AI | OpenAI GPT-4o |
- Node.js 18+
- MongoDB (local or Atlas free tier)
# Install server dependencies
cd server && npm install
# Install client dependencies
cd ../client && npm install# Copy the example env file
cp server/.env.example server/.env
# Edit server/.env with your values:
# - MONGODB_URI (required)
# - JWT_SECRET (change for production)
# - OPENAI_API_KEY (optional, for AI explanations)# Terminal 1 — Start the backend
cd server && npm run dev
# Terminal 2 — Start the frontend
cd client && npm run devOpen http://localhost:3000 → Register → Start chatting!
DevChat/
├── client/ # Next.js frontend
│ └── src/
│ ├── app/ # Pages (App Router)
│ ├── components/ # UI components
│ └── lib/ # API client, Socket.io
├── server/ # Express backend
│ └── src/
│ ├── models/ # Mongoose schemas
│ ├── routes/ # REST API
│ ├── socket/ # Real-time handlers
│ └── middleware/ # JWT auth
└── README.md
MIT