Whispr

Overview

Whispr is a full-stack real-time messaging application built with React, Node.js, and Socket.io. Users can register, log in, search for other users, and exchange messages instantly. The app features a clean two-panel layout — a searchable conversation sidebar and a live message container — with new messages pushed via WebSocket so there is no polling.

Highlights

• Built bidirectional real-time messaging with Socket.io, eliminating the need for polling and keeping all connected clients in sync instantly.

• Implemented cookie-based JWT authentication with a custom Express middleware protecting every private route.

• Designed three MongoDB schemas — User, Conversation, and Message — with references enabling efficient per-conversation message retrieval.

• Managed client-side conversation state with Zustand, keeping the active chat and message list reactive without prop drilling.

• Added live user-search in the sidebar so you can start a new conversation without leaving the main view.

• Served the production React build as a static asset from the Express server, shipping a single deployable Node process.