Project Case Study
Chatty is a full-stack real-time messaging application designed to explore WebSocket communication, persistent messaging systems, and responsive UI architecture. The application supports private and group conversations, media sharing, typing indicators, and unread message tracking while maintaining real-time updates between connected users.
Real-Time Full-Stack App
React • Express • MongoDB • Socket.io
Messaging UX, live updates, state sync
Product design & full-stack development
User authentication with JWT
Real-time messaging via WebSockets
One-on-one and group chat support
Typing indicators for active conversations
Unread message badge tracking
Image uploads with Cloudinary
Emoji picker and message reactions
Responsive chat UI
Challenge
Real-time chat requires UI updates to appear instantly while still syncing with persisted backend data.
Solution
Socket.IO events update the client immediately while messages are simultaneously stored in MongoDB to ensure conversation history remains consistent after refresh or reconnect.
Challenge
Uploading media during message creation introduces asynchronous processing that can disrupt the chat experience.
Solution
Integrated Multer with Cloudinary so images upload first, then the resulting URL is attached to the message payload and broadcast to connected users.
Challenge
Chat applications require multiple UI states such as active conversations, unread counts, typing indicators, and message history.
Solution
Used Zustand for centralized state management, allowing chat components to subscribe to only the state they need.
