HiveChat

A real-time messaging application with instant delivery and presence tracking

RoleFull-Stack Developer
TypeReal-Time Application
StackReact / Firebase / Zustand
StatusActive
01Overview

HiveChat started as an exploration into real-time application architecture. The goal was to build a messaging experience that feels instantaneous — messages appearing the moment they're sent, typing indicators that respond within milliseconds, and presence detection that accurately reflects who's online.

Firebase was chosen as the backend for its real-time database listeners and built-in authentication. Rather than building a custom WebSocket server, Firestore's snapshot listeners provide the same real-time capability with significantly less infrastructure overhead.

Zustand manages the client state, keeping the architecture flat and predictable. Unlike Redux, Zustand's minimal API surface means less boilerplate and faster iteration — important for a project where state shape evolved rapidly during development.

02Key Features
Instant Messaging
Firestore snapshot listeners deliver messages in real-time with optimistic UI updates for zero-latency perceived performance.
Authentication
Firebase Auth supports Google sign-in and email/password authentication with secure session management.
Typing Indicators
Debounced typing state updates broadcast to conversation participants with automatic timeout clearing.
Online Presence
Real-time presence system using Firestore and onDisconnect handlers to track user online status accurately.
Conversation Threads
Support for one-on-one and group conversations with unread message counters and last-message previews.
Responsive Layout
Adaptive sidebar and chat panel layout that works across desktop, tablet, and mobile viewports.
03Technical Architecture

The app follows a clean separation between Firebase services and UI state. A services layer wraps all Firestore and Auth operations, exposing async functions that the Zustand stores consume. This makes it straightforward to swap Firebase for another backend if needed.

Zustand stores are organized by domain: an auth store for user session state, a chat store for conversations and messages, and a presence store for online/offline tracking. Each store subscribes to the relevant Firestore listeners on mount and cleans up on unmount.

Messages use optimistic updates — the UI immediately renders the sent message before the server confirms the write. If the write fails, the message is rolled back with an error indicator. This pattern eliminates perceived latency entirely for the sender.

04Tech Stack
ReactUI framework
TypeScriptType safety
ViteBuild tool
FirebaseBackend & Auth
FirestoreReal-time database
ZustandState management
Tailwind CSSUtility styling
ESLintCode quality