Whispr

Overview

Whispr is a full-stack real-time chat app built with React, Node.js, and Socket.io. You sign up, log in, search for someone by name, and start messaging, and every message shows up instantly, with no page refresh or polling. The layout is simple: a searchable list of your conversations on the left, the live chat on the right. Small touches make it feel real. A green dot shows who is online, and a typing indicator appears when the other person is writing back.

Highlights

• Bidirectional messaging over Socket.io. No polling, and every connected client stays in sync instantly.

• Live presence and typing indicators. Both run over the same socket connection, with an online dot per user and a typing state pushed only to the person you are chatting with.

• Cookie-based JWT authentication. A custom Express middleware protects every private route, and bcrypt hashes passwords before they are stored.

• Three MongoDB schemas. User, Conversation, and Message reference each other so messages load efficiently per conversation.

• Zustand for client state. The active chat and message list stay reactive without prop drilling.

• Live user search in the sidebar. You can start a new conversation without leaving the main view.

• A single deployable Node process. The Express server serves the production React build as a static asset.