Project Detail

Kasina Chat - Frontend

A browser single-page application (React SPA) that provides user authentication, profile setup, one-to-one direct messaging and multi-user channel chat, file upload/download, message history viewing, and real-time message delivery using ST...

Frontend EngineerDuration: 2 monthsType: platform

Key Achievement Metrics

Estimated real-time throughput (per client)

10 messages/sec

Approx. gzipped bundle size (client)

~180 KB (estimated)

UI components

~30 components

Architecture View

Processing state: architecture signal graph is initializing...

Decision Log

Use zustand for client state

Smaller bundle, minimal boilerplate, direct mutation semantics for simple state slices.

Trade-off: Simpler API but less ecosystem tooling (devtools, middleware) compared to Redux; fewer built-in debugging features.

Use STOMP over SockJS for real-time messaging

STOMP provides topic/queue semantics directly compatible with several backend brokers (Spring STOMP, RabbitMQ plugin), SockJS offers fallbacks for environments without native WebSocket.

Trade-off: Slight added complexity vs. pure WebSocket or socket.io; multiple STOMP libraries are present leading to potential duplication in deps (stompjs vs @stomp/stompjs).

Files uploaded via REST, messages sent via STOMP

HTTP is better for multipart uploads + progress, server can place files into object store/CDN and return a stable URL.

Trade-off: Requires two-step process (upload then notify). Atomicity must be handled on server to avoid broken references.

Architecture Narrative

Challenge

Provides the client-side UI and interaction layer for a real-time chat service, enabling authenticated users to discover contacts, send/receive messages (text and files), and participate in channels with low-latency updates.

Solution

Client-server SPA with dual communication channels: RESTful HTTP for CRUD and long-lived WebSocket (STOMP/SockJS) for real-time pub/sub.

Result

Key measurable signals: Estimated real-time throughput (per client) (10 messages/sec), Approx. gzipped bundle size (client) (~180 KB (estimated)), UI components (~30 components).

Trade-off Matrix

Dimension	Selected Option	Impact	Compromise
State management	zustand slices	minimal boilerplate, smaller bundle, fine-grained updates	limited middleware/devtools vs Redux ecosystem
Real-time transport	STOMP over SockJS	interoperability with STOMP-compatible servers and broker semantics	more dependencies and configuration than plain WebSocket or socket.io

What I'd Do Differently

Add connection resilience: build an exponential-backoff reconnection layer with heartbeat detection and user-visible online/offline state.

Add typed API surface and developer ergonomics: migrate to TypeScript, centralize typed API client, and add standardized error/401 handling middleware.