Realtime Chat App
- TYPE
- Real-time chat platform
- STACK
- 15 COMPONENTS
- STATUS
- SOURCE AVAILABLE
- FEATURED
- —
- LINKS
- SOURCE ↗
01 / OVERVIEW
A WhatsApp-style chat application with live messaging, group chats, typing indicators, and read receipts, built on a Flask/Socket.IO backend and a React frontend.
A complete real-time chat application built with a React frontend, a Flask backend, MySQL for persistence, and Socket.IO for bidirectional real-time communication. The system supports both one-on-one direct messaging and group chats, with a Flask app organized into Blueprints (auth, user, chat, group) backed by a normalized MySQL schema (users, messages, groups_table, group_members, message_read_status) with triggers for auto-updating group timestamps, marking message delivery, and tracking user activity. The Socket.IO layer manages live presence (online/offline), typing indicators with auto-expiring timers, and a 'blue tick' read-receipt system that broadcasts read status across multiple delivery channels (personal room, chat room, and direct sockets) to guarantee reliable UI updates. The React frontend uses Context API for auth and theming (including dark mode), React Router for protected/public routes, and a custom socket service layer with reconnection handling and cleanup-safe logout flow that explicitly notifies the server via a dedicated socket event before disconnecting.
02/ STACK & ARCHITECTURE
FRONTEND
- React
- React Router
- Socket.IO Client
- Tailwind CSS
- Axios
- Lucide React
- Context API
BACKEND
- Python
- Flask
- Flask-SocketIO
- Flask-CORS
- MySQL
- mysql-connector-python
- bcrypt
- python-dotenv
03 / WHAT WAS ACTUALLY HARD
- 01
Real-time messaging with live delivery and read receipts
Messages are persisted via MySQL and instantly broadcast through Socket.IO rooms. A multi-channel 'blue tick' system emits read-status updates to the sender's personal room, the shared chat room, and each of the sender's active socket connections simultaneously, ensuring read receipts land reliably even across multiple open tabs/devices.
- 02
Group chat with roles and membership management
Full group creation, admin/member roles, member add/remove with permission checks (only admins can add members, only the creator can delete a group), and a group activity feed combining messages and join events via a UNION query.
- 03
Live presence, typing indicators, and heartbeat
Socket.IO handlers track active sessions per user (supporting multiple simultaneous connections), broadcast online/offline status app-wide on connect/disconnect/logout, and manage per-room typing indicators with auto-expiring 3-second server-side timers to prevent stuck 'typing...' states.
- 04
Clean logout flow with explicit socket handshake
Logout is a coordinated sequence: emit a 'user_logout' socket event (with a short delay for server processing), call the REST logout endpoint to flip the DB status offline, then disconnect and fully tear down the socket (removing all listeners) to avoid stale event handlers or memory leaks on next login.
- 05
Dark mode, protected routing, and profile management
Theme preference persisted to localStorage and synced with system preference on first load; React Router route guards (ProtectedRoute/PublicRoute) redirect based on auth state; profile page supports inline editing of name/email/phone and base64 image upload for avatars, decoded and saved server-side.