TeleChat is a full-stack, real-time chat application inspired by Telegram. It enables secure, fast, and reliable one-to-one messaging with a modern UI and robust features. Built with React, Node.js, TypeScript, and MongoDB, TeleChat demonstrates scalable architecture and advanced real-time capabilities suitable for production-grade messaging platforms.

• JWT-based authentication (login/signup)
• Private one-to-one conversations
• Real-time messaging with Socket.IO
• Online/offline presence tracking
• Typing indicators
• Unread message counts
• Delivery and read receipts
• Edit and delete messages (for self or everyone)
• Message and user search
• Optimistic UI updates
• Robust error handling
• Socket reconnection management

• Docker and Docker Compose installed
• MongoDB Atlas cluster (or any remote MongoDB URI)

• Copy .env.example to .env in both client/ and server/ and fill in your values:
  • client/.env — set VITE_API_URL (e.g. http://localhost:4000/api for dev, /api for prod)
  • server/.env — set MONGODB_URI, JWT_SECRET, PORT=4000, etc. (see example)
• Never commit real secrets!

docker compose -f docker-compose.yml -f docker-compose.dev.yml up --build

• Frontend: http://localhost:5173
• Backend: http://localhost:4000
• Live reload enabled (volumes)

docker compose -f docker-compose.yml -f docker-compose.prod.yml up --build

• App: http://localhost
• Nginx serves frontend and proxies API/websockets to backend on port 4000

docker compose down

• Backend now runs on port 4000 (update your .env and any API URLs accordingly)
• MongoDB is not containerized: Use MongoDB Atlas and set MONGODB_URI in server/.env.
• Networking: Docker service names are used (not localhost).
• Production: Multi-stage builds, Alpine images, no dev dependencies, secure env handling.
• Nginx: Handles static files, /api proxy, and websockets in production.
• .env.example files are provided for onboarding.

• React (TypeScript)
• Zustand (state management)
• TailwindCSS (utility-first styling)
• shadcn/ui (component library)
• Axios (HTTP client)
• Socket.IO client (real-time communication)

• Node.js (TypeScript)
• Express (REST API)
• MongoDB (database)
• Mongoose (ODM)
• JWT (authentication)
• Socket.IO (real-time layer)

• Socket.IO for bi-directional communication (presence, messaging, receipts)

• MongoDB for storing users, conversations, and messages

• REST API: Handles authentication, user search, conversation management, and message CRUD operations.
• Socket.IO: Manages real-time events (messaging, presence, typing, receipts).

• Users sign up or log in via REST endpoints.
• JWT tokens are issued and stored client-side.
• Protected routes and Socket.IO connections require valid JWT.

• Socket.IO tracks user connections/disconnections.
• Online/offline status is broadcast to relevant contacts.

1. Send: Client emits message via Socket.IO.
2. Delivered: Server acknowledges and broadcasts delivery.
3. Read: Client marks message as read; server updates status and notifies sender.

• Secure signup and login with JWT
• Token-based session management

• One-to-one private chats
• User search to start new conversations

• Real-time send/receive
• Delivery and read receipts
• Unread message counts
• Optimistic UI updates

• Presence tracking (online/offline)
• Typing indicators
• Socket reconnection handling

• Edit messages (right-click/long-press)
• Delete for me / delete for everyone

• Socket.IO tracks and broadcasts user status

• Server maintains unread counts per conversation
• UI updates in real-time as messages are read

telechat/
├── client/                # React frontend
│   ├── src/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── pages/
│   │   ├── store/         # Zustand state
│   │   ├── utils/
│   │   └── App.tsx
│   ├── public/
│   └── package.json
├── server/                # Node.js backend
│   ├── src/
│   │   ├── controllers/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── middleware/
│   │   ├── socket/
│   │   └── app.ts
│   ├── .env.example
│   └── package.json

Example .env configuration for backend:

# filepath: server/.env.example
MONGO_URI=mongodb://localhost:27017/telechat
JWT_SECRET=your_jwt_secret
PORT=4000
SOCKET_IO_CORS_ORIGIN=http://localhost:3000

git clone https://github.com/yourusername/telechat.git
cd telechat

cd server
npm install

cd ../client
npm install

• Ensure MongoDB is running locally or update MONGO_URI in .env to your remote instance.

cd server
npm run dev

cd client
npm run dev

cd server
npm run build

cd client
npm run build

• POST /api/auth/signup — Register new user
• POST /api/auth/login — Authenticate user

• GET /api/conversations — List user conversations
• POST /api/conversations — Start new conversation
• GET /api/conversations/:id — Get conversation details

• GET /api/messages/:conversationId — Fetch messages
• POST /api/messages — Send message
• PUT /api/messages/:id — Edit message
• DELETE /api/messages/:id — Delete message

• connect / disconnect
• message:send
• message:delivered
• message:read
• presence:update
• typing:start / typing:stop
• message:edit
• message:delete

• Group chats
• File sharing (images, documents)
• Voice messages
• Message reactions
• End-to-end encryption

This project is licensed under the MIT License. See LICENSE for details.

Fuad
LinkedIn

For questions or contributions, please open an issue or submit a pull request.